From 17afd364da96aef3f482dd03811dd51e8a7be966 Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Wed, 1 May 2024 18:57:50 +0700 Subject: [PATCH] Refactor icons --- src/assets/svg/controller.svg | 3 ++ src/assets/svg/copy.svg | 3 ++ src/assets/svg/cursor-text.svg | 3 ++ src/assets/svg/display.svg | 3 ++ src/assets/svg/mouse-settings.svg | 3 ++ src/assets/svg/mouse.svg | 3 ++ src/assets/svg/new.svg | 3 ++ src/assets/svg/question.svg | 3 ++ src/assets/svg/remote-play.svg | 3 ++ src/assets/svg/stream-settings.svg | 3 ++ src/assets/svg/stream-stats.svg | 3 ++ src/assets/svg/trash.svg | 3 ++ src/modules/stream/stream-ui.ts | 24 +++------- src/modules/ui/ui.ts | 15 +----- src/utils/html.ts | 76 ++++++++++++++++++------------ 15 files changed, 90 insertions(+), 61 deletions(-) create mode 100644 src/assets/svg/controller.svg create mode 100644 src/assets/svg/copy.svg create mode 100644 src/assets/svg/cursor-text.svg create mode 100644 src/assets/svg/display.svg create mode 100644 src/assets/svg/mouse-settings.svg create mode 100644 src/assets/svg/mouse.svg create mode 100644 src/assets/svg/new.svg create mode 100644 src/assets/svg/question.svg create mode 100644 src/assets/svg/remote-play.svg create mode 100644 src/assets/svg/stream-settings.svg create mode 100644 src/assets/svg/stream-stats.svg create mode 100644 src/assets/svg/trash.svg diff --git a/src/assets/svg/controller.svg b/src/assets/svg/controller.svg new file mode 100644 index 0000000..8784505 --- /dev/null +++ b/src/assets/svg/controller.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/copy.svg b/src/assets/svg/copy.svg new file mode 100644 index 0000000..ef003d4 --- /dev/null +++ b/src/assets/svg/copy.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/cursor-text.svg b/src/assets/svg/cursor-text.svg new file mode 100644 index 0000000..3f7a279 --- /dev/null +++ b/src/assets/svg/cursor-text.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/display.svg b/src/assets/svg/display.svg new file mode 100644 index 0000000..eefd5d2 --- /dev/null +++ b/src/assets/svg/display.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/mouse-settings.svg b/src/assets/svg/mouse-settings.svg new file mode 100644 index 0000000..e85c227 --- /dev/null +++ b/src/assets/svg/mouse-settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/mouse.svg b/src/assets/svg/mouse.svg new file mode 100644 index 0000000..239bed4 --- /dev/null +++ b/src/assets/svg/mouse.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/new.svg b/src/assets/svg/new.svg new file mode 100644 index 0000000..b4adc91 --- /dev/null +++ b/src/assets/svg/new.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/question.svg b/src/assets/svg/question.svg new file mode 100644 index 0000000..bed0e06 --- /dev/null +++ b/src/assets/svg/question.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/remote-play.svg b/src/assets/svg/remote-play.svg new file mode 100644 index 0000000..c656034 --- /dev/null +++ b/src/assets/svg/remote-play.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/stream-settings.svg b/src/assets/svg/stream-settings.svg new file mode 100644 index 0000000..10acc42 --- /dev/null +++ b/src/assets/svg/stream-settings.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/stream-stats.svg b/src/assets/svg/stream-stats.svg new file mode 100644 index 0000000..99378d1 --- /dev/null +++ b/src/assets/svg/stream-stats.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/trash.svg b/src/assets/svg/trash.svg new file mode 100644 index 0000000..eeb3057 --- /dev/null +++ b/src/assets/svg/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/modules/stream/stream-ui.ts b/src/modules/stream/stream-ui.ts index ca597e7..581289d 100644 --- a/src/modules/stream/stream-ui.ts +++ b/src/modules/stream/stream-ui.ts @@ -1,5 +1,5 @@ import { STATES } from "../../utils/global"; -import { Icon } from "../../utils/html"; +import { Icon, createSvgIcon } from "../../utils/html"; import { BxEvent } from "../../utils/bx-event"; import { PrefKey, getPref } from "../../utils/preferences"; import { t } from "../../utils/translation"; @@ -101,25 +101,13 @@ function cloneStreamHudButton($orgButton: HTMLElement, label: string, svgIcon: I const $button = $container.querySelector('button')!; $button.setAttribute('title', label); - const $svg = $button.querySelector('svg')!; - $svg.innerHTML = svgIcon; + const $orgSvg = $button.querySelector('svg')!; + const $svg = createSvgIcon(svgIcon); $svg.style.fill = 'none'; + $svg.setAttribute('class', $orgSvg.getAttribute('class') || ''); + $svg.ariaHidden = 'true'; - const attrs = { - 'fill': 'none', - 'stroke': '#fff', - 'fill-rule': 'evenodd', - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', - 'stroke-width': '2', - 'viewBox': '0 0 32 32' - }; - - let attr: keyof typeof attrs; - for (attr in attrs) { - $svg.setAttribute(attr, attrs[attr]); - } - + $orgSvg.replaceWith($svg); return $container; } diff --git a/src/modules/ui/ui.ts b/src/modules/ui/ui.ts index 7b8dc08..e1e3898 100644 --- a/src/modules/ui/ui.ts +++ b/src/modules/ui/ui.ts @@ -1,5 +1,5 @@ import { STATES } from "../../utils/global"; -import { Icon, CE, createButton, ButtonStyle } from "../../utils/html"; +import { Icon, CE, createButton, ButtonStyle, createSvgIcon } from "../../utils/html"; import { UserAgent } from "../../utils/user-agent"; import { BxEvent } from "../../utils/bx-event"; import { MkbRemapper } from "../mkb/mkb-remapper"; @@ -300,18 +300,7 @@ function setupQuickSettingsBar() { continue; } - const $svg = CE('svg', { - 'xmlns': 'http://www.w3.org/2000/svg', - 'data-group': settingTab.group, - 'fill': 'none', - 'stroke': '#fff', - 'fill-rule': 'evenodd', - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', - 'stroke-width': 2, - }); - $svg.innerHTML = settingTab.icon; - $svg.setAttribute('viewBox', '0 0 32 32'); + const $svg = createSvgIcon(settingTab.icon); $svg.addEventListener('click', e => { // Switch tab for (const $child of Array.from($settings.children)) { diff --git a/src/utils/html.ts b/src/utils/html.ts index fed1618..19b0a20 100644 --- a/src/utils/html.ts +++ b/src/utils/html.ts @@ -1,8 +1,34 @@ +// @ts-ignore +import iconController from "../assets/svg/controller.svg" with { type: "text" }; +// @ts-ignore +import iconCopy from "../assets/svg/copy.svg" with { type: "text" }; +// @ts-ignore +import iconCursorText from "../assets/svg/cursor-text.svg" with { type: "text" }; +// @ts-ignore +import iconDisplay from "../assets/svg/display.svg" with { type: "text" }; +// @ts-ignore +import iconMouseSettings from "../assets/svg/mouse-settings.svg" with { type: "text" }; +// @ts-ignore +import iconMouse from "../assets/svg/mouse.svg" with { type: "text" }; +// @ts-ignore +import iconNew from "../assets/svg/new.svg" with { type: "text" }; +// @ts-ignore +import iconQuestion from "../assets/svg/question.svg" with { type: "text" }; +// @ts-ignore +import iconRemotePlay from "../assets/svg/remote-play.svg" with { type: "text" }; +// @ts-ignore +import iconStreamSettings from "../assets/svg/stream-settings.svg" with { type: "text" }; +// @ts-ignore +import iconStreamStats from "../assets/svg/stream-stats.svg" with { type: "text" }; +// @ts-ignore +import iconTrash from "../assets/svg/trash.svg" with { type: "text" }; + + type BxButton = { style?: number | string; url?: string; classes?: string[]; - icon?: string; + icon?: Icon; label?: string; title?: string; disabled?: boolean; @@ -52,39 +78,29 @@ function createElement(elmName: string, props: {[index: string]: 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 = '', - STREAM_STATS = '', - CONTROLLER = '', - DISPLAY = '', - MOUSE = '', - MOUSE_SETTINGS = '', - NEW = '', - COPY = '', - TRASH = '', - CURSOR_TEXT = '', - QUESTION = '', + 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 = '', + REMOTE_PLAY = iconRemotePlay, - HAND_TAP = '', + // HAND_TAP = '', }; -export const createSvgIcon = (icon: string, strokeWidth=2) => { - const $svg = CE('svg', { - 'xmlns': 'http://www.w3.org/2000/svg', - 'fill': 'none', - 'stroke': '#fff', - 'fill-rule': 'evenodd', - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', - 'stroke-width': strokeWidth, - }); - $svg.innerHTML = icon; - $svg.setAttribute('viewBox', '0 0 32 32'); - - return $svg; -}; +export const createSvgIcon = (icon: Icon) => { + return svgParser(icon.toString()); +} export const ButtonStyle: DualEnum = {}; ButtonStyle[ButtonStyle.PRIMARY = 1] = 'bx-primary'; @@ -113,7 +129,7 @@ export const createButton = (options: BxButton): T => { options.classes && $btn.classList.add(...options.classes); - options.icon && $btn.appendChild(createSvgIcon(options.icon, 4)); + options.icon && $btn.appendChild(createSvgIcon(options.icon)); options.label && $btn.appendChild(CE('span', {}, options.label)); options.title && $btn.setAttribute('title', options.title); options.disabled && (($btn as HTMLButtonElement).disabled = true);