@nyaruka/temba-components 0.26.1 → 0.26.4

package/src/contacts/ContactChat.ts

@@ -14,35 +14,36 @@ const DEFAULT_REFRESH = 10000;
 export class ContactChat extends RapidElement {
   public static get styles() {
     return css`
-      :host {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
-          0 1px 2px 0 rgba(0, 0, 0, 0.06);
-
-        height: 100%;
-        border-radius: var(--curvature);
-
-        flex-grow: 1;
-        width: 100%;
-        display: block;
-        background: #f2f2f2;
-        overflow: hidden;
-      }
-
       .left-pane {
         box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0);
         transition: box-shadow 600ms linear;
       }
 
       .left-pane.open {
-        box-shadow: -13px 10px 7px 14px rgba(0, 0, 0, 0.15);
         z-index: 1000;
       }
 
+      :host {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: row;
+        min-height: 0;
+        border-radius: var(--curvature);
+      }
+
       .chat-wrapper {
         display: flex;
+        flex-grow: 1;
         flex-direction: column;
-        height: 100%;
         overflow: hidden;
+        min-height: 0;
+      }
+
+      temba-contact-history {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
       }
 
       .chatbox {
@@ -53,6 +54,11 @@ export class ContactChat extends RapidElement {
         flex-direction: column;
         z-index: 3;
         border-bottom-left-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+      }
+
+      .chatbox.full {
+        border-bottom-right-radius: 0 !important;
       }
 
       .closed-footer {
@@ -176,6 +182,9 @@ export class ContactChat extends RapidElement {
   @property({ type: Boolean })
   showDetails = true;
 
+  @property({ type: Boolean })
+  toolbar = false;
+
   @property({ type: Boolean })
   monitor = false;
 
@@ -321,14 +330,13 @@ export class ContactChat extends RapidElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: flex; height: 100%;">
-        <div
-          style="flex-grow: 1; margin-right: 0em;"
-          class="left-pane  ${this.showDetails ? 'open' : ''}"
-        >
-          <div class="chat-wrapper">
-            ${this.currentContact
-              ? html` <temba-contact-history
+      <div
+        style="flex-grow: 1; margin-right: 0em; display:flex; flex-direction:row; min-height: 0;"
+        class="left-pane  ${this.showDetails ? 'open' : ''}"
+      >
+        <div class="chat-wrapper">
+          ${this.currentContact
+            ? html`<temba-contact-history
                     .uuid=${this.currentContact.uuid}
                     .contact=${this.currentContact}
                     .ticket=${
@@ -349,7 +357,9 @@ export class ContactChat extends RapidElement {
                             @click=${this.handleReopen}
                           ></temba-button>
                         </div>`
-                      : html` <div class="chatbox">
+                      : html` <div
+                          class="chatbox ${this.toolbar ? 'full' : ''}"
+                        >
                           <temba-completion
                             @change=${this.handleChatChange}
                             .value=${this.currentChat}
@@ -375,81 +385,88 @@ export class ContactChat extends RapidElement {
                         </div>`
                   }
                   </div>`
-              : null}
-          </div>
+            : null}
         </div>
-        ${this.currentContact
-          ? html`<temba-contact-details
-              style="z-index: 10"
-              class="${this.showDetails ? '' : 'hidden'}"
-              showGroups="true"
-              .visible=${this.showDetails}
-              .ticket=${this.currentTicket}
-              .contact=${this.currentContact}
-            ></temba-contact-details>`
-          : null}
+      </div>
+
+      ${this.toolbar
+        ? html`${
+            this.currentContact
+              ? html`<temba-contact-details
+                  style="z-index: 10"
+                  class="${this.showDetails ? '' : 'hidden'}"
+                  showGroups="true"
+                  .visible=${this.showDetails}
+                  .ticket=${this.currentTicket}
+                  .contact=${this.currentContact}
+                ></temba-contact-details>`
+              : null
+          }
 
         <div class="toolbar ${this.showDetails ? '' : 'closed'}">
-          ${this.currentContact
-            ? html`
-                <temba-tip
-                  style="margin-top:5px"
-                  text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
-                  position="left"
-                  hideOnChange
-                >
-                  <temba-icon
-                    id="details-button"
-                    name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
-                    @click="${this.handleDetailSlider}"
-                    clickable
-                    animatechange="spin"
-                  ></temba-icon>
-                </temba-tip>
-
-                ${this.currentTicket
-                  ? html`<temba-tip
-                        style="margin-top:5px"
-                        text="Assign"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="assign-button"
-                          name="user"
-                          @click="${() => {
-                            const modax = this.shadowRoot.getElementById(
-                              'assign-dialog'
-                            ) as Modax;
-                            modax.open = true;
-                          }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>
-                      <temba-tip
-                        style="margin-top:5px"
-                        text="Add Note"
-                        position="left"
-                      >
-                        <temba-icon
-                          id="add-note-button"
-                          name="edit"
-                          @click="${() => {
-                            const note = this.shadowRoot.getElementById(
-                              'note-dialog'
-                            ) as Modax;
-                            note.open = true;
-                          }}"
-                          clickable
-                        ></temba-icon>
-                      </temba-tip>`
-                  : null}
-              `
-            : null}
+          ${
+            this.currentContact
+              ? html`
+                  <temba-tip
+                    style="margin-top:5px"
+                    text="${this.showDetails ? 'Hide Details' : 'Show Details'}"
+                    position="left"
+                    hideOnChange
+                  >
+                    <temba-icon
+                      id="details-button"
+                      name="${this.showDetails ? 'chevrons-left' : 'sidebar'}"
+                      @click="${this.handleDetailSlider}"
+                      clickable
+                      animatechange="spin"
+                    ></temba-icon>
+                  </temba-tip>
+
+                  ${this.currentTicket
+                    ? html`<temba-tip
+                          style="margin-top:5px"
+                          text="Assign"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="assign-button"
+                            name="user"
+                            @click="${() => {
+                              const modax = this.shadowRoot.getElementById(
+                                'assign-dialog'
+                              ) as Modax;
+                              modax.open = true;
+                            }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>
+                        <temba-tip
+                          style="margin-top:5px"
+                          text="Add Note"
+                          position="left"
+                        >
+                          <temba-icon
+                            id="add-note-button"
+                            name="edit"
+                            @click="${() => {
+                              const note = this.shadowRoot.getElementById(
+                                'note-dialog'
+                              ) as Modax;
+                              note.open = true;
+                            }}"
+                            clickable
+                          ></temba-icon>
+                        </temba-tip>`
+                    : null}
+                `
+              : null
+          }
         </div>
       </div>
 
-      ${this.currentTicket
-        ? html`<temba-modax
+      ${
+        this.currentTicket
+          ? html`<temba-modax
               header="Add Note"
               id="note-dialog"
               @temba-submitted=${this.refresh}
@@ -461,6 +478,8 @@ export class ContactChat extends RapidElement {
               @temba-submitted=${this.handleTicketAssigned}
               endpoint="/ticket/assign/${this.currentTicket.uuid}/"
             /></temba-modax>`
+          : null
+      }`
         : null}
     `;
   }

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>
     `;
   }
 }