@afeefa/vue-app 0.0.65 → 0.0.68

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

@@ -1 +1 @@
-0.0.65
+0.0.68

package/package.json

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

package/src/api-resources/SaveAction.js

@@ -1,3 +1,6 @@
+import { AlertEvent } from '@a-vue/events'
+import { eventBus } from '@a-vue/plugins/event-bus/EventBus'
+
 import { ApiAction } from './ApiAction'
 
 export class SaveAction extends ApiAction {
@@ -12,4 +15,12 @@ export class SaveAction extends ApiAction {
 
     this.alert('Die Daten wurden gespeichert.')
   }
+
+  processError (result) {
+    eventBus.dispatch(new AlertEvent(AlertEvent.ERROR, {
+      headline: 'Die Daten konntent nicht gespeichert werden.',
+      message: result.message,
+      detail: result.detail
+    }))
+  }
 }

package/src/components/ABreadcrumbs.vue

@@ -1,19 +1,38 @@
 <template>
-  <div class="d-flex flex-wrap align-center">
-    <div
-      v-for="(breadcrumb, index) in breadcrumbs"
-      :key="index"
-      class="item mr-2 d-flex align-center"
-    >
-      <v-icon>$chevronRightIcon</v-icon>
-
-      <router-link
-        :to="breadcrumb.to"
-        :exact="true"
+  <div class="a-breadcrumbs d-flex align-start gap-2 mr-4">
+    <div :class="['breadcrumbs d-flex align-center', {'flex-wrap': wrapBreadcrumbs_}]">
+      <div
+        v-for="(breadcrumb, index) in breadcrumbs"
+        :key="index"
+        class="item mr-2 d-flex align-center"
       >
-        {{ getItemTitle(breadcrumb.title) }}
-      </router-link>
+        <v-icon v-if="index > 0">
+          $chevronRightIcon
+        </v-icon>
+
+        <router-link
+          :to="breadcrumb.to"
+          :exact="true"
+        >
+          {{ breadcrumb.title }}
+        </router-link>
+      </div>
     </div>
+
+    <v-avatar
+      v-if="expandVisible"
+      class="expand"
+      color="#EEE"
+      size="1.3rem"
+      @click="wrapBreadcrumbs"
+    >
+      <a-icon>$caret{{ wrapBreadcrumbs_ ? 'Up' : 'Down' }}Icon</a-icon>
+    </v-avatar>
+
+    <div
+      v-else
+      class="expandDummy"
+    />
   </div>
 </template>
 
@@ -28,6 +47,8 @@ export default class ABreadcrumbs extends Vue {
   breadcrumbs = []
   titleCache = {}
   lastRoute = null
+  expandVisible = false
+  wrapBreadcrumbs_ = false
 
   created () {
     this.$events.on(SaveEvent.STOP_SAVING, this.afterSave)
@@ -101,21 +122,46 @@ export default class ABreadcrumbs extends Vue {
     }
 
     this.breadcrumbs = breadcrumbs
+    this.wrapBreadcrumbs_ = false
+
+    this.scrollBreadcrumbs()
+  }
+
+  scrollBreadcrumbs () {
+    this.$nextTick(() => {
+      const objDiv = this.$el.querySelector('.breadcrumbs')
+      if (objDiv.scrollWidth > objDiv.offsetWidth) {
+        objDiv.scrollLeft = objDiv.scrollWidth
+        this.expandVisible = true
+      } else {
+        objDiv.scrollLeft = 0
+        this.expandVisible = false
+      }
+    })
   }
 
-  getItemTitle (title) {
-    // title = title.concat(title).concat(title)
-    if (title.length > 20) {
-      // title = title.slice(0, 10).trim() + '...' + title.slice(-10).trim()
+  wrapBreadcrumbs () {
+    this.wrapBreadcrumbs_ = !this.wrapBreadcrumbs_
+    if (this.wrapBreadcrumbs_) {
+      const objDiv = this.$el.querySelector('.breadcrumbs')
+      objDiv.scrollLeft = 0
+    } else {
+      this.scrollBreadcrumbs()
     }
-    return title
-    // return title.toUpperCase()
   }
 }
 </script>
 
 
 <style lang="scss" scoped>
+.a-breadcrumbs {
+  overflow: hidden;
+}
+
+.breadcrumbs {
+  overflow: hidden;
+}
+
 .item {
   white-space: nowrap;
 
@@ -131,4 +177,14 @@ export default class ABreadcrumbs extends Vue {
     }
   }
 }
+
+.expand {
+  cursor: pointer;
+  margin-top: 1px;
+}
+
+.expandDummy {
+  width: 1.5rem;
+  height: 1.5rem;
+}
 </style>

package/src/components/ADatePicker.vue

@@ -13,7 +13,7 @@
         :label="label"
         :style="cwm_widthStyle"
         readonly
-        v-bind="attrs"
+        v-bind="{...$attrs, ...attrs}"
         :rules="validationRules"
         v-on="on"
         @click.native="on.click"

package/src/components/AIcon.vue

@@ -1,6 +1,6 @@
 <template>
   <v-icon
-    :class="{isButton}"
+    :class="{button}"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -13,17 +13,14 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['button']
+  props: [{button: false}]
 })
 export default class AIcon extends Vue {
-  get isButton () {
-    return this.button !== undefined
-  }
 }
 </script>
 
 <style lang="scss" scoped>
-.v-icon:not(.isButton)::after {
+.v-icon:not(.button)::after {
   background: none;
 }
 </style>

package/src/components/AIconButton.vue

@@ -1,12 +1,11 @@
 <template>
   <v-btn
-    small
     v-bind="$attrs"
     v-on="$listeners"
   >
     <v-icon
       left
-      class="mr-0"
+      class="mr-1"
     >
       {{ icon }}
     </v-icon>

package/src/components/ARow.vue

@@ -58,13 +58,6 @@ export default class ARow extends Vue {
 <style scoped lang="scss">
 .a-row {
   display: flex;
-  overflow: hidden;
-  @media (max-width: 900px), (orientation : portrait) {
-    flex-wrap: wrap;
-    & > * {
-      flex: 0 0 auto;
-    }
-  }
 
   &.full {
     width: 100%;

package/src/components/ATextField.vue

@@ -20,7 +20,7 @@ import { debounce } from '@a-vue/utils/debounce'
 import { ComponentWidthMixin } from './mixins/ComponentWidthMixin'
 
 @Component({
-  props: ['focus', 'debounce', 'validator', 'password']
+  props: ['focus', 'debounce', 'validator', {password: false, number: false}]
 })
 export default class ATextField extends Mixins(ComponentWidthMixin) {
   showPassword = false
@@ -58,21 +58,21 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
   }
 
   get type () {
-    if (this.password !== undefined && !this.showPassword) {
+    if (this.password && !this.showPassword) {
       return 'password'
     }
     return 'text'
   }
 
   get appendIcon () {
-    if (this.password !== undefined) {
+    if (this.password) {
       return this.showPassword ? '$eyeIcon' : '$eyeOffIcon'
     }
     return null
   }
 
   get autocomplete () {
-    if (this.password !== undefined) {
+    if (this.password) {
       return 'new-password'
     }
     return null
@@ -87,7 +87,8 @@ export default class ATextField extends Mixins(ComponentWidthMixin) {
     if (!this.validator) {
       return false
     }
-    return this.validator.getParams().max || false
+
+    return (!this.number && this.validator.getParams().max) || false
   }
 }
 </script>

package/src/components/form/FormFieldMixin.js

@@ -70,10 +70,19 @@ export class FormFieldMixin extends Vue {
 
     if (field.hasOptions()) {
       const options = field.getOptions()
-      return Object.keys(options).map(value => ({
-        itemText: options[value],
-        itemValue: value
-      }))
+      return options.map((value, index) => {
+        if (typeof value === 'object') { // object option
+          return {
+            itemText: value.title,
+            itemValue: value.value
+          }
+        } else { // scalar option
+          return {
+            itemText: value,
+            itemValue: index
+          }
+        }
+      })
     }
   }
 

package/src/components/form/fields/FormFieldText.vue

@@ -1,9 +1,11 @@
 <template>
   <a-text-field
-    v-model="model[name]"
+    :value="internalValue"
     :label="label || name"
     :validator="validator"
     v-bind="$attrs"
+    @input="textFieldValueChanged"
+    @blur="onBlur"
   />
 </template>
 
@@ -11,7 +13,70 @@
 import { Component, Mixins } from '@a-vue'
 import { FormFieldMixin } from '../FormFieldMixin'
 
-@Component
+@Component({
+  props: [{emptyNull: false}]
+})
 export default class FormFieldText extends Mixins(FormFieldMixin) {
+  internalValue = ''
+
+  created () {
+    this.setInternalValue(this.model[this.name])
+    this.$watch(() => this.model[this.name], value => {
+      this.setInternalValue(value)
+    })
+  }
+
+  onBlur () {
+    this.setInternalValue(this.model[this.name], true)
+  }
+
+  textFieldValueChanged (value) {
+    this.internalValue = value
+
+    // cast to number
+    if (this.isNumber) {
+      value = Number(value)
+      if (isNaN(value)) {
+        return // do not set anything to the model
+      }
+    }
+
+    // set model value to null if empty
+    if (this.emptyNull) {
+      if (this.isNumber) {
+        if (value === 0) {
+          value = null
+        }
+      } else {
+        if (!value) {
+          value = null
+        }
+      }
+    }
+
+    this.model[this.name] = value
+  }
+
+  setInternalValue (value, reset = false) {
+    if (this.isNumber) {
+      // reset text field if value is null but keep leading 0 (allows for copy and paste)
+      if (value === null) {
+        if (!reset && this.internalValue === '0') {
+          value = '0'
+        } else {
+          value = ''
+        }
+      }
+    } else { // null string should be ''
+      if (!value) {
+        value = ''
+      }
+    }
+    this.internalValue = value
+  }
+
+  get isNumber () {
+    return this.$attrs.number === ''
+  }
 }
 </script>

package/src/components/list/ListViewMixin.js

@@ -11,6 +11,7 @@ import { FilterSourceType } from './FilterSourceType'
     'listAction',
     'filterHistoryKey',
     'loadOnlyIfKeyword',
+    'checkBeforeLoad',
     {
       filterSource: FilterSourceType.QUERY_STRING,
       events: true,
@@ -120,6 +121,16 @@ export class ListViewMixin extends Vue {
   }
 
   async load () {
+    if (this.checkBeforeLoad) {
+      const canLoad = await this.checkBeforeLoad()
+      if (!canLoad) {
+        if (this.meta_.used_filters) {
+          this.listViewModel.initFromUsedFilters(this.meta_.used_filters, this.meta_.count_search)
+        }
+        return
+      }
+    }
+
     if (this._loadOnlyIfKeyword && !this.filters.q.value) {
       this.models_ = []
       this.meta_ = {}

package/src/components/mixins/ClickOutsideMixin.js

@@ -25,10 +25,14 @@ export class ClickOutsideMixin extends Vue {
     // popup clicked
     const thisIndex = getZIndex(this.$el)
     const targetIndex = getZIndex(e.target)
-    if (targetIndex > thisIndex) {
+    if (targetIndex > 10 && targetIndex > thisIndex) { // sidebar === 6
       return
     }
 
+    this.com_onClickOutside()
     this.$emit('click:outside')
   }
+
+  com_onClickOutside () {
+  }
 }

package/src-admin/components/App.vue

@@ -73,78 +73,46 @@
       </v-container>
     </v-navigation-drawer>
 
-    <v-navigation-drawer
-      v-if="false"
-      app
-      clipped
-      right
-    >
-      <v-list>
-        <v-list-item
-          v-for="n in 5"
-          :key="n"
-          link
-        >
-          <v-list-item-content>
-            <v-list-item-title>Item {{ n }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-app-bar
-      v-if="false"
-      app
-      flat
-      dense
-      color="#FAFAFA"
-    >
-      <div class="d-flex align-start mt-n2">
-        <v-app-bar-nav-icon
-          class="sidebarToggleButton mr-2 ml-n1"
-          @click="toggleDrawer"
-        />
-        <a-breadcrumbs class="mt-2" />
-      </div>
-
-      <a-loading-indicator
-        fixed
-        top
-        left
-        class="loadingIndicator"
-        :isLoading="isLoading"
-        :color="loaderColor"
-      />
-    </v-app-bar>
+    <a-loading-indicator
+      fixed
+      top
+      left
+      class="loadingIndicator"
+      :isLoading="isLoading"
+      :color="loaderColor"
+    />
 
     <v-main id="v-main">
-      <a-row class="topbar">
+      <a-row
+        start
+        class="topbar"
+      >
         <v-app-bar-nav-icon
-          class="sidebarToggleButton mr-2 ml-n1"
+          class="sidebarToggleButton mr-2 ml-4"
           @click="toggleDrawer"
         />
+
         <a-breadcrumbs />
       </a-row>
 
       <v-container
         fluid
-        class="pa-4"
+        class="pa-8 pt-4"
       >
-        <div class="sticky-app-bar d-flex align-center">
-          <app-bar-title-container class="flex-grow-1" />
-          <app-bar-buttons class="mr-2" />
-        </div>
+        <sticky-header />
 
         <router-view :class="{isLoading}" />
       </v-container>
 
-      <sticky-footer-container v-if="true" />
+      <sticky-footer-container />
     </v-main>
 
     <a-dialog id="app" />
 
     <a-save-indicator />
 
+    <sidebar />
+
     <flying-context-container />
   </div>
 </template>
@@ -158,6 +126,8 @@ import AppBarButtons from './app/AppBarButtons'
 import AppBarTitleContainer from './app/AppBarTitleContainer'
 import FlyingContextContainer from './FlyingContextContainer'
 import StickyFooterContainer from './StickyFooterContainer'
+import Sidebar from './Sidebar'
+import StickyHeader from './StickyHeader'
 import '../styles.scss'
 
 @Component({
@@ -165,12 +135,13 @@ import '../styles.scss'
     AppBarButtons,
     AppBarTitleContainer,
     FlyingContextContainer,
-    StickyFooterContainer
+    StickyFooterContainer,
+    Sidebar,
+    StickyHeader
   }
 })
 export default class App extends Vue {
   drawer = true
-  mainDrawer = false
   isLoading = false
   account = null
 
@@ -185,17 +156,6 @@ export default class App extends Vue {
     this.$emit('appLoaded')
   }
 
-  mounted () {
-    const el = document.querySelector('.sticky-app-bar')
-    const observer = new IntersectionObserver(
-      ([e]) => {
-        e.target.classList.toggle('is-pinned', e.intersectionRatio < 1)
-      },
-      { threshold: [1] }
-    )
-    observer.observe(el)
-  }
-
   get SidebarMenu () {
     return appConfig.components.SidebarMenu
   }
@@ -228,16 +188,6 @@ export default class App extends Vue {
     this.drawer = !this.drawer
   }
 
-  @Watch('drawer')
-  async drawerChanged () {
-    if (this.drawer) {
-      this.mainDrawer = false
-    } else {
-      await sleep(0.1)
-      this.mainDrawer = true
-    }
-  }
-
   get hasAuthService () {
     return !!appConfig.authService
   }
@@ -281,16 +231,16 @@ export default class App extends Vue {
   top: 0;
   padding: .2rem 1rem;
 }
-.sticky-app-bar {
-  position: sticky;
-  top: -1px;
-  margin: -1rem -1rem 0;
-  padding: 1rem;
-
-  &.is-pinned {
-    background: white;
-    z-index: 2;
-    box-shadow: 0 4px 7px -4px #00000033;
-  }
+
+.a-breadcrumbs {
+  margin-top: 7px;
+}
+
+.menubar {
+  // background: #666666 !important;
+}
+
+#sidebar {
+  // background: #F4F4F4 !important;
 }
 </style>

package/src-admin/components/Sidebar.vue

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,59 @@
+<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>

package/src-admin/components/StickyHeader.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    id="stickyHeader"
+    :class="['d-flex align-center gap-8', {visible}]"
+  >
+    <app-bar-title-container class="appBarTitle flex-grow-1" />
+    <app-bar-buttons class="appBarButtons mr-2" />
+  </div>
+</template>
+
+<script>
+import { Component, Vue } from '@a-vue'
+import AppBarButtons from './app/AppBarButtons'
+import AppBarTitleContainer from './app/AppBarTitleContainer'
+
+@Component({
+  components: {
+    AppBarButtons,
+    AppBarTitleContainer
+  }
+})
+export default class StickyHeader extends Vue {
+  visible = false
+
+  mounted () {
+    // watch mutation
+    this.mutationWatcher = new MutationObserver(this.domChanged)
+    this.mutationWatcher.observe(this.$el.querySelector('.appBarTitle'), { childList: true })
+    this.mutationWatcher.observe(this.$el.querySelector('.appBarButtons'), { childList: true })
+
+    // watch intersection
+    const el = document.querySelector('#stickyHeader')
+    const observer = new IntersectionObserver(
+      ([e]) => {
+        e.target.classList.toggle('is-pinned', e.intersectionRatio < 1)
+      },
+      { threshold: [1] }
+    )
+    observer.observe(el)
+
+    this.domChanged()
+  }
+
+  domChanged () {
+    this.visible = this.hasItems()
+  }
+
+  hasItems () {
+    return !!(this.$el.querySelector('.appBarTitle').children.length +
+      this.$el.querySelector('.appBarButtons').children.length)
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+#stickyHeader {
+  position: sticky;
+  top: -1px;
+  margin: -1rem -2rem 2rem;
+  padding: 1rem 2rem;
+
+  &:not(.visible) {
+    display: none !important;
+  }
+
+  &.is-pinned {
+    background: white;
+    z-index: 2;
+    box-shadow: 0 4px 7px -4px #00000033;
+  }
+}
+</style>

package/src-admin/components/app/AppBarButtons.vue

@@ -12,10 +12,3 @@ import { Component, Vue } from '@a-vue'
 export default class AppBarButtons extends Vue {
 }
 </script>
-
-
-<style lang="scss" scoped>
-#appBarButtons:empty {
-  display: none !important;
-}
-</style>

package/src-admin/components/app/AppBarTitle.vue

@@ -1,13 +1,36 @@
 <template>
-  <div class="d-flex align-center">
-    <v-icon
-      class="mr-2"
-      :color="icon.color"
-      size="1.8rem"
-      v-text="icon.icon"
-    />
-
-    <h2>{{ title }}</h2>
+  <div class="d-flex align-center gap-4">
+    <v-btn
+      v-if="back"
+      fab
+      x-small
+      color="#F4F4F4"
+      title="Zurück"
+      class="mr-n2"
+      @click="$router.push(back)"
+    >
+      <v-icon>
+        $arrowLeftIcon
+      </v-icon>
+    </v-btn>
+
+    <v-avatar
+      color="#F4F4F4"
+      size="3rem"
+    >
+      <v-icon
+        :color="icon.color"
+        size="2.2rem"
+        v-text="icon.icon"
+      />
+    </v-avatar>
+
+    <div class="titleContainer">
+      <h3 v-if="subtitle">
+        {{ subtitle }}
+      </h3>
+      <h2>{{ title }}</h2>
+    </div>
   </div>
 </template>
 
@@ -15,7 +38,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['icon', 'title']
+  props: ['back', 'icon', 'title', 'subtitle']
 })
 export default class appBarTitle extends Vue {
   mounted () {
@@ -41,8 +64,29 @@ export default class appBarTitle extends Vue {
 
 
 <style lang="scss" scoped>
+.titleContainer {
+  overflow: hidden;
+  margin-top: -.2rem;
+}
+
+h3 {
+  font-size: .9rem;
+  font-weight: normal;
+  margin-bottom: .1rem;
+  line-height: 1rem;
+  color: #999999;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 h2 {
-  // white-space: nowrap;
+  font-size: 1.5rem;
   line-height: 1.5rem;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>

package/src-admin/components/app/AppBarTitleContainer.vue

@@ -11,9 +11,8 @@ export default class AppBarTitleContainer extends Vue {
 }
 </script>
 
-
 <style lang="scss" scoped>
-#appBarTitleContainer:empty {
-  display: none;
+#appBarTitleContainer {
+  min-width: 0; // https://stackoverflow.com/questions/38657688/text-overflow-ellipsis-not-working-in-a-nested-flex-container
 }
 </style>

package/src-admin/components/controls/SearchSelectFormField.vue

@@ -68,6 +68,7 @@
     >
       <template #activator>
         <a-icon-button
+          small
           icon="$plusIcon"
           :text="selectableConfig.addButtonTitle || 'Hinzufügen'"
           class="mt-4"

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

@@ -1,17 +1,23 @@
 <template>
   <div class="detailProperty">
     <div class="header">
-      <v-icon
+      <v-avatar
         v-if="_icon"
-        :color="_icon.color"
-        size="2rem"
+        color="#EEEEEE"
+        size="2.5rem"
       >
-        {{ _icon.icon }}
-      </v-icon>
-      <label :class="['label', {'label--withIcon': _icon != null}]">{{ label }}</label>
+        <v-icon
+          :color="_icon.color"
+          size="1.5rem"
+        >
+          {{ _icon.icon }}
+        </v-icon>
+      </v-avatar>
+
+      <label :class="['label', {'label--withIcon': !!_icon}]">{{ label }}</label>
     </div>
 
-    <div :class="['content', {'content--withIcon': _icon != null}]">
+    <div :class="['content', {'content--withIcon': !!_icon}]">
       <a-row
         vertical
         gap="6"
@@ -52,29 +58,27 @@ export default class DetailProperty extends Vue {
     flex-wrap: nowrap;
     align-items: center;
     height: 40px;
-    .v-icon {
+
+    .v-avatar {
       flex: 0 0 40px;
       margin-right: 15px;
     }
+
     .label {
       display: block;
       text-transform: uppercase;
       letter-spacing: 2px;
-      @media (max-width: 900px), (orientation : portrait) {
-        padding-left: 55px;
-        &--withIcon {
-          padding-left: 0;
-        }
+      padding-left: 55px;
+      &--withIcon {
+        padding-left: 0;
       }
     }
   }
   .content {
+    padding-left: 55px;
     &--withIcon {
       padding-left: 55px;
     }
-    @media (max-width: 900px), (orientation : portrait) {
-      padding-left: 55px;
-    }
   }
 }
 </style>

package/src-admin/components/form/EditFormButtons.vue

@@ -1,20 +1,27 @@
 <template>
   <a-row
-    gap="2"
+    gap="1"
     v-bind="$attrs"
   >
     <v-btn
-      :small="small"
+      fab
+      small
       :disabled="($has.reset && !changed) || !valid"
       color="green white--text"
+      title="Speichern"
       @click="$emit('save')"
     >
-      Speichern
+      <v-icon>
+        $checkIcon
+      </v-icon>
     </v-btn>
 
     <v-icon
       v-if="$has.reset && changed"
       :small="small"
+      :class="{disabled: !changed}"
+      :disabled="!changed"
+      color="#999999"
       text
       title="Formular zurücksetzen"
       @click="$emit('reset')"
@@ -32,7 +39,7 @@ import { mdiRotateLeft} from '@mdi/js'
   props: [
     'changed',
     'valid',
-    'small'
+    {small: false}
   ]
 })
 export default class EditFormButtons extends Vue {
@@ -41,3 +48,10 @@ export default class EditFormButtons extends Vue {
   undoIcon = mdiRotateLeft
 }
 </script>
+
+
+<style lang="scss" scoped>
+.v-icon--disabled {
+  opacity: .3;
+}
+</style>

package/src-admin/components/form/RemoveButton.vue

@@ -1,13 +1,22 @@
 <template>
   <div>
-    <a-icon-button
-      small
-      color="red white--text"
-      :class="'removeButton-' + dialogId"
-      icon="$trashCanIcon"
-      text="Löschen"
-      @click="remove"
-    />
+    <v-hover v-slot="{ hover }">
+      <v-btn
+        :class="'removeButton-' + dialogId"
+        fab
+        small
+        :color="(hover ? 'red' : 'grey lighten-3')"
+        title="Löschen"
+        @click="remove"
+      >
+        <v-icon
+          :color="hover ? 'white' : '#999999'"
+          size="1.4rem"
+        >
+          $trashCanIcon
+        </v-icon>
+      </v-btn>
+    </v-hover>
 
     <a-dialog
       :id="dialogId"

package/src-admin/components/index.js

@@ -19,6 +19,7 @@ import ListView from './list/ListView'
 import ModelCount from './model/ModelCount'
 import ModelIcon from './model/ModelIcon'
 import EditPage from './pages/EditPage'
+import SidebarItem from './SidebarItem.vue'
 import Start from './Start.vue'
 import StickyFooter from './StickyFooter.vue'
 
@@ -48,3 +49,4 @@ Vue.component('AppBarTitle', AppBarTitle)
 Vue.component('Start', Start)
 Vue.component('FlyingContext', FlyingContext)
 Vue.component('StickyFooter', StickyFooter)
+Vue.component('SidebarItem', SidebarItem)

package/src-admin/components/pages/EditPage.vue

@@ -12,7 +12,7 @@
         :valid="valid"
       />
 
-      <sticky-footer>
+      <app-bar-button>
         <edit-form-buttons
           :changed="changed"
           :valid="valid"
@@ -20,7 +20,7 @@
           @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
           @reset="$refs.form.reset()"
         />
-      </sticky-footer>
+      </app-bar-button>
     </template>
   </edit-form>
 </template>

package/src-admin/config/vuetify.js

@@ -1,5 +1,6 @@
 import {
   mdiAlarmLightOutline,
+  mdiArrowLeft,
   mdiCalendar,
   mdiCheck,
   mdiCheckBold,
@@ -12,9 +13,15 @@ import {
   mdiLock,
   mdiLogoutVariant,
   mdiMagnify,
+  mdiMenuDown,
+  mdiMenuUp,
   mdiPencil,
   mdiPlus,
-  mdiThumbUpOutline
+  mdiThumbUpOutline,
+  mdiAccountGroup,
+  mdiShopping,
+  mdiMessage,
+  mdiPencilBoxMultiple
 } from '@mdi/js'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
@@ -40,7 +47,14 @@ export default new Vuetify({
       searchIcon: mdiMagnify,
       lockIcon: mdiLock,
       checkIcon: mdiCheck,
-      checkBoldIcon: mdiCheckBold
+      checkBoldIcon: mdiCheckBold,
+      arrowLeftIcon: mdiArrowLeft,
+      caretDownIcon: mdiMenuDown,
+      caretUpIcon: mdiMenuUp,
+      householdMembers: mdiAccountGroup,
+      shop: mdiShopping,
+      annotation: mdiMessage,
+      duplicates: mdiPencilBoxMultiple
     }
   },
   breakpoint: {

package/src-admin/styles.scss

@@ -32,6 +32,26 @@
   background-color: #E9E9E9;
 }
 
+.theme--light.v-btn.v-btn--disabled,
+.theme--light.v-btn.v-btn--disabled .v-icon,
+.theme--light.v-btn.v-btn--disabled .v-btn__loading {
+  color: white !important;
+}
+
+.theme--light.v-btn.v-btn--disabled.v-btn--has-bg {
+  background-color: #EEEEEE !important;
+}
+
+.v-btn {
+  box-shadow: none !important;
+}
+
+// @for $i from 1 through 10 {
+//   .gap-{$i} {
+//     gap: 0.25rem * $i;
+//   }
+// }
+
 .gap-0 {
   gap: 0;
 }