Refactor BxIcon

This commit is contained in:
redphx
2024-05-03 17:27:13 +07:00
parent 3d3a013a5c
commit 3670946da4
10 changed files with 65 additions and 58 deletions

View File

@@ -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,

View File

@@ -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();

View File

@@ -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 => {

View File

@@ -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'),

View File

@@ -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();

View File

@@ -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', {

View File

@@ -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 => {

View File

@@ -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'),