Add icon overlay option

nyaruka · Feb 21, 2025 · aa0ea6a · aa0ea6a
1 parent 26a7fa5
commit aa0ea6a
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/list/TembaMenu.ts b/src/list/TembaMenu.ts
@@ -34,6 +34,7 @@ export interface MenuItem {
   event?: string;
   mobile?: boolean;
   initial?: string;
+  overlay?: string;
 }
 
 interface MenuItemState {
@@ -1114,8 +1115,9 @@ export class TembaMenu extends ResizeElement {
           <temba-icon
             size="${menuItem.level === 0 ? '1.5' : '1'}"
             name="${menuItem.icon}"
-          ></temba-icon
-          >${menuItem.bubble && !menuItem.count
+            overlay="${menuItem.overlay}"
+          ></temba-icon>
+          ${menuItem.bubble && !menuItem.count
             ? html`<div
                 style="background-color: ${menuItem.bubble}"
                 class="bubble"

diff --git a/src/vectoricon/VectorIcon.ts b/src/vectoricon/VectorIcon.ts
@@ -47,6 +47,9 @@ export class VectorIcon extends LitElement {
   @property({ type: String })
   easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)';
 
+  @property({ type: String })
+  overlay: string;
+
   static get styles() {
     return css`
       :host {
@@ -63,6 +66,11 @@ export class VectorIcon extends LitElement {
           margin 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
       }
 
+      .overlay {
+        --icon-color: maroon;
+        color: maroon;
+      }
+
       .sheet.spin {
         transform: rotate(0deg);
       }
@@ -84,6 +92,10 @@ export class VectorIcon extends LitElement {
         transform: scale(1);
       }
 
+      .overlay {
+        position: absolute;
+      }
+
       .sheet.pulse-1 {
         transform: scale(1.2);
       }
@@ -253,6 +265,25 @@ export class VectorIcon extends LitElement {
                 }svg/index.svg?v=${SVG_FINGERPRINT}#${name}`}"
           />
         </svg>
+        ${this.overlay
+          ? html`
+              <svg
+                style="height:${this.size * 1.5}em;width:${this.size *
+                1.5}em;margin-left:-0.25em;margin-top:-0.25em"
+                class="overlay"
+              >
+                <use
+                  href="${this.src
+                    ? this.src
+                    : `${
+                        this.prefix || (window as any).static_url || '/static/'
+                      }svg/index.svg?v=${SVG_FINGERPRINT}#${
+                        Icon[this.overlay]
+                      }`}"
+                />
+              </svg>
+            `
+          : ''}
       </div>
     `;
   }

diff --git a/src/vectoricon/index.ts b/src/vectoricon/index.ts
@@ -60,6 +60,7 @@ export enum Icon {
   delete_small = 'x',
   down = 'chevron-down',
   download = 'download-01',
+  disabled = 'slash-circle-01',
   edit = 'edit-03',
   email = 'mail-01',
   error = 'alert-circle',