feat: improve code and fonts UX

studio/src/app/components/editor/app-select-target-element/app-select-target-element.tsx

@@ -118,7 +118,7 @@ export class AppSelectTargetElement {
     if (this.slide) {
       return (
         <ion-segment-button value={TargetElement.SLIDE} mode="md">
-          <ion-label>Text</ion-label>
+          <ion-label>Font</ion-label>
         </ion-segment-button>
       );
     } else {
@@ -130,7 +130,7 @@ export class AppSelectTargetElement {
     if (this.textTarget) {
       return (
         <ion-segment-button value={TargetElement.TEXT} mode="md">
-          <ion-label>Text</ion-label>
+          <ion-label>Font</ion-label>
         </ion-segment-button>
       );
     } else {

studio/src/app/components/editor/styles/app-expansion-panel/app-expansion-panel.tsx

@@ -1,4 +1,4 @@
-import {Component, h, State, Prop} from '@stencil/core';
+import {Component, h, Prop} from '@stencil/core';
 
 @Component({
   tag: 'app-expansion-panel',
@@ -10,11 +10,17 @@ export class AppExpansionPanel {
   @Prop()
   expander: boolean = true;
 
-  @State()
-  private expanded: 'open' | 'close' = 'open';
+  @Prop({mutable: true})
+  expanded: 'open' | 'close' = 'open';
 
   // Source animation: https://css-tricks.com/using-css-transitions-auto-dimensions/
 
+  componentDidLoad() {
+    if (this.expanded === 'close') {
+      this.container.style.height = 0 + 'px';
+    }
+  }
+
   private toggle() {
     if (this.expanded === 'close') {
       this.expand();

studio/src/app/components/editor/styles/element/app-align/app-align.scss

@@ -1,21 +1,7 @@
 app-align {
-  ion-item.align {
-    --background-activated: transparent;
-    --background-focused: transparent;
-    --background-hover: transparent;
-
-    --color: rgba(0, 0, 0, 0.6);
-    font-size: var(--font-size-normal);
-
-    cursor: pointer;
-
-    &:hover,
-    &.active {
-      --color: black;
-
-      ion-icon {
-        color: black;
-      }
+  ion-list {
+    ion-item {
+      margin-bottom: 4px;
     }
   }
 }

studio/src/app/components/editor/styles/element/app-align/app-align.tsx

@@ -19,13 +19,13 @@ export class AppAlign {
     this.align = await AlignUtils.getAlignment(this.selectedElement);
   }
 
-  private async updateAlign(align: TextAlign): Promise<void> {
-    if (!this.selectedElement) {
+  private async updateAlign($event: CustomEvent): Promise<void> {
+    if (!this.selectedElement || !$event || !$event.detail) {
       return;
     }
 
-    this.selectedElement.style.textAlign = align;
-    this.align = align;
+    this.selectedElement.style.textAlign = $event.detail.value;
+    this.align = $event.detail.value;
 
     this.alignChange.emit();
   }
@@ -39,20 +39,23 @@ export class AppAlign {
       <app-expansion-panel>
         <ion-label slot="title">Alignment</ion-label>
         <ion-list>
-          {this.renderAlign(TextAlign.LEFT, 'Align left')}
-          {this.renderAlign(TextAlign.CENTER, 'Align center')}
-          {this.renderAlign(TextAlign.RIGHT, 'Align right')}
+          <ion-item class="select">
+            <ion-label>Alignment</ion-label>
+
+            <ion-select
+              value={this.align}
+              placeholder="Select an alignment"
+              onIonChange={($event: CustomEvent) => this.updateAlign($event)}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end">
+              <ion-select-option value={TextAlign.LEFT}>Left</ion-select-option>
+              <ion-select-option value={TextAlign.CENTER}>Center</ion-select-option>
+              <ion-select-option value={TextAlign.RIGHT}>Right</ion-select-option>
+            </ion-select>
+          </ion-item>
         </ion-list>
       </app-expansion-panel>
     );
   }
-
-  private renderAlign(align: TextAlign, text: string) {
-    return (
-      <ion-item onClick={() => this.updateAlign(align)} class={`align ${this.align == align ? 'active' : undefined}`}>
-        <ion-icon slot="start" src={`/assets/icons/align-${align}.svg`} role="presentation"></ion-icon>
-        <ion-label>{text}</ion-label>
-      </ion-item>
-    );
-  }
 }

studio/src/app/components/editor/color/app-color-code/app-color-code.scss → studio/src/app/components/editor/styles/element/app-color-code/app-color-code.scss

@@ -8,4 +8,13 @@ app-color-code {
   ion-item.action-button {
     padding-bottom: 8px;
   }
+
+  ion-list {
+    &.terminal,
+    &.theme {
+      ion-item {
+        margin-bottom: 4px;
+      }
+    }
+  }
 }

studio/src/app/components/editor/color/app-color-code/app-color-code.tsx → studio/src/app/components/editor/styles/element/app-color-code/app-color-code.tsx

@@ -1,6 +1,10 @@
-import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/core';
+import {Component, Event, EventEmitter, h, Prop, State} from '@stencil/core';
+
 import {alertController, RangeChangeEventDetail} from '@ionic/core';
-import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
+
+import {DeckdeckgoHighlightCodeCarbonTheme, DeckdeckgoHighlightCodeTerminal} from '@deckdeckgo/highlight-code';
+
+import {ColorUtils, InitStyleColor} from '../../../../../utils/editor/color.utils';
 
 enum CodeColorType {
   COMMENTS,
@@ -19,8 +23,6 @@ enum CodeColorType {
   styleUrl: 'app-color-code.scss',
 })
 export class AppColorCode {
-  @Element() el: HTMLElement;
-
   @Prop()
   selectedElement: HTMLElement;
 
@@ -45,11 +47,18 @@ export class AppColorCode {
   @State()
   private highlightColorOpacity: number = 100;
 
-  @Event() colorChange: EventEmitter<void>;
+  @State()
+  private terminal: DeckdeckgoHighlightCodeTerminal = DeckdeckgoHighlightCodeTerminal.CARBON;
+
+  @State()
+  private theme: DeckdeckgoHighlightCodeCarbonTheme = DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
+
+  @Event() codeDidChange: EventEmitter<void>;
 
   async componentWillLoad() {
-    await this.initColor();
-    await this.initCurrentHiglight();
+    const promises: Promise<void>[] = [this.initColor(), this.initCurrentHiglight(), this.initTerminal()];
+
+    await Promise.all(promises);
   }
 
   // prettier-ignore
@@ -68,6 +77,18 @@ export class AppColorCode {
     });
   }
 
+  private async initTerminal() {
+    this.terminal =
+      this.selectedElement && this.selectedElement.hasAttribute('terminal')
+        ? (this.selectedElement.getAttribute('terminal') as DeckdeckgoHighlightCodeTerminal)
+        : DeckdeckgoHighlightCodeTerminal.CARBON;
+
+    this.theme =
+      this.selectedElement && this.selectedElement.hasAttribute('theme')
+        ? (this.selectedElement.getAttribute('theme') as DeckdeckgoHighlightCodeCarbonTheme)
+        : DeckdeckgoHighlightCodeCarbonTheme.DRACULA;
+  }
+
   private selectColor($event: CustomEvent, colorFunction: Function): Promise<void> {
     return new Promise<void>(async (resolve) => {
       if (!this.selectedElement || !this.selectedElement.parentElement) {
@@ -165,13 +186,13 @@ export class AppColorCode {
   }
 
   // prettier-ignore
-  private initColor(): Promise<string> {
-    return new Promise<string>(async (resolve) => {
+  private initColor(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
       if (!this.selectedElement || !this.selectedElement.style) {
         this.codeColor = undefined;
         this.codeColorOpacity = 100;
 
-        resolve(null);
+        resolve();
         return;
       }
 
@@ -248,7 +269,7 @@ export class AppColorCode {
   }
 
   private emitColorChange() {
-    this.colorChange.emit();
+    this.codeDidChange.emit();
   }
 
   private updateOpacity($event: CustomEvent<RangeChangeEventDetail>, opacityFunction: Function): Promise<void> {
@@ -297,14 +318,40 @@ export class AppColorCode {
     });
   }
 
+  private toggle($event: CustomEvent, attribute: 'terminal' | 'theme'): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      if (!$event || !$event.detail) {
+        resolve();
+        return;
+      }
+
+      if (!this.selectedElement) {
+        resolve();
+        return;
+      }
+
+      if (attribute === 'terminal') {
+        this.terminal = $event.detail.value;
+      } else if (attribute === 'theme') {
+        this.theme = $event.detail.value;
+      }
+
+      this.selectedElement.setAttribute(attribute, $event.detail.value);
+
+      this.codeDidChange.emit();
+
+      resolve();
+    });
+  }
+
   render() {
-    return [this.renderCategoryColor(), this.renderHighlightLinesColor()];
+    return [this.renderTerminal(), this.renderTheme(), this.renderCategoryColor(), this.renderHighlightLinesColor()];
   }
 
   private renderCategoryColor() {
     return (
-      <app-expansion-panel>
-        <ion-label slot="title">Colors</ion-label>
+      <app-expansion-panel expanded={'close'}>
+        <ion-label slot="title">More colors</ion-label>
         <ion-list>
           <ion-item class="select">
             <ion-label>Apply a color to</ion-label>
@@ -365,9 +412,70 @@ export class AppColorCode {
     );
   }
 
-  private renderHighlightLinesColor() {
+  private renderTerminal() {
+    return (
+      <app-expansion-panel>
+        <ion-label slot="title">Terminal</ion-label>
+
+        <ion-list class="terminal">
+          <ion-item class="select">
+            <ion-label>Terminal</ion-label>
+
+            <ion-select
+              value={this.terminal}
+              placeholder="Select a terminal"
+              onIonChange={($event: CustomEvent) => this.toggle($event, 'terminal')}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end ion-text-capitalize">
+              {Object.keys(DeckdeckgoHighlightCodeTerminal).map((key: string) => {
+                return (
+                  <ion-select-option value={DeckdeckgoHighlightCodeTerminal[key]}>
+                    {DeckdeckgoHighlightCodeTerminal[key].replace(/^\w/, (c) => c.toUpperCase())}
+                  </ion-select-option>
+                );
+              })}
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </app-expansion-panel>
+    );
+  }
+
+  private renderTheme() {
     return (
       <app-expansion-panel>
+        <ion-label slot="title">Theme</ion-label>
+
+        <ion-list class="theme">
+          <ion-item class="select">
+            <ion-label>Theme</ion-label>
+
+            <ion-select
+              value={this.theme}
+              placeholder="Select a theme"
+              disabled={this.terminal !== DeckdeckgoHighlightCodeTerminal.CARBON}
+              onIonChange={($event: CustomEvent) => this.toggle($event, 'theme')}
+              interface="popover"
+              mode="md"
+              class="ion-padding-start ion-padding-end ion-text-capitalize">
+              {Object.keys(DeckdeckgoHighlightCodeCarbonTheme).map((key: string) => {
+                return (
+                  <ion-select-option value={DeckdeckgoHighlightCodeCarbonTheme[key]}>
+                    {DeckdeckgoHighlightCodeCarbonTheme[key].replace(/^\w/, (c) => c.toUpperCase())}
+                  </ion-select-option>
+                );
+              })}
+            </ion-select>
+          </ion-item>
+        </ion-list>
+      </app-expansion-panel>
+    );
+  }
+
+  private renderHighlightLinesColor() {
+    return (
+      <app-expansion-panel expanded={'close'}>
         <ion-label slot="title">Highlight lines</ion-label>
         <button slot="info" class="info" onClick={($event: UIEvent) => this.presentHighlightInfo($event)}>
           <ion-icon name="help"></ion-icon>

studio/src/app/components/editor/styles/element/app-font-size/app-font-size.scss

@@ -0,0 +1,7 @@
+app-font-size {
+  ion-list {
+    ion-item {
+      margin-bottom: 4px;
+    }
+  }
+}