feat: mode type button toolbar

Author: peterpeterparker

studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx

@@ -607,15 +607,23 @@ export class AppEditorToolbar {
     render() {
         return [
             <div class={this.displayed ? "editor-toolbar displayed" : "editor-toolbar"}>
-                {this.renderActions()}
+                {this.renderDelete()}
                 {this.renderSlotType()}
+                {this.renderActions()}
                 {this.renderCodeOptions()}
             </div>,
             <input type="color" name="color-picker" value={this.color}></input>,
             <input type="color" name="background-picker" value={this.background}></input>
         ];
     }
 
+    private renderDelete() {
+        return <a onClick={() => this.deleteElement()}
+                  class={this.deckBusy && this.deckOrSlide ? "disabled" : undefined}>
+            <ion-icon name="trash"></ion-icon>
+        </a>
+    }
+
     private renderActions() {
         const styleColor = {
             'border-bottom': '2px solid ' + this.color
@@ -625,10 +633,7 @@ export class AppEditorToolbar {
             'border-bottom': '2px solid ' + this.background
         };
 
-        return [<a onClick={() => this.deleteElement()}
-                   class={this.deckBusy && this.deckOrSlide ? "disabled" : undefined}>
-            <ion-icon name="trash"></ion-icon>
-        </a>,
+        return [
             <a onClick={(e: UIEvent) => this.openForDeckOrSlide(e, this.openColorPicker)}>
                 <ion-label style={styleColor}>A</ion-label>
             </a>,

studio/src/components.d.ts

@@ -8,12 +8,12 @@
 import '@stencil/core';
 
 import '@ionic/core';
+import 'ionicons';
 import 'deckdeckgo';
 import 'deckdeckgo-highlight-code';
 import 'deckdeckgo-inline-editor';
 import 'deckdeckgo-qrcode';
 import 'deckdeckgo-remote';
-import 'ionicons';
 import {
   EventEmitter,
 } from '@stencil/core';