Merge pull request #703 from deckgo/studio-list-color

feat: list ordered and unordered toggle with new standard UX

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;
+  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();
     });
   }
@@ -971,6 +958,8 @@ export class AppActionsElement {
       componentProps: {
         notes: this.slide,
         copy: this.slide || this.shape,
+        reveal: !this.hideReveal(),
+        list: this.list !== undefined,
       },
       event: $event,
       mode: 'ios',
@@ -984,22 +973,30 @@ export class AppActionsElement {
           await this.clone();
         } else if (detail.data.action === MoreAction.DELETE) {
           await this.confirmDeleteElement($event);
+        } else if (detail.data.action === MoreAction.REVEAL) {
+          await this.openSingleAction($event, 'app-reveal');
+        } else if (detail.data.action === MoreAction.LIST) {
+          await this.openSingleAction($event, 'app-list');
         }
       }
     });
 
     await popover.present();
   }
 
+  private hideReveal(): boolean {
+    return this.slide || this.code || this.shape || this.slideNodeName === 'deckgo-slide-youtube';
+  }
+
   render() {
     return (
       <ion-toolbar>
         <ion-buttons slot="start">
           {this.renderEdit()}
           {this.renderShapes()}
+          {this.renderColor()}
           {this.renderReveal()}
           {this.renderAlign()}
-          {this.renderColor()}
           {this.renderList()}
           {this.renderImages()}
           {this.renderCodeOptions()}
@@ -1122,7 +1119,7 @@ export class AppActionsElement {
   }
 
   private renderReveal() {
-    const classReveal: string | undefined = this.slide || this.code || this.shape || this.slideNodeName === 'deckgo-slide-youtube' ? 'hidden' : undefined;
+    const classReveal: string | undefined = this.hideReveal() ? 'hidden wider-devices' : 'wider-devices';
 
     return (
       <ion-tab-button
@@ -1147,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 ? undefined : 'hidden';
-    const classListUL: string | undefined = this.list === SlotType.UL ? undefined : '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/actions/app-more-element-actions/app-more-element-actions.tsx

@@ -3,7 +3,7 @@ import {MoreAction} from '../../../../utils/editor/more-action';
 
 @Component({
   tag: 'app-more-element-actions',
-  styleUrl: 'app-more-element-actions.scss'
+  styleUrl: 'app-more-element-actions.scss',
 })
 export class AppMoreElementActions {
   @Element() el: HTMLElement;
@@ -14,9 +14,15 @@ export class AppMoreElementActions {
   @Prop()
   copy: boolean = false;
 
+  @Prop()
+  reveal: boolean = false;
+
+  @Prop()
+  list: boolean = false;
+
   private async closePopover(action: MoreAction) {
     await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({
-      action: action
+      action: action,
     });
   }
 
@@ -25,6 +31,8 @@ export class AppMoreElementActions {
       <div class="ion-padding">
         {this.renderNotes()}
         {this.renderCopy()}
+        {this.renderReveal()}
+        {this.renderList()}
         {this.renderDelete()}
       </div>
     );
@@ -54,6 +62,30 @@ export class AppMoreElementActions {
     );
   }
 
+  private renderList() {
+    if (!this.list) {
+      return undefined;
+    }
+
+    return (
+      <a onClick={() => this.closePopover(MoreAction.LIST)} aria-label="List">
+        <p>List</p>
+      </a>
+    );
+  }
+
+  private renderReveal() {
+    if (!this.reveal) {
+      return undefined;
+    }
+
+    return (
+      <a onClick={() => this.closePopover(MoreAction.REVEAL)} aria-label="Animation">
+        <p>Animation</p>
+      </a>
+    );
+  }
+
   private renderDelete() {
     return (
       <a onClick={() => this.closePopover(MoreAction.DELETE)} aria-label="Delete">

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/app/utils/editor/more-action.tsx

@@ -9,5 +9,7 @@ export enum MoreAction {
   NOTES,
   DELETE,
   HELP,
-  OFFLINE
+  OFFLINE,
+  LIST,
+  REVEAL,
 }