@nyaruka/temba-components 0.26.1 → 0.26.2

package/src/contacts/ContactHistory.ts

@@ -110,22 +110,24 @@ export class ContactHistory extends RapidElement {
     return css`
       ${getEventStyles()}
 
-      :host {
-        flex-grow: 1;
-        flex-direction: column;
+      .wrapper {
+        border: 0px solid green;
         display: flex;
         flex-direction: column;
         align-items: items-stretch;
+        flex-grow: 1;
+        min-height: 0;
       }
 
       .events {
-        height: 200px;
         overflow-y: scroll;
         overflow-x: hidden;
-        flex-grow: 1;
-        border-top-left-radius: var(--curvature);
-        padding-top: 1em;
         background: #fff;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        min-height: 0;
+        padding-top: 3em;
       }
 
       temba-loading {
@@ -180,12 +182,9 @@ export class ContactHistory extends RapidElement {
       }
 
       .sticky-bin {
-        display: flex;
-        flex-direction: column;
-        z-index: 2;
         border-top-left-radius: var(--curvature);
-        overflow: hidden;
-        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
+        z-index: 2;
+        box-shadow: rgb(0 0 0 / 15%) 0px 3px 3px 0px;
         background: rgb(240, 240, 240);
       }
 
@@ -382,7 +381,6 @@ export class ContactHistory extends RapidElement {
             if (forceOpen) {
               grouped[grouped.length - 1].open = forceOpen;
             }
-
             this.eventGroups = [...previousGroups, ...grouped];
           }
           this.refreshing = false;
@@ -452,6 +450,7 @@ export class ContactHistory extends RapidElement {
     if (changedProperties.has('refreshing') && !this.refreshing) {
       if (this.lastRefreshAdded > 0) {
         const events = this.getEventsPane();
+
         // if we are near the bottom, push us to the bottom to show new stuff
         if (this.lastHeight > 0) {
           const addedHeight = events.scrollHeight - this.lastHeight;
@@ -573,7 +572,6 @@ export class ContactHistory extends RapidElement {
         }
         eventGroup = {
           open: false,
-          closing: false,
           events: [event],
           type: currentEventGroupType,
         };
@@ -649,21 +647,17 @@ export class ContactHistory extends RapidElement {
   }
 
   private handleEventGroupHide(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+
     const grouping = event.currentTarget as HTMLDivElement;
     const groupIndex = parseInt(grouping.getAttribute('data-group-index'));
     const eventGroup =
       this.eventGroups[this.eventGroups.length - groupIndex - 1];
 
-    // mark us as closing
-    eventGroup.closing = true;
-    this.requestUpdate('eventGroups');
+    eventGroup.open = false;
 
-    // after our animation, close it up for real
-    setTimeout(() => {
-      eventGroup.closing = false;
-      eventGroup.open = false;
-      this.requestUpdate('eventGroups');
-    }, 300);
+    this.requestUpdate('eventGroups');
   }
 
   private handleScroll() {
@@ -913,12 +907,16 @@ export class ContactHistory extends RapidElement {
         : null;
 
     return html`
-      ${this.ticket
-        ? html`<div class="sticky-bin">${unfetchedTickets}</div>`
-        : null}
-      ${this.fetching
-        ? html`<temba-loading units="5" size="10"></temba-loading>`
-        : html`<div style="height:0em"></div>`}
+      ${
+        this.ticket
+          ? html`<div class="sticky-bin">${unfetchedTickets}</div>`
+          : null
+      }
+      ${
+        this.fetching
+          ? html`<temba-loading units="5" size="10"></temba-loading>`
+          : html`<div style="height:0em"></div>`
+      }
       <div class="events" @scroll=${this.handleScroll}>
         ${this.eventGroups.map((eventGroup: EventGroup, index: number) => {
           const grouping = getEventGroupType(eventGroup.events[0], this.ticket);
@@ -928,9 +926,7 @@ export class ContactHistory extends RapidElement {
             grouping: true,
             [grouping]: true,
             expanded: eventGroup.open,
-            closing: eventGroup.closing,
           });
-
           return html`<div class="${classes}">
             ${grouping === 'verbose'
               ? html`<div
@@ -938,36 +934,37 @@ export class ContactHistory extends RapidElement {
                   @click=${this.handleEventGroupShow}
                   data-group-index="${groupIndex}"
                 >
-                  ${eventGroup.events.length}
-                  ${eventGroup.events.length === 1 ? html`event` : html`events`}
+                  ${eventGroup.open
+                    ? html`<temba-icon
+                        @click=${this.handleEventGroupHide}
+                        data-group-index="${groupIndex}"
+                        name="x"
+                        clickable
+                      ></temba-icon>`
+                    : html`${eventGroup.events.length}
+                      ${eventGroup.events.length === 1
+                        ? html`event`
+                        : html`events`} `}
                 </div>`
               : null}
-            ${grouping === 'verbose'
-              ? html`
-                  <temba-icon
-                    @click=${this.handleEventGroupHide}
-                    data-group-index="${groupIndex}"
-                    class="grouping-close-button"
-                    name="x"
-                    clickable
-                  ></temba-icon>
-                `
-              : null}
-            ${eventGroup.events.map((event: ContactEvent) => {
-              if (
-                event.type === Events.TICKET_ASSIGNED &&
-                (event as TicketEvent).note
-              ) {
-                const noteEvent = { ...event };
-                noteEvent.type = Events.TICKET_NOTE_ADDED;
-
-                return html`${this.renderEventContainer(
-                  noteEvent
-                )}${this.renderEventContainer(event)}`;
-              } else {
-                return this.renderEventContainer(event);
-              }
-            })}
+
+            <div class="items">
+              ${eventGroup.events.map((event: ContactEvent) => {
+                if (
+                  event.type === Events.TICKET_ASSIGNED &&
+                  (event as TicketEvent).note
+                ) {
+                  const noteEvent = { ...event };
+                  noteEvent.type = Events.TICKET_NOTE_ADDED;
+
+                  return html`${this.renderEventContainer(
+                    noteEvent
+                  )}${this.renderEventContainer(event)}`;
+                } else {
+                  return this.renderEventContainer(event);
+                }
+              })}
+            </div>
           </div>`;
         })}
       </div>
@@ -984,6 +981,7 @@ export class ContactHistory extends RapidElement {
           New Messages
         </div>
       </div>
+      </div>
     `;
   }
 }

package/src/contacts/events.ts

@@ -6,21 +6,54 @@ import { getDisplayName } from './helpers';
 export const getEventStyles = () => {
   return css`
     .grouping {
-      padding: 0 2em;
-      margin: 0 -1em;
+      margin-top: 1em;
     }
 
     .grouping.verbose {
       background: #f9f9f9;
-      max-height: 1px;
-      border-top: 1px solid #f9f9f9;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 0;
-      margin-bottom: 1.5em;
-      color: #efefef;
+      color: var(--color-dark);
       --color-link-primary: rgba(38, 166, 230, 1);
       pointer-events: none;
+      background: #fefefe;
+      box-shadow: -8px 0px 8px 1px rgba(0, 0, 0, 0.05) inset;
+      margin-right: -16px;
+      padding-right: 16px;
+      margin-bottom: 1.3em;
+    }
+
+    .grouping .items {
+      display: block;
+      user-select: none;
+    }
+
+    .grouping.verbose .items {
+      opacity: 0;
+      max-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .grouping.flows .items {
+      padding: 0;
+    }
+
+    .grouping.messages .items {
+      display: flex;
+      flex-direction: column;
+      margin: 0em 0.75em;
+    }
+
+    .grouping.verbose.expanded .items {
+      transition: max-height var(--transition-speed) ease-in-out,
+        opacity var(--transition-speed) ease-in-out;
+      opacity: 1;
+      max-height: 1000px;
+      padding: 1em 1em;
+    }
+
+    .grouping.verbose.expanded {
+      border-top: 1px solid #f3f3f3;
+      border-bottom: 1px solid #f3f3f3;
     }
 
     .grouping.verbose.expanded,
@@ -43,50 +76,37 @@ export const getEventStyles = () => {
     }
 
     .grouping.verbose .attn {
-      color: #fff;
+      color: #666;
     }
 
     .event-count {
       position: relative;
-      top: -1.2em;
       font-size: 0.8em;
       text-align: center;
-      border: 2px solid #f9f9f9;
-      background: #fff;
       margin: 0 auto;
       display: table;
       padding: 3px 10px;
       font-weight: 400;
-      color: #777;
-      border-radius: var(--curvature);
+      color: #999;
       cursor: pointer;
-      min-width: 0%;
+      width: 100%;
       opacity: 1;
-      transition: all var(--transition-speed) ease-in, opacity 0.1ms,
-        margin-top 0ms;
-    }
-
-    .closing .grouping-close-button {
-      opacity: 0 !important;
-      transition: none !important;
+      z-index: 1;
     }
 
-    .event-count {
-      z-index: 1;
-      margin-bottom: 1em;
+    .event-count temba-icon {
+      display: inline-block;
+      position: absolute;
+      right: 5px;
+      top: 5px;
     }
 
     .event-count:hover {
-      padding: 3px 10px;
-      min-width: 50%;
-      background: #f9f9f9;
-      color: #333;
+      color: var(--color-link-primary-hover);
     }
 
     .expanded .event-count {
-      opacity: 0;
-      margin-top: -42px;
-      z-index: 0;
+      padding: 0;
       pointer-events: none;
     }
 
@@ -114,54 +134,18 @@ export const getEventStyles = () => {
       word-wrap: break-word;
     }
 
-    .grouping.verbose.closing {
-      opacity: 0 !important;
-      padding: 0 !important;
-      background: #f9f9f9 !important;
-      max-height: 1px !important;
-      border-top: 1px solid #f9f9f9 !important;
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
-      margin-top: 0 !important;
-      margin-bottom: 0 !important;
-    }
-
-    .grouping.verbose.closing .event,
-    .grouping.verbose.closing pre {
-      max-height: 0px;
-    }
-
-    .grouping.verbose.expanded {
-      transition: all var(--transition-speed)
-          cubic-bezier(0.68, -0.55, 0.265, 1.05),
-        color 0.1ms;
-      background: #444;
-      color: #efefef;
-      max-height: 1000px;
-      border-top: 1px solid #f1f1f1;
-      padding: 2em;
-      margin-left: 1em;
-      margin-right: 1em;
-      border-radius: var(--curvature);
-      padding-bottom: 1em;
-      box-shadow: inset 0px 11px 4px -15px #000, inset 0px -11px 4px -15px #000;
-    }
-
     .grouping.verbose.expanded .event,
     .grouping.verbose.expanded pre {
       max-height: 500px;
-      margin-bottom: 0.5em;
       opacity: 1;
-      transition: all var(--transition-speed) ease-in-out;
     }
 
     .grouping-close-button {
+      position: relative;
+      display: inline-block;
       opacity: 0;
       float: right;
-      margin-top: -1em !important;
-      margin-right: -1em !important;
-      fill: #f2f2f2;
-      transition: opacity var(--transition-speed) ease-in;
+      --icon-color: #666;
     }
 
     .grouping.verbose.expanded:hover .grouping-close-button {
@@ -175,7 +159,7 @@ export const getEventStyles = () => {
     }
 
     .event {
-      margin-bottom: 1em;
+      margin: 0.25em 0.5em;
       border-radius: var(--curvature);
       flex-grow: 1;
     }
@@ -332,6 +316,7 @@ export const getEventStyles = () => {
       font-size: 80%;
       color: rgba(0, 0, 0, 0.6);
       padding: 6px 3px;
+      margin-bottom: 0.5em;
     }
 
     .msg-summary temba-icon[name='log'] {
@@ -460,7 +445,6 @@ export interface EventGroup {
   type: string;
   events: ContactEvent[];
   open: boolean;
-  closing: boolean;
 }
 
 export enum Events {
@@ -1081,7 +1065,9 @@ export const renderContactLanguageChangedEvent = (
   event: ContactLanguageChangedEvent
 ): TemplateResult => {
   return html`<temba-icon name="contact"></temba-icon>
-    <div class="description">Language updated to ${event.language}</div>`;
+    <div class="description">
+      Language updated to <span class="attn">${event.language}</span>
+    </div>`;
 };
 
 export const renderChannelEvent = (event: ChannelEvent): TemplateResult => {

package/src/list/TembaMenu.ts

@@ -20,7 +20,6 @@ export interface MenuItem {
   items?: MenuItem[];
   inline?: boolean;
   type?: string;
-  parent?: MenuItem;
   on_submit?: string;
 }
 
@@ -57,7 +56,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .section {
-        font-size: 1.875rem;
+        font-size: 1.5em;
         margin-bottom: 0.2em;
         color: var(--color-text-dark);
       }
@@ -80,7 +79,7 @@ export class TembaMenu extends RapidElement {
         user-select: none;
         -webkit-user-select: none;
         display: flex;
-        font-size: 1.15em;
+        font-size: 1em;
         --icon-color: var(--color-text-dark);
       }
 
@@ -368,7 +367,7 @@ export class TembaMenu extends RapidElement {
       }
 
       .sub-section {
-        font-size: 1.1rem;
+        font-size: 1rem;
         color: #888;
         margin-top: 1rem;
         margin-left: 0.3rem;
@@ -395,8 +394,8 @@ export class TembaMenu extends RapidElement {
       }
 
       temba-button {
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
+        margin-top: 0.2em;
+        margin-bottom: 0.2em;
         margin-left: 0.75em;
         margin-right: 0.75em;
       }
@@ -519,7 +518,7 @@ export class TembaMenu extends RapidElement {
             if (subItem.items) {
               subItem.items.forEach(inlineItem => {
                 inlineItem.level = item.level + 2;
-                inlineItem.parent = subItem;
+                // inlineItem.parent = subItem;
               });
             }
           });
@@ -563,10 +562,10 @@ export class TembaMenu extends RapidElement {
   private handleItemClicked(
     event: MouseEvent,
     menuItem: MenuItem,
-    alias = false
+    parent: MenuItem = null
   ) {
-    if (menuItem.parent) {
-      this.handleItemClicked(null, menuItem.parent, alias);
+    if (parent && parent.inline) {
+      this.handleItemClicked(null, parent);
     }
 
     if (this.collapsed) {
@@ -613,7 +612,6 @@ export class TembaMenu extends RapidElement {
         this.loadItems(menuItem, !menuItem.href);
         this.dispatchEvent(new Event('change'));
       } else {
-        this.dispatchEvent(new Event('change'));
         if (this.pending && this.pending.length > 0) {
           // auto select the next pending click
           const nextId = this.pending.shift();
@@ -622,10 +620,14 @@ export class TembaMenu extends RapidElement {
             const nextItem = findItem(item.items, nextId).item;
             if (nextItem) {
               this.handleItemClicked(null, nextItem);
+            } else {
+              this.fireNoPath(nextId);
             }
           } else {
             this.fireNoPath(nextId);
           }
+        } else {
+          this.dispatchEvent(new Event('change'));
         }
         this.requestUpdate('root');
       }
@@ -756,7 +758,10 @@ export class TembaMenu extends RapidElement {
     return expanded;
   }
 
-  private renderMenuItem = (menuItem: MenuItem): TemplateResult => {
+  private renderMenuItem = (
+    menuItem: MenuItem,
+    parent: MenuItem = null
+  ): TemplateResult => {
     if (menuItem.type === 'divider') {
       return html`<div class="divider"></div>`;
     }
@@ -812,7 +817,7 @@ export class TembaMenu extends RapidElement {
         id="menu-${menuItem.id}"
         class="${itemClasses}"
         @click=${event => {
-          this.handleItemClicked(event, menuItem);
+          this.handleItemClicked(event, menuItem, parent);
         }}
       >
         ${menuItem.level === 0
@@ -928,7 +933,7 @@ export class TembaMenu extends RapidElement {
                 return html`${this.renderMenuItem(item)}
                   <div class="inline-children">
                     ${item.items.map((child: MenuItem) => {
-                      return this.renderMenuItem(child);
+                      return this.renderMenuItem(child, item);
                     })}
                   </div>`;
               }

package/src/tabpane/Tab.ts

@@ -0,0 +1,42 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+import { getClasses } from '../utils';
+
+export class Tab extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;  
+        min-height: 0;
+      }      
+      
+      slot {
+        // display: none;
+      
+
+      slot.selected {
+        // display: flex;
+        // flex-direction: column;
+        // flex-grow: 1;
+      }
+    `;
+  }
+
+  @property({ type: String })
+  name: string;
+
+  @property({ type: String })
+  icon: string;
+
+  @property({ type: Boolean })
+  selected = false;
+
+  public render(): TemplateResult {
+    return html`<slot
+      class="${getClasses({ selected: this.selected })}"
+    ></slot>`;
+  }
+}

package/src/tabpane/TabPane.ts

@@ -0,0 +1,113 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+import { Tab } from './Tab';
+
+export class TabPane extends RapidElement {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+
+      .tabs {
+        display: flex;
+      }
+
+      .tab {
+        padding: 0.5em 1em;
+        margin: 0em 0em;
+        cursor: pointer;
+        display: flex;
+        border-radius: var(--curvature);
+        border-bottom-right-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border: 0px solid rgba(0, 0, 0, 0.45);
+        color: var(--color-text-dark);
+        --icon-color: var(--color-text-dark);
+      }
+
+      .tab temba-icon {
+        margin-right: 0.4em;
+      }
+
+      .tab.selected {
+        cursor: default;
+        box-shadow: 2px 1px 3px 2px rgba(0, 0, 0, 0.07);
+        background: #fff;
+      }
+
+      .pane {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        background: #fff;
+        border-radius: var(--curvature);
+        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;
+      }
+
+      .pane.first {
+        border-top-left-radius: 0px;
+      }
+    `;
+  }
+
+  @property({ type: Number })
+  index = 0;
+
+  private handleTabClick(event: MouseEvent): void {
+    this.index = parseInt(
+      (event.currentTarget as HTMLDivElement).dataset.index
+    );
+    this.requestUpdate('index');
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('index')) {
+      if (this.children.length > this.index) {
+        for (let i = 0; i < this.children.length; i++) {
+          const tab = this.children[i] as Tab;
+          tab.selected = i == this.index;
+
+          if (tab.selected) {
+            tab.style.display = 'flex';
+          } else {
+            tab.style.display = 'none';
+          }
+        }
+      }
+    }
+  }
+
+  public render(): TemplateResult {
+    const tabs: Tab[] = [];
+    for (const tab of this.children) {
+      tabs.push(tab as Tab);
+    }
+
+    return html`
+      <div class="tabs">
+        ${tabs.map(
+          (tab, index) => html`
+            <div
+              @click=${this.handleTabClick}
+              data-index=${index}
+              class="tab ${index == this.index ? 'selected' : ''}"
+            >
+              ${tab.icon ? html`<temba-icon name=${tab.icon} />` : null}
+              ${tab.name}
+            </div>
+          `
+        )}
+      </div>
+      <div class="pane ${this.index === 0 ? 'first' : null}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}