fix: Windows should be hidden when content is empty #977

core/client/components/layout/KPage.vue

@@ -33,11 +33,12 @@
      -->
     <!-- Bottom pane -->
     <q-page-sticky
+      v-show="hasBottomPaneComponents"
       position="bottom"
       class="k-bottom-pane-sticky"
       @click="onClicked('panes.bottom')"
     >
-      <div id="bottom-pane" v-show="hasBottomPaneComponents" class="column items-center">
+      <div id="bottom-pane" class="column items-center">
         <KOpener id="bottom-opener" v-if="bottomPane.opener" v-model="isBottomPaneOpened" position="bottom" />
         <div>
           <KPanel
@@ -54,11 +55,12 @@
     </q-page-sticky>
     <!-- Right pane -->
     <q-page-sticky
+      v-show="hasRightPaneComponents"
       position="right"
       class="k-right-pane-sticky"
       @click="onClicked('panes.right')"
     >
-      <div id="right-pane" v-show="hasRightPaneComponents" class="row items-center">
+      <div id="right-pane" class="row items-center">
         <KOpener id="right-opener" v-if="rightPane.opener" v-model="isRightPaneOpened" position="right" />
         <div>
           <KPanel
@@ -76,11 +78,12 @@
     </q-page-sticky>
     <!-- Top pane -->
     <q-page-sticky
+      v-show="hasTopPaneComponents"
       position="top"
       class="k-top-pane-sticky"
       @click="onClicked('panes.top')"
     >
-      <div id="top-pane" v-show="hasTopPaneComponents" class="column items-center">
+      <div id="top-pane" class="column items-center">
         <div>
           <KPanel
             id="top-panel"
@@ -111,59 +114,59 @@
     </q-page-sticky>
     <!-- left Window -->
     <q-page-sticky
+      v-if="hasLeftWindowComponents && leftWindow.visible"
       position="top-left"
       :offset="leftWindow.position"
       class="k-left-window-sticky"
       @click="onClicked('windows.left')"
     >
       <KWindow
         id="left-window"
-        v-if="leftWindow.visible"
         placement="left"
         :layout-offset="layoutOffset"
         :style="leftWindowStyle"
       />
     </q-page-sticky>
     <!-- top Window -->
     <q-page-sticky
+      v-if="hasTopWindowComponents && topWindow.visible"
       position="top-left"
       :offset="topWindow.position"
       class="k-top-window-sticky"
       @click="onClicked('windows.top')"
     >
       <KWindow
         id="top-window"
-        v-if="topWindow.visible"
         placement="top"
         :layout-offset="layoutOffset"
         :style="topWindowStyle"
       />
     </q-page-sticky>
     <!-- right Window -->
     <q-page-sticky
+      v-if="hasRightWindowComponents && rightWindow.visible"
       position="top-left"
       :offset="rightWindow.position"
       class="k-right-window-sticky"
       @click="onClicked('windows.right')"
     >
       <KWindow
         id="right-window"
-        v-if="rightWindow.visible"
         placement="right"
         :layout-offset="layoutOffset"
         :style="rightWindowStyle"
       />
     </q-page-sticky>
     <!-- bottom Window -->
     <q-page-sticky
+      v-if="hasBottomWindowComponents && bottomWindow.visible"
       position="top-left"
       :offset="bottomWindow.position"
       class="k-bottom-window-sticky"
       @click="onClicked('windows.bottom')"
     >
       <KWindow
         id="bottom-window"
-        v-if="bottomWindow.visible"
         placement="bottom"
         :layout-offset="layoutOffset"
         :style="bottomWindowStyle"
@@ -275,24 +278,36 @@ const bottomPaneSize = computed(() => {
 const bottomPaneStyle = computed(() => {
   return bottomPaneSize.value ? { width: bottomPaneSize.value + 'px' } : {}
 })
+const hasLeftWindowComponents = computed(() => {
+  return !_.isEmpty(leftWindow.components)
+})
 const leftWindowSize = computed(() => {
   return leftWindow.size || leftWindow.sizePolicy.minSize
 })
 const leftWindowStyle = computed(() => {
   return { maxWidth: leftWindowSize[0] + 'px', maxHeight: leftWindowSize[1] + 'px' }
 })
+const hasTopWindowComponents = computed(() => {
+  return !_.isEmpty(topWindow.components)
+})
 const topWindowSize = computed(() => {
   return topWindow.size || topWindow.sizePolicy.minSize
 })
 const topWindowStyle = computed(() => {
   return { maxWidth: topWindowSize[0] + 'px', maxHeight: topWindowSize[1] + 'px' }
 })
+const hasRightWindowComponents = computed(() => {
+  return !_.isEmpty(rightWindow.components)
+})
 const rightWindowSize = computed(() => {
   return rightWindow.size || rightWindow.sizePolicy.minSize
 })
 const rightWindowStyle = computed(() => {
   return { maxWidth: rightWindowSize[0] + 'px', maxHeight: rightWindowSize[1] + 'px' }
 })
+const hasBottomWindowComponents = computed(() => {
+  return !_.isEmpty(bottomWindow.components)
+})
 const bottomWindowSize = computed(() => {
   return bottomWindow.size || bottomWindow.sizePolicy.minSize
 })