@afeefa/vue-app 0.0.70 → 0.0.73

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

@@ -1 +1 @@
-0.0.70
+0.0.73

package/package.json

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

package/src/components/APagination.vue

@@ -41,6 +41,7 @@ export default class APagination extends Vue {
     margin: 0;
     width: 28px;
     height: 28px;
+    white-space: nowrap;
   }
 }
 </style>

package/src/components/ATableHeader.vue

@@ -74,5 +74,9 @@ export default class ATableHeader extends Vue {
       }
     }
   }
+
+  [class*=text-] {
+    color: inherit;
+  }
 }
 </style>

package/src/components/ATableRow.vue

@@ -84,5 +84,9 @@ export default class ATableRow extends Vue {
       }
     }
   }
+
+  [class*=text-] {
+    color: inherit;
+  }
 }
 </style>

package/src/components/form/EditForm.vue

@@ -8,6 +8,7 @@
       :changed="changed"
       :valid="valid"
       :modelToEdit="modelToEdit"
+      :model="model"
     />
   </v-form>
 </template>

package/src-admin/components/FlyingContext.vue

@@ -35,12 +35,17 @@ export default class FlyingContext extends Vue {
     }
 
     this.isVisible = this.show
+    const el = this.getContent()
+
+    if (!el) {
+      return // hmr reload removes dom element but keeps this instance
+    }
 
     if (this.isVisible) {
       const container = this.getSidebarContainer()
-      container.appendChild(this.getContent())
+      container.appendChild(el)
     } else {
-      this.$el.appendChild(this.getContent())
+      this.$el.appendChild(el)
     }
   }
 

package/src-admin/components/FlyingContextContainer.vue

@@ -3,15 +3,24 @@
     id="flyingContextContainer"
     :class="{visible}"
   >
-    <a
-      href=""
-      @click.prevent="hide"
-    >close</a>
-
-    <br>
-    <br>
+    <div class="closeButton">
+      <v-btn
+        fab
+        x-small
+        color="gray"
+        target="_blank"
+        title="Schließen"
+        @click.prevent="hide"
+      >
+        <v-icon>
+          $closeIcon
+        </v-icon>
+      </v-btn>
+    </div>
 
     <div id="flyingContextContainer__children" />
+
+    <div class="v-navigation-drawer__border" />
   </div>
 </template>
 
@@ -71,15 +80,24 @@ export default class FlyingContextContainer extends Vue {
   position: fixed;
   z-index: 200;
   right: 0;
-  width: 60vw;
-  height: 80vh;
-  top: 10vh;
-  background: rgba($color: white, $alpha: .6);
-  border: 1px solid black;
+  width: 50vw;
+  height: 100%;
+  top: 0;
+  background: white;
   transition: right .2s;
+  padding: 2rem;
 
   &:not(.visible) {
     right: -80vw;
   }
+
+  .v-navigation-drawer__border {
+     background-color: rgba(0, 0, 0, .12);
+     left: 0;
+  }
+
+  .closeButton {
+    margin: -1rem 0 2rem -1rem;
+  }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="project-buttons gap-3">
     <slot />
   </div>
 </template>
@@ -39,3 +39,10 @@ export default class AppBarButton extends Vue {
   }
 }
 </script>
+
+<style scoped>
+.project-buttons {
+  display: flex;
+  align-items: center;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex align-center gap-4">
+  <a-row gap="4">
     <v-btn
       v-if="back"
       fab
@@ -31,7 +31,7 @@
       </h3>
       <h2>{{ title }}</h2>
     </div>
-  </div>
+  </a-row>
 </template>
 
 <script>
@@ -83,7 +83,7 @@ h3 {
 
 h2 {
   font-size: 1.5rem;
-  line-height: 1.5rem;
+  line-height: 1.7rem;
 
   white-space: nowrap;
   overflow: hidden;

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

@@ -16,18 +16,21 @@
       </v-icon>
     </v-btn>
 
-    <v-icon
+    <v-hover
       v-if="$has.reset && changed"
-      :small="small"
-      :class="{disabled: !changed}"
-      :disabled="!changed"
-      color="#999999"
-      text
-      title="Formular zurücksetzen"
-      @click="$emit('reset')"
+      v-slot="{ hover }"
     >
-      {{ undoIcon }}
-    </v-icon>
+      <v-icon
+        :small="small"
+        :class="{disabled: !changed}"
+        :color="hover ? '#666666' : '#999999'"
+        text
+        title="Formular zurücksetzen"
+        @click="$emit('reset')"
+      >
+        {{ undoIcon }}
+      </v-icon>
+    </v-hover>
   </a-row>
 </template>
 

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

@@ -4,15 +4,12 @@
       <v-btn
         :class="'removeButton-' + dialogId"
         fab
-        small
+        x-small
         :color="(hover ? 'red' : 'grey lighten-3')"
         title="Löschen"
         @click="remove"
       >
-        <v-icon
-          :color="hover ? 'white' : '#999999'"
-          size="1.4rem"
-        >
+        <v-icon :color="hover ? 'white' : '#999999'">
           $trashCanIcon
         </v-icon>
       </v-btn>

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

@@ -5,10 +5,27 @@
       @click="toggleSort"
     >
       <div
+        v-if="!icon"
         :class="['text', {active}]"
         v-html="text"
       />
 
+      <v-tooltip
+        v-else
+        bottom
+      >
+        <template #activator="{ on, attrs }">
+          <v-icon
+            :class="['mt-n1', {active}]"
+            v-bind="attrs"
+            v-on="on"
+          >
+            {{ icon }}
+          </v-icon>
+        </template>
+        <span>{{ text }}</span>
+      </v-tooltip>
+
       <svg
         v-if="order"
         :class="['sortIcon', direction, {active}]"
@@ -25,7 +42,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['text', 'order']
+  props: ['text', 'icon', 'order']
 })
 export default class ListColumnHeader extends Vue {
   get orderValue () {
@@ -92,6 +109,14 @@ export default class ListColumnHeader extends Vue {
   }
 }
 
+::v-deep .v-icon {
+  color: #AAAAAA !important;
+
+  &.active {
+    color: #666666 !important;
+  }
+}
+
 .text.active {
   color: #333333;
 }

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

@@ -36,7 +36,7 @@
             :class="{selectable: hasFlyingContext}"
             v-bind="getRowAttributes(model)"
             v-on="getRowListeners(model)"
-            @click="$emit('flyingContext', model)"
+            @click="emitFlyingContext(model)"
           >
             <v-icon
               v-if="$has.icon"
@@ -113,6 +113,14 @@ export default class ListView extends Mixins(ListViewMixin) {
   get hasFlyingContext () {
     return !!this.$listeners.flyingContext
   }
+
+  emitFlyingContext (model) {
+    if (window.getSelection().toString()) { // do not open if text selected
+      console.log(window.getSelection().toString())
+      return
+    }
+    this.$emit('flyingContext', model)
+  }
 }
 </script>
 

package/src-admin/components/model/ModelIcon.vue

@@ -1,8 +1,9 @@
 <template>
   <v-icon
     class="modelIcon"
-    :color="color"
+    :color="_color"
     v-bind="$attrs"
+    v-on="$listeners"
     v-text="icon"
   />
 </template>
@@ -11,7 +12,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['model', 'modelClass']
+  props: ['model', 'modelClass', 'color']
 })
 export default class ModelIcon extends Vue {
   get icon () {
@@ -22,7 +23,11 @@ export default class ModelIcon extends Vue {
     }
   }
 
-  get color () {
+  get _color () {
+    if (this.color) {
+      return this.color
+    }
+
     if (this.model) {
       return this.model.getIcon().color
     } else {

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

@@ -1,28 +1,35 @@
 <template>
-  <edit-form
-    ref="form"
-    :model="model"
-    :createModelToEdit="createModelToEdit"
-  >
-    <template #form="{modelToEdit, changed, valid}">
-      <slot
-        name="form"
-        :modelToEdit="modelToEdit"
-        :changed="changed"
-        :valid="valid"
-      />
+  <div>
+    <slot name="before-form" />
 
-      <app-bar-button>
-        <edit-form-buttons
+    <edit-form
+      ref="form"
+      :model="model"
+      :createModelToEdit="createModelToEdit"
+    >
+      <template #form="{modelToEdit, model, changed, valid}">
+        <slot
+          name="form"
+          :modelToEdit="modelToEdit"
+          :model="model"
           :changed="changed"
           :valid="valid"
-          :has="{reset: !!modelToEdit.id}"
-          @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
-          @reset="$refs.form.reset()"
         />
-      </app-bar-button>
-    </template>
-  </edit-form>
+
+        <app-bar-button>
+          <edit-form-buttons
+            :changed="changed"
+            :valid="valid"
+            :has="{reset: !!modelToEdit.id}"
+            @save="$emit('save', modelToEdit, ignoreChangesOnRouteChange)"
+            @reset="$refs.form.reset()"
+          />
+        </app-bar-button>
+      </template>
+    </edit-form>
+
+    <slot name="after-form" />
+  </div>
 </template>
 
 <script>

package/src-admin/config/vuetify.js

@@ -17,11 +17,8 @@ import {
   mdiMenuUp,
   mdiPencil,
   mdiPlus,
-  mdiThumbUpOutline,
-  mdiAccountGroup,
-  mdiShopping,
-  mdiMessage,
-  mdiPencilBoxMultiple
+  mdiPrinter,
+  mdiThumbUpOutline
 } from '@mdi/js'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
@@ -51,10 +48,7 @@ export default new Vuetify({
       arrowLeftIcon: mdiArrowLeft,
       caretDownIcon: mdiMenuDown,
       caretUpIcon: mdiMenuUp,
-      householdMembers: mdiAccountGroup,
-      shop: mdiShopping,
-      annotation: mdiMessage,
-      duplicates: mdiPencilBoxMultiple
+      printerIcon: mdiPrinter
     }
   },
   breakpoint: {