Add a help button to the Remote Play dialog

This commit is contained in:
redphx 2024-01-08 07:59:26 +07:00
parent 3490ce47bb
commit 2ecb40e6ee

View File

@ -2751,6 +2751,7 @@ class Dialog {
content, content,
hideCloseButton, hideCloseButton,
onClose, onClose,
helpUrl,
} = options; } = options;
// Create dialog overlay // Create dialog overlay
@ -2767,7 +2768,9 @@ class Dialog {
let $close; let $close;
this.onClose = onClose; this.onClose = onClose;
this.$dialog = CE('div', {'class': `bx-dialog ${className || ''} bx-gone`}, this.$dialog = CE('div', {'class': `bx-dialog ${className || ''} bx-gone`},
this.$title = CE('b', {}, title), this.$title = CE('h2', {}, CE('b', {}, title),
helpUrl && createButton({icon: Icon.QUESTION, isGhost: true, title: __('help'), url: helpUrl}),
),
this.$content = CE('div', {'class': 'bx-dialog-content'}, content), this.$content = CE('div', {'class': 'bx-dialog-content'}, content),
!hideCloseButton && ($close = CE('button', {}, __('close'))), !hideCloseButton && ($close = CE('button', {}, __('close'))),
); );
@ -2787,7 +2790,7 @@ class Dialog {
show(newOptions) { show(newOptions) {
if (newOptions && newOptions.title) { if (newOptions && newOptions.title) {
this.$title.textContent = newOptions.title; this.$title.querySelector('b').textContent = newOptions.title;
this.$title.classList.remove('bx-gone'); this.$title.classList.remove('bx-gone');
} }
@ -2879,6 +2882,7 @@ class RemotePlay {
RemotePlay.#dialog = new Dialog({ RemotePlay.#dialog = new Dialog({
title: __('remote-play'), title: __('remote-play'),
content: RemotePlay.#$content, content: RemotePlay.#$content,
helpUrl: 'https://better-xcloud.github.io/remote-play/',
}); });
RemotePlay.#getXhomeToken(() => { RemotePlay.#getXhomeToken(() => {
@ -4786,7 +4790,7 @@ class MkbRemapper {
// Update state of Activate button // Update state of Activate button
const activated = PREFS.get(Preferences.MKB_DEFAULT_PRESET_ID) === this.#STATE.currentPresetId; const activated = PREFS.get(Preferences.MKB_DEFAULT_PRESET_ID) === this.#STATE.currentPresetId;
this.#$.activateButton.disabled = activated; this.#$.activateButton.disabled = activated;
this.#$.activateButton.textContent = activated ? __('activated') : __('activate'); this.#$.activateButton.querySelector('span').textContent = activated ? __('activated') : __('activate');
} }
#refresh() { #refresh() {
@ -4831,7 +4835,7 @@ class MkbRemapper {
// Update state of Activate button // Update state of Activate button
const activated = defaultPresetId === this.#STATE.currentPresetId; const activated = defaultPresetId === this.#STATE.currentPresetId;
this.#$.activateButton.disabled = activated; this.#$.activateButton.disabled = activated;
this.#$.activateButton.textContent = activated ? __('activated') : __('activate'); this.#$.activateButton.querySelector('span').textContent = activated ? __('activated') : __('activate');
!this.#STATE.isEditing && this.#switchPreset(this.#STATE.currentPresetId); !this.#STATE.isEditing && this.#switchPreset(this.#STATE.currentPresetId);
}); });
@ -7153,6 +7157,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module
filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.8)); filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.8));
} }
a.bx-button {
display: inline-block;
}
.bx-button { .bx-button {
background-color: var(--bx-default-button-color); background-color: var(--bx-default-button-color);
user-select: none; user-select: none;
@ -7654,17 +7662,22 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
outline: none !important; outline: none !important;
} }
.bx-dialog > b { .bx-dialog h2 {
display: flex;
margin-bottom: 12px;
}
.bx-dialog h2 b {
flex: 1;
color: #fff; color: #fff;
display: block; display: block;
font-family: var(--bx-title-font); font-family: var(--bx-title-font);
font-size: 26px; font-size: 26px;
font-weight: 400; font-weight: 400;
line-height: 32px; line-height: 32px;
margin-bottom: 12px;
} }
.bx-dialog.bx-binding-dialog > b { .bx-dialog.bx-binding-dialog h2 b {
font-family: var(--bx-promptfont-font) !important; font-family: var(--bx-promptfont-font) !important;
} }
@ -7820,7 +7833,7 @@ div[class*=StreamMenu-module__menuContainer] > div[class*=Menu-module] {
align-item: center; align-item: center;
} }
.bx-quick-settings-tab-contents span { .bx-quick-settings-tab-contents h2 span {
display: inline-block; display: inline-block;
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;