feat(#680): order and small devices

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

Author: peterpeterparker

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

@@ -55,7 +55,7 @@ export class AppActionsElement {
   private align: TextAlign | undefined;
 
   @State()
-  private list: SlotType;
+  private list: SlotType | undefined;
 
   @Event() private blockSlide: EventEmitter<boolean>;
 
@@ -971,6 +971,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 +986,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.toggleList();
         }
       }
     });
 
     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 +1132,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
@@ -1154,8 +1164,8 @@ export class AppActionsElement {
   }
 
   private renderList() {
-    const classListOL: string | undefined = this.list === SlotType.OL ? undefined : 'hidden';
-    const classListUL: string | undefined = this.list === SlotType.UL ? undefined : 'hidden';
+    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';
 
     return [
       <ion-tab-button onClick={() => this.toggleList()} aria-label="Toggle to an unordered list" color="primary" mode="md" class={classListUL}>

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

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

studio/src/components.d.ts

@@ -229,7 +229,9 @@ export namespace Components {
   }
   interface AppMoreElementActions {
     'copy': boolean;
+    'list': boolean;
     'notes': boolean;
+    'reveal': boolean;
   }
   interface AppMoreShareOptions {}
   interface AppNavigation {
@@ -1238,7 +1240,9 @@ declare namespace LocalJSX {
   }
   interface AppMoreElementActions {
     'copy'?: boolean;
+    'list'?: boolean;
     'notes'?: boolean;
+    'reveal'?: boolean;
   }
   interface AppMoreShareOptions {}
   interface AppNavigation {