diff --git a/src/App.vue b/src/App.vue index b18083bbb..6a05a2f80 100644 --- a/src/App.vue +++ b/src/App.vue @@ -89,25 +89,30 @@ {{ format(timeNow, 'E LLL do HH:mm') }} </div> </div> - <div class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between"> - <MiniWidgetContainer - :container="widgetStore.currentView.miniWidgetContainers[0]" - :allow-editing="widgetStore.editingMode" - align="start" - /> - <div /> - <MiniWidgetContainer - :container="widgetStore.currentView.miniWidgetContainers[1]" - :allow-editing="widgetStore.editingMode" - align="center" - /> - <div /> - <MiniWidgetContainer - :container="widgetStore.currentView.miniWidgetContainers[2]" - :allow-editing="widgetStore.editingMode" - align="end" - /> - </div> + <Transition name="fade"> + <div + v-if="widgetStore.currentView.showBottomBarOnBoot" + class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between" + > + <MiniWidgetContainer + :container="widgetStore.currentView.miniWidgetContainers[0]" + :allow-editing="widgetStore.editingMode" + align="start" + /> + <div /> + <MiniWidgetContainer + :container="widgetStore.currentView.miniWidgetContainers[1]" + :allow-editing="widgetStore.editingMode" + align="center" + /> + <div /> + <MiniWidgetContainer + :container="widgetStore.currentView.miniWidgetContainers[2]" + :allow-editing="widgetStore.editingMode" + align="end" + /> + </div> + </Transition> <router-view /> </div> <EditMenu v-model:edit-mode="widgetStore.editingMode" /> @@ -213,4 +218,14 @@ body.hide-cursor { .swal2-container { z-index: 10000; } + +.fade-enter-active, +.fade-leave-active { + transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); +} +.fade-enter-from, +.fade-leave-to { + opacity: 0; + transform: translate(0, 100px); +} </style> diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts index 4e7a3299f..5cbed9949 100644 --- a/src/assets/defaults.ts +++ b/src/assets/defaults.ts @@ -25,6 +25,7 @@ export const widgetProfiles: Profile[] = [ { hash: 'eddd8e53-88c3-46a9-9e50-909227661f38', name: 'Video view', + showBottomBarOnBoot: true, widgets: [ { hash: '8b1448f5-3f07-4bfc-8a0e-5d491993f858', @@ -137,6 +138,7 @@ export const widgetProfiles: Profile[] = [ { hash: 'f8a76470-9122-44f7-97f7-4555a59ee9c4', name: 'Map view', + showBottomBarOnBoot: true, widgets: [ { hash: '6439e791-3031-4928-aff2-8bd9af713798', diff --git a/src/components/EditMenu.vue b/src/components/EditMenu.vue index 780def4b8..f67424c96 100644 --- a/src/components/EditMenu.vue +++ b/src/components/EditMenu.vue @@ -214,6 +214,11 @@ <v-card class="pa-2"> <v-card-text> <v-text-field v-model="newViewName" counter="25" label="New view name" /> + <v-switch + v-model="store.currentView.showBottomBarOnBoot" + label="Show bottom bar on boot" + class="m-2 text-slate-800" + /> </v-card-text> <v-card-actions class="flex justify-end"> <v-btn @click="viewRenameDialog.confirm">Save</v-btn> diff --git a/src/stores/widgetManager.ts b/src/stores/widgetManager.ts index ada26c5fa..cdf1a483a 100644 --- a/src/stores/widgetManager.ts +++ b/src/stores/widgetManager.ts @@ -5,7 +5,7 @@ import { saveAs } from 'file-saver' import { defineStore } from 'pinia' import Swal from 'sweetalert2' import { v4 as uuid4 } from 'uuid' -import { computed, onBeforeUnmount, ref, watch } from 'vue' +import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue' import { widgetProfiles } from '@/assets/defaults' import { miniWidgetsProfile } from '@/assets/defaults' @@ -172,6 +172,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => { { name: 'Bottom-center container', widgets: [] }, { name: 'Bottom-right container', widgets: [] }, ], + showBottomBarOnBoot: true, }) currentViewIndex.value = 0 } @@ -439,6 +440,18 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => { const selectPrevViewCBId = registerActionCallback(CockpitAction.GO_TO_PREVIOUS_VIEW, debouncedSelectPreviousView) onBeforeUnmount(() => unregisterActionCallback(selectPrevViewCBId)) + // Profile migrations + // TODO: remove on first stable release + onBeforeMount(() => { + savedProfiles.value.forEach((p) => + p.views.forEach((v) => { + if (v.showBottomBarOnBoot === undefined) { + v.showBottomBarOnBoot = true + } + }) + ) + }) + return { editingMode, showGrid, diff --git a/src/types/widgets.ts b/src/types/widgets.ts index ba9376ea9..6680da03c 100644 --- a/src/types/widgets.ts +++ b/src/types/widgets.ts @@ -97,6 +97,10 @@ export type View = { * Editable name for the view */ name: string + /** + * To show or not the bottom bar on boot. + */ + showBottomBarOnBoot: boolean } export type Profile = {