Merge pull request #792 from deckgo/header-footer-custom-logo

feat: header and footer custom logo

Author: peterpeterparker

studio/src/app/models/data/user.tsx

@@ -4,7 +4,9 @@ export interface UserSocial {
   dev?: string;
   medium?: string;
   github?: string;
+
   custom?: string;
+  custom_logo_url?: string;
 }
 
 export interface UserData {

studio/src/app/pages/core/app-settings/app-settings.scss

@@ -24,6 +24,11 @@ app-settings {
     div.avatar {
       --deckgo-avatar-size: 3rem;
 
+      deckgo-lazy-img {
+        width: 3rem;
+        height: 3rem;
+      }
+
       input {
         padding-left: 8px;
         padding-right: 8px;

studio/src/app/pages/core/app-settings/app-settings.tsx

@@ -23,6 +23,9 @@ import {StorageService} from '../../../services/storage/storage.service';
 import {ApiUserFactoryService} from '../../../services/api/user/api.user.factory.service';
 import {ThemeService} from '../../../services/theme/theme.service';
 
+import {EnvironmentDeckDeckGoConfig} from '../../../services/core/environment/environment-config';
+import {EnvironmentConfigService} from '../../../services/core/environment/environment-config.service';
+
 @Component({
   tag: 'app-settings',
   styleUrl: 'app-settings.scss',
@@ -56,6 +59,8 @@ export class AppHome {
 
   private profilePicture: File;
 
+  private customLogo: File;
+
   private storageService: StorageService;
 
   private themeService: ThemeService;
@@ -81,6 +86,8 @@ export class AppHome {
   private destroyUserListener;
   private destroyApiUserListener;
 
+  private config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');
+
   constructor() {
     this.apiUserService = ApiUserFactoryService.getInstance();
     this.imageHistoryService = ImageHistoryService.getInstance();
@@ -243,6 +250,8 @@ export class AppHome {
         this.saving = true;
 
         await this.uploadProfilePicture();
+        await this.uploadCustomLogo();
+
         await this.saveUser();
         await this.saveApiUser();
 
@@ -323,6 +332,37 @@ export class AppHome {
     });
   }
 
+  private uploadCustomLogo(): Promise<void> {
+    return new Promise<void>(async (resolve, reject) => {
+      if (!this.valid || !this.user || !this.user.data) {
+        resolve();
+        return;
+      }
+
+      if (!this.user.data.social || !this.user.data.social.custom) {
+        resolve();
+        return;
+      }
+
+      if (!this.customLogo) {
+        resolve();
+        return;
+      }
+
+      try {
+        const storageFile: StorageFile = await this.storageService.uploadFile(this.customLogo, 'images', 524288);
+
+        if (storageFile) {
+          this.user.data.social.custom_logo_url = storageFile.downloadUrl;
+        }
+
+        resolve();
+      } catch (err) {
+        reject('Could not upload your profile picture!');
+      }
+    });
+  }
+
   private async presentConfirmDelete() {
     const modal: HTMLIonModalElement = await modalController.create({
       component: 'app-user-delete',
@@ -377,21 +417,28 @@ export class AppHome {
     });
   }
 
-  private selectProfilePicture(): Promise<void> {
-    return new Promise<void>(async (resolve) => {
-      const filePicker: HTMLInputElement = this.el.querySelector('input#inputProfilePicture');
+  private async selectProfilePicture() {
+    const filePicker: HTMLInputElement = this.el.querySelector('input#inputProfilePicture');
 
-      if (!filePicker) {
-        resolve();
-        return;
-      }
+    if (!filePicker) {
+      return;
+    }
 
-      if (filePicker.files && filePicker.files.length > 0) {
-        this.profilePicture = filePicker.files[0];
-      }
+    if (filePicker.files && filePicker.files.length > 0) {
+      this.profilePicture = filePicker.files[0];
+    }
+  }
 
-      resolve();
-    });
+  private async selectCustomLogo() {
+    const filePicker: HTMLInputElement = this.el.querySelector('input#inputCustomLogo');
+
+    if (!filePicker) {
+      return;
+    }
+
+    if (filePicker.files && filePicker.files.length > 0) {
+      this.customLogo = filePicker.files[0];
+    }
   }
 
   render() {
@@ -732,7 +779,7 @@ export class AppHome {
       </ion-item>,
       <p>
         <small>
-          Your website or any custom url (for example: <strong>{this.custom ? this.custom : 'https://yourwebsite.com'}</strong>)
+          Your website or any url (for example: <strong>{this.custom ? this.custom : 'https://yourwebsite.com'}</strong>)
         </small>
       </p>,
       <ion-item>
@@ -744,6 +791,33 @@ export class AppHome {
           disabled={this.saving}
           onIonInput={($event: CustomEvent<KeyboardEvent>) => this.handleSocialInput($event, 'custom')}></ion-input>
       </ion-item>,
+
+      this.renderCustomLogo(),
+    ];
+  }
+
+  private renderCustomLogo() {
+    return [
+      <p class="ion-margin-top">
+        <small>A logo for this custom address</small>
+      </p>,
+      <div class="avatar">
+        {this.user && this.user.data && this.user.data.social && this.user.data.social.custom_logo_url ? (
+          <deckgo-lazy-img slot="icon" img-src={this.user.data.social.custom_logo_url} aria-label="Custom logo"></deckgo-lazy-img>
+        ) : (
+          <deckgo-lazy-img
+            slot="icon"
+            svg-src={`${this.config.globalAssetsUrl}/icons/ionicons/globe.svg`}
+            aria-label="Custom logo image placeholder"></deckgo-lazy-img>
+        )}
+        <input
+          id="inputCustomLogo"
+          type="file"
+          accept="image/x-png,image/jpeg,image/gif"
+          onChange={() => this.selectCustomLogo()}
+          disabled={this.saving || !this.user || !this.user.data || !this.user.data.social || !this.user.data.social.custom}
+        />
+      </div>,
     ];
   }
 }

studio/src/app/utils/editor/header-footer.utils.tsx

@@ -26,7 +26,7 @@ export class HeaderFooterUtils {
       deck.removeChild(currentSlotElement);
     }
 
-    const promises: Promise<HTMLElement>[] = [this.createContainer(slotName), this.createSocial(user, type), this.createImg(type)];
+    const promises: Promise<HTMLElement>[] = [this.createContainer(slotName), this.createSocial(user, type), this.createImg(user, type)];
     const [div, social, deckgoImg] = await Promise.all(promises);
 
     social.appendChild(deckgoImg);
@@ -60,7 +60,7 @@ export class HeaderFooterUtils {
     return socialElement;
   }
 
-  private static async createImg(type: 'twitter' | 'linkedin' | 'dev' | 'medium' | 'github' | 'custom'): Promise<HTMLElement> {
+  private static async createImg(user: User, type: 'twitter' | 'linkedin' | 'dev' | 'medium' | 'github' | 'custom'): Promise<HTMLElement> {
     const deckgoImg: HTMLElement = document.createElement(SlotType.IMG);
     deckgoImg.setAttribute('slot', 'icon');
     deckgoImg.setAttribute('aria-label', type);
@@ -71,6 +71,8 @@ export class HeaderFooterUtils {
       deckgoImg.setAttribute('svg-src', `${config.globalAssetsUrl}/icons/ionicons/${type}.svg`);
     } else if (type === 'medium' || type === 'dev') {
       deckgoImg.setAttribute('svg-src', `${config.globalAssetsUrl}/icons/${type}.svg`);
+    } else if (user.data.social.custom_logo_url !== undefined && user.data.social.custom_logo_url !== '') {
+      deckgoImg.setAttribute('img-src', user.data.social.custom_logo_url);
     } else {
       deckgoImg.setAttribute('svg-src', `${config.globalAssetsUrl}/icons/ionicons/globe.svg`);
     }

studio/src/app/utils/editor/social.utils.tsx

@@ -41,15 +41,23 @@ export class SocialUtils {
   }
 
   static createCustom(user: User): JSX.IntrinsicElements {
-    const config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');
-
     return (
       <deckgo-social slot={`social-link`} fullUrl={user.data.social.custom}>
-        <deckgo-lazy-img slot="icon" svg-src={`${config.globalAssetsUrl}/icons/ionicons/globe.svg`} aria-label="Web"></deckgo-lazy-img>
+        {this.createCustomLogo(user)}
       </deckgo-social>
     );
   }
 
+  private static createCustomLogo(user: User): JSX.IntrinsicElements {
+    if (user.data.social.custom_logo_url) {
+      return <deckgo-lazy-img slot="icon" img-src={user.data.social.custom_logo_url} aria-label="Web"></deckgo-lazy-img>;
+    }
+
+    const config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');
+
+    return <deckgo-lazy-img slot="icon" svg-src={`${config.globalAssetsUrl}/icons/ionicons/globe.svg`} aria-label="Web"></deckgo-lazy-img>;
+  }
+
   static createGitHub(user: User): JSX.IntrinsicElements {
     const config: EnvironmentDeckDeckGoConfig = EnvironmentConfigService.getInstance().get('deckdeckgo');