diff --git a/frontend/src/components/WelcomeJumbotron.vue b/frontend/src/components/WelcomeJumbotron.vue index d3d9151f280e4672958841fbc519fb2a9f6cea97..4c140e5cde67c064f47142c9544b8453178db8a0 100644 --- a/frontend/src/components/WelcomeJumbotron.vue +++ b/frontend/src/components/WelcomeJumbotron.vue @@ -1,5 +1,10 @@ <template> - <v-jumbotron :gradient="gradient" dark class="elevation-10"> + <v-jumbotron :gradient="gradient" dark class="elevation-10" v-if="showJumbotron"> + <v-btn @click="hide" icon class="hide-btn"> + <v-icon> + close + </v-icon> + </v-btn> <v-container fill-height> <v-layout align-center> <v-flex> @@ -26,14 +31,28 @@ </template> <script> -export default { - name: 'welcome-jumbotron', - data () { - return { - gradient: 'to bottom, #1A237E, #5753DD' + import { createComputedGetterSetter } from '@/util/helpers' + import { uiMut } from '@/store/modules/ui' + + export default { + name: 'welcome-jumbotron', + data () { + return { + gradient: 'to bottom, #1A237E, #5753DD' + } + }, + computed: { + showJumbotron: createComputedGetterSetter({ + path: 'ui.showJumbotron', + mutation: uiMut.SET_SHOW_JUMBOTRON + }) + }, + methods: { + hide () { + this.showJumbotron = false + } } } -} </script> <style scoped> @@ -41,4 +60,8 @@ export default { color: lightgrey; text-decoration: none; } + .hide-btn { + position: absolute; + right: 0px; + } </style> diff --git a/frontend/src/store/modules/ui.js b/frontend/src/store/modules/ui.js index df08d683c22f997f988e7ba764f57654f9b54e41..2cecc601d8df26034b9d98da0fc3547a44d4ce84 100644 --- a/frontend/src/store/modules/ui.js +++ b/frontend/src/store/modules/ui.js @@ -3,14 +3,16 @@ function initialState () { return { sideBarCollapsed: false, darkMode: false, - darkModeUnlocked: false + darkModeUnlocked: false, + showJumbotron: true } } export const uiMut = Object.freeze({ SET_SIDEBAR_COLLAPSED: 'SET_SIDEBAR_COLLAPSED', SET_DARK_MODE: 'SET_DARK_MODE', - SET_DARK_MODE_UNLOCKED: 'SET_DARK_MODE_UNLOCKED' + SET_DARK_MODE_UNLOCKED: 'SET_DARK_MODE_UNLOCKED', + SET_SHOW_JUMBOTRON: 'SET_SHOW_JUMBOTRON' }) const ui = { @@ -24,6 +26,9 @@ const ui = { }, [uiMut.SET_DARK_MODE_UNLOCKED] (state, val) { state.darkModeUnlocked = val + }, + [uiMut.SET_SHOW_JUMBOTRON] (state, val) { + state.showJumbotron = val } } }