From e3eb0742ec72ff295871e1f852869fd98821a14b Mon Sep 17 00:00:00 2001 From: Johannes Millan Date: Fri, 3 Jan 2025 17:31:24 +0100 Subject: [PATCH] feat: improve emoji support and add info #3558 --- electron/electronAPI.d.ts | 4 ++++ electron/ipc-handler.ts | 4 ++++ electron/preload.ts | 2 ++ .../shared-with-frontend/ipc-events.const.ts | 1 + .../form-cfgs/simple-counter-form.const.ts | 2 ++ .../icon-input/icon-input.component.html | 10 ++++++++++ .../config/icon-input/icon-input.component.ts | 19 +++++++++++++++++-- .../project/project-form-cfg.const.ts | 2 ++ src/app/features/tag/tag-form-cfg.const.ts | 1 + src/app/t.const.ts | 1 + src/assets/i18n/en.json | 1 + 11 files changed, 45 insertions(+), 2 deletions(-) diff --git a/electron/electronAPI.d.ts b/electron/electronAPI.d.ts index 7971bdabb..bebd18095 100644 --- a/electron/electronAPI.d.ts +++ b/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; diff --git a/electron/ipc-handler.ts b/electron/ipc-handler.ts index 32475b7c2..c3b62aba0 100644 --- a/electron/ipc-handler.ts +++ b/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)); diff --git a/electron/preload.ts b/electron/preload.ts index bcc159df3..fbca62562 100644 --- a/electron/preload.ts +++ b/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), diff --git a/electron/shared-with-frontend/ipc-events.const.ts b/electron/shared-with-frontend/ipc-events.const.ts index 315f9466b..535e72e4f 100644 --- a/electron/shared-with-frontend/ipc-events.const.ts +++ b/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', diff --git a/src/app/features/config/form-cfgs/simple-counter-form.const.ts b/src/app/features/config/form-cfgs/simple-counter-form.const.ts index 313870a7f..bb0556d92 100644 --- a/src/app/features/config/form-cfgs/simple-counter-form.const.ts +++ b/src/app/features/config/form-cfgs/simple-counter-form.const.ts @@ -68,6 +68,7 @@ export const SIMPLE_COUNTER_FORM: ConfigFormSection = { 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 = { }, templateOptions: { label: T.F.SIMPLE_COUNTER.FORM.L_ICON_ON, + description: T.G.ICON_INP_DESCRIPTION, }, }, { diff --git a/src/app/features/config/icon-input/icon-input.component.html b/src/app/features/config/icon-input/icon-input.component.html index f0d4d7106..3f60bbf66 100644 --- a/src/app/features/config/icon-input/icon-input.component.html +++ b/src/app/features/config/icon-input/icon-input.component.html @@ -25,3 +25,13 @@ } + +@if(IS_ELECTRON && !isLinux){ +add_reaction +} diff --git a/src/app/features/config/icon-input/icon-input.component.ts b/src/app/features/config/icon-input/icon-input.component.ts index 021ba3d4c..815760738 100644 --- a/src/app/features/config/icon-input/icon-input.component.ts +++ b/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 { 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 { 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 { 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; diff --git a/src/app/features/project/project-form-cfg.const.ts b/src/app/features/project/project-form-cfg.const.ts index f147de9e8..0879ae3e3 100644 --- a/src/app/features/project/project-form-cfg.const.ts +++ b/src/app/features/project/project-form-cfg.const.ts @@ -19,6 +19,7 @@ export const BASIC_PROJECT_CONFIG_FORM_CONFIG: ConfigFormSection = { 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 type: 'icon', templateOptions: { label: T.F.TAG.FORM_BASIC.L_ICON, + description: T.G.ICON_INP_DESCRIPTION, }, }, { diff --git a/src/app/features/tag/tag-form-cfg.const.ts b/src/app/features/tag/tag-form-cfg.const.ts index c6d44f137..017e995f1 100644 --- a/src/app/features/tag/tag-form-cfg.const.ts +++ b/src/app/features/tag/tag-form-cfg.const.ts @@ -22,6 +22,7 @@ export const BASIC_TAG_CONFIG_FORM_CONFIG: ConfigFormSection = { type: 'icon', templateOptions: { label: T.F.TAG.FORM_BASIC.L_ICON, + description: T.G.ICON_INP_DESCRIPTION, }, }, { diff --git a/src/app/t.const.ts b/src/app/t.const.ts index 6e852db47..40d47d185 100644 --- a/src/app/t.const.ts +++ b/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', diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index ccd6102bf..62861abaf 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -1280,6 +1280,7 @@ "EXAMPLE_VAL": "e.g. 32m", "EXTENSION_INFO": "Please download the chrome extension in order to allow communication with the Jira Api and Idle Time Handling. Note that this doesn't work for mobile. Without the extension the features will not work!!", "HIDE": "Hide", + "ICON_INP_DESCRIPTION": "All utf-8 emojis are also supported!", "LOGIN": "Login", "LOGOUT": "Logout", "MINUTES": "{{m}} minutes",