feat(#544): show opacity

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

Author: peterpeterparker

studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx

@@ -11,11 +11,11 @@ enum ApplyColorType {
   STROKE,
   TEXT,
   AXIS,
-  GRID
+  GRID,
 }
 
 @Component({
-  tag: 'app-color-chart'
+  tag: 'app-color-chart',
 })
 export class AppColorDeckSlide {
   @Element() el: HTMLElement;
@@ -207,7 +207,9 @@ export class AppColorDeckSlide {
       </ion-item>,
 
       <ion-item-divider class="ion-padding-top">
-        <ion-label>Opacity</ion-label>
+        <ion-label>
+          Opacity <small>{this.colorOpacity}%</small>
+        </ion-label>
       </ion-item-divider>,
 
       <ion-item class="item-opacity">
@@ -227,15 +229,15 @@ export class AppColorDeckSlide {
         onColorChange={($event: CustomEvent) => this.selectColor($event)}
         color-rgb={this.color}>
         <ion-icon src="/assets/icons/ionicons/ellipsis-vertical.svg" slot="more" aria-label="More" class="more"></ion-icon>
-      </deckgo-color>
+      </deckgo-color>,
     ];
   }
 
   private renderColorOptions() {
     const options = [
       <ion-select-option value={ApplyColorType.FILL}>Fill</ion-select-option>,
       <ion-select-option value={ApplyColorType.STROKE}>Stroke</ion-select-option>,
-      <ion-select-option value={ApplyColorType.TEXT}>Text</ion-select-option>
+      <ion-select-option value={ApplyColorType.TEXT}>Text</ion-select-option>,
     ];
 
     if (this.chartType != SlideChartType.PIE) {

studio/src/app/components/editor/color/app-color-code/app-color-code.tsx

@@ -11,12 +11,12 @@ enum CodeColorType {
   KEYWORD,
   FUNCTION,
   REGEX,
-  LINE_NUMBERS
+  LINE_NUMBERS,
 }
 
 @Component({
   tag: 'app-color-code',
-  styleUrl: 'app-color-code.scss'
+  styleUrl: 'app-color-code.scss',
 })
 export class AppColorCode {
   @Element() el: HTMLElement;
@@ -323,7 +323,9 @@ export class AppColorCode {
         </ion-item>
 
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.codeColorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
 
         <ion-item class="item-opacity">
@@ -370,7 +372,9 @@ export class AppColorCode {
         </ion-item>
 
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.highlightColorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
 
         <ion-item class="item-opacity">
@@ -393,7 +397,7 @@ export class AppColorCode {
             <ion-icon src="/assets/icons/ionicons/ellipsis-vertical.svg" slot="more" aria-label="More" class="more"></ion-icon>
           </deckgo-color>
         </div>
-      </ion-list>
+      </ion-list>,
     ];
   }
 }

studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx

@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   QR_CODE,
-  BACKGROUND
+  BACKGROUND,
 }
 
 @Component({
-  tag: 'app-color-qrcode'
+  tag: 'app-color-qrcode',
 })
 export class AppColorQRCode {
   @Element() el: HTMLElement;
@@ -158,7 +158,9 @@ export class AppColorQRCode {
           </ion-item>
         </ion-radio-group>
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.colorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
         <ion-item class="item-opacity">
           <ion-range
@@ -182,7 +184,7 @@ export class AppColorQRCode {
         <ion-button shape="round" onClick={() => this.resetColor()} fill="outline" class="delete">
           <ion-label>{this.resetLabelContent()}</ion-label>
         </ion-button>
-      </ion-item>
+      </ion-item>,
     ];
   }
 

studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx

@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   TEXT,
-  BACKGROUND
+  BACKGROUND,
 }
 
 @Component({
-  tag: 'app-color-sides'
+  tag: 'app-color-sides',
 })
 export class AppColorSides {
   @Element() el: HTMLElement;
@@ -177,7 +177,9 @@ export class AppColorSides {
           </ion-item>
         </ion-radio-group>
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.colorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
         <ion-item class="item-opacity">
           <ion-range
@@ -201,7 +203,7 @@ export class AppColorSides {
         <ion-button shape="round" onClick={() => this.resetColor()} fill="outline" class="delete">
           <ion-label>{this.resetLabelContent()}</ion-label>
         </ion-button>
-      </ion-item>
+      </ion-item>,
     ];
   }
 

studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx

@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   TEXT,
-  BACKGROUND
+  BACKGROUND,
 }
 
 @Component({
-  tag: 'app-color-text-background'
+  tag: 'app-color-text-background',
 })
 export class AppColorTextBackground {
   @Element() el: HTMLElement;
@@ -193,7 +193,9 @@ export class AppColorTextBackground {
           </ion-item>
         </ion-radio-group>
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.colorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
         <ion-item class="item-opacity">
           <ion-range
@@ -217,7 +219,7 @@ export class AppColorTextBackground {
         <ion-button shape="round" onClick={() => this.resetColor()} fill="outline" class="delete">
           <ion-label>{this.resetLabelContent()}</ion-label>
         </ion-button>
-      </ion-item>
+      </ion-item>,
     ];
   }
 

studio/src/app/popovers/editor/app-color/app-color.scss

@@ -11,4 +11,10 @@ app-color {
   ion-item.item-opacity {
     --padding-start: 8px;
   }
+
+  ion-item-divider {
+    small {
+      font-size: var(--font-size-very-small);
+    }
+  }
 }