@nyaruka/temba-components 0.48.6 → 0.49.0

package/src/list/TembaMenu.ts

@@ -5,6 +5,7 @@ import { CustomEventType } from '../interfaces';
 import { RapidElement } from '../RapidElement';
 import { debounce, fetchResults, getClasses, renderAvatar } from '../utils';
 import { Icon } from '../vectoricon';
+import { Dropdown } from '../dropdown/Dropdown';
 export interface MenuItem {
   id?: string;
   vanity_id?: string;
@@ -62,14 +63,26 @@ export class TembaMenu extends RapidElement {
       }
 
       .bubble {
-        width: 8px;
-        height: 8px;
-        left: 14px;
-        bottom: -1px;
-        border-radius: 99px;
-        border: 1px solid rgb(255, 255, 255);
+        width: 0.6em;
+        height: 0.6em;
+        right: 0em;
+        bottom: 0em;
+        border-radius: 99em;
+        border: 0.12em solid rgba(0, 0, 0, 0.1);
+        position: absolute;
+      }
+
+      .bubble.count {
         position: relative;
-        margin-top: -10px;
+        width: inherit;
+        height: inherit;
+        right: inherit;
+        bottom: inherit;
+        color: #fff;
+        line-height: 1em;
+        padding: 0.12em;
+        min-width: 1em;
+        text-align: center;
       }
 
       .section {
@@ -96,7 +109,6 @@ export class TembaMenu extends RapidElement {
         user-select: none;
         -webkit-user-select: none;
         display: flex;
-        font-size: 1em;
         --icon-color: var(--color-text-dark);
       }
 
@@ -126,7 +138,6 @@ export class TembaMenu extends RapidElement {
       .level-0 > temba-dropdown > div[slot='toggle'] > .avatar {
         padding: 0px;
         --icon-color: rgba(255, 255, 255, 0.7);
-        font-size: 1em;
         flex-direction: column;
         border: 0px solid green;
         width: 100%;
@@ -134,6 +145,10 @@ export class TembaMenu extends RapidElement {
         align-items: center;
       }
 
+      .level-0 > temba-dropdown .icon-wrapper {
+        padding: 0.2em 0.4em 0.2em 0.4em;
+      }
+
       .level-0 > .item.selected::before,
       .level-0 > .item.selected::after {
         content: ' ';
@@ -148,7 +163,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .level-0 > .item > temba-tip {
-        padding: 1em;
+        padding: 0.5em;
       }
 
       .level-0 > .item.selected::after {
@@ -186,6 +201,10 @@ export class TembaMenu extends RapidElement {
         margin-left: 0.75em;
       }
 
+      temba-dropdown > div[slot='dropdown'] .bubble.count {
+        margin-right: 0.75em;
+      }
+
       .level-0 > .item > .details,
       .level-0 > temba-dropdown > div[slot='toggle'] > .avatar > .details {
         display: none !important;
@@ -195,7 +214,8 @@ export class TembaMenu extends RapidElement {
         align-items: center;
       }
 
-      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle {
+      temba-dropdown > div[slot='dropdown'] .avatar .avatar-circle,
+      temba-dropdown > div[slot='dropdown'] .avatar .bubble {
         font-size: 0.7em;
       }
 
@@ -228,6 +248,7 @@ export class TembaMenu extends RapidElement {
         border-radius: var(--curvature);
         display: flex;
         min-width: 12em;
+        position: relative;
       }
 
       .item > temba-icon {
@@ -417,7 +438,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .sub-section {
-        font-size: 1rem;
+        font-size: 0.9rem;
         color: #888;
         margin-top: 1rem;
         margin-left: 0.3rem;
@@ -503,6 +524,15 @@ export class TembaMenu extends RapidElement {
       slot[name='header'].show-header {
         display: block;
       }
+
+      .icon-wrapper {
+        position: relative;
+        padding: 0.2em 0.4em 0.2em 0em;
+      }
+
+      .level-0 .icon-wrapper {
+        padding: 0.4em;
+      }
     `;
   }
 
@@ -667,6 +697,13 @@ export class TembaMenu extends RapidElement {
     parent: MenuItem = null
   ) {
     if (parent && parent.popup) {
+      const dropdown = this.shadowRoot.querySelector(
+        'temba-dropdown'
+      ) as Dropdown;
+      if (dropdown) {
+        dropdown.blur();
+      }
+
       if (event) {
         this.fireCustomEvent(CustomEventType.ButtonClicked, {
           item: menuItem,
@@ -891,16 +928,18 @@ export class TembaMenu extends RapidElement {
       isSelected && this.selection.length > menuItem.level + 1;
 
     let icon = menuItem.icon
-      ? html`<temba-icon
+      ? html`<div class="icon-wrapper">
+          <temba-icon
             size="${menuItem.level === 0 ? '1.5' : '1'}"
             name="${menuItem.icon}"
           ></temba-icon
-          >${menuItem.bubble
+          >${menuItem.bubble && !menuItem.count
             ? html`<div
                 style="background-color: ${menuItem.bubble}"
                 class="bubble"
               ></div>`
-            : null}`
+            : null}
+        </div>`
       : null;
 
     const collapsedIcon = menuItem.collapsed_icon
@@ -925,7 +964,16 @@ export class TembaMenu extends RapidElement {
     });
 
     if (menuItem.avatar) {
-      icon = renderAvatar({ name: menuItem.avatar });
+      icon = renderAvatar({ name: menuItem.avatar, tip: false });
+      if (menuItem.bubble) {
+        icon = html`${icon}${menuItem.bubble
+          ? html`<div
+              style="background-color: ${menuItem.bubble}"
+              class="bubble"
+            ></div>`
+          : null}`;
+      }
+      icon = html`<div style="position:relative; padding: 0em">${icon}</div>`;
     }
 
     const item = html`
@@ -934,6 +982,7 @@ export class TembaMenu extends RapidElement {
         id="menu-${menuItem.id}"
         class="${itemClasses}"
         @click=${event => {
+          event.preventDefault();
           this.pressedItem = null;
           this.handleItemClicked(event, menuItem, parent);
         }}
@@ -975,7 +1024,10 @@ export class TembaMenu extends RapidElement {
                 ></temba-icon>`
               : html`${menuItem.count || menuItem.count == 0
                   ? html`
-                      <div class="count">
+                      <div
+                        class="count ${menuItem.bubble ? 'bubble' : ''}"
+                        style="background-color: ${menuItem.bubble}"
+                      >
                         ${menuItem.count.toLocaleString()}
                       </div>
                     `
@@ -997,7 +1049,7 @@ export class TembaMenu extends RapidElement {
             <div style="max-height:400px;overflow-y:auto">
               ${(menuItem.items || []).map((child: MenuItem) => {
                 child.level = menuItem.level + 1;
-                return this.renderMenuItem(child, menuItem);
+                return html`${this.renderMenuItem(child, menuItem)}`;
               })}
             </div>
           </div>
@@ -1087,7 +1139,7 @@ export class TembaMenu extends RapidElement {
 
                     ${index == 0 && !this.collapsed
                       ? html`<temba-icon
-                          name="${Icon.menu_collapse}"
+                          name=${Icon.menu_collapse}
                           size="1.1"
                           @click=${this.handleCollapse}
                         ></temba-icon>`

package/src/utils/index.ts

@@ -653,6 +653,7 @@ export const renderAvatar = (input: {
   icon?: string;
   image?: string;
   position?: string;
+  tip?: boolean;
 }) => {
   if (!input.position) {
     input.position = 'right';
@@ -680,14 +681,13 @@ export const renderAvatar = (input: {
   let initials = text.substring(0, 1) + text.substring(second, second + 1);
   initials = initials.toUpperCase();
 
-  return html`
-    <temba-tip text=${text} position=${input.position}>
+  const avatar = html`
+    <div
+      style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
+    >
       <div
-        style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
-      >
-        <div
-          class="avatar-circle"
-          style="
+        class="avatar-circle"
+        style="
             display: flex;
             height: 2em;
             width: 2em;
@@ -698,14 +698,20 @@ export const renderAvatar = (input: {
             font-weight: 400;
             border: 0.3em solid rgba(0,0,0,.05);
             background:${color}"
+      >
+        <div
+          style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
         >
-          <div
-            style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;flex-grow:1"
-          >
-            <div style="border:0px solid blue;">${initials}</div>
-          </div>
+          <div style="border:0px solid blue;">${initials}</div>
         </div>
       </div>
-    </temba-tip>
+    </div>
   `;
+  return input.tip
+    ? html`
+        <temba-tip text=${text} position=${input.position}>
+          ${avatar}
+        </temba-tip>
+      `
+    : avatar;
 };

package/src/vectoricon/VectorIcon.ts

@@ -1,12 +1,9 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Icon } from '.';
+import { Icon, SVG_FINGERPRINT } from '.';
 
 import { getClasses } from '../utils';
 
-// for cache busting, increase whenever the icon set changes
-const ICON_VERSION = 15;
-
 export class VectorIcon extends LitElement {
   @property({ type: String })
   name: string;
@@ -223,7 +220,7 @@ export class VectorIcon extends LitElement {
               ? this.src
               : `${
                   this.prefix || (window as any).static_url || '/static/'
-                }svg/index.svg?v=${ICON_VERSION}#${name}`}"
+                }svg/index.svg?v=${SVG_FINGERPRINT}#${name}`}"
           />
         </svg>
       </div>

package/src/vectoricon/index.ts

@@ -1,3 +1,7 @@
+// for cache busting we dynamically generate a fingerprint, use yarn svg to update
+export const SVG_FINGERPRINT = '579ca2593ad9c17698bf47bc18234db5';
+
+// only icons below are included in the sprite sheet
 export enum Icon {
   analytics = 'bar-chart-01',
   account = 'user-01',
@@ -14,8 +18,31 @@ export enum Icon {
   call = 'phone-call-01',
   call_missed = 'phone-call-02',
   campaign = 'clock-refresh',
+  campaign_active = 'play',
+  campaign_archived = 'archive',
   campaigns = 'clock-refresh',
   channel = 'zap',
+
+  channel_android = 'channel-android',
+  channel_facebook = 'facebook-official',
+  channel_freshchat = 'freshchat',
+  channel_jiochat = 'jiochat',
+  channel_junebug = 'junebug',
+  channel_kannel = 'kannel',
+  channel_line = 'line',
+  channel_mtarget = 'mtarget',
+  channel_plivo = 'plivo',
+  channel_signalwire = 'signalwire',
+  channel_thinq = 'thinq',
+  channel_telegram = 'telegram',
+  channel_twilio = 'twilio-original',
+  channel_twitter = 'twitter',
+  channel_viber = 'viber',
+  channel_vk = 'vk',
+  channel_vonage = 'vonage',
+  channel_wechat = 'wechat',
+  channel_whatsapp = 'whatsapp',
+
   children = 'git-branch-01',
   check = 'check',
   checkbox = 'square',
@@ -54,10 +81,14 @@ export enum Icon {
   language = 'globe-01',
   link = 'link-external-01',
   log = 'file-02',
+  logout = 'log-out-04',
   menu = 'menu-01',
   menu_collapse = 'chevron-left-double',
   message = 'message-square-02',
   messages = 'message-square-02',
+  missing = 'maximize-02',
+  new = 'plus',
+  notification = 'bell-01',
   org_active = 'credit-card-02',
   org_anonymous = 'glasses-01',
   org_bulk = 'credit-card-plus',
@@ -66,15 +97,18 @@ export enum Icon {
   org_suspended = 'slash-circle-01',
   org_verified = 'check-verified-02',
   overview = 'pie-chart-01',
+  prometheus = 'prometheus',
   featured = 'star-01',
   resthooks = 'share-07',
   restore = 'play',
   retry = 'refresh-cw-05',
+  rocketchat = 'rocketchat',
   runs = 'rows-03',
   search = 'search-refraction',
   select_open = 'chevron-down',
   select_clear = 'x',
   service = 'magic-wand-01',
+  service_end = 'log-out-04',
   settings = 'settings-02',
   sort = 'chevron-selector-vertical',
   staff = 'hard-drive',
@@ -84,9 +118,13 @@ export enum Icon {
   tickets_mine = 'coffee',
   tickets_open = 'inbox-01',
   tickets_unassigned = 'inbox-01',
+  topic = 'message-text-circle-02',
   two_factor_enabled = 'shield-02',
   two_factor_disabled = 'shield-01',
   trigger = 'signal-01',
+  trigger_active = 'play',
+  trigger_archived = 'archive',
+  trigger_new = 'plus',
   triggers = 'signal-01',
   updated = 'edit-02',
   up = 'chevron-up',
@@ -96,7 +134,9 @@ export enum Icon {
   users = 'users-01',
   user_beta = 'shield-zap',
   webhook = 'link-external-01',
+  wit = 'wit',
   workspace = 'folder',
+  zapier = 'zapier',
   zendesk = 'zendesk',
 
   ext = 'lightning-01',