@afeefa/vue-app 0.0.174 → 0.0.175

package/.afeefa/package/release/version.txt

@@ -1 +1 @@
-0.0.174
+0.0.175

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@afeefa/vue-app",
-  "version": "0.0.174",
+  "version": "0.0.175",
   "description": "",
   "author": "Afeefa Kollektiv <kollektiv@afeefa.de>",
   "license": "MIT",

package/src/components/AInfo.vue

@@ -24,6 +24,10 @@ export default class AInfo extends Vue {
 </script>
 
 <style lang="scss" scoped>
+:deep(.v-icon) {
+  margin-right: .4rem;
+}
+
 .xSmall {
   padding: .3rem .6rem;
   font-size: .9rem;

package/src-admin/components/DetailOrInfo.vue

@@ -0,0 +1,33 @@
+<template>
+  <information-bar-item
+    v-if="sidebar"
+    v-bind="$attrs"
+  >
+    <template #actionButton>
+      <slot name="actionButton" />
+    </template>
+
+    <slot />
+  </information-bar-item>
+
+  <detail-property
+    v-else
+    v-bind="$attrs"
+  >
+    <template #actionButton>
+      <slot name="actionButton" />
+    </template>
+
+    <slot />
+  </detail-property>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+
+@Component({
+  props: [{sidebar: false}]
+})
+export default class DetailOrInfo extends Vue {
+}
+</script>

package/src-admin/components/FlyingContextContainer.vue

@@ -46,6 +46,25 @@ export default class FlyingContextContainer extends Vue {
     sizeWatcher.observe(this.getChildrenContainer())
   }
 
+  /**
+   * park sidebar children and attach - only for use with HMR which would remove all children on destroy 234567890
+   */
+  destroyed () {
+    function moveChildren (from, to) {
+      for (const child of from.children) {
+        to.appendChild(child)
+      }
+    }
+
+    const elTmp = document.createElement('div')
+    document.body.appendChild(elTmp)
+    moveChildren(this.getChildrenContainer(), elTmp)
+
+    this.$nextTick(() => {
+      moveChildren(elTmp, document.querySelector('#flyingContextContainer__children'))
+    })
+  }
+
   getScrollbarWidth () {
     const el = document.documentElement
     const overflowY = getComputedStyle(el)['overflow-y']
@@ -157,7 +176,8 @@ export default class FlyingContextContainer extends Vue {
   transition: left .2s;
   padding: 2rem;
   overflow-y: auto;
-  box-shadow: 0 0 7px #00000033;
+  box-shadow: 0 0 17px #00000033;
+  border-left: 1px solid #DDDDDD;
 
   &:not(.visible) {
     left: 101vw;

package/src-admin/components/InformationBar.vue

@@ -53,13 +53,12 @@ export default class InformationBar extends Vue {
     this.mutationWatcher = new MutationObserver(this.domChanged)
     this.mutationWatcher.observe(this.$el.querySelector('#information-bar__children > .top'), { childList: true })
     this.mutationWatcher.observe(this.$el.querySelector('#information-bar__children > .bottom'), { childList: true })
+
     this.domChanged()
   }
 
   /**
    * park sidebar children and attach - only for use with HMR which would remove all children on destroy 234567890
-   *
-   * s
    */
   destroyed () {
     function moveChildren (from, to) {
@@ -130,6 +129,7 @@ export default class InformationBar extends Vue {
   flex: 0 0 300px;
   width: 300px;
   height: 100vh;
+  overflow-x: hidden;
   overflow-y: auto;
 
   border-left: 1px solid rgba(0, 0, 0, .12);

package/src-admin/components/StickyHeader.vue

@@ -94,6 +94,7 @@ export default class StickyHeader extends Vue {
     background: white;
     z-index: 2;
     box-shadow: 0 0 7px #00000033;
+    border-bottom: 1px solid #EEEEEE;
   }
 
   .topbar {

package/src-admin/components/detail/DetailProperty.vue

@@ -63,7 +63,6 @@ export default class DetailProperty extends Vue {
     flex-wrap: nowrap;
     align-items: center;
     height: 40px;
-    margin-bottom: .5rem;
 
     > .v-icon {
       flex: 0 0 3rem;
@@ -84,6 +83,7 @@ export default class DetailProperty extends Vue {
   }
 
   .content {
+    margin-top: .5rem;
     padding-left: 4.5rem;
   }
 }

package/src-admin/components/index.js

@@ -2,17 +2,18 @@ import Vue from 'vue'
 
 import AppBarButton from './app/AppBarButton'
 import AppBarTitle from './app/AppBarTitle'
-import CollapsibleSection from './CollapsibleSection.vue'
+import CollapsibleSection from './CollapsibleSection'
 import DetailColumn from './detail/DetailColumn'
 import DetailContent from './detail/DetailContent'
 import DetailMeta from './detail/DetailMeta'
 import DetailProperty from './detail/DetailProperty'
 import DetailTitle from './detail/DetailTitle'
-import FlyingContext from './FlyingContext.vue'
+import DetailOrInfo from './DetailOrInfo'
+import FlyingContext from './FlyingContext'
 import EditFormButtons from './form/EditFormButtons'
 import RemoveButton from './form/RemoveButton'
 import RemoveDialog from './form/RemoveDialog'
-import HSeparator from './HSeparator.vue'
+import HSeparator from './HSeparator'
 import ListCard from './list/ListCard'
 import ListColumnHeader from './list/ListColumnHeader'
 import ListContent from './list/ListContent'
@@ -22,10 +23,10 @@ import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
 import EditPage from './pages/EditPage'
-import InformationBarItem from './sidebar/InformationBarItem.vue'
-import Start from './Start.vue'
-import StickyFooter from './StickyFooter.vue'
-import CollapseTransition from './transitions/CollapseTransition.vue'
+import InformationBarItem from './sidebar/InformationBarItem'
+import Start from './Start'
+import StickyFooter from './StickyFooter'
+import CollapseTransition from './transitions/CollapseTransition'
 
 Vue.component('ListCard', ListCard)
 Vue.component('ListColumnHeader', ListColumnHeader)
@@ -59,3 +60,4 @@ Vue.component('Start', Start)
 Vue.component('FlyingContext', FlyingContext)
 Vue.component('StickyFooter', StickyFooter)
 Vue.component('InformationBarItem', InformationBarItem)
+Vue.component('DetailOrInfo', DetailOrInfo)

package/src-admin/components/list/ListView.vue

@@ -73,7 +73,7 @@
 
     <div v-else-if="!isLoading">
       <a-info type="warning">
-        <div v-if="$has.filters">
+        <div v-if="$has.filters && meta_.count_all">
           Nichts gefunden. <a
             href=""
             @click.prevent="resetFilters()"

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

@@ -4,25 +4,37 @@
       :class="['item', infoItemId, {expanded, rail}]"
       :style="{width}"
     >
-      <div
-        class="header"
-        @click="derail"
-      >
-        <v-icon
-          :color="icon.color"
-          size="2rem"
+      <a-row justify-space-between>
+        <div
+          class="header"
+          @click="derail"
         >
-          {{ icon.icon }}
-        </v-icon>
+          <v-icon
+            v-if="_icon"
+            :color="_icon.color"
+            size="2rem"
+          >
+            {{ _icon.icon }}
+          </v-icon>
 
-        <template v-if="!rail">
-          <label class="label">{{ label }}</label>
+          <div
+            v-else
+            class="iconPlaceholder"
+          />
 
-          <v-icon class="contextButton mt-n1">
-            {{ expanded ? '$caretDownIcon' : '$caretRightIcon' }}
-          </v-icon>
-        </template>
-      </div>
+          <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
@@ -50,6 +62,7 @@ import { SidebarEvent } from '@a-admin/events'
 @Component({
   props: [
     'icon',
+    'iconModelType',
     'label',
     {
       top: true,
@@ -63,9 +76,10 @@ 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, ({payload: {informationRailed}}) => this.railChanged(informationRailed))
+    this.$events.on(SidebarEvent.STATUS, this.railChanged)
   }
 
   mounted () {
@@ -79,18 +93,35 @@ export default class InformationBarItem extends Vue {
     if (container.contains(el)) {
       container.removeChild(el)
     }
+
+    this.$events.off(SidebarEvent.STATUS, this.railChanged)
   }
 
-  railChanged (rail) {
-    if (this.rail === rail) {
+  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 = rail
+    this.rail = informationRailed
 
-    if (!this.rail) {
-      this.expanded = false
+    if (!this.rail) { // derailed
+      if (!this.isCreated) { // open only the first time not after subsequent derailing
+        this.expanded = this.open
+      }
     }
+
+    this.isCreated = true
   }
 
   derail () {
@@ -172,7 +203,7 @@ export default class InformationBarItem extends Vue {
   border-top: 2px solid #EEEEEE;
   font-size: .9rem;
 
-  margin: .5rem -1.5rem;
-  padding: .5rem 1.5rem;
+  margin: .25rem -1.5rem;
+  padding: 1rem 1.5rem;
 }
 </style>

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

@@ -65,8 +65,8 @@ class SidebarService {
 
     this.information = information
 
-    if (information && this.mobile) {
-      this.informationRailed = true
+    if (information) { // rail if mobile, derail if desktop
+      this.informationRailed = this.mobile
     }
 
     eventBus.dispatch(new SidebarEvent(SidebarEvent.STATUS, new SidebarState(this)))