merge: from master

Author: peterpeterparker

studio/src/app/components/feed/card/app-feed-card-tags/app-feed-card-tags.scss

@@ -16,11 +16,8 @@ app-feed-card-tags {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: 4px 8px;
-
-    &:not(:first-of-type) {
-      margin: 0 4px;
-    }
+    padding: 2px 8px;
+    margin: 4px 2px;
 
     font-size: var(--font-size-normal);
 

studio/src/app/components/feed/card/app-feed-card/app-feed-card.scss

@@ -11,6 +11,10 @@ app-feed-card {
         }
       }
 
+      p.content {
+        margin: 0;
+      }
+
       ion-card-title {
         white-space: nowrap;
         overflow: hidden;
@@ -37,6 +41,7 @@ app-feed-card {
 
     app-feed-card-tags {
       display: block;
+      height: 100%;
     }
   }
 

studio/src/app/popovers/editor/app-code/app-code.tsx

@@ -38,8 +38,6 @@ export class AppCode {
     @Prop()
     codeDidChange: EventEmitter<HTMLElement>;
 
-    private hidePopoverTimer;
-
     private prismService: PrismService;
 
     private currentLanguage: string = 'javascript';
@@ -98,20 +96,18 @@ export class AppCode {
         });
     }
 
-    private selectColor($event, colorFunction: Function): Promise<void> {
+    private selectColor($event: CustomEvent, colorFunction: Function): Promise<void> {
         return new Promise<void>(async (resolve) => {
             if (!this.selectedElement || !this.selectedElement.parentElement) {
                 resolve();
                 return;
             }
 
-            if (!$event || !$event.target || !$event.target.value) {
+            if (!$event || !$event.detail) {
                 resolve();
                 return;
             }
 
-            await this.privateHideShowPopover();
-
             colorFunction($event);
 
             this.emitCodeDidChange();
@@ -120,34 +116,16 @@ export class AppCode {
         });
     }
 
-    private setCodeColor = ($event) => {
-        this.codeColor = $event.target.value;
-        this.selectedElement.style.setProperty(this.getStyle(), $event.target.value);
+    private setCodeColor = ($event: CustomEvent) => {
+        this.codeColor = $event.detail.hex;
+        this.selectedElement.style.setProperty(this.getStyle(), $event.detail.hex);
     };
 
-    private setHighlightColor = ($event) => {
-        this.highlightColor = $event.target.value;
-        this.selectedElement.style.setProperty('--deckgo-highlight-code-line-background', $event.target.value);
+    private setHighlightColor = ($event: CustomEvent) => {
+        this.highlightColor = $event.detail.hex;
+        this.selectedElement.style.setProperty('--deckgo-highlight-code-line-background', $event.detail.hex);
     };
 
-    private privateHideShowPopover(): Promise<void> {
-        return new Promise<void>((resolve) => {
-            const popover: HTMLIonPopoverElement = this.el.closest('ion-popover');
-
-            popover.style.visibility = 'hidden';
-
-            if (this.hidePopoverTimer) {
-                clearTimeout(this.hidePopoverTimer);
-            }
-
-            this.hidePopoverTimer = setTimeout(() => {
-                popover.style.visibility = 'initial';
-            }, 1000);
-
-            resolve();
-        });
-    }
-
     private toggleCodeLanguage($event: CustomEvent): Promise<void> {
         return new Promise<void>(async (resolve) => {
             if (!this.selectedElement) {
@@ -432,9 +410,9 @@ export class AppCode {
                 </ion-item>
 
                 <ion-item disabled={this.codeColorType === undefined}>
-                    <ion-label>Color</ion-label>
-                    <input type="color" value={this.codeColor}
-                           onChange={(e) => this.selectColor(e, this.setCodeColor)}></input>
+                    <deckgo-color class="ion-padding-top ion-padding-bottom" onColorChange={($event: CustomEvent) => this.selectColor($event, this.setCodeColor)} color-hex={this.codeColor}>
+                        <ion-icon name="more" ios="md-mode" md="md-more" slot="more" aria-label="More" class="more"></ion-icon>
+                    </deckgo-color>
                 </ion-item>
 
                 <ion-item-divider class="ion-padding-top">
@@ -451,9 +429,9 @@ export class AppCode {
                 </ion-item>
 
                 <ion-item disabled={!this.highlightLines}>
-                    <ion-label>Color</ion-label>
-                    <input type="color" value={this.highlightColor}
-                           onChange={(e) => this.selectColor(e, this.setHighlightColor)}></input>
+                    <deckgo-color class="ion-padding-top ion-padding-bottom" onColorChange={($event: CustomEvent) => this.selectColor($event, this.setHighlightColor)} color-hex={this.highlightColor}>
+                        <ion-icon name="more" ios="md-mode" md="md-more" slot="more" aria-label="More" class="more"></ion-icon>
+                    </deckgo-color>
                 </ion-item>
             </ion-list>]
     }