@kalisio/kdk 1.5.0 → 1.7.0

package/lib/core/client/components/layout/KFab.vue

@@ -90,7 +90,7 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="scss">
   .k-fab {
     right: 12px;
     bottom: 12px;

package/lib/core/client/components/layout/KLayout.vue

@@ -4,13 +4,21 @@
       Header
      -->
     <q-header v-if="header.content" v-model="isHeaderVisible" v-bind="config.header" bordered>
-      <k-panel id="header" :content="header.content" :mode="header.mode" :filter="header.filter" />
+      <k-panel
+        id="header"
+        :content="header.content"
+        :mode="header.mode"
+        :filter="header.filter" />
     </q-header>
     <!--
       Footer
      -->
     <q-footer v-if="footer.content" v-model="isFooterVisible" v-bind="config.footer" bordered>
-      <k-panel id="footer" :content="footer.content" :mode="footer.mode" :filter="footer.filter" />
+      <k-panel
+        id="footer"
+        :content="footer.content"
+        :mode="footer.mode"
+        :filter="footer.filter" />
     </q-footer>
     <!--
       Page container

package/lib/core/client/components/layout/KPage.vue

@@ -73,8 +73,8 @@
       <k-fab />
     </q-page-sticky>
     <!-- window -->
-    <q-page-sticky position="top" :offset="widgetOffset">
-      <k-window id="window" ref="window" />
+    <q-page-sticky position="top-left" :offset="window.position">
+      <k-window id="window" :style="`max-width: ${window.size[0]}px; max-height: ${window.size[1]};px`" />
     </q-page-sticky>
     <!-- left -->
     <q-page-sticky position="left">
@@ -181,6 +181,7 @@ export default {
       rightPane: this.$store.get('rightPane'),
       bottomPane: this.$store.get('bottomPane'),
       page: this.$store.get('page'),
+      window: this.$store.get('window'),
       hasLeftPaneOpener: false,
       hasTopPaneOpener: false,
       hasRightPaneOpener: false,
@@ -190,7 +191,6 @@ export default {
       leftPadding: 0,
       bottomPadding: 0,
       rightPadding: 0,
-      widgetOffset: [0, 0],
       fabOffset: [16, 16]
     }
   },
@@ -280,19 +280,20 @@ export default {
 }
 </script>
 
-<style lang="stylus">
-body {
-  background-color: #EFEFEF;
-}
-.k-pane, .k-left-pane {
-  border: solid 1px lightgrey;
-  border-radius: 3px;
-}
-.k-pane:hover, .k-left-pane:hover {
-  border: solid 1px var(--q-color-primary);
-}
-.k-left-pane {
-  height: 100vh;
-  width: 300px;
-}
+<style lang="scss">
+  body {
+    background-color: #EFEFEF;
+  }
+  .k-pane, .k-left-pane {
+    background-color: #FFFFFF;
+    border: solid 1px lightgrey;
+    border-radius: 3px;
+  }
+  .k-pane:hover, .k-left-pane:hover {
+    border: solid 1px var(--q-color-primary);
+  }
+  .k-left-pane {
+    height: 100vh;
+    width: 300px;
+  }
 </style>

package/lib/core/client/components/layout/KTour.vue

@@ -429,10 +429,12 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped>
-  .v-step
+<style lang="scss" scoped>
+  .v-step {
     background: var(--q-color-accent);
     z-index: 10000;
-  .v-tour__target--highlighted
+  }
+  .v-tour__target--highlighted {
     box-shadow: 0 0 0 99999px rgba(0,0,0,.4);
+  }
 </style>

package/lib/core/client/components/layout/KWindow.vue

@@ -1,34 +1,34 @@
 <template>
-  <div v-if="widget" class="k-window" :style="windowStyle">
+  <div v-if="widget" class="k-window fit column">
     <!--
-      Window bar
+      Window header
      -->
-     <div class="row justify-between items-center q-pb-xs">
-       <!-- Widgets tab bar -->
-      <q-tabs
-        v-model="widget"
-        dense no-caps
-        active-color="primary"
-        align="left"
-        narrow-indicator
-      >
-        <template v-for="(widget,index) in widgets">
-          <q-tab :key="index" :name="widget.id" :icon="widget.icon" />
-        </template>
-      </q-tabs>
-      <!-- Window actions -->
-      <k-panel id="widget-actions" :content="actions" color="primary" />
+    <div
+      id="window-header"
+      class="k-window-header full-width"
+      v-touch-pan.prevent.mouse="onMoved">
+      <k-panel id="window-actions" :content="actions" />
     </div>
     <!--
       Window content
       -->
-    <q-tab-panels v-model="widget" animated>
-      <template v-for="(widget, index) in widgets">
-        <q-tab-panel :key="index" :name="widget.id" class="no-padding">
-          <component :is="widget.componentKey" :mode="mode" v-bind="widget.props" style="z-index: 1" />
-        </q-tab-panel>
-      </template>>
-    </q-tab-panels>
+    <div class="fit">
+      <q-tab-panels v-model="widget" animated>
+        <template v-for="(widget, index) in widgets">
+          <q-tab-panel :key="index" :name="widget.id" class="no-padding no-scroll">
+            <component :is="widget.componentKey" :mode="mode" v-bind="widget.props" style="z-index: 1;" />
+          </q-tab-panel>
+        </template>>
+      </q-tab-panels>
+    </div>
+    <!--
+      Window footer
+     -->
+    <div
+      id="window-footer"
+      class="k-window-footer full-width row justify-end">
+      <q-icon v-if="mode !== 'maximized'" class="k-window-grip" name="las la-slash" size="10px" v-touch-pan.prevent.mouse="onResized" />
+    </div>
   </div>
 </template>
 
@@ -48,22 +48,6 @@ export default {
         this.$store.set('window.current', value)
       }
     },
-    actions () {
-      return [
-        {
-          id: 'change-mode',
-          icon: this.mode === 'minimized' ? 'las la-expand' : 'las la-compress',
-          tooltip: this.mode === 'minimized' ? 'KWindow.MAXIMIZE_ACTION' : 'KWindow.MINIMIZE_ACTION',
-          handler: this.onModeChanged
-        },
-        {
-          id: 'close-action',
-          icon: 'las la-times',
-          tooltip: this.$t('KWindow.CLOSE_ACTION'),
-          handler: this.onClosed
-        }
-      ]
-    },
     widgets () {
       let widgets = this.window.widgets
       // Apply filtering
@@ -78,43 +62,211 @@ export default {
       })
       return widgets
     },
-    windowStyle () {
-      if (this.mode === 'maximized') return 'width: 100vw'
-      return this.$q.screen.gt.lg ? 'width: 55vw'
-        : this.$q.screen.gt.md ? 'width: 70vw'
-          : this.$q.screen.gt.sm ? 'width: 85vw'
-            : 'width: 100vw'
+    actions () {
+      const widgetMenuItems = []
+      _.forEach(this.widgets, widget => {
+        widgetMenuItems.push({
+          id: widget.id,
+          label: widget.label,
+          icon: widget.icon,
+          handler: () => { this.widget = widget.id }
+        })
+      })
+      const widgetMenu = [{
+        id: 'widgets-menu-items',
+        component: 'menu/KMenu',
+        icon: 'las la-cube',
+        tooltip: 'Widgets',
+        size: 'sm',
+        actionRenderer: 'item',
+        content: widgetMenuItems
+      }]
+      const windowControls = [
+        {
+          id: 'pin-action',
+          icon: 'las la-angle-up',
+          tooltip: 'KWindow.PIN_ACTION',
+          size: 'sm',
+          visible: this.mode === 'floating',
+          handler: this.onPinned
+        },
+        {
+          id: 'maximize-action',
+          icon: 'las la-expand',
+          tooltip: 'KWindow.MAXIMIZE_ACTION',
+          size: 'sm',
+          visible: this.mode !== 'maximized',
+          handler: this.onMaximized
+        },
+        {
+          id: 'restore-action',
+          icon: 'las la-compress',
+          tooltip: 'KWindow.RESTORE_ACTION',
+          size: 'sm',
+          visible: this.mode === 'maximized',
+          handler: this.onRestored
+        },
+        {
+          id: 'close-action',
+          icon: 'las la-times',
+          tooltip: this.$t('KWindow.CLOSE_ACTION'),
+          size: 'sm',
+          handler: this.onClosed
+        }
+      ]
+      return _.concat(widgetMenu, this.window.widgetActions, [{ component: 'QSpace' }], windowControls)
     }
   },
   data () {
     return {
       window: this.$store.get('window'),
-      mode: 'minimized'
+      mode: 'pinned'
+    }
+  },
+  watch: {
+    '$q.screen.width': {
+      handler () {
+        this.onScreenResized()
+      }
+    },
+    '$q.screen.height': {
+      handler () {
+        this.onScreenResized()
+      }
     }
   },
   methods: {
-    onModeChanged () {
-      if (this.mode === 'minimized') this.mode = 'maximized'
-      else this.mode = 'minimized'
+    getGeometryKey () {
+      return this.$config('appName').toLowerCase() + '-window-geometry'
+    },
+    storeGeometry (position, size) {
+      window.localStorage.setItem(this.getGeometryKey(), JSON.stringify({ position, size }))
+    },
+    onPinned () {
+      window.localStorage.removeItem(this.getGeometryKey())
+      this.mode = 'pinned'
+      this.onScreenResized()
+    },
+    onMaximized () {
+      this.backupPosition = this.window.position
+      this.backupSize = this.window.size
+      this.backupMode = this.mode
+      this.mode = 'maximized'
+      this.onScreenResized()
+    },
+    onRestored () {
+      this.$store.patch('window', { position: this.backupPosition, size: this.backupSize })
+      this.mode = this.backupMode
     },
     onClosed () {
       const widgets = this.$store.get('window.widgets')
       this.$store.patch('window', { current: '', widgets })
+    },
+    onMoved (event) {
+      if (!event) return
+      if (this.mode !== 'maximized') {
+        this.mode = 'floating'
+        const xMax = this.$q.screen.width - this.window.size[0]
+        const yMax = this.$q.screen.height - this.window.size[1]
+        const newPosition = [
+          Math.max(Math.min(Math.floor(this.window.position[0] + event.delta.x), xMax), 0),
+          Math.min(Math.max(Math.floor(this.window.position[1] + event.delta.y), 0), yMax)
+        ]
+        this.$store.patch('window', { position: newPosition })
+        if (event.isFinal) this.storeGeometry(newPosition, this.window.size)
+      }
+    },
+    onResized (event) {
+      if (!event) return
+      // Handle the pinned and floating mode
+      if (this.mode !== 'maximized') {
+        this.mode = 'floating'
+        const wMax = this.$q.screen.width - this.window.position[0]
+        const hMax = this.$q.screen.height - this.window.position[1]
+        const newSize = [
+          Math.min(this.window.size[0] + event.delta.x, wMax),
+          Math.min(this.window.size[1] + event.delta.y, hMax)
+        ]
+        this.$store.patch('window', { size: newSize })
+        if (event.isFinal) this.storeGeometry(this.window.position, newSize)
+      }
+    },
+    onScreenResized () {
+      if (this.mode === 'pinned') {
+        // Pinned mode
+        let w = this.$q.screen.width
+        if (this.$q.screen.gt.lg) w *= 0.7
+        if (this.$q.screen.gt.md) w *= 0.8
+        if (this.$q.screen.gt.sm) w *= 0.9
+        const h = this.$q.screen.height * 0.3
+        const x = this.$q.screen.width / 2 - w / 2
+        this.$store.patch('window', { position: [x, 0], size: [w, h] })
+      } else if (this.mode === 'floating') {
+        // Floating mode
+        if (this.window.position && this.window.size) {
+          let x = this.window.position[0]
+          let y = this.window.position[1]
+          let w = this.window.size[0]
+          let h = this.window.size[1]
+          let constrained = false
+          if ((x + w) > this.$q.screen.width) {
+            x = Math.max(this.$q.screen.width - w, 0)
+            if (x === 0) w = this.$q.screen.width
+            constrained = true
+          }
+          if ((y + h) > this.$q.screen.height) {
+            y = Math.max(this.$q.screen.height - h, 0)
+            if (y === 0) h = this.$q.screen.height
+            constrained = true
+          }
+          if (constrained) {
+            this.$store.patch('window', { position: [x, y], size: [w, h] })
+            this.storeGeometry([x, y], [w, h])
+          }
+        }
+      } else {
+        // Maximized mode
+        this.$store.patch('window', { position: [0, 0], size: [this.$q.screen.width, this.$q.screen.height] })
+      }
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
     this.$options.components['k-panel'] = this.$load('frame/KPanel')
+  },
+  created () {
+    const geometry = window.localStorage.getItem(this.getGeometryKey())
+    if (geometry) {
+      const geometryObject = JSON.parse(geometry)
+      this.$store.patch('window', { position: geometryObject.position, size: geometryObject.size })
+      this.mode = 'floating'
+    } else {
+      this.onPinned()
+    }
   }
 }
 </script>
 
-<style lang="stylus">
-.k-window
-  border: solid 1px lightgrey;
-  border-radius: 5px;
-  background: #ffffff
-
-.k-window:hover
-  border: solid 1px var(--q-color-primary);
+<style lang="scss">
+  .k-window {
+    border: solid 1px lightgrey;
+    border-radius: 5px;
+    background: #ffffff;
+  }
+  .k-window:hover {
+    border: solid 1px var(--q-color-primary);
+  }
+  .k-window-header {
+     border-radius: 5px;
+     cursor: move
+  }
+  .k-window-header:hover {
+    background: #eeeeee
+  }
+  .k-window-footer {
+     border-radius: 5px;
+  }
+  .k-window-grip:hover {
+     cursor: nwse-resize
+  }
 </style>

package/lib/core/client/components/media/KMediaBrowser.vue

@@ -178,11 +178,11 @@ export default {
 }
 </script>
 
-<style lang="stylus">
- .k-media-browser-slide {
-    background: transparent
-    max-width: 85%
-    max-height: 85%
-    overflow: hidden
+<style lang="scss">
+  .k-media-browser-slide {
+    background: transparent;
+    max-width: 85%;
+    max-height: 85%;
+    overflow: hidden;
   }
 </style>

package/lib/core/client/components/menu/KMenu.vue

@@ -14,7 +14,8 @@
     menu-self="top left"
     flat
     no-caps
-    fab-mini>
+    fab-mini
+    @click="onClicked(arguments[0])">
     <k-panel
       id="menu-entries"
       :content="content"
@@ -28,11 +29,13 @@
 <script>
 import _ from 'lodash'
 import { QBtnDropdown } from 'quasar'
+import KPanel from '../frame/KPanel.vue'
 
 export default {
   name: 'k-menu',
   components: {
-    QBtnDropdown
+    QBtnDropdown,
+    KPanel
   },
   props: {
     id: {
@@ -75,6 +78,10 @@ export default {
       type: String,
       default: undefined
     },
+    propagate: {
+      type: Boolean,
+      default: true
+    },
     context: {
       type: Object,
       default: () => null
@@ -95,9 +102,10 @@ export default {
       return !_.isEmpty(this.content)
     }
   },
-  created () {
-    // load the required components
-    this.$options.components['k-panel'] = this.$load('frame/KPanel')
+  methods: {
+    onClicked (event) {
+      if (!this.propagate) event.stopPropagation()
+    }
   }
 }
 </script>

package/lib/core/client/components/menu/KRadialFab.vue

@@ -74,28 +74,26 @@ export default {
 }
 </script>
 
-<style>
-.vue-radial-menu-wrapper {
-  position: relative;
-  user-select: none;
-  border-radius: 50%;
-  font-size: 32px;
-  font-weight: bold;
-  border-radius: 50%;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 0 0 rgba(0, 0, 0, 0.16);
-}
-
-.vue-radial-menu-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  transition: all 0.2s ease;
-  position: relative;
-  z-index: 6;
-}
-
-.vue-radial-menu-container.open {
-  transform: rotateZ(45deg);
-}
+<style lang="scss">
+  .vue-radial-menu-wrapper {
+    position: relative;
+    user-select: none;
+    border-radius: 50%;
+    font-size: 32px;
+    font-weight: bold;
+    border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24), 0 0 0 rgba(0, 0, 0, 0.16);
+  }
+  .vue-radial-menu-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    position: relative;
+    z-index: 6;
+  }
+  .vue-radial-menu-container.open {
+    transform: rotateZ(45deg);
+  }
 </style>

package/lib/core/client/components/menu/KRadialFabItem.vue

@@ -34,22 +34,21 @@ export default {
 }
 </script>
 
-<style>
-.vue-radial-menu-item {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.2s ease;
-  transform: none;
-  user-select: none;
-}
-
-.radial-vue-radial-menu-item-enter,
-.radial-vue-radial-menu-item-leave-to {
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-}
+<style lang="scss">
+  .vue-radial-menu-item {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease;
+    transform: none;
+    user-select: none;
+  }
+  .radial-vue-radial-menu-item-enter,
+  .radial-vue-radial-menu-item-leave-to {
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+  }
 </style>

package/lib/core/client/components/team/KAddMember.vue

@@ -5,7 +5,7 @@
     v-model="isModalOpened"
     @opened="$emit('opened')"
     @closed="$emit('closed')">
-    <div slot="modal-content">
+    <div>
       <q-tabs  align="justify" v-model="mode" inverted>
         <q-tab id="unique-tab" name="unique" icon="las la-user"  />
         <q-tab id="multiple-tab" name="multiple" icon="las la-user-friends"  />

package/lib/core/client/components/team/KChangeRole.vue

@@ -5,10 +5,9 @@
     :buttons="getButtons()"
     v-model="isModalOpened"
     @opened="$emit('opened')"
-    @closed="$emit('closed')">
-    <div slot="modal-content" class="column xs-gutter">
-      <k-form v-if="member" ref="form" :schema="getSchema()" />
-    </div>
+    @closed="$emit('closed')"
+  >
+    <k-form v-if="member" ref="form" :schema="getSchema()" />
   </k-modal>
 </template>
 
@@ -61,12 +60,8 @@ export default {
       const scope = this.getScope()
       const resourceId = this.getResourceId()
       const currentRole = _.get(_.find(this.member[scope], { _id: resourceId }), 'permissions')
-      const roles = [
-        { label: this.$t('KChangeRole.MEMBER_LABEL'), value: 'member' },
-        { label: this.$t('KChangeRole.MANAGER_LABEL'), value: 'manager' },
-        { label: this.$t('KChangeRole.OWNER_LABEL'), value: 'owner' }
-      ]
-      _.remove(roles, role => { return role.value === currentRole })
+      const roles = ['member', 'manager']
+      if (this.getScope() === 'organisations') roles.push('owner')
       return {
         $schema: 'http://json-schema.org/draft-06/schema#',
         $id: 'http://kalisio.xyz/schemas/change-role#',
@@ -74,11 +69,11 @@ export default {
         properties: {
           role: {
             type: 'string',
+            default: currentRole,
             field: {
-              component: 'form/KSelectField',
+              component: 'form/KRoleField',
               label: 'KChangeRole.ROLE_FIELD_LABEL',
-              type: 'radio',
-              options: roles
+              roles
             }
           }
         },
@@ -110,10 +105,12 @@ export default {
       }
     }
   },
-  async created () {
+  beforeCreate () {
     // Load the required components
     this.$options.components['k-modal'] = this.$load('frame/KModal')
     this.$options.components['k-form'] = this.$load('form/KForm')
+  },
+  async created () {
     // Load the member
     this.member = await this.loadObject()
   }