wip: Active element in the Layout should be displayed first #941

core/client/components/layout/KLayout.vue

@@ -8,7 +8,7 @@
         v-if="leftPane.opener"
         position="left"
         :offset="[openerOffset, 0]"
-        class="k-pane-z-index"
+        class="k-left-pane-sticky"
       >
         <KOpener
           id="left-opener"
@@ -84,26 +84,9 @@ const footer = Layout.getFooter()
 const openerOffset = ref(0)
 
 // Computed
-const hasLeftPaneComponents = computed(() => {
-  return !_.isEmpty(leftPane.components)
-})
-const leftPaneSize = computed(() => {
-  return computeResponsiveWidth(leftPane.sizes)
-})
 const hasHeaderComponents = computed(() => {
   return !_.isEmpty(header.components)
 })
-const hasFooterComponents = computed(() => {
-  return !_.isEmpty(footer.components)
-})
-const isLeftPaneOpened = computed({
-  get: function () {
-    return leftPane.visible
-  },
-  set: function (value) {
-    Layout.setPaneVisible('left', value)
-  }
-})
 const isHeaderVisible = computed({
   get: function () {
     return header.visible
@@ -112,6 +95,9 @@ const isHeaderVisible = computed({
     Layout.setHeaderVisible(value)
   }
 })
+const hasFooterComponents = computed(() => {
+  return !_.isEmpty(footer.components)
+})
 const isFooterVisible = computed({
   get: function () {
     return footer.visible
@@ -120,6 +106,20 @@ const isFooterVisible = computed({
     Layout.setFooterVisible(value)
   }
 })
+const hasLeftPaneComponents = computed(() => {
+  return !_.isEmpty(leftPane.components)
+})
+const leftPaneSize = computed(() => {
+  return computeResponsiveWidth(leftPane.sizes)
+})
+const isLeftPaneOpened = computed({
+  get: function () {
+    return leftPane.visible
+  },
+  set: function (value) {
+    Layout.setPaneVisible('left', value)
+  }
+})
 
 // Watch
 watch(() => leftPane.visible, (visible) => {
@@ -148,7 +148,7 @@ function clickOutsideLeftPanelListener (event) {
 </script>
 
 <style lang="scss">
-.k-pane-z-index {
-  z-index: $pane-sticky-z-index;
+.k-left-pane-sticky {
+  z-index: v-bind('leftPane.zIndex');
 }
 </style>

core/client/components/layout/KPage.vue

@@ -22,7 +22,7 @@
         :id="sticky.id"
         :position="getStickyPosition(sticky)"
         :offset="getStickyOffset(sticky)"
-        class="k-sticky-z-index"
+        class="k-sticky"
       >
         <KContent :content="[sticky]" />
       </q-page-sticky>
@@ -32,7 +32,11 @@
       Be careful of the order
      -->
     <!-- Bottom pane -->
-    <q-page-sticky position="bottom" class="k-pane-z-index">
+    <q-page-sticky 
+      position="bottom" 
+      class="k-bottom-pane-sticky"
+      @click="onClicked('panes.bottom')"
+    >
       <div id="bottom-pane" v-show="hasBottomPaneComponents" class="column items-center">
         <KOpener id="bottom-opener" v-if="bottomPane.opener" v-model="isBottomPaneOpened" position="bottom" />
         <div>
@@ -49,7 +53,11 @@
       </div>
     </q-page-sticky>
     <!-- Right pane -->
-    <q-page-sticky position="right" class="k-pane-z-index">
+    <q-page-sticky 
+      position="right" 
+      class="k-right-pane-sticky"
+      @click="onClicked('panes.right')"
+    >
       <div id="right-pane" v-show="hasRightPaneComponents" class="row items-center">
         <KOpener id="right-opener" v-if="rightPane.opener" v-model="isRightPaneOpened" position="right" />
         <div>
@@ -67,7 +75,11 @@
       </div>
     </q-page-sticky>
     <!-- Top pane -->
-    <q-page-sticky position="top" class="k-pane-z-index">
+    <q-page-sticky 
+      position="top" 
+      class="k-top-pane-sticky"
+      @click="onClicked('panes.top')"
+    >
       <div id="top-pane" v-show="hasTopPaneComponents" class="column items-center">
         <div>
           <KPanel
@@ -84,16 +96,26 @@
       </div>
     </q-page-sticky>
     <!-- Fab -->
-    <q-page-sticky :position="fab.position" :offset="fab.offset" class="k-fab-z-index">
+    <q-page-sticky 
+      :position="fab.position" 
+      :offset="fab.offset" 
+      class="k-fab-sticky"
+      @click="onClicked('fab')"
+    >
       <KFab
         id="fab"
         v-if="fab.visible"
         :direction="fabBehavior.direction"
         :actions-align="fabBehavior.actionsAlign"
       />
     </q-page-sticky>
-    <!-- Windows -->
-    <q-page-sticky position="top-left" :offset="leftWindow.position" class="k-window-z-index">
+    <!-- left Window -->
+    <q-page-sticky 
+      position="top-left" 
+      :offset="leftWindow.position" 
+      class="k-left-window-sticky"
+      @click="onClicked('windows.left')"
+    >
       <KWindow
         id="left-window"
         v-if="leftWindow.visible"
@@ -102,7 +124,13 @@
         :style="leftWindowStyle"
       />
     </q-page-sticky>
-    <q-page-sticky position="top-left" :offset="topWindow.position" class="k-window-z-index">
+    <!-- top Window -->
+    <q-page-sticky 
+      position="top-left" 
+      :offset="topWindow.position" 
+      class="k-top-window-sticky" 
+      @click="onClicked('windows.top')"
+    >
       <KWindow
         id="top-window"
         v-if="topWindow.visible"
@@ -111,7 +139,13 @@
         :style="topWindowStyle"
       />
     </q-page-sticky>
-    <q-page-sticky position="top-left" :offset="rightWindow.position" class="k-window-z-index">
+    <!-- right Window -->
+    <q-page-sticky 
+      position="top-left" 
+      :offset="rightWindow.position" 
+      class="k-right-window-sticky" 
+      @click="onClicked('windows.right')"
+    >
       <KWindow
         id="right-window"
         v-if="rightWindow.visible"
@@ -120,7 +154,13 @@
         :style="rightWindowStyle"
       />
     </q-page-sticky>
-    <q-page-sticky position="top-left" :offset="bottomWindow.position" class="k-window-z-index">
+    <!-- bottom Window -->
+    <q-page-sticky 
+      position="top-left" 
+      :offset="bottomWindow.position" 
+      class="k-bottom-window-sticky" 
+      @click="onClicked('windows.bottom')"
+    >
       <KWindow
         id="bottom-window"
         v-if="bottomWindow.visible"
@@ -309,14 +349,23 @@ function setRightPaneVisible (visible) {
 function setBottomPaneVisible (visible) {
   Layout.setPaneVisible('bottom', visible)
 }
+function onClicked (element) {
+  Layout.setFocus(element)
+}
 </script>
 
 <style lang="scss">
 body {
   background-color: #EFEFEF;
 }
-.k-pane-sticky {
-  z-index: $pane-sticky-z-index;
+.k-top-pane-sticky {
+  z-index: v-bind('topPane.zIndex');
+}
+.k-right-pane-sticky {
+  z-index: v-bind('rightPane.zIndex');
+}
+.k-bottom-pane-sticky {
+  z-index: v-bind('bottomPane.zIndex');
 }
 .k-pane {
   background-color: #FFFFFF;
@@ -327,13 +376,22 @@ body {
 .k-pane:hover {
   border: solid 1px $primary;
 }
-.k-window-z-index {
-  z-index: $window-sticky-z-index;
+.k-left-window-sticky {
+  z-index: v-bind('leftWindow.zIndex');
+}
+.k-top-window-sticky {
+  z-index: v-bind('topWindow.zIndex');
+}
+.k-right-window-sticky {
+  z-index: v-bind('rightWindow.zIndex');
+}
+.k-bottom-window-sticky {
+  z-index: v-bind('bottomWindow.zIndex');
 }
-.k-fab-z-index {
-  z-index: $fab-sticky-z-index;
+.k-fab-sticky {
+  z-index: v-bind('fab.zIndex');
 }
-.k-sticky-z-index {
-  z-index: $sticky-z-index;
+.k-sticky {
+  z-index: v-bind('stickies.zIndex');
 }
 </style>

core/client/components/layout/KWindow.vue

@@ -352,6 +352,9 @@ function updateGeometry (position, size, check = false) {
 function onMoved (event) {
   if (!event) return
   if (currentWindow.state !== 'maximized') {
+    // Set Focus
+    Layout.setFocus(`windows.${props.placement}`)
+    // Update geometry
     if (currentWindow.state !== 'floating') {
       storeGeometry()
       Layout.setWindowState(props.placement, 'floating')
@@ -368,6 +371,8 @@ function onMoved (event) {
 }
 const onResized = _.throttle((event) => {
   if (!event) return
+  // Set Focus
+  Layout.setFocus(`windows.${props.placement}`)
   // Handle the pinned and floating currentState
   if (currentWindow.state !== 'maximized') {
     if (currentWindow.state !== 'floating') {

core/client/layout.js

@@ -5,11 +5,20 @@ import sift from 'sift'
 import { Store } from './store.js'
 import { bindContent } from './utils/utils.content.js'
 
+const defaultZIndex = {
+  drawer: 3000,  // see Quasar css variables
+  panes: 1000,
+  fab: 1000,
+  windows: 990,
+  stickies: 980,
+  focus: 1010
+}
+
 const layoutPath = 'layout'
 const contentDefaults = { content: undefined, filter: {}, mode: undefined, visible: false }
-const paneDefaults = { opener: false, size: [0, 0] }
+const paneDefaults = { opener: false, size: [0, 0], zIndex: defaultZIndex.panes }
 const windowsDefaultControls = { pin: true, unpin: true, maximize: true, restore: true, close: true, resize: true }
-const windowDefaults = { state: undefined, position: undefined, size: undefined, current: undefined, controls: windowsDefaultControls }
+const windowDefaults = { state: undefined, position: undefined, size: undefined, current: undefined, controls: windowsDefaultControls, zIndex: 980 }
 const hWindowDefaultSizePolicy = {
   minSize: [300, 200],
   floating: { position: [0, 0], size: [300, 200] },
@@ -27,10 +36,10 @@ const defaults = {
   header: { ...contentDefaults },
   footer: { ...contentDefaults },
   page: { ...contentDefaults, size: [0, 0] },
-  stickies: { ...contentDefaults },
-  fab: { ...contentDefaults, icon: 'las la-ellipsis-v', position: 'bottom-right', offset: [16, 16] },
+  stickies: { ...contentDefaults, zIndex: defaultZIndex.stickies },
+  fab: { ...contentDefaults, icon: 'las la-ellipsis-v', position: 'bottom-right', offset: [16, 16], zIndex: defaultZIndex.fab },
   panes: {
-    left: { ...contentDefaults, ...paneDefaults, sizes: 300 },
+    left: { ...contentDefaults, ...paneDefaults, sizes: 300, zIndex: defaultZIndex.drawer }, 
     top: { ...contentDefaults, ...paneDefaults, sizes: undefined },
     right: { ...contentDefaults, ...paneDefaults, sizes: { xs: [85, 75], sm: [360, 75], md: [440, 80], lg: [500, 80], xl: [500, 85] } },
     bottom: { ...contentDefaults, ...paneDefaults, sizes: undefined }
@@ -40,6 +49,10 @@ const defaults = {
     top: { ...contentDefaults, ...windowDefaults, sizePolicy: hWindowDefaultSizePolicy },
     right: { ...contentDefaults, ...windowDefaults, sizePolicy: vWindowDefaultSizePolicy },
     bottom: { ...contentDefaults, ...windowDefaults, sizePolicy: hWindowDefaultSizePolicy }
+  },
+  focus: {
+    element: null,
+    zIndex: defaultZIndex.focus
   }
 }
 
@@ -67,7 +80,8 @@ export const Layout = {
       top: layoutPath + '.windows.top',
       right: layoutPath + '.windows.right',
       bottom: layoutPath + '.windows.bottom'
-    }
+    },
+    focus: layoutPath + '.focus'
   },
   initialize () {
     // create the store structure for each element with their configuration
@@ -82,6 +96,7 @@ export const Layout = {
       Store.set(_.get(this.paths.panes, placement), this.getElementDefaults(`panes.${placement}`))
       Store.set(_.get(this.paths.windows, placement), this.getElementDefaults(`windows.${placement}`))
     })
+    Store.set(this.paths.focus, this.getElementDefaults('focus'))
     // debug message
     logger.debug(`[KDK] Layout initialized with: ${JSON.stringify(this.get(), null, 4)}`)
   },
@@ -395,10 +410,26 @@ export const Layout = {
     logger.debug(`[KDK] Unable to find the widget ${widget}`)
     return { placement: undefined, window: undefined }
   },
-  openWidget (widget) {
+  openWidget (widget, focus = true) {
     const { placement, window } = this.findWindow(widget)
     if (!placement) return
     if (window.current !== 'current') this.setWindowCurrent(placement, widget)
     if (!window.visible) this.setWindowVisible(placement, true)
+    if (focus) Layout.setFocus(`windows.${placement}`)
+  },
+  closeWidget (widget) {
+    const { placement, window } = this.findWindow(widget)
+    if (!placement) return
+    if (window.visible) this.setWindowVisible(placement, false)
+  },
+  setFocus (element) {
+    const focus = this.getElement('focus')
+    if (focus.element) {
+      if (focus.element === element) return
+      Store.patch(this.getElementPath(focus.element.path), { zIndex: focus.element.zIndex })  
+    }
+    const props = this.getElement(element)
+    Store.patch(this.getElementPath('focus'), { element: { path: element, zIndex: props.zIndex }})
+    Store.patch(this.getElementPath(element), { zIndex: focus.zIndex })
   }
 }

core/client/mixins/mixin.base-activity.js

@@ -184,13 +184,7 @@ export function baseActivity (name) {
         return (window && window.visible)
       },
       openWidget (widget) {
-        const { placement, window } = this.findWindow(widget)
-        if (!placement) {
-          logger.warn(`[KDK] Cannot find widget ${widget}`)
-          return
-        }
-        if (window.current !== widget) Layout.setWindowCurrent(placement, widget)
-        Layout.setWindowVisible(placement, true)
+        Layout.openWidget(widget)
       },
       closeWidget (widget) {
         const result = this.findWindow(widget)