Merge pull request #470 from nyaruka/assignment-bar

Assignment bar
nyaruka · Jan 7, 2025 · 0aebf3d · 0aebf3d
2 parents 17ee4c3 + 60e546f
commit 0aebf3d
Show file tree

Hide file tree

Showing 66 changed files with 1,424 additions and 1,340 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -127,7 +127,7 @@
 </head>
 
 <body>
-  <temba-webchat channel="f2f0c0fc-c287-4826-96f5-84ed4ce0717a"></temba-webchat>
+  <temba-webchat channel="68ba3ed0-8f37-4ff4-883f-5547900586bb"></temba-webchat>
   <temba-store completion="/static/api/completion.json" functions="/static/api/functions.json"
     fields="/static/api/fields.json" globals="/static/api/globals.json" groups="/static/api/groups.json"></temba-store>
 

diff --git a/screenshots/truth/compose/attachments-tab.png b/screenshots/truth/compose/attachments-tab.png
diff --git a/screenshots/truth/compose/attachments-with-files-focused.png b/screenshots/truth/compose/attachments-with-files-focused.png
diff --git a/screenshots/truth/compose/attachments-with-files.png b/screenshots/truth/compose/attachments-with-files.png
diff --git a/screenshots/truth/compose/intial-text.png b/screenshots/truth/compose/intial-text.png
diff --git a/screenshots/truth/compose/no-counter.png b/screenshots/truth/compose/no-counter.png
diff --git a/screenshots/truth/compose/wraps-text-and-spaces.png b/screenshots/truth/compose/wraps-text-and-spaces.png
diff --git a/screenshots/truth/compose/wraps-text-and-url.png b/screenshots/truth/compose/wraps-text-and-url.png
diff --git a/screenshots/truth/compose/wraps-text-no-spaces.png b/screenshots/truth/compose/wraps-text-no-spaces.png
diff --git a/screenshots/truth/contacts/chat-failure.png b/screenshots/truth/contacts/chat-failure.png
diff --git a/screenshots/truth/contacts/chat-for-active-contact.png b/screenshots/truth/contacts/chat-for-active-contact.png
diff --git a/screenshots/truth/contacts/chat-for-archived-contact.png b/screenshots/truth/contacts/chat-for-archived-contact.png
diff --git a/screenshots/truth/contacts/chat-for-blocked-contact.png b/screenshots/truth/contacts/chat-for-blocked-contact.png
diff --git a/screenshots/truth/contacts/chat-for-stopped-contact.png b/screenshots/truth/contacts/chat-for-stopped-contact.png
diff --git a/screenshots/truth/contacts/chat-sends-attachments-only.png b/screenshots/truth/contacts/chat-sends-attachments-only.png
diff --git a/screenshots/truth/contacts/chat-sends-text-and-attachments.png b/screenshots/truth/contacts/chat-sends-text-and-attachments.png
diff --git a/screenshots/truth/contacts/chat-sends-text-only.png b/screenshots/truth/contacts/chat-sends-text-only.png
diff --git a/screenshots/truth/content-menu/item-no-buttons.png b/screenshots/truth/content-menu/item-no-buttons.png
diff --git a/screenshots/truth/content-menu/items-and-buttons.png b/screenshots/truth/content-menu/items-and-buttons.png
diff --git a/screenshots/truth/omnibox/selected.png b/screenshots/truth/omnibox/selected.png
diff --git a/screenshots/truth/select/enabled-multi-selection.png b/screenshots/truth/select/enabled-multi-selection.png
diff --git a/screenshots/truth/select/endpoint-initial-value-updated.png b/screenshots/truth/select/endpoint-initial-value-updated.png
diff --git a/screenshots/truth/select/endpoint-initial-value.png b/screenshots/truth/select/endpoint-initial-value.png
diff --git a/screenshots/truth/select/expressions.png b/screenshots/truth/select/expressions.png
diff --git a/screenshots/truth/select/functions.png b/screenshots/truth/select/functions.png
diff --git a/screenshots/truth/select/initial-value.png b/screenshots/truth/select/initial-value.png
diff --git a/screenshots/truth/select/multi-with-endpoint.png b/screenshots/truth/select/multi-with-endpoint.png
diff --git a/screenshots/truth/select/multiple-initial-values.png b/screenshots/truth/select/multiple-initial-values.png
diff --git a/screenshots/truth/select/selected-multi-test.png b/screenshots/truth/select/selected-multi-test.png
diff --git a/screenshots/truth/select/static-initial-value.png b/screenshots/truth/select/static-initial-value.png
diff --git a/screenshots/truth/select/static-initial-via-selected.png b/screenshots/truth/select/static-initial-via-selected.png
diff --git a/screenshots/truth/select/value-initial.png b/screenshots/truth/select/value-initial.png
diff --git a/src/aliaseditor/AliasEditor.ts b/src/aliaseditor/AliasEditor.ts
@@ -194,7 +194,7 @@ export class AliasEditor extends LitElement {
   private handleSearchSelection(evt: CustomEvent) {
     const selection = evt.detail.selected as FeatureProperties;
     this.showAliasDialog(selection);
-    const select = this.shadowRoot.querySelector('temba-select') as Select;
+    const select = this.shadowRoot.querySelector('temba-select') as Select<any>;
     select.clear();
   }
 

diff --git a/src/button/Button.ts b/src/button/Button.ts
@@ -7,7 +7,8 @@ export class Button extends LitElement {
   static get styles() {
     return css`
       :host {
-        display: inline-block;
+        display: flex;
+        align-self: stretch;
         font-family: var(--font-family);
         font-weight: 400;
       }
@@ -29,13 +30,15 @@ export class Button extends LitElement {
       .button-container {
         color: #fff;
         cursor: pointer;
-        display: block;
+        display: flex;
+        flex-grow: 1;
         border-radius: var(--curvature);
         outline: none;
         transition: background ease-in var(--transition-speed);
         user-select: none;
         -webkit-user-select: none;
         text-align: center;
+        border: var(--button-border, none);
       }
 
       .button-name {
@@ -70,6 +73,7 @@ export class Button extends LitElement {
         transition: var(--transition-speed);
         background: var(--button-mask);
         display: flex;
+        align-items: center;
       }
 
       .button-container.disabled-button {

diff --git a/src/chat/Chat.ts b/src/chat/Chat.ts
@@ -60,6 +60,22 @@ export class Chat extends RapidElement {
         z-index: 1;
       }
 
+      slot[name='header'] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        display: block;
+      }
+
+      slot[name='footer'] {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: block;
+      }
+
       .block {
         margin-bottom: 1em;
         display: flex;
@@ -160,6 +176,7 @@ export class Chat extends RapidElement {
         padding-bottom: 0.25em;
         background: var(--color-chat-in, #f1f1f1);
         border-radius: var(--curvature);
+        border: var(--chat-border-in, none);
       }
 
       .bubble .name {
@@ -179,6 +196,7 @@ export class Chat extends RapidElement {
 
       .incoming .bubble {
         background: var(--color-chat-out, #3c92dd);
+        border: var(--chat-border-out, none);
         color: white;
       }
 
@@ -228,7 +246,6 @@ export class Chat extends RapidElement {
       }
 
       .messages {
-        background: #fff;
         position: relative;
         flex-grow: 1;
         overflow: hidden;
@@ -245,6 +262,7 @@ export class Chat extends RapidElement {
         -webkit-overflow-scrolling: touch;
         overflow-scrolling: touch;
         padding: 1em 1em 1em 1em;
+        padding-bottom: 2.5em;
         display: flex;
         flex-direction: column-reverse;
       }
@@ -722,11 +740,13 @@ export class Chat extends RapidElement {
         </div>
         ${showAvatar
           ? html`<div class="avatar" style="align-self:flex-end">
-              ${email
-                ? html`<temba-user email=${email}></temba-user>`
-                : name
-                ? html`<temba-user fullname=${name}></temba-user>`
-                : html`<temba-user system></temba-user>`}
+              <temba-user
+                email=${email}
+                name=${name}
+                avatar=${currentMsg.user?.avatar}
+                ?system=${!email && !name}
+              >
+              </temba-user>
             </div>`
           : null}
       </div>
@@ -810,6 +830,8 @@ export class Chat extends RapidElement {
           class="${!this.fetching ? 'hidden' : ''}"
         ></temba-loading>
       </div>
+      <slot class="header" name="header"></slot>
+      <slot class="footer" name="footer"></slot>
     </div>`;
   }
 }
diff --git a/src/compose/Compose.ts b/src/compose/Compose.ts
@@ -113,8 +113,14 @@ export class Compose extends FormElement {
       }
 
       temba-tabs {
-        --focused-tab-color: #f4f4f4;
-        min-height: var(--compose-min-height, 13.5em);
+        --temba-tabs-border-bottom: none;
+        --temba-tabs-border-left: none;
+        --temba-tabs-border-right: none;
+        --temba-tabs-options-padding: 0.25em 0 0 0.25em;
+      }
+
+      temba-completion {
+        --textarea-min-height: 8em;
       }
 
       .quick-replies {
@@ -483,7 +489,7 @@ export class Compose extends FormElement {
       num > 0 &&
       evt.ctrlKey &&
       evt.metaKey &&
-      num <= tabs.tabs.length
+      num <= tabs.options.length
     ) {
       tabs.index = num - 1;
     }
@@ -526,7 +532,7 @@ export class Compose extends FormElement {
   }
 
   private handleLanguageChange(evt: Event) {
-    const select = evt.target as Select;
+    const select = evt.target as Select<any>;
     this.currentLanguage = select.values[0].iso;
   }
 
@@ -618,15 +624,14 @@ export class Compose extends FormElement {
     }
 
     const tabs = this.shadowRoot.querySelector('temba-tabs') as TabPane;
-    tabs.index = tabs.tabs.findIndex((tab) => tab.name === 'Reply');
+    tabs.index = tabs.options.findIndex((tab) => tab.name === 'Reply');
   }
 
   private getActions(): TemplateResult {
     const showOptins = this.optIns && this.isBaseLanguage();
     const showTemplates = this.templates && this.isBaseLanguage();
     return html`
       <temba-tabs
-        embedded
         focusedname
         @temba-context-changed=${this.handleTabChanged}
         refresh="${(this.currentAttachments || []).length}|${this.index}|${this