feat(#680): toggle list with popover (new standard UX)

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, h, Listen, Method, State, Prop} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State} from '@stencil/core';
 import {modalController, OverlayEventDetail, popoverController} from '@ionic/core';
 
 import {Subject, Subscription} from 'rxjs';
@@ -14,6 +14,7 @@ import {RevealSlotUtils} from '../../../../../utils/editor/reveal-slot.utils';
 import {SlotType} from '../../../../../utils/editor/slot-type';
 import {SlotUtils} from '../../../../../utils/editor/slot.utils';
 import {AlignUtils, TextAlign} from '../../../../../utils/editor/align.utils';
+import {ListUtils} from '../../../../../utils/editor/list.utils';
 
 import {EditAction} from '../../../../../utils/editor/edit-action';
 import {MoreAction} from '../../../../../utils/editor/more-action';
@@ -55,7 +56,7 @@ export class AppActionsElement {
   private align: TextAlign | undefined;
 
   @State()
-  private list: SlotType | undefined;
+  private list: SlotType.OL | SlotType.UL | undefined;
 
   @Event() private blockSlide: EventEmitter<boolean>;
 
@@ -243,18 +244,6 @@ export class AppActionsElement {
     return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.DRAG_RESIZE_ROTATE;
   }
 
-  private isElementList(element: HTMLElement): SlotType {
-    if (!SlotUtils.isNodeList(element)) {
-      return undefined;
-    }
-
-    if (SlotUtils.isNodeRevealList(element)) {
-      return element && element.getAttribute('list-tag') === SlotType.UL ? SlotType.UL : SlotType.OL;
-    } else {
-      return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.OL ? SlotType.OL : SlotType.UL;
-    }
-  }
-
   private isElementImage(element: HTMLElement): boolean {
     return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.IMG;
   }
@@ -570,7 +559,7 @@ export class AppActionsElement {
     await modal.present();
   }
 
-  private async openSingleAction($event: UIEvent, component: 'app-reveal' | 'app-align') {
+  private async openSingleAction($event: UIEvent, component: 'app-reveal' | 'app-align' | 'app-list') {
     if (this.slide) {
       return;
     }
@@ -590,6 +579,8 @@ export class AppActionsElement {
         await this.toggleReveal(detail.data.reveal);
       } else if (detail.data && component === 'app-align') {
         await this.updateAlignAttribute(detail.data.align);
+      } else if (detail.data && component === 'app-list') {
+        await this.toggleList(detail.data.list);
       }
     });
 
@@ -749,7 +740,7 @@ export class AppActionsElement {
 
       this.align = await AlignUtils.getAlignment(element);
 
-      this.list = this.isElementList(element);
+      this.list = await ListUtils.isElementList(element);
 
       if (element) {
         element.addEventListener('paste', this.cleanOnPaste, false);
@@ -879,23 +870,19 @@ export class AppActionsElement {
     });
   }
 
-  private toggleList(): Promise<void> {
+  private toggleList(destinationListType: SlotType.OL | SlotType.UL): Promise<void> {
     return new Promise<void>(async (resolve) => {
       if (!this.selectedElement || !this.list) {
         resolve();
         return;
       }
 
-      const destinationListType: SlotType = this.list === SlotType.UL ? SlotType.OL : SlotType.UL;
-
       if (SlotUtils.isNodeRevealList(this.selectedElement)) {
         await this.updateRevealListAttribute(destinationListType);
       } else {
         await this.toggleSlotType(destinationListType);
       }
 
-      this.list = destinationListType;
-
       resolve();
     });
   }
@@ -989,7 +976,7 @@ export class AppActionsElement {
         } else if (detail.data.action === MoreAction.REVEAL) {
           await this.openSingleAction($event, 'app-reveal');
         } else if (detail.data.action === MoreAction.LIST) {
-          await this.toggleList();
+          await this.openSingleAction($event, 'app-list');
         }
       }
     });
@@ -1157,26 +1144,30 @@ export class AppActionsElement {
         color="primary"
         mode="md"
         class={classAlign}>
-        <ion-icon src={`/assets/icons/align-${this.align}.svg`}></ion-icon>
+        {this.align !== undefined ? (
+          <ion-icon src={`/assets/icons/align-${this.align}.svg`}></ion-icon>
+        ) : (
+          <ion-icon src={`/assets/icons/align-left.svg`}></ion-icon>
+        )}
         <ion-label>Alignment</ion-label>
       </ion-tab-button>
     );
   }
 
   private renderList() {
-    const classListOL: string | undefined = this.list === SlotType.OL ? 'wider-devices' : 'wider-devices hidden';
-    const classListUL: string | undefined = this.list === SlotType.UL ? 'wider-devices' : 'wider-devices hidden';
+    const classList: string | undefined = this.list === undefined ? 'hidden wider-devices' : 'wider-devices';
 
-    return [
-      <ion-tab-button onClick={() => this.toggleList()} aria-label="Toggle to an unordered list" color="primary" mode="md" class={classListUL}>
-        <ion-icon src="/assets/icons/ionicons/list.svg"></ion-icon>
-        <ion-label>Unordered list</ion-label>
-      </ion-tab-button>,
-      <ion-tab-button onClick={() => this.toggleList()} aria-label="Toggle to an ordered list" color="primary" mode="md" class={classListOL}>
-        <ion-icon src="/assets/icons/list-ol.svg"></ion-icon>
-        <ion-label>Ordered list</ion-label>
-      </ion-tab-button>,
-    ];
+    return (
+      <ion-tab-button
+        onClick={($event: UIEvent) => this.openSingleAction($event, 'app-list')}
+        aria-label="Edit ordered or unordered list"
+        color="primary"
+        mode="md"
+        class={classList}>
+        <ion-icon src={this.list === SlotType.OL ? '/assets/icons/list-ol.svg' : '/assets/icons/ionicons/list.svg'}></ion-icon>
+        <ion-label>List</ion-label>
+      </ion-tab-button>
+    );
   }
 
   private renderMore() {

studio/src/app/popovers/editor/app-list/app-list.scss

@@ -0,0 +1,16 @@
+app-list {
+  @import "../../../../global/theme/editor/editor-popover";
+
+  ion-item {
+    --background-activated: transparent;
+    --background-focused: transparent;
+    --background-hover: transparent;
+
+    cursor: pointer;
+
+    &:hover,
+    &.active {
+      --color: var(--ion-color-primary);
+    }
+  }
+}

studio/src/app/popovers/editor/app-list/app-list.tsx

@@ -0,0 +1,48 @@
+import {Component, Element, h, Prop, State} from '@stencil/core';
+
+import {SlotType} from '../../../utils/editor/slot-type';
+import {ListUtils} from '../../../utils/editor/list.utils';
+
+@Component({
+  tag: 'app-list',
+  styleUrl: 'app-list.scss',
+})
+export class AppList {
+  @Element() el: HTMLElement;
+
+  @Prop()
+  selectedElement: HTMLElement;
+
+  @State()
+  private currentList: SlotType.OL | SlotType.UL | undefined;
+
+  async componentWillLoad() {
+    this.currentList = await ListUtils.isElementList(this.selectedElement);
+  }
+
+  private async closePopover(list: SlotType.OL | SlotType.UL) {
+    await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({
+      list: list,
+    });
+  }
+
+  private async selectList(list: SlotType.OL | SlotType.UL) {
+    await this.closePopover(list);
+  }
+
+  render() {
+    return (
+      <ion-list>
+        <ion-item onClick={() => this.selectList(SlotType.UL)} class={this.currentList == SlotType.UL ? 'active' : undefined}>
+          <ion-icon slot="start" src="/assets/icons/ionicons/list.svg"></ion-icon>
+          <ion-label>Unordered list</ion-label>
+        </ion-item>
+
+        <ion-item onClick={() => this.selectList(SlotType.OL)} class={this.currentList == SlotType.OL ? 'active' : undefined}>
+          <ion-icon slot="start" src="/assets/icons/list-ol.svg"></ion-icon>
+          <ion-label>Ordered list</ion-label>
+        </ion-item>
+      </ion-list>
+    );
+  }
+}

studio/src/app/utils/editor/list.utils.tsx

@@ -0,0 +1,16 @@
+import {SlotType} from './slot-type';
+import {SlotUtils} from './slot.utils';
+
+export class ListUtils {
+  static async isElementList(element: HTMLElement): Promise<SlotType.OL | SlotType.UL | undefined> {
+    if (!SlotUtils.isNodeList(element)) {
+      return undefined;
+    }
+
+    if (SlotUtils.isNodeRevealList(element)) {
+      return element && element.getAttribute('list-tag') === SlotType.UL ? SlotType.UL : SlotType.OL;
+    } else {
+      return element && element.nodeName && element.nodeName.toLowerCase() === SlotType.OL ? SlotType.OL : SlotType.UL;
+    }
+  }
+}

studio/src/components.d.ts

@@ -222,6 +222,9 @@ export namespace Components {
   interface AppLandingContent {}
   interface AppLandingDeck {}
   interface AppLandingFooter {}
+  interface AppList {
+    'selectedElement': HTMLElement;
+  }
   interface AppLogo {}
   interface AppMenu {}
   interface AppMoreDeckActions {
@@ -665,6 +668,12 @@ declare global {
     new (): HTMLAppLandingFooterElement;
   };
 
+  interface HTMLAppListElement extends Components.AppList, HTMLStencilElement {}
+  var HTMLAppListElement: {
+    prototype: HTMLAppListElement;
+    new (): HTMLAppListElement;
+  };
+
   interface HTMLAppLogoElement extends Components.AppLogo, HTMLStencilElement {}
   var HTMLAppLogoElement: {
     prototype: HTMLAppLogoElement;
@@ -967,6 +976,7 @@ declare global {
     'app-landing-content': HTMLAppLandingContentElement;
     'app-landing-deck': HTMLAppLandingDeckElement;
     'app-landing-footer': HTMLAppLandingFooterElement;
+    'app-list': HTMLAppListElement;
     'app-logo': HTMLAppLogoElement;
     'app-menu': HTMLAppMenuElement;
     'app-more-deck-actions': HTMLAppMoreDeckActionsElement;
@@ -1233,6 +1243,9 @@ declare namespace LocalJSX {
   interface AppLandingContent {}
   interface AppLandingDeck {}
   interface AppLandingFooter {}
+  interface AppList {
+    'selectedElement'?: HTMLElement;
+  }
   interface AppLogo {}
   interface AppMenu {}
   interface AppMoreDeckActions {
@@ -1400,6 +1413,7 @@ declare namespace LocalJSX {
     'app-landing-content': AppLandingContent;
     'app-landing-deck': AppLandingDeck;
     'app-landing-footer': AppLandingFooter;
+    'app-list': AppList;
     'app-logo': AppLogo;
     'app-menu': AppMenu;
     'app-more-deck-actions': AppMoreDeckActions;
@@ -1506,6 +1520,7 @@ declare module "@stencil/core" {
       'app-landing-content': LocalJSX.AppLandingContent & JSXBase.HTMLAttributes<HTMLAppLandingContentElement>;
       'app-landing-deck': LocalJSX.AppLandingDeck & JSXBase.HTMLAttributes<HTMLAppLandingDeckElement>;
       'app-landing-footer': LocalJSX.AppLandingFooter & JSXBase.HTMLAttributes<HTMLAppLandingFooterElement>;
+      'app-list': LocalJSX.AppList & JSXBase.HTMLAttributes<HTMLAppListElement>;
       'app-logo': LocalJSX.AppLogo & JSXBase.HTMLAttributes<HTMLAppLogoElement>;
       'app-menu': LocalJSX.AppMenu & JSXBase.HTMLAttributes<HTMLAppMenuElement>;
       'app-more-deck-actions': LocalJSX.AppMoreDeckActions & JSXBase.HTMLAttributes<HTMLAppMoreDeckActionsElement>;