@nyaruka/temba-components 0.31.4 → 0.31.7

package/src/list/TembaMenu.ts

@@ -17,6 +17,7 @@ export interface MenuItem {
   level?: number;
   trigger?: string;
   href?: string;
+  show_header?: boolean;
   items?: MenuItem[];
   inline?: boolean;
   type?: string;
@@ -129,6 +130,9 @@ export class TembaMenu extends RapidElement {
       .level-0 > .top {
         padding-top: var(--menu-padding);
         background: var(--color-primary-dark);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
       }
 
       .level-0 > .empty {
@@ -395,7 +399,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .fully-collapsed .level-1 {
-        margin-left: -217px;
+        margin-left: -208px;
         pointer-events: none;
         border: none;
         overflow: hidden;
@@ -421,6 +425,54 @@ export class TembaMenu extends RapidElement {
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
+
+      .expand-icon {
+        transform: rotate(180deg);
+        --icon-color: rgba(255, 255, 255, 0.5);
+        cursor: pointer;
+        max-height: 0px;
+        overflow: hidden;
+        opacity: 0;
+        transition: all 400ms ease-in-out 400ms;
+      }
+
+      .expand-icon:hover {
+        --icon-color: #fff;
+      }
+
+      .fully-collapsed .expand-icon {
+        padding-top: 0.5em;
+        max-height: 2em;
+        opacity: 1;
+      }
+
+      .section-header {
+        display: flex;
+        align-items: center;
+      }
+
+      .section-header .section {
+        flex-grow: 1;
+      }
+
+      .section-header temba-icon {
+        --icon-color: #ddd;
+        cursor: pointer;
+        padding-bottom: 0.5em;
+        padding-right: 0.5em;
+      }
+
+      .section-header temba-icon:hover {
+        --icon-color: var(--color-link-primary);
+      }
+
+      slot[name='header'] {
+        display: none;
+      }
+
+      slot[name='header'].show-header {
+        display: block;
+      }
     `;
   }
 
@@ -524,21 +576,24 @@ export class TembaMenu extends RapidElement {
   private fireNoPath(missingId: string) {
     const item = this.getMenuItem();
 
-    const details = {
-      item: item.id,
-      selection: '/' + this.selection.join('/'),
-      endpoint: item.endpoint,
-      path: missingId + '/' + this.pending.join('/') + document.location.search,
-    };
+    if (item) {
+      const details = {
+        item: item.id,
+        selection: '/' + this.selection.join('/'),
+        endpoint: item.endpoint,
+        path:
+          missingId + '/' + this.pending.join('/') + document.location.search,
+      };
 
-    // remove any excess from our selection
-    const selection = this.selection.join('/');
-    selection.replace(details.path, '');
-    this.selection = selection.split('/');
+      // remove any excess from our selection
+      const selection = this.selection.join('/');
+      selection.replace(details.path, '');
+      this.selection = selection.split('/');
 
-    this.fireCustomEvent(CustomEventType.NoPath, details);
-    this.pending = [];
-    this.requestUpdate('root');
+      this.fireCustomEvent(CustomEventType.NoPath, details);
+      this.pending = [];
+      this.requestUpdate('root');
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -645,7 +700,7 @@ export class TembaMenu extends RapidElement {
       }
 
       if (menuItem.endpoint) {
-        this.loadItems(menuItem, !menuItem.href);
+        this.loadItems(menuItem, true);
         this.dispatchEvent(new Event('change'));
       } else {
         if (this.pending && this.pending.length > 0) {
@@ -744,6 +799,14 @@ export class TembaMenu extends RapidElement {
     }
   }
 
+  public handleExpand() {
+    this.collapsed = false;
+  }
+
+  public handleCollapse() {
+    this.collapsed = true;
+  }
+
   public async setFocusedItem(path: string) {
     const focusedPath = path.split('/').filter(step => !!step);
 
@@ -923,7 +986,15 @@ export class TembaMenu extends RapidElement {
 
     levels.push(
       html`<div class="level level-0 ${this.submenu ? 'hidden' : ''}">
-        <div class="top"></div>
+        <div class="top">
+          <div class="expand-icon" @click=${this.handleExpand}>
+            <temba-icon
+              name="menu-collapse"
+              class="expand"
+              size="1.4"
+            ></temba-icon>
+          </div>
+        </div>
 
         ${items
           .filter(item => !item.bottom)
@@ -972,7 +1043,25 @@ export class TembaMenu extends RapidElement {
             })}"
           >
             ${!this.submenu
-              ? html`<div class="section">${selected.name}</div>`
+              ? html`
+                  <slot
+                    class="${getClasses({
+                      'show-header': selected.show_header,
+                    })}"
+                    name="header"
+                  ></slot>
+                  <div class="section-header">
+                    <div class="section">${selected.name}</div>
+
+                    ${index == 0 && !this.collapsed
+                      ? html`<temba-icon
+                          name="menu-collapse"
+                          size="1.1"
+                          @click=${this.handleCollapse}
+                        ></temba-icon>`
+                      : null}
+                  </div>
+                `
               : null}
             ${items.map((item: MenuItem) => {
               if (item.inline && item.items) {

package/src/tabpane/TabPane.ts

@@ -16,6 +16,7 @@ export class TabPane extends RapidElement {
 
       .tabs {
         display: flex;
+        padding-left: 0.18em;
       }
 
       .tab {
@@ -32,6 +33,7 @@ export class TabPane extends RapidElement {
         color: var(--color-text-dark);
         --icon-color: var(--color-text-dark);
         white-space: nowrap;
+        transition: all 100ms ease-in-out;
       }
 
       .tab.hidden {
@@ -70,6 +72,8 @@ export class TabPane extends RapidElement {
         cursor: default;
         box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
         background: #fff;
+        transform: scale(1.05) translateY(-0.05em);
+        z-index: 0;
       }
 
       .pane {
@@ -81,10 +85,12 @@ export class TabPane extends RapidElement {
         box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.09),
           3px 3px 2px 1px rgba(0, 0, 0, 0.05);
         min-height: 0;
+        z-index: 1;
       }
 
       .pane.first {
         border-top-left-radius: 0px;
+        overflow: hidden;
       }
 
       .badge {

package/src/vectoricon/VectorIcon.ts

@@ -4,7 +4,7 @@ import { property } from 'lit/decorators';
 import { getClasses } from '../utils';
 
 // for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 14;
+const ICON_VERSION = 15;
 
 export class VectorIcon extends LitElement {
   @property({ type: String })
@@ -51,7 +51,6 @@ export class VectorIcon extends LitElement {
     return css`
       :host {
         margin: auto;
-        --color1: var(--icon-color);
       }
 
       .sheet {
@@ -90,7 +89,7 @@ export class VectorIcon extends LitElement {
 
       .clickable:hover {
         cursor: pointer;
-        fill: var(--color-link-primary);
+        fill: var(--color-link-primary) !important;
         background: rgb(255, 255, 255);
       }
 

package/static/icons/Read Me.txt

@@ -4,7 +4,7 @@ If you prefer using PNGs, PDFs, or CSS sprites, refer to the Preferences panel o
 
 *demo.html* lists the icons that you selected. To insert your icons as inline SVGs (with the <use> element), copy the <svg> element (that contains symbol definitions) from the source of the demo.html file, below your own HTML's <body> tag. After copying this SVG, you can reference your glyphs like the following:
 
-<svg class="icon icon-hourglass"><use xlink:href="#icon-hourglass"></use></svg>
+<svg class="icon icon-zapier"><use xlink:href="#icon-zapier"></use></svg>
 
 You can get this code from the SVG tab of the IcoMoon app, or by referring to the source of the demo.html file. To see how you can change the color/size of your icons using CSS, refer to the example provided in the *style.css* file.
 

package/static/icons/SVG/menu-collapse.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>menu-collapse</title>
+<path d="M21 15.609l-1.406 1.406-5.016-5.016 5.016-5.016 1.406 1.406-3.563 3.609zM3 6h12.984v2.016h-12.984v-2.016zM3 12.984v-1.969h9.984v1.969h-9.984zM3 18v-2.016h12.984v2.016h-12.984z"></path>
+</svg>

package/static/icons/SVG/zapier.svg

@@ -1,5 +1,6 @@
 <!-- Generated by IcoMoon.io -->
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
 <title>zapier</title>
-<path fill="#ff4a00" d="M20 16.005c0 1.191-0.22 2.328-0.615 3.38-1.049 0.396-2.191 0.615-3.38 0.615h-0.012c-1.191 0-2.327-0.22-3.379-0.615-0.396-1.052-0.615-2.191-0.615-3.38v-0.012c0-1.191 0.219-2.327 0.615-3.379 1.052-0.396 2.189-0.615 3.379-0.615h0.012c1.191 0 2.331 0.219 3.38 0.616 0.396 1.051 0.615 2.188 0.615 3.38zM31.78 13.333h-9.34l6.597-6.603c-0.52-0.731-1.093-1.413-1.727-2.044-0.631-0.632-1.313-1.209-2.040-1.728l-6.605 6.599v-9.337c-0.865-0.139-1.751-0.22-2.66-0.22h-0.013c-0.907 0-1.795 0.081-2.66 0.22v9.34l-6.6-6.599c-0.732 0.515-1.413 1.095-2.045 1.725-0.632 0.632-1.211 1.316-1.728 2.044l6.599 6.603h-9.337c0 0-0.22 1.755-0.22 2.66v0.012c0 0.907 0.081 1.797 0.22 2.66h9.34l-6.599 6.603c1.036 1.461 2.311 2.735 3.769 3.773l6.603-6.6v9.339c0.864 0.14 1.751 0.22 2.655 0.22h0.023c0.905 0 1.792-0.080 2.655-0.22v-9.339l6.603 6.6c0.731-0.5 1.413-1.083 2.039-1.72h0.007c0.631-0.62 1.208-1.301 1.728-2.041l-6.6-6.599h9.339c0.14-0.86 0.22-1.739 0.22-2.64v-0.041c0-0.904-0.080-1.791-0.22-2.653z"></path>
+<path fill="#474747" d="M4.8 0h22.4c2.651 0 4.8 2.149 4.8 4.8v22.4c0 2.651-2.149 4.8-4.8 4.8h-22.4c-2.651 0-4.8-2.149-4.8-4.8v-22.4c0-2.651 2.149-4.8 4.8-4.8z"></path>
+<path fill="#fff" d="M4.8 20.8h22.4v6.4h-22.4v-6.4z"></path>
 </svg>