From 3670946da44e381ff967bc556c2fce0c1c2fe793 Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Fri, 3 May 2024 17:27:13 +0700 Subject: [PATCH] Refactor BxIcon --- src/modules/dialog.ts | 5 +++-- src/modules/mkb/mkb-handler.ts | 5 +++-- src/modules/mkb/mkb-remapper.ts | 10 ++++----- src/modules/remote-play.ts | 5 +++-- src/modules/stream/stream-ui.ts | 9 ++++---- src/modules/ui/global-settings.ts | 5 +++-- src/modules/ui/header.ts | 5 +++-- src/modules/ui/ui.ts | 13 +++++------ src/utils/bx-icon.ts | 30 ++++++++++++++++++++++++++ src/utils/html.ts | 36 +++---------------------------- 10 files changed, 65 insertions(+), 58 deletions(-) create mode 100644 src/utils/bx-icon.ts diff --git a/src/modules/dialog.ts b/src/modules/dialog.ts index b365d43..b31f6e6 100644 --- a/src/modules/dialog.ts +++ b/src/modules/dialog.ts @@ -1,5 +1,6 @@ import { t } from "@utils/translation"; -import { CE, createButton, ButtonStyle, Icon } from "@utils/html"; +import { CE, createButton, ButtonStyle } from "@utils/html"; +import { BxIcon } from "@utils/bx-icon"; type DialogOptions = Partial<{ title: string; @@ -47,7 +48,7 @@ export class Dialog { this.$dialog = CE('div', {'class': `bx-dialog ${className || ''} bx-gone`}, this.$title = CE('h2', {}, CE('b', {}, title), helpUrl && createButton({ - icon: Icon.QUESTION, + icon: BxIcon.QUESTION, style: ButtonStyle.GHOST, title: t('help'), url: helpUrl, diff --git a/src/modules/mkb/mkb-handler.ts b/src/modules/mkb/mkb-handler.ts index eb3bb80..2688cac 100644 --- a/src/modules/mkb/mkb-handler.ts +++ b/src/modules/mkb/mkb-handler.ts @@ -1,6 +1,6 @@ import { MkbPreset } from "./mkb-preset"; import { GamepadKey, MkbPresetKey, GamepadStick, MouseMapTo } from "./definitions"; -import { createButton, Icon, ButtonStyle, CE } from "@utils/html"; +import { createButton, ButtonStyle, CE } from "@utils/html"; import { BxEvent } from "@utils/bx-event"; import { PrefKey, getPref } from "@utils/preferences"; import { Toast } from "@utils/toast"; @@ -12,6 +12,7 @@ import { showStreamSettings } from "@modules/stream/stream-ui"; import { STATES } from "@utils/global"; import { UserAgent } from "@utils/user-agent"; import { BxLogger } from "@utils/bx-logger"; +import { BxIcon } from "@utils/bx-icon"; const LOG_TAG = 'MkbHandler'; @@ -381,7 +382,7 @@ export class MkbHandler { this.#$message = CE('div', {'class': 'bx-mkb-pointer-lock-msg bx-gone'}, createButton({ - icon: Icon.MOUSE_SETTINGS, + icon: BxIcon.MOUSE_SETTINGS, style: ButtonStyle.PRIMARY, onClick: e => { e.preventDefault(); diff --git a/src/modules/mkb/mkb-remapper.ts b/src/modules/mkb/mkb-remapper.ts index 583325e..c674369 100644 --- a/src/modules/mkb/mkb-remapper.ts +++ b/src/modules/mkb/mkb-remapper.ts @@ -8,7 +8,7 @@ import { KeyHelper } from "./key-helper"; import { MkbPreset } from "./mkb-preset"; import { MkbHandler } from "./mkb-handler"; import { LocalDb } from "@utils/local-db"; -import { Icon } from "@utils/html"; +import { BxIcon } from "@utils/bx-icon"; import { SettingElement } from "@utils/settings"; import type { MkbPresetData, MkbStoredPresets } from "@/types/mkb"; @@ -340,7 +340,7 @@ export class MkbRemapper { // Rename button createButton({ title: t('rename'), - icon: Icon.CURSOR_TEXT, + icon: BxIcon.CURSOR_TEXT, onClick: e => { const preset = this.#getCurrentPreset(); @@ -357,7 +357,7 @@ export class MkbRemapper { // New button createButton({ - icon: Icon.NEW, + icon: BxIcon.NEW, title: t('new'), onClick: e => { let newName = promptNewName(''); @@ -375,7 +375,7 @@ export class MkbRemapper { // Copy button createButton({ - icon: Icon.COPY, + icon: BxIcon.COPY, title: t('copy'), onClick: e => { const preset = this.#getCurrentPreset(); @@ -395,7 +395,7 @@ export class MkbRemapper { // Delete button createButton({ - icon: Icon.TRASH, + icon: BxIcon.TRASH, style: ButtonStyle.DANGER, title: t('delete'), onClick: e => { diff --git a/src/modules/remote-play.ts b/src/modules/remote-play.ts index 9bba6c9..c5c96e7 100644 --- a/src/modules/remote-play.ts +++ b/src/modules/remote-play.ts @@ -1,5 +1,6 @@ import { STATES, AppInterface } from "@utils/global"; -import { CE, createButton, ButtonStyle, Icon } from "@utils/html"; +import { CE, createButton, ButtonStyle } from "@utils/html"; +import { BxIcon } from "@utils/bx-icon"; import { Toast } from "@utils/toast"; import { BxEvent } from "@utils/bx-event"; import { getPref, PrefKey, setPref } from "@utils/preferences"; @@ -183,7 +184,7 @@ export class RemotePlay { // Add Help button $fragment.appendChild(createButton({ - icon: Icon.QUESTION, + icon: BxIcon.QUESTION, style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE, url: 'https://better-xcloud.github.io/remote-play', label: t('help'), diff --git a/src/modules/stream/stream-ui.ts b/src/modules/stream/stream-ui.ts index be21dff..f57e4be 100644 --- a/src/modules/stream/stream-ui.ts +++ b/src/modules/stream/stream-ui.ts @@ -1,5 +1,6 @@ import { STATES } from "@utils/global.ts"; -import { Icon, createSvgIcon } from "@utils/html.ts"; +import { createSvgIcon } from "@utils/html.ts"; +import { BxIcon } from "@utils/bx-icon"; import { BxEvent } from "@utils/bx-event.ts"; import { PrefKey, getPref } from "@utils/preferences.ts"; import { t } from "@utils/translation.ts"; @@ -66,7 +67,7 @@ class MouseHoldEvent { } -function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: Icon) { +function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: typeof BxIcon) { const $container = $orgButton.cloneNode(true) as HTMLElement; let timeout: number | null; @@ -249,7 +250,7 @@ export function injectStreamMenuButtons() { // Create Stream Settings button if (!$btnStreamSettings) { - $btnStreamSettings = cloneStreamHudButton($orgButton, t('menu-stream-settings'), Icon.STREAM_SETTINGS); + $btnStreamSettings = cloneStreamHudButton($orgButton, t('menu-stream-settings'), BxIcon.STREAM_SETTINGS); $btnStreamSettings.addEventListener('click', e => { hideGripHandle(); e.preventDefault(); @@ -267,7 +268,7 @@ export function injectStreamMenuButtons() { // Create Stream Stats button if (!$btnStreamStats) { - $btnStreamStats = cloneStreamHudButton($orgButton, t('menu-stream-stats'), Icon.STREAM_STATS); + $btnStreamStats = cloneStreamHudButton($orgButton, t('menu-stream-stats'), BxIcon.STREAM_STATS); $btnStreamStats.addEventListener('click', e => { hideGripHandle(); e.preventDefault(); diff --git a/src/modules/ui/global-settings.ts b/src/modules/ui/global-settings.ts index f82a536..2e2a8b4 100644 --- a/src/modules/ui/global-settings.ts +++ b/src/modules/ui/global-settings.ts @@ -1,5 +1,6 @@ import { STATES, AppInterface, SCRIPT_HOME, SCRIPT_VERSION } from "@utils/global"; -import { CE, createButton, Icon, ButtonStyle } from "@utils/html"; +import { CE, createButton, ButtonStyle } from "@utils/html"; +import { BxIcon } from "@utils/bx-icon"; import { getPreferredServerRegion } from "@utils/region"; import { UserAgent, UserAgentProfile } from "@utils/user-agent"; import { getPref, Preferences, PrefKey, setPref, toPrefElement } from "@utils/preferences"; @@ -120,7 +121,7 @@ export function setupSettingsUi() { 'href': SCRIPT_HOME, 'target': '_blank', }, 'Better xCloud ' + SCRIPT_VERSION), - createButton({icon: Icon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}), + createButton({icon: BxIcon.QUESTION, label: t('help'), url: 'https://better-xcloud.github.io/features/'}), ) ); $updateAvailable = CE('a', { diff --git a/src/modules/ui/header.ts b/src/modules/ui/header.ts index 3c30fef..21acdfc 100644 --- a/src/modules/ui/header.ts +++ b/src/modules/ui/header.ts @@ -1,5 +1,6 @@ import { SCRIPT_VERSION } from "@utils/global"; -import { createButton, Icon, ButtonStyle } from "@utils/html"; +import { createButton, ButtonStyle } from "@utils/html"; +import { BxIcon } from "@utils/bx-icon"; import { getPreferredServerRegion } from "@utils/region"; import { PrefKey, getPref } from "@utils/preferences"; import { RemotePlay } from "@modules/remote-play"; @@ -21,7 +22,7 @@ function injectSettingsButton($parent?: HTMLElement) { if (getPref(PrefKey.REMOTE_PLAY_ENABLED)) { const $remotePlayBtn = createButton({ classes: ['bx-header-remote-play-button'], - icon: Icon.REMOTE_PLAY, + icon: BxIcon.REMOTE_PLAY, title: t('remote-play'), style: ButtonStyle.GHOST | ButtonStyle.FOCUSABLE, onClick: e => { diff --git a/src/modules/ui/ui.ts b/src/modules/ui/ui.ts index c583650..9a6d1f1 100644 --- a/src/modules/ui/ui.ts +++ b/src/modules/ui/ui.ts @@ -1,5 +1,6 @@ import { STATES } from "@utils/global"; -import { Icon, CE, createButton, ButtonStyle, createSvgIcon } from "@utils/html"; +import { CE, createButton, ButtonStyle, createSvgIcon } from "@utils/html"; +import { BxIcon } from "@utils/bx-icon"; import { UserAgent } from "@utils/user-agent"; import { BxEvent } from "@utils/bx-event"; import { MkbRemapper } from "@modules/mkb/mkb-remapper"; @@ -70,7 +71,7 @@ function setupQuickSettingsBar() { const SETTINGS_UI = [ getPref(PrefKey.MKB_ENABLED) && { - icon: Icon.MOUSE, + icon: BxIcon.MOUSE, group: 'mkb', items: [ { @@ -83,7 +84,7 @@ function setupQuickSettingsBar() { }, { - icon: Icon.DISPLAY, + icon: BxIcon.DISPLAY, group: 'stream', items: [ { @@ -145,7 +146,7 @@ function setupQuickSettingsBar() { }, { - icon: Icon.CONTROLLER, + icon: BxIcon.CONTROLLER, group: 'controller', items: [ { @@ -232,7 +233,7 @@ function setupQuickSettingsBar() { }, { - icon: Icon.STREAM_STATS, + icon: BxIcon.STREAM_STATS, group: 'stats', items: [ { @@ -331,7 +332,7 @@ function setupQuickSettingsBar() { $group.appendChild(CE('h2', {}, CE('span', {}, settingGroup.label), settingGroup.help_url && createButton({ - icon: Icon.QUESTION, + icon: BxIcon.QUESTION, style: ButtonStyle.GHOST, url: settingGroup.help_url, title: t('help'), diff --git a/src/utils/bx-icon.ts b/src/utils/bx-icon.ts new file mode 100644 index 0000000..6f70082 --- /dev/null +++ b/src/utils/bx-icon.ts @@ -0,0 +1,30 @@ +import iconController from "@assets/svg/controller.svg" with { type: "text" }; +import iconCopy from "@assets/svg/copy.svg" with { type: "text" }; +import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" }; +import iconDisplay from "@assets/svg/display.svg" with { type: "text" }; +import iconMouseSettings from "@assets/svg/mouse-settings.svg" with { type: "text" }; +import iconMouse from "@assets/svg/mouse.svg" with { type: "text" }; +import iconNew from "@assets/svg/new.svg" with { type: "text" }; +import iconQuestion from "@assets/svg/question.svg" with { type: "text" }; +import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" }; +import iconStreamSettings from "@assets/svg/stream-settings.svg" with { type: "text" }; +import iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" }; +import iconTrash from "@assets/svg/trash.svg" with { type: "text" }; + +export const BxIcon = { + STREAM_SETTINGS: iconStreamSettings, + STREAM_STATS: iconStreamStats, + CONTROLLER: iconController, + DISPLAY: iconDisplay, + MOUSE: iconMouse, + MOUSE_SETTINGS: iconMouseSettings, + NEW: iconNew, + COPY: iconCopy, + TRASH: iconTrash, + CURSOR_TEXT: iconCursorText, + QUESTION: iconQuestion, + + REMOTE_PLAY: iconRemotePlay, + + // HAND_TAP = '', +} as const; diff --git a/src/utils/html.ts b/src/utils/html.ts index fdded1a..4e51240 100644 --- a/src/utils/html.ts +++ b/src/utils/html.ts @@ -1,22 +1,10 @@ -import iconController from "@assets/svg/controller.svg" with { type: "text" }; -import iconCopy from "@assets/svg/copy.svg" with { type: "text" }; -import iconCursorText from "@assets/svg/cursor-text.svg" with { type: "text" }; -import iconDisplay from "@assets/svg/display.svg" with { type: "text" }; -import iconMouseSettings from "@assets/svg/mouse-settings.svg" with { type: "text" }; -import iconMouse from "@assets/svg/mouse.svg" with { type: "text" }; -import iconNew from "@assets/svg/new.svg" with { type: "text" }; -import iconQuestion from "@assets/svg/question.svg" with { type: "text" }; -import iconRemotePlay from "@assets/svg/remote-play.svg" with { type: "text" }; -import iconStreamSettings from "@assets/svg/stream-settings.svg" with { type: "text" }; -import iconStreamStats from "@assets/svg/stream-stats.svg" with { type: "text" }; -import iconTrash from "@assets/svg/trash.svg" with { type: "text" }; - +import type { BxIcon } from "@utils/bx-icon"; type BxButton = { style?: number | string; url?: string; classes?: string[]; - icon?: Icon; + icon?: typeof BxIcon; label?: string; title?: string; disabled?: boolean; @@ -68,25 +56,7 @@ export const CE = createElement; // Credit: https://phosphoricons.com const svgParser = (svg: string) => new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement; -export enum Icon { - STREAM_SETTINGS = iconStreamSettings, - STREAM_STATS = iconStreamStats, - CONTROLLER = iconController, - DISPLAY = iconDisplay, - MOUSE = iconMouse, - MOUSE_SETTINGS = iconMouseSettings, - NEW = iconNew, - COPY = iconCopy, - TRASH = iconTrash, - CURSOR_TEXT = iconCursorText, - QUESTION = iconQuestion, - - REMOTE_PLAY = iconRemotePlay, - - // HAND_TAP = '', -}; - -export const createSvgIcon = (icon: Icon) => { +export const createSvgIcon = (icon: typeof BxIcon) => { return svgParser(icon.toString()); }