feat: improve emoji support and add info #3558

electron/electronAPI.d.ts

@@ -54,6 +54,8 @@ export interface ElectronAPI {
 
   openExternalUrl(url: string): void;
 
+  isLinux(): boolean;
+
   isMacOS(): boolean;
 
   isSnap(): boolean;
@@ -64,6 +66,8 @@ export interface ElectronAPI {
 
   openDevTools(): void;
 
+  showEmojiPanel(): void;
+
   relaunch(): void;
 
   exit(exitCode: number): void;

electron/ipc-handler.ts

@@ -32,6 +32,10 @@ export const initIpcInterfaces = (): void => {
   ipcMain.on(IPC.EXIT, (ev, exitCode: number) => app.exit(exitCode));
   ipcMain.on(IPC.RELAUNCH, () => app.relaunch());
   ipcMain.on(IPC.OPEN_DEV_TOOLS, () => getWin().webContents.openDevTools());
+  ipcMain.on(
+    IPC.SHOW_EMOJI_PANEL,
+    () => app.isEmojiPanelSupported() && app.showEmojiPanel(),
+  );
   ipcMain.on(IPC.RELOAD_MAIN_WIN, () => getWin().reload());
   ipcMain.on(IPC.OPEN_PATH, (ev, path: string) => shell.openPath(path));
   ipcMain.on(IPC.OPEN_EXTERNAL, (ev, url: string) => shell.openExternal(url));

electron/preload.ts

@@ -46,6 +46,7 @@ const ea: ElectronAPI = {
     webFrame.setZoomFactor(zoomFactor);
   },
   getZoomFactor: () => webFrame.getZoomFactor(),
+  isLinux: () => process.platform === 'linux',
   isMacOS: () => process.platform === 'darwin',
   isSnap: () => process && process.env && !!process.env.SNAP,
 
@@ -59,6 +60,7 @@ const ea: ElectronAPI = {
   shutdownNow: () => _send('SHUTDOWN_NOW'),
   reloadMainWin: () => _send('RELOAD_MAIN_WIN'),
   openDevTools: () => _send('OPEN_DEV_TOOLS'),
+  showEmojiPanel: () => _send('SHOW_EMOJI_PANEL'),
   informAboutAppReady: () => _send('APP_READY'),
 
   openPath: (path: string) => _send('OPEN_PATH', path),

electron/shared-with-frontend/ipc-events.const.ts

@@ -63,6 +63,7 @@ export enum IPC {
   GET_BACKUP_PATH = 'GET_BACKUP_PATH',
   RELOAD_MAIN_WIN = 'RELOAD_MAIN_WIN',
   OPEN_DEV_TOOLS = 'OPEN_DEV_TOOLS',
+  SHOW_EMOJI_PANEL = 'SHOW_EMOJI_PANEL',
 
   OPEN_PATH = 'OPEN_PATH',
   OPEN_EXTERNAL = 'OPEN_EXTERNAL',

src/app/features/config/form-cfgs/simple-counter-form.const.ts

@@ -68,6 +68,7 @@ export const SIMPLE_COUNTER_FORM: ConfigFormSection<SimpleCounterConfig> = {
             key: 'icon',
             templateOptions: {
               label: T.F.SIMPLE_COUNTER.FORM.L_ICON,
+              description: T.G.ICON_INP_DESCRIPTION,
             },
           },
           {
@@ -78,6 +79,7 @@ export const SIMPLE_COUNTER_FORM: ConfigFormSection<SimpleCounterConfig> = {
             },
             templateOptions: {
               label: T.F.SIMPLE_COUNTER.FORM.L_ICON_ON,
+              description: T.G.ICON_INP_DESCRIPTION,
             },
           },
           {

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

@@ -25,3 +25,13 @@
   </mat-option>
   }
 </mat-autocomplete>
+
+@if(IS_ELECTRON && !isLinux){
+<mat-icon
+  matSuffix
+  type="button"
+  [matTooltip]="'Open system emoji picker if any'"
+  (click)="openEmojiPicker()"
+  >add_reaction</mat-icon
+>
+}

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

@@ -3,10 +3,12 @@ import { FieldType } from '@ngx-formly/material';
 import { MATERIAL_ICONS } from '../../../ui/material-icons.const';
 import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { MatIcon } from '@angular/material/icon';
-import { MatInput } from '@angular/material/input';
+import { MatInput, MatSuffix } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatOption } from '@angular/material/core';
+import { IS_ELECTRON } from '../../../app.constants';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
   selector: 'icon-input',
@@ -21,10 +23,14 @@ import { MatOption } from '@angular/material/core';
     FormlyModule,
     MatAutocomplete,
     MatOption,
+    MatSuffix,
+    MatTooltip,
   ],
 })
 export class IconInputComponent extends FieldType<FormlyFieldConfig> {
   filteredIcons: string[] = [];
+  protected readonly IS_ELECTRON = IS_ELECTRON;
+  isLinux = IS_ELECTRON && window.ea.isLinux();
 
   get type(): string {
     return this.to.type || 'text';
@@ -41,7 +47,10 @@ export class IconInputComponent extends FieldType<FormlyFieldConfig> {
     arr.length = Math.min(150, arr.length);
     this.filteredIcons = arr;
 
-    if (!val) {
+    const isEmoji = /\p{Emoji}/u.test(val);
+    if (isEmoji) {
+      this.formControl.setValue(val);
+    } else if (!val) {
       this.formControl.setValue('');
     }
   }
@@ -50,6 +59,12 @@ export class IconInputComponent extends FieldType<FormlyFieldConfig> {
     this.formControl.setValue(icon);
   }
 
+  openEmojiPicker(): void {
+    if (IS_ELECTRON) {
+      window.ea.showEmojiPanel();
+    }
+  }
+
   // onKeyDown(ev: KeyboardEvent): void {
   //   if (ev.key === 'Enter') {
   //     const ico = (ev as any)?.target?.value;

src/app/features/project/project-form-cfg.const.ts

@@ -19,6 +19,7 @@ export const BASIC_PROJECT_CONFIG_FORM_CONFIG: ConfigFormSection<Project> = {
       type: 'icon',
       templateOptions: {
         label: T.F.TAG.FORM_BASIC.L_ICON,
+        description: T.G.ICON_INP_DESCRIPTION,
       },
     },
     {
@@ -67,6 +68,7 @@ export const CREATE_PROJECT_BASIC_CONFIG_FORM_CONFIG: ConfigFormSection<Project>
       type: 'icon',
       templateOptions: {
         label: T.F.TAG.FORM_BASIC.L_ICON,
+        description: T.G.ICON_INP_DESCRIPTION,
       },
     },
     {

src/app/features/tag/tag-form-cfg.const.ts

@@ -22,6 +22,7 @@ export const BASIC_TAG_CONFIG_FORM_CONFIG: ConfigFormSection<Tag> = {
       type: 'icon',
       templateOptions: {
         label: T.F.TAG.FORM_BASIC.L_ICON,
+        description: T.G.ICON_INP_DESCRIPTION,
       },
     },
     {

src/app/t.const.ts

@@ -1301,6 +1301,7 @@ const T = {
     EXAMPLE_VAL: 'G.EXAMPLE_VAL',
     EXTENSION_INFO: 'G.EXTENSION_INFO',
     HIDE: 'G.HIDE',
+    ICON_INP_DESCRIPTION: 'G.ICON_INP_DESCRIPTION',
     LOGIN: 'G.LOGIN',
     LOGOUT: 'G.LOGOUT',
     MINUTES: 'G.MINUTES',

src/assets/i18n/en.json

@@ -1280,6 +1280,7 @@
     "EXAMPLE_VAL": "e.g. 32m",
     "EXTENSION_INFO": "Please <a target=\"_blank\" href=\"https://chrome.google.com/webstore/detail/super-productivity/ljkbjodfmekklcoibdnhahlaalhihmlb\"> download the chrome extension</a> in order to allow communication with the Jira Api and Idle Time Handling. Note that this doesn't work for mobile. <strong>Without the extension the features will not work!!</strong>",
     "HIDE": "Hide",
+    "ICON_INP_DESCRIPTION": "All utf-8 emojis are also supported!",
     "LOGIN": "Login",
     "LOGOUT": "Logout",
     "MINUTES": "{{m}} minutes",