wip: In maximized mode, the window geometry does not take into accoun…

…t whether a header or footer is active #974

core/client/components/layout/KLayout.vue

@@ -42,6 +42,7 @@
       v-if="hasHeaderComponents"
       v-model="isHeaderVisible"
     >
+      <q-resize-observer @resize="onHeaderResized" />
       <KPanel
         id="header-panel"
         :content="header.components"
@@ -54,6 +55,7 @@
       v-if="hasFooterComponents"
       v-model="isFooterVisible"
     >
+      <q-resize-observer @resize="onFooterResized" />
       <KPanel
         id="footer-panel"
         :content="footer.components"
@@ -145,6 +147,12 @@ function clickOutsideLeftPanelListener (event) {
   if (leftOpenerElement && leftOpenerElement.contains(event.target)) return
   Layout.setPaneVisible('left', false)
 }
+function onHeaderResized (size) {
+  Layout.setElementSize('header', [size.width, size.height])
+}
+function onFooterResized (size) {
+  Layout.setElementSize('footer', [size.width, size.height])
+}
 </script>
 
 <style lang="scss">

core/client/components/layout/KWindow.vue

@@ -8,7 +8,7 @@
       class="k-window-header full-width row items-center"
       v-touch-pan.prevent.mouse="onMoved"
     >
-      <q-resize-observer @resize="onHeaderResized" />
+      <q-resize-observer @resize="onWindowHeaderResized" />
       <!-- window menu -->
       <KPanel
         v-if="currentWindow.controls.menu"
@@ -79,7 +79,7 @@
       :id="`${placement}-window-footer`"
       class="k-window-footer full-width row justify-end"
     >
-      <q-resize-observer @resize="onFooterResized" />
+      <q-resize-observer @resize="onWindowFooterResized" />
       <!-- window grip -->
       <q-icon
         v-if="currentWindow.controls.resize && currentWindow.state !== 'maximized'"
@@ -122,10 +122,12 @@ const props = defineProps({
 
 // Data
 const $q = useQuasar()
+const header = Layout.getHeader()
+const footer = Layout.getFooter()
 const currentWindow = Layout.getWindow(props.placement)
+const windowHeaderHeight = ref(0)
+const windowFooterHeight = ref(0)
 const widgetRef = ref(null)
-const headerHeight = ref(0)
-const footerHeight = ref(0)
 const pinIcons = {
   left: 'las la-angle-left',
   right: 'las la-angle-right',
@@ -246,7 +248,7 @@ const widgetWidth = computed(() => {
   return currentWindow.size[0] - border
 })
 const widgetHeight = computed(() => {
-  return currentWindow.size[1] - headerHeight.value - footerHeight.value
+  return currentWindow.size[1] - windowHeaderHeight.value - windowFooterHeight.value
 })
 
 // Watch
@@ -313,7 +315,10 @@ function setPinnedGeometry () {
   updateGeometry([x, y], size)
 }
 function setMaximizedGeometry () {
-  updateGeometry([0, 0], [$q.screen.width, $q.screen.height])
+  let height = $q.screen.height
+  if (header.visible) height -= header.size[1]
+  if (footer.visible) height -= footer.size[1]
+  updateGeometry([0, 0], [$q.screen.width, height])
 }
 function updateGeometry (position, size, check = false) {
   // check geometry
@@ -401,11 +406,11 @@ const onScreenResized = _.throttle(() => {
   else if (currentWindow.state === 'maximized') setMaximizedGeometry()
   else updateGeometry(currentWindow.position, currentWindow.size, true)
 }, 50)
-function onHeaderResized (size) {
-  headerHeight.value = size.height
+function onWindowHeaderResized (size) {
+  windowHeaderHeight.value = size.height
 }
-function onFooterResized (size) {
-  footerHeight.value = size.height
+function onWindowFooterResized (size) {
+  windowFooterHeight.value = size.height
 }
 
 // restore the state
@@ -437,7 +442,7 @@ else {
     background-color: $window-header-hover-background;
   }
   .k-window-footer {
-    height: v-bind(footerHeight)px;
+    height: v-bind(windowFooterHeight)px;
     border-radius: 0 0 $window-border-radius $window-border-radius;
   }
   .k-window-grip:hover {