@nyaruka/temba-components 0.118.2 → 0.118.4

package/src/lightbox/Lightbox.ts

@@ -41,6 +41,19 @@ export class Lightbox extends RapidElement {
         overflow: hidden;
         box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
       }
+
+      .download {
+        background: rgba(0, 0, 0, 0.5);
+        position: absolute;
+        display:flex;
+        align-items:center;
+        color:#fff;
+        padding:0.5em;
+        border-radius:var(--curvature);
+        background:rgba(0,0,0,0.5);
+      }
+
+  }
     `;
   }
 
@@ -62,8 +75,8 @@ export class Lightbox extends RapidElement {
   private height: number;
   private width: number;
   private scale = 1;
-  private xTrans = '0px';
-  private yTrans = '0px';
+  private xTrans = 0;
+  private yTrans = 0;
 
   protected updated(
     changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
@@ -92,8 +105,8 @@ export class Lightbox extends RapidElement {
     this.width = bounds.width;
     this.height = bounds.height;
 
-    this.xTrans = '0px';
-    this.yTrans = '0px';
+    this.xTrans = 0;
+    this.yTrans = 0;
     this.scale = 1;
 
     let desiredWidth = this.width;
@@ -116,11 +129,11 @@ export class Lightbox extends RapidElement {
 
     const xGrowth = (desiredWidth - this.width) / 2;
     const xDest = (window.innerWidth - desiredWidth) / 2;
-    this.xTrans = xDest - this.left + xGrowth + 'px';
+    this.xTrans = xDest - this.left + xGrowth;
 
     const yGrowth = (desiredHeight - this.height) / 2;
     const yDest = (window.innerHeight - desiredHeight) / 2;
-    this.yTrans = yDest - this.top + yGrowth + 'px';
+    this.yTrans = yDest - this.top + yGrowth;
 
     this.scale = desiredScale;
     this.show = true;
@@ -139,13 +152,12 @@ export class Lightbox extends RapidElement {
       styles['left'] = this.left + 'px';
       styles['top'] = this.top + 'px';
       styles['width'] = this.width + 'px';
-      styles['height'] = this.height + 'px';
     }
 
     if (this.zoom) {
       styles[
         'transform'
-      ] = `translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`;
+      ] = `translate(${this.xTrans}px, ${this.yTrans}px) scale(${this.scale}, ${this.scale})`;
     }
 
     return html`
@@ -162,7 +174,7 @@ export class Lightbox extends RapidElement {
           style="transition: all ${this.animationTime}ms; ease"
         ></div>
         <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>
-          ${this.show ? this.ele : null}
+          ${this.show ? html`${this.ele}` : null}
         </div>
       </div>
     `;

package/src/mediapicker/MediaPicker.ts

@@ -47,6 +47,7 @@ export class MediaPicker extends RapidElement {
         flex-direction: row;
         flex-wrap: wrap;
         padding: 0.2em;
+        align-items: center;
       }
 
       .attachment-item {

package/src/thumbnail/Thumbnail.ts

@@ -3,7 +3,6 @@ import { RapidElement } from '../RapidElement';
 import { property } from 'lit/decorators.js';
 import { getClasses } from '../utils';
 import { Lightbox } from '../lightbox/Lightbox';
-import { styleMap } from 'lit-html/directives/style-map.js';
 import { WebChatIcon } from '../webchat';
 
 enum ThumbnailContentType {
@@ -48,8 +47,7 @@ export class Thumbnail extends RapidElement {
       .zoom .thumb {
         border-radius: 0px !important;
         width: calc(var(--thumb-size, 4em) + 0.8em);
-        height: calc(var(--thumb-size, 4em) + 0.8em);
-        max-height: calc(var(--thumb-size, 4em) + 0.8em);
+        max-height: calc(90vh - 10em);
       }
 
       .thumb {
@@ -57,8 +55,7 @@ export class Thumbnail extends RapidElement {
         background-position: center;
         background-repeat: no-repeat;
         border-radius: var(--curvature);
-        max-height: var(--thumb-size, 4em);
-        height: var(--thumb-size, 4em);
+        max-height: calc(var(--thumb-size, 4em) * 2);
         width: var(--thumb-size, 4em);
         display: flex;
         align-items: center;
@@ -84,8 +81,24 @@ export class Thumbnail extends RapidElement {
         display: block;
       }
 
-      .zoom temba-icon {
+      .download {
         display: none;
+        position: absolute;
+        right: 0em;
+        bottom: 0em;
+        border-radius: var(--curvature);
+        transform: scale(0.2) translate(3em, 3em);
+        padding: 0.4em;
+      }
+
+      .zoom .download {
+        display: block;
+        background: rgba(0, 0, 0, 0.5);
+      }
+
+      .zoom .download:hover {
+        background: rgba(0, 0, 0, 0.6);
+        cursor: pointer;
       }
     `;
   }
@@ -96,6 +109,12 @@ export class Thumbnail extends RapidElement {
   @property({ type: String })
   attachment: string;
 
+  @property({ type: Number })
+  ratio: number = 0;
+
+  @property({ type: Boolean })
+  preview: boolean = true;
+
   @property({ type: Boolean, attribute: false })
   zoom: boolean;
 
@@ -107,6 +126,23 @@ export class Thumbnail extends RapidElement {
   ): void {
     super.updated(changes);
 
+    if (
+      changes.has('contentType') &&
+      this.contentType === ThumbnailContentType.IMAGE
+    ) {
+      const toObserve = this.shadowRoot.querySelector('.observe');
+      if (toObserve) {
+        new ResizeObserver((e, observer) => {
+          if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {
+            this.ratio = toObserve.clientHeight / toObserve.clientWidth;
+            this.preview =
+              this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);
+            observer.disconnect();
+          }
+        }).observe(toObserve);
+      }
+    }
+
     // convert our attachment to a url and label
     if (changes.has('attachment')) {
       if (this.attachment) {
@@ -134,7 +170,7 @@ export class Thumbnail extends RapidElement {
   }
 
   public handleThumbnailClicked() {
-    if (this.contentType === ThumbnailContentType.IMAGE) {
+    if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {
       window.setTimeout(() => {
         const lightbox = document.querySelector('temba-lightbox') as Lightbox;
         lightbox.showElement(this);
@@ -144,6 +180,14 @@ export class Thumbnail extends RapidElement {
     }
   }
 
+  public handleDownload(e: Event) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    // open this.url in another tab
+    window.open(this.url, '_blank');
+  }
+
   public render() {
     return html`
       <div
@@ -151,21 +195,21 @@ export class Thumbnail extends RapidElement {
         class="${getClasses({ wrapper: true, zoom: this.zoom })}"
         url=${this.url}
       >
-        <div
-          class="thumb ${this.contentType} "
-          style="${this.url
-            ? styleMap({
-                backgroundImage: `url(${this.url})`
-              })
-            : ''}"
-        >
-          ${this.contentType !== ThumbnailContentType.IMAGE
-            ? html`<temba-icon
+        ${this.contentType === ThumbnailContentType.IMAGE && this.preview
+          ? html`<div class=""><div class="download" @click=${this.handleDownload.bind(
+              this
+            )}><temba-icon size="1" style="color:#fff;" name="download"></temba-icon></div><img
+          class="observe thumb ${this.contentType}"
+          src="${this.url}"
+        ></img></div>`
+          : html`<div
+              style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
+            >
+              <temba-icon
                 size="1.5"
                 name="${ThumbnailIcons[this.contentType]}"
-              ></temba-icon>`
-            : null}
-        </div>
+              ></temba-icon>
+            </div>`}
       </div>
     `;
   }

package/test/temba-date.test.ts

@@ -15,7 +15,7 @@ export const getDate = async (attrs: any = {}) => {
   return (await getComponent(TAG, attrs)) as TembaDate;
 };
 
-mockNow('2022-12-02T21:00:00.000000-07:00');
+mockNow('2022-12-02T21:00:00.000000');
 
 describe('temba-date', () => {
   beforeEach(() => {
@@ -23,7 +23,7 @@ describe('temba-date', () => {
   });
 
   it('renders default', async () => {
-    const date = await getDate({ value: '1978-11-18T02:22:00.000000-07:00' });
+    const date = await getDate({ value: '1978-11-18T02:22:00.000000' });
     const dateString = (
       date.shadowRoot.querySelector('.date') as HTMLSpanElement
     ).innerText;
@@ -34,7 +34,7 @@ describe('temba-date', () => {
 
   it('renders duration', async () => {
     const date = await getDate({
-      value: '1978-11-18T02:22:00.000000-07:00',
+      value: '1978-11-18T02:22:00.000000',
       display: 'duration'
     });
     const dateString = (
@@ -47,7 +47,7 @@ describe('temba-date', () => {
 
   it('renders datetime', async () => {
     const date = await getDate({
-      value: '1978-11-18T02:22:00.000000-07:00',
+      value: '1978-11-18T02:22:00.000000',
       display: 'datetime'
     });
     const dateString = (
@@ -55,15 +55,26 @@ describe('temba-date', () => {
     ).innerText;
 
     await assertScreenshot('date/datetime', getClip(date));
-    expect(dateString).to.equal('11/18/1978, 9:22 AM');
+    expect(dateString).to.equal('11/18/1978, 2:22 AM');
+  });
+
+  it('renders timedate', async () => {
+    const date = await getDate({
+      value: '2022-12-01T21:30:00.000000',
+      display: 'timedate'
+    });
+    const dateString = (
+      date.shadowRoot.querySelector('.date') as HTMLSpanElement
+    ).innerText;
+    await assertScreenshot('date/timedate', getClip(date));
+    expect(dateString).to.equal('Dec 1');
   });
 
   it('renders inline', async () => {
     const el: HTMLElement = await fixture(html`
       <span
         >Your birthday is
-        <temba-date value="1978-11-18T02:22:00.000000-07:00"></temba-date
-        >!</span
+        <temba-date value="1978-11-18T02:22:00.000000"></temba-date>!</span
       >
     `);