@afeefa/vue-app 0.0.173 → 0.0.175

package/src-admin/components/sidebar/InformationBarItem.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="informationBarItem">
+    <div
+      :class="['item', infoItemId, {expanded, rail}]"
+      :style="{width}"
+    >
+      <a-row justify-space-between>
+        <div
+          class="header"
+          @click="derail"
+        >
+          <v-icon
+            v-if="_icon"
+            :color="_icon.color"
+            size="2rem"
+          >
+            {{ _icon.icon }}
+          </v-icon>
+
+          <div
+            v-else
+            class="iconPlaceholder"
+          />
+
+          <template v-if="!rail">
+            <label class="label">{{ label }}</label>
+
+            <v-icon class="contextButton mt-n1">
+              {{ expanded ? '$caretDownIcon' : '$caretRightIcon' }}
+            </v-icon>
+          </template>
+        </div>
+
+        <div v-if="expanded">
+          <slot name="actionButton" />
+        </div>
+      </a-row>
+
+      <collapse-transition>
+        <div
+          v-if="!rail && expanded"
+          class="content"
+        >
+          <a-row
+            vertical
+            gap="6"
+          >
+            <slot />
+          </a-row>
+        </div>
+      </collapse-transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import { randomCssClass } from '@a-vue/utils/random'
+import { sidebarService } from './SidebarService'
+import { SidebarEvent } from '@a-admin/events'
+
+@Component({
+  props: [
+    'icon',
+    'iconModelType',
+    'label',
+    {
+      top: true,
+      bottom: false,
+      width: 'auto',
+      open: false
+    }
+  ]
+})
+export default class InformationBarItem extends Vue {
+  infoItemId = randomCssClass(10)
+  rail = sidebarService.informationRailed
+  expanded = !this.rail && this.open
+  isCreated = false
+
+  created () {
+    this.$events.on(SidebarEvent.STATUS, this.railChanged)
+  }
+
+  mounted () {
+    const container = this.getSidebarContainer()
+    container.appendChild(this.getContent())
+  }
+
+  destroyed () {
+    const container = this.getSidebarContainer()
+    const el = this.getContent()
+    if (container.contains(el)) {
+      container.removeChild(el)
+    }
+
+    this.$events.off(SidebarEvent.STATUS, this.railChanged)
+  }
+
+  get _icon () {
+    if (this.icon) {
+      return this.icon
+    }
+
+    if (this.iconModelType) {
+      const ModelClass = this.$apiResources.getModelClass(this.iconModelType)
+      return ModelClass.icon
+    }
+  }
+
+  railChanged ({payload: {informationRailed}}) {
+    if (this.rail === informationRailed) {
+      return
+    }
+
+    this.rail = informationRailed
+
+    if (!this.rail) { // derailed
+      if (!this.isCreated) { // open only the first time not after subsequent derailing
+        this.expanded = this.open
+      }
+    }
+
+    this.isCreated = true
+  }
+
+  derail () {
+    const railed = this.rail
+
+    sidebarService.setRailInformation(false)
+
+    if (railed) {
+      this.expanded = true
+    } else {
+      this.expanded = !this.expanded
+    }
+  }
+
+  getContent () {
+    return document.querySelector('.' + this.infoItemId)
+  }
+
+  getSidebarContainer () {
+    return document.querySelector('#information-bar__children > .' + this.position)
+  }
+
+  get position () {
+    if (this.bottom) {
+      return 'bottom'
+    } else {
+      return 'top'
+    }
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.item {
+  min-width: 100%;
+  margin-bottom: 1rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.rail {
+    margin-bottom: .5rem;
+  }
+}
+
+.header {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  font-size: .8rem;
+  cursor: pointer;
+
+  > .v-icon {
+    margin-right: .75rem;
+  }
+
+  .label {
+    display: block;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    color: #666666;
+    cursor: pointer;
+  }
+
+  &:hover {
+    label {
+      color: #333333;
+    }
+
+    .v-icon.contextButton {
+      color: #333333 !important;
+    }
+  }
+}
+
+.content {
+  border-top: 2px solid #EEEEEE;
+  font-size: .9rem;
+
+  margin: .25rem -1.5rem;
+  padding: 1rem 1.5rem;
+}
+</style>

package/src-admin/components/sidebar/SidebarEvent.js

@@ -0,0 +1,5 @@
+import { BaseEvent } from '@a-vue/plugins/event-bus/BaseEvent'
+
+export class SidebarEvent extends BaseEvent {
+  static STATUS = 'SidebarEvent:status'
+}

package/src-admin/components/sidebar/SidebarService.js

@@ -0,0 +1,107 @@
+import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
+
+import { SidebarEvent } from './SidebarEvent'
+
+export class SidebarState {
+  navigation = false
+  informationDerailed = false
+  informationRailed = false
+  mobile = false
+
+  constructor (service) {
+    this.navigation = service.navigation
+    this.information = service.information
+    this.informationRailed = service.informationRailed
+    this.mobile = service.mobile
+    this.hasFloatingOverlay = service.hasFloatingOverlay
+  }
+}
+
+class SidebarService {
+  navigation = true
+  information = false
+  informationRailed = false
+  mobile = false
+
+  constructor () {
+    window.addEventListener('resize', () => this.checkIsMobile())
+
+    this.checkIsMobile()
+  }
+
+  checkIsMobile () {
+    const old = this.mobile
+
+    const width = window.innerWidth
+    this.mobile = width < 1200
+
+    if (old !== this.mobile) {
+      if (!this.mobile) { // expand if destop
+        this.navigation = true
+      }
+
+      if (this.information) { // rail if mobile, derail if desktop
+        this.informationRailed = this.mobile
+      }
+
+      eventBus.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(this)))
+    }
+  }
+
+  setNavigation (navigation) {
+    if (this.navigation === navigation) {
+      return
+    }
+
+    this.navigation = navigation
+
+    eventBus.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(this)))
+  }
+
+  setInformation (information) {
+    if (this.information === information) {
+      return
+    }
+
+    this.information = information
+
+    if (information) { // rail if mobile, derail if desktop
+      this.informationRailed = this.mobile
+    }
+
+    eventBus.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(this)))
+  }
+
+  setRailInformation (rail) {
+    if (this.informationRailed === rail) {
+      return
+    }
+
+    this.informationRailed = rail
+
+    eventBus.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(this)))
+  }
+
+  closeAllFloating () {
+    this.setNavigation(false)
+    this.setRailInformation(true)
+  }
+
+  get hasFloatingOverlay () {
+    if (!this.mobile) {
+      return false
+    }
+
+    if (this.navigation) {
+      return true
+    }
+
+    if (this.information) {
+      return !this.informationRailed
+    }
+
+    return false
+  }
+}
+
+export const sidebarService = new SidebarService()

package/src-admin/components/transitions/CollapseTransition.vue

@@ -0,0 +1,61 @@
+<template>
+  <transition
+    name="collapse-transition"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @leave="leave"
+    @after-leave="afterLeave"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script>
+// concepts by https://github.com/ivanvermeyen/vue-collapse-transition
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [{ duration: 150, min: 0 }]
+})
+export default class CollapseTransition extends Vue {
+  enter (el, done) {
+    const h = el.offsetHeight
+
+    el.style.height = this.min + 'px'
+    el.style.overflow = 'hidden'
+
+    getComputedStyle(el).height // force repaint
+
+    el.style.transition = 'height ' + this.duration + 'ms'
+    el.style.height = h + 'px'
+
+    setTimeout(done, this.duration)
+  }
+
+  afterEnter (el) {
+    el.style.transition = ''
+    el.style.overflow = ''
+    el.style.height = ''
+  }
+
+  leave (el, done) {
+    const h = el.offsetHeight
+
+    el.style.height = h + 'px'
+    el.style.overflow = 'hidden'
+
+    getComputedStyle(el).height // force repaint
+
+    el.style.transition = 'height ' + this.duration + 'ms'
+    el.style.height = this.min + 'px'
+
+    setTimeout(done, this.duration)
+  }
+
+  afterLeave (el) {
+    el.style.transition = ''
+    el.style.overflow = ''
+    el.style.height = ''
+  }
+}
+</script>

package/src-admin/config/vuetify.js

@@ -2,6 +2,7 @@ import {
   mdiAlarmLightOutline,
   mdiAlert,
   mdiArrowLeft,
+  mdiArrowRight,
   mdiCalendar,
   mdiCheck,
   mdiCheckBold,
@@ -13,11 +14,13 @@ import {
   mdiDotsHorizontal,
   mdiDotsVertical,
   mdiFilter,
+  mdiInformationOutline,
   mdiLock,
   mdiLockOpenVariant,
   mdiLogoutVariant,
   mdiMagnify,
   mdiMenuDown,
+  mdiMenuRight,
   mdiMenuUp,
   mdiPalette,
   mdiPencil,
@@ -56,13 +59,16 @@ export default new Vuetify({
       checkIcon: mdiCheck,
       checkBoldIcon: mdiCheckBold,
       arrowLeftIcon: mdiArrowLeft,
+      arrowRightIcon: mdiArrowRight,
       caretDownIcon: mdiMenuDown,
       caretUpIcon: mdiMenuUp,
+      caretRightIcon: mdiMenuRight,
       printerIcon: mdiPrinter,
       euroSymbol: mdiCurrencyEur,
       paletteIcon: mdiPalette,
       addIcon: mdiPlusCircle,
-      filterIcon: mdiFilter
+      filterIcon: mdiFilter,
+      infoIcon: mdiInformationOutline
     }
   },
   breakpoint: {

package/src-admin/events.js

@@ -0,0 +1 @@
+export { SidebarEvent } from './components/sidebar/SidebarEvent'

package/src-admin/styles.scss

@@ -1,5 +1,13 @@
 html {
-  overflow-y: auto; // ress.css • v2.0.4 sets overflow-y: scroll
+  // overflow-y: auto; // ress.css • v2.0.4 sets overflow-y: scroll
+  overflow: hidden;
+}
+
+#v-main {
+  overflow-y: auto;
+  overflow-x: auto;
+  height: 100vh;
+  flex: 1 1 auto;
 }
 
 .container {
@@ -17,7 +25,7 @@ html {
 }
 
 .contextButton {
-  color: #AAAAAA !important;
+  color: #999999 !important;
   cursor: pointer;
 
   &:hover {

package/src-admin/components/Sidebar.vue

@@ -1,66 +0,0 @@
-<template>
-  <v-navigation-drawer
-    id="sidebar"
-    v-model="visible"
-    app
-    right
-    disable-resize-watcher
-    width="220"
-  >
-    <div id="sidebar__children">
-      <div class="top" />
-      <div class="bottom" />
-    </div>
-  </v-navigation-drawer>
-</template>
-
-<script>
-import { Component, Vue } from '@a-vue'
-
-@Component({
-  props: []
-})
-export default class Sidebar extends Vue {
-  visible = false
-
-  mounted () {
-    this.mutationWatcher = new MutationObserver(this.domChanged)
-    this.mutationWatcher.observe(this.$el.querySelector('#sidebar__children > .top'), { childList: true })
-    this.mutationWatcher.observe(this.$el.querySelector('#sidebar__children > .bottom'), { childList: true })
-
-    this.domChanged()
-  }
-
-  domChanged () {
-    this.visible = this.hasSidebarItems()
-  }
-
-  getChildrenContainer () {
-    return this.$el.querySelector('#sidebar__children')
-  }
-
-  hasSidebarItems () {
-    return !!(this.$el.querySelector('#sidebar__children .top').children.length +
-      this.$el.querySelector('#sidebar__children .bottom').children.length)
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-#sidebar {
-  &__children {
-    width: 100%;
-  }
-}
-
-#sidebar__children {
-  height: 100%;
-  padding: 2rem;
-  // padding-left: 4rem;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-</style>

package/src-admin/components/SidebarItem.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="sidebarItem">
-    <div :class="contextId">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import { Component, Vue } from '@a-vue'
-import { randomCssClass } from '@a-vue/utils/random'
-
-@Component({
-  props: [
-    {
-      top: true,
-      bottom: false
-    }
-  ]
-})
-export default class SidebarItem extends Vue {
-  contextId = randomCssClass(10)
-
-  mounted () {
-    const container = this.getSidebarContainer()
-    console.log(container)
-    container.appendChild(this.getContent())
-  }
-
-  destroyed () {
-    const container = this.getSidebarContainer()
-    const el = this.getContent()
-    if (container.contains(el)) {
-      container.removeChild(el)
-    }
-  }
-
-  getContent () {
-    return document.querySelector('.' + this.contextId)
-  }
-
-  getSidebarContainer () {
-    console.log('toporbottom', this.$props)
-    return document.querySelector('#sidebar__children > .' + this.position)
-  }
-
-  get position () {
-    if (this.bottom) {
-      return 'bottom'
-    } else {
-      return 'top'
-    }
-  }
-}
-</script>
-
-
-<style lang="scss" scoped>
-</style>