Feat/emojis as project icons

.eslintrc.json

@@ -66,7 +66,7 @@
             "leadingUnderscore": "allowSingleOrDouble",
             "trailingUnderscore": "allow",
             "filter": {
-              "regex": "(should)|@tags",
+              "regex": "(should)|@tags|\\d+",
               "match": false
             }
           },

angular.json

@@ -36,7 +36,7 @@
               "src/manifest.json",
               "src/static"
             ],
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "node_modules/@ctrl/ngx-emoji-mart/picker.css"],
             "scripts": [],
             "webWorkerTsConfig": "src/tsconfig.worker.json",
             "browser": "src/main.ts",
@@ -205,7 +205,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "preserveSymlinks": true,
             "karmaConfig": "src/karma.conf.js",
-            "styles": ["src/styles.scss"],
+            "styles": ["src/styles.scss", "node_modules/@ctrl/ngx-emoji-mart/picker.css"],
             "scripts": [],
             "assets": ["src/favicon.ico", "src/assets", "src/manifest.json"]
           }

package.json

@@ -106,6 +106,7 @@
     }
   ],
   "dependencies": {
+    "@ctrl/ngx-emoji-mart": "^9.2.0",
     "electron-dl": "^3.5.2",
     "electron-localshortcut": "^3.2.1",
     "electron-log": "^5.1.2",

src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.html

@@ -15,7 +15,17 @@
   mat-menu-item
 >
   <span class="badge">{{ workContext().taskIds.length }}</span>
-  <mat-icon class="drag-handle">{{ workContext().icon || defaultIcon() }}</mat-icon>
+  <ngx-emoji
+    *ngIf="workContext().icon?.startsWith('emoji:'); else icon_preview"
+    class="drag-handle side-nav-project-emoji"
+    [emoji]="{id: workContext().icon.split(':')[1]}"
+    [skin]="workContext().icon.split(':')[2]"
+    set="apple"
+    size="22"
+  ></ngx-emoji>
+  <ng-template #icon_preview>
+    <mat-icon class="drag-handle">{{ workContext().icon || defaultIcon() }}</mat-icon>
+  </ng-template>
   <span class="text">{{ workContext().title }}</span>
 </button>
 

src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.scss

@@ -36,6 +36,15 @@
   &.isHidden {
     display: none !important;
   }
+
+  button.mat-mdc-menu-item {
+    ngx-emoji {
+      display: block;
+      width: 40px;
+      height: 40px;
+      top: 5px;
+    }
+  }
 }
 
 // color bar left styles

src/app/core-ui/side-nav/side-nav-item/side-nav-item.component.ts

@@ -17,6 +17,8 @@ import { Project } from '../../../features/project/project.model';
 import { WorkContextMenuComponent } from '../../work-context-menu/work-context-menu.component';
 import { ContextMenuComponent } from '../../../ui/context-menu/context-menu.component';
 import { CdkDragPlaceholder } from '@angular/cdk/drag-drop';
+import { EmojiComponent } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'side-nav-item',
@@ -28,6 +30,8 @@ import { CdkDragPlaceholder } from '@angular/cdk/drag-drop';
     WorkContextMenuComponent,
     ContextMenuComponent,
     CdkDragPlaceholder,
+    EmojiComponent,
+    CommonModule,
   ],
   templateUrl: './side-nav-item.component.html',
   styleUrl: './side-nav-item.component.scss',

src/app/features/config/config.module.ts

@@ -20,6 +20,8 @@ import { MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatInputModule } from '@angular/material/input';
 import { TranslateModule } from '@ngx-translate/core';
+import { SkinComponent } from '@ctrl/ngx-emoji-mart';
+import { EmojiComponent } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 
 @NgModule({
   imports: [
@@ -62,6 +64,8 @@ import { TranslateModule } from '@ngx-translate/core';
     MatSlideToggleModule,
     MatInputModule,
     TranslateModule,
+    EmojiComponent,
+    SkinComponent,
   ],
   declarations: [
     ConfigSectionComponent,

src/app/features/config/icon-input/icon-input.component.html

@@ -1,7 +1,16 @@
 <!-- TODO make this work -->
 <!--<mat-icon matSuffix="">{{formControl.value}}</mat-icon>-->
 
-<mat-icon>{{ formControl.value }}</mat-icon>
+<ngx-emoji
+  *ngIf="isEmoji(); else icon_preview"
+  [emoji]="{id: formControl.value.split(':')[1]}"
+  [skin]="chosenSkin"
+  set="apple"
+  size="16"
+></ngx-emoji>
+<ng-template #icon_preview>
+  <mat-icon>{{ formControl.value }}</mat-icon>
+</ng-template>
 
 <input
   [ngModel]="formControl.value"
@@ -11,13 +20,33 @@
   matInput
   type="text"
 />
+<emoji-skins
+  *ngIf="isEmoji()"
+  [skin]="chosenSkin"
+  [i18n]="i18n"
+  (changeSkin)="changeSkin($event)"
+/>
 <!--<span matPrefix>+1 &nbsp;</span>-->
 
 <mat-autocomplete
   #auto="matAutocomplete"
   (optionSelected)="onIconSelect($event.option.value)"
   [autoActiveFirstOption]="false"
 >
+  <mat-option
+    *ngFor="let emojiId of (filteredEmojis); trackBy: trackByIndex"
+    [value]="emojiId"
+  >
+    <mat-icon>
+      <ngx-emoji
+        [emoji]="{id: emojiId.split(':')[1]}"
+        [skin]="chosenSkin"
+        set="apple"
+        size="20"
+      ></ngx-emoji>
+    </mat-icon>
+    <span>{{emojiId}}</span>
+  </mat-option>
   <mat-option
     *ngFor="let icon of (filteredIcons); trackBy: trackByIndex"
     [value]="icon"

src/app/features/config/icon-input/icon-input.component.scss

@@ -2,14 +2,21 @@
 
 :host {
   display: inline-flex;
-  align-items: baseline;
+  align-items: center;
   box-sizing: border-box;
   width: 100%;
+  justify-content: space-between;
 
-  mat-icon {
+  mat-icon,
+  ngx-emoji {
     margin-right: $s;
     font-size: 16px;
     height: 16px;
     width: 16px;
   }
 }
+
+emoji-skins {
+  position: absolute;
+  right: 0;
+}

src/app/features/config/icon-input/icon-input.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FieldType } from '@ngx-formly/material';
 import { MATERIAL_ICONS } from '../../../ui/material-icons.const';
 import { FormlyFieldConfig } from '@ngx-formly/core';
+import { EmojiSearch } from '@ctrl/ngx-emoji-mart';
 
 @Component({
   selector: 'icon-input',
@@ -11,6 +12,18 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 })
 export class IconInputComponent extends FieldType<FormlyFieldConfig> {
   filteredIcons: string[] = [];
+  filteredEmojis: string[] = [];
+  i18n = {
+    skintones: {
+      1: 'Default Skin Tone',
+      2: 'Light Skin Tone',
+      3: 'Medium-Light Skin Tone',
+      4: 'Medium Skin Tone',
+      5: 'Medium-Dark Skin Tone',
+      6: 'Dark Skin Tone',
+    },
+  };
+  chosenSkin = Number(localStorage.getItem('emoji-mart.skin')) || 1;
 
   get type(): string {
     return this.to.type || 'text';
@@ -21,11 +34,15 @@ export class IconInputComponent extends FieldType<FormlyFieldConfig> {
   }
 
   onInputValueChange(val: string): void {
-    const arr = MATERIAL_ICONS.filter(
+    const iconsResult = MATERIAL_ICONS.filter(
       (icoStr) => icoStr && icoStr.toLowerCase().includes(val.toLowerCase()),
     );
-    arr.length = Math.min(150, arr.length);
-    this.filteredIcons = arr;
+    iconsResult.length = Math.min(150, iconsResult.length);
+    this.filteredIcons = iconsResult;
+    this.filteredEmojis =
+      this.emojiSearch
+        .search(val, undefined, 15)
+        ?.map(({ id }) => `emoji:${id}:${this.chosenSkin}`) || [];
 
     if (!val) {
       this.formControl.setValue('');
@@ -36,6 +53,30 @@ export class IconInputComponent extends FieldType<FormlyFieldConfig> {
     this.formControl.setValue(icon);
   }
 
+  isEmoji(): boolean {
+    return Boolean(this.formControl.value?.startsWith('emoji:'));
+  }
+
+  changeSkin(newSkin: number): void {
+    this.chosenSkin = newSkin;
+    if (!this.isEmoji()) {
+      return;
+    }
+
+    const currentEmoji = this.formControl.value as string;
+    if (currentEmoji.lastIndexOf(':') === currentEmoji.indexOf(':')) {
+      this.formControl.setValue(`${currentEmoji}:${newSkin}`);
+    } else {
+      this.formControl.setValue(
+        currentEmoji.substring(0, currentEmoji.lastIndexOf(':')) + `:${newSkin}`,
+      );
+    }
+  }
+
+  constructor(private emojiSearch: EmojiSearch) {
+    super();
+  }
+
   // onKeyDown(ev: KeyboardEvent): void {
   //   if (ev.key === 'Enter') {
   //     const ico = (ev as any)?.target?.value;