fix: Layout padding is not correctly handled (close #1033)

kalisio · Dec 30, 2024 · b4dcef6 · b4dcef6
1 parent 557d196
commit b4dcef6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 22 deletions.
diff --git a/core/client/components/KActivity.vue b/core/client/components/KActivity.vue
@@ -1,5 +1,5 @@
 <template>
-  <KPage :padding="padding">
+  <KPage :padding="Layout.getPadding()">
     <slot />
   </KPage>
 </template>
@@ -44,11 +44,6 @@ export default {
       setLayoutMode
     }
   },
-  computed: {
-    padding () {
-      return this.Layout.get().padding
-    }
-  },
   watch: {
     mode: {
       // [!] cannot be immediate as it is required that the activity is configured first

diff --git a/core/client/components/layout/KPage.vue b/core/client/components/layout/KPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-page :padding="padding" :style-fn="layoutOffsetListener">
+  <q-page :padding="Layout.getPadding()" :style-fn="layoutOffsetListener">
     <!--
       Specific page content: can be provided as slot or/and by configuration
      -->
@@ -49,7 +49,7 @@
             :style="bottomPaneStyle"
             class="k-pane"
           />
-          <q-resize-observer v-if="padding" debounce="200" @resize="onBottomPaneResized" />
+          <q-resize-observer v-if="Layout.getPadding()" debounce="200" @resize="onBottomPaneResized" />
         </div>
       </div>
     </q-page-sticky>
@@ -72,7 +72,7 @@
             :style="rightPaneStyle"
             class="k-pane"
           />
-          <q-resize-observer v-if="padding" debounce="200" @resize="onRightPaneResized" />
+          <q-resize-observer v-if="Layout.getPadding()" debounce="200" @resize="onRightPaneResized" />
         </div>
       </div>
     </q-page-sticky>
@@ -93,7 +93,7 @@
             :style="topPaneStyle"
             class="k-pane"
           />
-          <q-resize-observer v-if="padding" debounce="200" @resize="onTopPaneResized" />
+          <q-resize-observer v-if="Layout.getPadding()" debounce="200" @resize="onTopPaneResized" />
         </div>
         <KOpener id="top-opener" v-if="topPane.opener" v-model="isTopPaneOpened" position="top" />
       </div>
@@ -187,14 +187,6 @@ import KOpener from './KOpener.vue'
 import KWindow from './KWindow.vue'
 import KFab from './KFab.vue'
 
-// Props
-const props = defineProps({
-  padding: {
-    type: Boolean,
-    default: true
-  }
-})
-
 // Data
 const $q = useQuasar()
 const { Layout } = useLayout()
@@ -208,16 +200,17 @@ const leftWindow = Layout.getWindow('left')
 const topWindow = Layout.getWindow('top')
 const rightWindow = Layout.getWindow('right')
 const bottomWindow = Layout.getWindow('bottom')
-const layoutOffset = ref(0)
+const layoutOffset = ref(0)   
 
 // Computed
 const contentStyleFunction = computed(() => {
-  const layoutPadding = props.padding ? $q.screen.xs ? 16 : $q.screen.lt.lg ? 32 : 48 : 0
+  const hasPadding = Layout.getPadding()
+  const layoutPadding = hasPadding ? $q.screen.xs ? 16 : $q.screen.lt.lg ? 32 : 48 : 0
   const widthOffset = layoutPadding
   const heightOffset = layoutOffset.value + layoutPadding
   return {
-    paddingTop: props.padding ? `${topPane.size[1]}px` : 0,
-    paddingBottom: props.padding ? `${bottomPane.size[1]}px` : 0,
+    paddingTop: hasPadding ? `${topPane.size[1]}px` : 0,
+    paddingBottom: hasPadding ? `${bottomPane.size[1]}px` : 0,
     width: `calc(100vw - ${widthOffset}px)`,
     height: `calc(100vh - ${heightOffset}px)`,
     maxWidth: `calc(100vw - ${widthOffset}px)`,

diff --git a/core/client/layout.js b/core/client/layout.js
@@ -125,6 +125,9 @@ export const Layout = {
   clearView () {
     Store.patch(this.paths.layout, { view: this.getElementDefaults('view') })
   },
+  getPadding () {
+    return this.get().padding
+  },
   setPadding (padding) {
     Store.patch(this.paths.layout, { padding })
   },