From 80e50839a6f1ca4f24fa72fef0ae2f11496db199 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 14 May 2020 13:09:14 +0200
Subject: [PATCH] feat: replace "toggle" with "transform"

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../app-actions-element.tsx                   |  4 +--
 .../editor/app-slot-type/app-slot-type.scss   | 19 +++++++++--
 .../editor/app-slot-type/app-slot-type.tsx    | 32 +++++++++++++------
 studio/src/assets/assets.json                 |  3 +-
 .../src/assets/icons/ionicons/color-wand.svg  |  1 +
 5 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 studio/src/assets/icons/ionicons/color-wand.svg

diff --git a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx b/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx
index eeb19b8a5..4b5cb6c14 100644
--- a/studio/src/app/components/editor/actions/element/app-actions-element/app-actions-element.tsx
+++ b/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>,
     ];
   }
diff --git a/studio/src/app/popovers/editor/app-slot-type/app-slot-type.scss b/studio/src/app/popovers/editor/app-slot-type/app-slot-type.scss
index 1d3470c4c..713ef1488 100644
--- a/studio/src/app/popovers/editor/app-slot-type/app-slot-type.scss
+++ b/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;
+      }
     }
   }
 
diff --git a/studio/src/app/popovers/editor/app-slot-type/app-slot-type.tsx b/studio/src/app/popovers/editor/app-slot-type/app-slot-type.tsx
index 018aff067..1c483af95 100644
--- a/studio/src/app/popovers/editor/app-slot-type/app-slot-type.tsx
+++ b/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>,
     ];
   }
 }
diff --git a/studio/src/assets/assets.json b/studio/src/assets/assets.json
index 1ba3463fc..7ebf49279 100644
--- a/studio/src/assets/assets.json
+++ b/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"}
   ]
 }
diff --git a/studio/src/assets/icons/ionicons/color-wand.svg b/studio/src/assets/icons/ionicons/color-wand.svg
new file mode 100644
index 000000000..5d118c52c
--- /dev/null
+++ b/studio/src/assets/icons/ionicons/color-wand.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-m</title><rect x='280.48' y='122.9' width='63.03' height='378.2' rx='10' ry='10' transform='translate(-129.23 312) rotate(-45)' style='fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px'/><rect x='180.35' y='164.45' width='63.29' height='95.1' transform='translate(-87.81 212) rotate(-45)'/><line x1='48' y1='192' x2='96' y2='192' style='stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='90.18' y1='90.18' x2='124.12' y2='124.12' style='stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='192' y1='48' x2='192' y2='96' style='stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='293.82' y1='90.18' x2='259.88' y2='124.12' style='stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/><line x1='124.12' y1='259.88' x2='90.18' y2='293.82' style='stroke:currentColor;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px'/></svg>