Merge pull request #731 from deckgo/toggle-to-transform

feat: replace "toggle" with "transform"

Author: peterpeterparker

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

@@ -1163,8 +1163,8 @@ export class AppActionsElement {
         <ion-label>Options</ion-label>
       </ion-tab-button>,
       <ion-tab-button onClick={() => this.openSlotType()} aria-label="Toggle element type" color="primary" mode="md" class={classToggle}>
-        <ion-icon src="/assets/icons/ionicons/add.svg"></ion-icon>
-        <ion-label>Toggle</ion-label>
+        <ion-icon src="/assets/icons/ionicons/color-wand.svg"></ion-icon>
+        <ion-label>Transform</ion-label>
       </ion-tab-button>,
     ];
   }

studio/src/app/popovers/editor/app-slot-type/app-slot-type.scss

@@ -18,14 +18,29 @@ app-slot-type {
   ion-list {
     ion-item {
       h1,
-      h2,
-      h3 {
+      h2 {
         font-weight: 500;
       }
 
+      h3 {
+        font-weight: 400;
+      }
+
+      h1,
+      h2,
+      h3,
       p {
         margin: 0;
       }
+
+      ion-icon {
+        color: var(--ion-color-dark);
+      }
+
+      span.placeholder {
+        width: 26px;
+        margin: 12px 32px 12px 0;
+      }
     }
   }
 

studio/src/app/popovers/editor/app-slot-type/app-slot-type.tsx

@@ -5,7 +5,7 @@ import {SlotUtils} from '../../../utils/editor/slot.utils';
 
 @Component({
   tag: 'app-slot-type',
-  styleUrl: 'app-slot-type.scss'
+  styleUrl: 'app-slot-type.scss',
 })
 export class AppSlideAdd {
   @Element() el: HTMLElement;
@@ -68,14 +68,14 @@ export class AppSlideAdd {
 
   private async closePopover(type?: SlotType) {
     await (this.el.closest('ion-popover') as HTMLIonPopoverElement).dismiss({
-      type: this.currentType !== type ? type : null
+      type: this.currentType !== type ? type : null,
     });
   }
 
   render() {
     return [
       <ion-toolbar>
-        <h2>Toggle section</h2>
+        <h2>Transform element</h2>
         <ion-router-link slot="end" onClick={() => this.closePopover()}>
           <ion-icon aria-label="Close" src="/assets/icons/ionicons/close.svg"></ion-icon>
         </ion-router-link>
@@ -84,26 +84,36 @@ export class AppSlideAdd {
       <ion-list>
         <a onClick={() => this.closePopover(SlotType.H1)} class={this.currentType === SlotType.H1 ? 'current' : ''}>
           <ion-item>
+            <ion-icon name="text-outline" slot="start"></ion-icon>
             <h1>Huge title</h1>
           </ion-item>
         </a>
         <a onClick={() => this.closePopover(SlotType.H2)} class={this.currentType === SlotType.H2 ? 'current' : ''}>
           <ion-item>
+            <span class="placeholder" slot="start">
+              &nbsp;
+            </span>
             <h2>Large title</h2>
           </ion-item>
         </a>
         <a onClick={() => this.closePopover(SlotType.H3)} class={this.currentType === SlotType.H3 ? 'current' : ''}>
           <ion-item>
+            <span class="placeholder" slot="start">
+              &nbsp;
+            </span>
             <h3>Small title</h3>
           </ion-item>
         </a>
         <a onClick={() => this.closePopover(SlotType.SECTION)} class={this.currentType === SlotType.SECTION ? 'current' : ''}>
           <ion-item>
+            <span class="placeholder" slot="start">
+              &nbsp;
+            </span>
             <p>Paragraph</p>
           </ion-item>
         </a>
         {this.renderComplexTypes()}
-      </ion-list>
+      </ion-list>,
     ];
   }
 
@@ -115,24 +125,28 @@ export class AppSlideAdd {
     return [
       <a onClick={() => this.closePopover(SlotType.OL)} class={this.currentType === SlotType.OL ? 'current' : ''}>
         <ion-item>
-          <p>List</p>
+          <ion-icon src="/assets/icons/ionicons/list.svg" slot="start"></ion-icon>
+          <ion-label>List</ion-label>
         </ion-item>
       </a>,
       <a onClick={() => this.closePopover(SlotType.IMG)} class={this.currentType === SlotType.IMG ? 'current' : ''}>
         <ion-item>
-          <p>Image</p>
+          <ion-icon src="/assets/icons/ionicons/images.svg" slot="start"></ion-icon>
+          <ion-label>Image</ion-label>
         </ion-item>
       </a>,
       <a onClick={() => this.closePopover(SlotType.CODE)} class={this.currentType === SlotType.CODE ? 'current' : ''}>
         <ion-item>
-          <p>Code</p>
+          <ion-icon src="/assets/icons/ionicons/code.svg" slot="start"></ion-icon>
+          <ion-label>Code</ion-label>
         </ion-item>
       </a>,
       <a onClick={() => this.closePopover(SlotType.MATH)} class={this.currentType === SlotType.MATH ? 'current' : ''}>
         <ion-item>
-          <p>Math</p>
+          <ion-icon src="/assets/icons/math.svg" slot="start"></ion-icon>
+          <ion-label>Math</ion-label>
         </ion-item>
-      </a>
+      </a>,
     ];
   }
 }

studio/src/assets/assets.json

@@ -239,6 +239,7 @@
     {"src": "/icons/align-center.svg", "ariaLabel": "Align center"},
     {"src": "/icons/align-left.svg", "ariaLabel": "Align left"},
     {"src": "/icons/align-right.svg", "ariaLabel": "Align right"},
-    {"src": "/icons/math.svg", "ariaLabel": "Math"}
+    {"src": "/icons/math.svg", "ariaLabel": "Math"},
+    {"src": "/icons/ionicons/color-wand.svg", "ariaLabel": "Transform element"}
   ]
 }