@afeefa/vue-app 0.0.181 → 0.0.183

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

@@ -1 +1 @@
-0.0.181
+0.0.183

package/package.json

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

package/src/components/ATab.vue

@@ -8,7 +8,7 @@
 import { Component, Vue } from '@a-vue'
 
 @Component({
-  props: ['title']
+  props: ['title', 'icon']
 })
 export default class ATab extends Vue {
   visible = false

package/src/components/ATabs.vue

@@ -8,6 +8,16 @@
           :class="['label', {selected: index === currentIndex}]"
           @click="setTab(index)"
         >
+          <template v-if="icons[index]">
+            <a-icon
+              size="1.5rem"
+              :color="icons[index].color"
+              class="mt-n1 mr-1"
+            >
+              {{ icons[index].icon }}
+            </a-icon>
+          </template>
+
           {{ title }}
         </div>
       </div>
@@ -27,10 +37,12 @@ import { Component, Vue } from '@a-vue'
 })
 export default class ATabs extends Vue {
   titles = []
+  icons = []
   currentIndex = 0
 
   mounted () {
     this.titles = this.$children.map(c => c.title)
+    this.icons = this.$children.map(c => c.icon)
 
     this.$children[this.currentIndex].show()
   }
@@ -64,7 +76,7 @@ export default class ATabs extends Vue {
   justify-content: center;
 
   .label {
-    padding: .5rem 1rem .7rem;
+    padding: .8rem 1.2rem .7rem;
     background: white;
     cursor: pointer;
 

package/src-admin/components/InformationBar.vue

@@ -146,14 +146,14 @@ export default class InformationBar extends Vue {
     let width = 0
 
     Array.from(this.getTopContainer().children).forEach(c => {
-      if (c.style.width !== 'auto') {
+      if (c.style.width !== '100%') {
         const w = parseInt(c.style.width)
         width = Math.max(width, w)
       }
     })
 
     Array.from(this.getBottomContainer().children).forEach(c => {
-      if (c.style.width !== 'auto') {
+      if (c.style.width !== '100%') {
         const w = parseInt(c.style.width)
         width = Math.max(width, w)
       }

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

@@ -4,15 +4,13 @@
       :class="['item', infoItemId, {expanded, rail}]"
       :style="{width}"
     >
-      <a-row justify-space-between>
-        <div
-          class="header"
-          @click="derail"
-        >
+      <div class="headerContainer">
+        <div class="header">
           <v-icon
             v-if="icon"
             :color="icon.color"
             size="2rem"
+            @click="derail"
           >
             {{ icon.icon }}
           </v-icon>
@@ -23,18 +21,28 @@
           />
 
           <template v-if="!rail">
-            <label class="label">{{ label }}</label>
-
-            <v-icon class="contextButton mt-n1">
+            <div
+              class="labelContainer"
+              @click="derail"
+            >
+              <div class="label">
+                {{ label }}
+              </div>
+            </div>
+
+            <v-icon
+              class="contextButton expand mt-n1"
+              @click="derail"
+            >
               {{ expanded ? '$caretDownIcon' : '$caretRightIcon' }}
             </v-icon>
-          </template>
-        </div>
 
-        <div v-if="expanded">
-          <slot name="actionButton" />
+            <div v-if="expanded">
+              <slot name="actionButton" />
+            </div>
+          </template>
         </div>
-      </a-row>
+      </div>
 
       <collapse-transition>
         <div
@@ -66,7 +74,7 @@ import { SidebarEvent } from '@a-admin/events'
     {
       top: true,
       bottom: false,
-      width: 'auto',
+      width: '100%',
       open: false
     }
   ]
@@ -157,15 +165,26 @@ export default class InformationBarItem extends Vue {
   }
 }
 
+.headerContainer {
+  width: 100%;
+  line-height: 0; // kill inline-flex space
+}
+
 .header {
-  display: flex;
-  flex-wrap: nowrap;
+  display: inline-flex;
   align-items: center;
   font-size: .8rem;
-  cursor: pointer;
+  line-height: 1.5; // end kill inline-flex space
+  max-width: 100%;
 
   > .v-icon {
     margin-right: .75rem;
+    cursor: pointer;
+  }
+
+  .labelContainer {
+    overflow: hidden;
+    cursor: pointer;
   }
 
   .label {
@@ -173,15 +192,16 @@ export default class InformationBarItem extends Vue {
     text-transform: uppercase;
     letter-spacing: 3px;
     color: #666666;
-    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &:hover {
-    label {
+    .label {
       color: #333333;
     }
 
-    .v-icon.contextButton {
+    .v-icon.expand {
       color: #333333 !important;
     }
   }