Merge pull request #472 from nyaruka/add-workspace-select

Add WorkspaceSelect

src/button/Button.ts

@@ -128,6 +128,11 @@ export class Button extends LitElement {
         background: transparent;
       }
 
+      .lined-button .button-mask {
+        display: block;
+        flex-grow: 1;
+      }
+
       .lined-button .button-mask:hover {
         background: rgba(0, 0, 0, 0.03);
       }

src/dropdown/Dropdown.ts

@@ -37,7 +37,7 @@ export class Dropdown extends RapidElement {
         z-index: 2;
         padding: 0;
         opacity: 0;
-        border-radius: var(--curvature);
+        border-radius: calc(var(--curvature) * 1.5);
         background: #fff;
         transition: all calc(0.8 * var(--transition-speed)) var(--bounce);
         user-select: none;

src/list/TembaMenu.ts

@@ -8,6 +8,7 @@ import { Dropdown } from '../dropdown/Dropdown';
 import { NotificationList } from './NotificationList';
 import { ResizeElement } from '../ResizeElement';
 import { Store } from '../store/Store';
+
 export interface MenuItem {
   id?: string;
   vanity_id?: string;
@@ -32,6 +33,7 @@ export interface MenuItem {
   trigger?: boolean;
   event?: string;
   mobile?: boolean;
+  initial?: string;
 }
 
 interface MenuItemState {
@@ -587,11 +589,6 @@ export class TembaMenu extends ResizeElement {
         margin-right: 0.75em;
       }
 
-      temba-button[lined] {
-        margin: 0.2em 0;
-        display: block;
-      }
-
       .expand-icon {
         transform: rotate(180deg);
         --icon-color: rgba(255, 255, 255, 0.5);
@@ -653,6 +650,14 @@ export class TembaMenu extends ResizeElement {
       .level-0 .icon-wrapper {
         padding: 0.4em 0.9em;
       }
+
+      temba-workspace-select {
+        margin: 0.2em;
+        display: block;
+        --options-shadow: none;
+        --color-widget-border: transparent;
+        --widget-box-shadow: none;
+      }
     `;
   }
 
@@ -1062,6 +1067,16 @@ export class TembaMenu extends ResizeElement {
       return html`<div class="divider"></div>`;
     }
 
+    if (menuItem.type === 'temba-workspace-select') {
+      return html`<temba-workspace-select
+        @change=${(event) => {
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+        .values=${[JSON.parse(menuItem.initial)]}
+      ></temba-workspace-select>`;
+    }
+
     if (menuItem.type === 'temba-notification-list') {
       return html`<temba-notification-list
         endpoint=${menuItem.href}

src/options/Options.ts

@@ -17,16 +17,14 @@ export class Options extends RapidElement {
         user-select: none;
         border-radius: var(--curvature-widget);
         overflow: hidden;
-        margin-top: var(--options-margin-top);
         display: flex;
         flex-direction: column;
-        // transform: scaleY(0.5) translateY(-5em);
         transition: transform var(--transition-speed)
             cubic-bezier(0.71, 0.18, 0.61, 1.33),
           opacity var(--transition-speed) cubic-bezier(0.71, 0.18, 0.61, 1.33);
         opacity: 0;
-        border: 1px transparent;
         z-index: 1000;
+        pointer-events: none;
       }
 
       .shadow {
@@ -97,10 +95,11 @@ export class Options extends RapidElement {
       }
 
       .show {
-        // transform: scaleY(1) translateY(0);
         border: 1px solid var(--color-widget-border);
         opacity: 1;
         z-index: 1;
+        pointer-events: auto;
+        margin-top: var(--options-margin-top);
       }
 
       .option {
@@ -351,7 +350,7 @@ export class Options extends RapidElement {
         this.tempOptions = changed.get('options');
         window.setTimeout(() => {
           this.tempOptions = [];
-        }, 0);
+        }, 200);
       }
     }
 
@@ -568,17 +567,12 @@ export class Options extends RapidElement {
         .getBoundingClientRect();
 
       if (this.anchorTo) {
-        this.top = 0;
         const anchorBounds = this.anchorTo.getBoundingClientRect();
+        this.top = anchorBounds.bottom;
         if (anchorBounds.bottom + optionsBounds.height > window.innerHeight) {
           this.top = -(optionsBounds.height + anchorBounds.height + 20);
         }
         this.left = anchorBounds.left;
-
-        // adjust for parent scrolling
-        if (this.scrollParent) {
-          this.top += -this.scrollParent.scrollTop;
-        }
       }
     }
   }
@@ -631,13 +625,15 @@ export class Options extends RapidElement {
       vertical *= -1;
     }
 
-    const containerStyle = {
-      'margin-left': `${this.marginHorizontal}px`,
-      'margin-top': `${vertical}px`
-    };
+    const containerStyle = this.visible
+      ? {
+          'margin-left': `${this.marginHorizontal}px`,
+          'margin-top': `${vertical}px`
+        }
+      : {};
 
     if (this.top) {
-      containerStyle[`transform`] = `translateY(${this.top}px)`;
+      containerStyle['top'] = `${this.top}px`;
     }
 
     if (this.left) {
@@ -653,7 +649,7 @@ export class Options extends RapidElement {
       'options-container': true,
       show: this.visible,
       top: this.poppedTop,
-      anchored: !this.block,
+      anchored: !this.block && !!this.anchorTo,
       loading: this.loading,
       shadow: !this.hideShadow,
       bordered: this.hideShadow

src/select/Select.ts

@@ -499,6 +499,9 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: Array, attribute: 'options' })
   private staticOptions: any[] = [];
 
+  @property({ type: Boolean })
+  allowAnchor: boolean = true;
+
   private alphaSort = (a: any, b: any) => {
     // by default, all endpoint values are sorted by name
     if (this.endpoint) {
@@ -1510,7 +1513,7 @@ export class Select<T extends SelectOption> extends FormElement {
     .renderOptionDetail=${this.renderOptionDetail}
     .renderOptionName=${this.renderOptionName}
     .renderOption=${this.renderOption || this.renderOptionDefault}
-    .anchorTo=${this.anchorElement}
+    .anchorTo=${this.allowAnchor ? this.anchorElement : null}
     .options=${this.visibleOptions}
     .spaceSelect=${this.spaceSelect}
     .nameKey=${this.nameKey}
@@ -1523,7 +1526,7 @@ export class Select<T extends SelectOption> extends FormElement {
     <temba-options
     @temba-selection=${this.handleExpressionSelection}
     @temba-canceled=${() => {}}
-    .anchorTo=${this.anchorExpressions}
+    .anchorTo=${this.allowAnchor ? this.anchorExpressions : null}
     .options=${this.completionOptions}
     .renderOption=${renderCompletionOption}
     ?visible=${this.completionOptions.length > 0}

src/select/UserSelect.ts

@@ -64,7 +64,6 @@ export class UserSelect extends Select<UserOption> {
       email=${option.email}
       name=${option.name}
       avatar=${option.avatar}
-      scale="0.8"
       showname
     ></temba-user>`;
   }

src/select/WorkspaceSelect.ts

@@ -0,0 +1,71 @@
+import { css, CSSResultArray, html, TemplateResult } from 'lit';
+import { Select, SelectOption } from './Select';
+import { property } from 'lit/decorators.js';
+import { getScrollParent } from '../utils';
+
+export interface WorkspaceOption extends SelectOption {
+  name: string;
+  id: string;
+  type: string;
+}
+
+export class WorkspaceSelect extends Select<WorkspaceOption> {
+  static get styles(): CSSResultArray {
+    return [
+      super.styles,
+      css`
+        :host {
+          border: 0px solid blue;
+        }
+      `
+    ];
+  }
+
+  @property({ type: String })
+  endpoint = '/api/internal/orgs.json';
+
+  @property({ type: String })
+  nameKey = 'name';
+
+  @property({ type: String })
+  valueKey = 'id';
+
+  @property({ type: String })
+  placeholder: string = 'Choose Workspace';
+
+  @property({ type: Boolean })
+  sorted: boolean = true;
+
+  @property({ type: Object })
+  workspace: WorkspaceOption;
+
+  constructor() {
+    super();
+    this.shouldExclude = (option: WorkspaceOption) => {
+      const selected = this.values[0];
+      return option.id === selected?.id;
+    };
+
+    this.searchable = true;
+  }
+
+  public firstUpdated(changed: Map<string, any>) {
+    super.firstUpdated(changed);
+    this.allowAnchor = !!getScrollParent(this);
+  }
+
+  public prepareOptionsDefault(options: WorkspaceOption[]): WorkspaceOption[] {
+    options.forEach((option) => {
+      option.type = 'workspace';
+    });
+    return options;
+  }
+
+  public renderOptionDefault(option: WorkspaceOption): TemplateResult {
+    if (!option) {
+      return html``;
+    }
+
+    return html`<temba-user name=${option.name} showname></temba-user>`;
+  }
+}

src/user/TembaUser.ts

@@ -108,7 +108,8 @@ export class TembaUser extends RapidElement {
               border-radius: 100%;
               font-weight: 400;
               overflow: hidden;
-              font-size: 12px;
+              font-size: 0.8em;
+              margin-right: 0.75em;
               box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.1);
               background:${this.bgimage || this.bgcolor};"
       >

temba-modules.ts

@@ -63,6 +63,7 @@ import { StartProgress } from './src/progress/StartProgress';
 import { ShortcutList } from './src/list/ShortcutList';
 import { PopupSelect } from './src/select/PopupSelect';
 import { UserSelect } from './src/select/UserSelect';
+import { WorkspaceSelect } from './src/select/WorkspaceSelect';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -136,3 +137,4 @@ addCustomElement('temba-start-progress', StartProgress);
 addCustomElement('temba-shortcuts', ShortcutList);
 addCustomElement('temba-popup-select', PopupSelect);
 addCustomElement('temba-user-select', UserSelect);
+addCustomElement('temba-workspace-select', WorkspaceSelect);