@nyaruka/temba-components 0.67.4 → 0.68.0

package/src/list/TicketList.ts

@@ -2,8 +2,8 @@ import { html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { TembaList } from './TembaList';
 import { Contact } from '../interfaces';
-import { renderUserAvatar } from '../contacts/events';
 import { Icon } from '../vectoricon';
+import { renderAvatar } from '../utils';
 
 export class TicketList extends TembaList {
   @property({ type: String })
@@ -33,7 +33,7 @@ export class TicketList extends TembaList {
           >
             <div style="flex: 1; color:#333;">
               <div
-                style="font-weight:400;line-height:1.6;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
+                style="font-weight:400;line-height:1.6;padding-right:0.5em;display:-webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;"
               >
                 ${contact.name}
               </div>
@@ -72,22 +72,26 @@ export class TicketList extends TembaList {
                 : null}
             </div>
             <div
-              style="font-size:0.8em;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right"
+              style="margin-right: -5px; margin-top: 0px;display:flex;flex-direction:column;align-items:flex-end;max-width:60px;min-width:30px;border:0px solid green;text-align:right"
             >
-              <div style="padding:4px;padding-bottom:2px">
-                <temba-date
-                  value=${contact.ticket.closed_on ||
-                  contact.ticket.last_activity_on}
-                  display="duration"
-                ></temba-date>
-              </div>
-              <div style="font-size:0.7em;">
+              <div>
                 ${!contact.ticket.closed_on && contact.ticket.assignee
-                  ? html`${renderUserAvatar(contact.ticket.assignee)}`
+                  ? html`${renderAvatar({
+                      user: contact.ticket.assignee,
+                      scale: 0.8,
+                    })}`
                   : null}
               </div>
             </div>
           </div>
+
+          <div style="font-size:0.8em;text-align:right;border:0px solid red;">
+            <temba-date
+              value=${contact.ticket.closed_on ||
+              contact.ticket.last_activity_on}
+              display="duration"
+            ></temba-date>
+          </div>
         </div>
       `;
     };

package/src/mask/Mask.ts

@@ -0,0 +1,32 @@
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+
+export class Mask extends LitElement {
+  static styles = css`
+    .mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 100;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(0, 0, 0, 0.6);
+      display: none;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .show {
+      display: flex;
+    }
+  `;
+
+  @property({ type: Boolean })
+  show = false;
+
+  render() {
+    return html` <div class="mask  ${this.show ? 'show' : ''}">
+      <slot></slot>
+    </div>`;
+  }
+}

package/src/untyped.d.ts

@@ -18,3 +18,4 @@ declare function mouseUp();
 declare function mouseClick(x: number, y: number);
 declare function setViewport({}: any);
 declare function waitForNetworkIdle();
+declare module 'croppie';

package/src/utils/index.ts

@@ -4,6 +4,7 @@ import { Button } from '../button/Button';
 import { Dialog } from '../dialog/Dialog';
 import { Attachment, ContactField, Ticket, User } from '../interfaces';
 import ColorHash from 'color-hash';
+import { userInfo } from 'os';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
@@ -718,21 +719,16 @@ export const renderAvatar = (input: {
   name?: string;
   user?: User;
   icon?: string;
-  image?: string;
   position?: string;
   tip?: boolean;
+  scale?: number;
 }) => {
   if (!input.position) {
     input.position = 'right';
   }
 
-  // just a url
-  if (input.image) {
-    return html`<img src="${input.image}" />`;
-  }
-
   let text = input.name;
-  if (input.user) {
+  if (input.user && input.user.first_name && input.user.last_name) {
     text = `${input.user.first_name} ${input.user.last_name}`;
   }
 
@@ -740,31 +736,43 @@ export const renderAvatar = (input: {
     return null;
   }
 
-  const color = colorHash.hex(text);
-  const initials = extractInitials(text);
+  let initials = '';
+  let color = colorHash.hex(text);
+  // just a url
+  if (input.user && input.user.avatar) {
+    color = `url('${input.user.avatar}') center / contain no-repeat`;
+  } else if (text) {
+    initials = extractInitials(text);
+  }
+
   const avatar = html`
     <div
-      style="border: 0px solid red; display:flex; flex-direction: column; align-items:center;"
+      style="display:flex; flex-direction: column; align-items:center;transform:scale(${input.scale ||
+      1});"
     >
       <div
         class="avatar-circle"
         style="
             display: flex;
-            height: 2em;
-            width: 2em;
+            height: 30px;
+            width: 30px;
             flex-direction: row;
             align-items: center;
             color: #fff;
             border-radius: 100%;
             font-weight: 400;
-            border: 0.3em solid rgba(0,0,0,.05);
+            overflow: hidden;
+            font-size: 12px;
+            box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
             background:${color}"
       >
-        <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>
+        ${initials
+          ? html` <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>`
+          : null}
       </div>
     </div>
   `;

package/src/vectoricon/index.ts

@@ -1,5 +1,5 @@
 // for cache busting we dynamically generate a fingerprint, use yarn svg to update
-export const SVG_FINGERPRINT = '963a11882da2ee8b18c878e911d8eaf1';
+export const SVG_FINGERPRINT = '819ccb7b7ad3480361d5afba355b4e6f';
 
 // only icons below are included in the sprite sheet
 export enum Icon {
@@ -162,6 +162,7 @@ export enum Icon {
   search = 'search-refraction',
   select_open = 'chevron-down',
   select_clear = 'x',
+  send = 'send-03',
   service = 'magic-wand-01',
   service_end = 'log-out-04',
   settings = 'settings-02',
@@ -171,6 +172,7 @@ export enum Icon {
   sort_down = 'sort-arrow-down',
   sort_up = 'sort-arrow-up',
   staff = 'hard-drive',
+  submit = 'check',
   tickets = 'agent',
   tickets_all = 'archive',
   tickets_closed = 'check',
@@ -199,6 +201,7 @@ export enum Icon {
   updated = 'edit-02',
   up = 'chevron-up',
   upload = 'upload-cloud-01',
+  upload_image = 'camera-01',
   usages = 'link-04',
   user = 'users-01',
   users = 'users-01',