marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-04 22:57:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add stat's background opacity

Browse Source
This commit is contained in:
redphx 2024-12-11 17:50:04 +07:00
parent f8b8012f5c
commit 7709cceff0
6 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/css/stream-stats.styl
View File

@ -144,7 +144,7 @@ div[class^=StreamMenu-module__container] .bx-badges {
border-radius: 0 0 4px 4px;
}
&[data-transparent=true] {
&[data-shadow=true] {
background: none;
filter: drop-shadow(1px 0 0 #000000f0) drop-shadow(-1px 0 0 #000000f0) drop-shadow(0 1px 0 #000000f0) drop-shadow(0 -1px 0 #000000f0);
}

4
src/enums/pref-keys.ts
View File

@ -103,8 +103,8 @@ export const enum PrefKey {
STATS_QUICK_GLANCE_ENABLED = 'stats.quickGlance.enabled',
STATS_POSITION = 'stats.position',
STATS_TEXT_SIZE = 'stats.textSize',
STATS_TRANSPARENT = 'stats.transparent',
STATS_OPACITY = 'stats.opacity',
STATS_OPACITY_ALL = 'stats.opacity.all',
STATS_OPACITY_BACKGROUND = 'stats.opacity.background',
STATS_CONDITIONAL_FORMATTING = 'stats.colors',
REMOTE_PLAY_ENABLED = 'xhome.enabled',

13
src/modules/stream/stream-stats.ts
View File

@ -193,12 +193,21 @@ export class StreamStats {
refreshStyles() {
const PREF_ITEMS = getPref<StreamStat[]>(PrefKey.STATS_ITEMS);
const PREF_OPACITY_BG = getPref<number>(PrefKey.STATS_OPACITY_BACKGROUND);
const $container = this.$container;
$container.dataset.stats = '[' + PREF_ITEMS.join('][') + ']';
$container.dataset.position = getPref(PrefKey.STATS_POSITION);
$container.dataset.transparent = getPref(PrefKey.STATS_TRANSPARENT);
$container.style.opacity = getPref(PrefKey.STATS_OPACITY) + '%';
if (PREF_OPACITY_BG === 0) {
$container.style.removeProperty('background-color');
$container.dataset.shadow = 'true';
} else {
delete $container.dataset.shadow;
$container.style.backgroundColor = `rgba(0, 0, 0, ${PREF_OPACITY_BG}%)`;
}
$container.style.opacity = getPref(PrefKey.STATS_OPACITY_ALL) + '%';
$container.style.fontSize = getPref(PrefKey.STATS_TEXT_SIZE);
}

4
src/modules/ui/dialog/settings-dialog.ts
View File

@ -630,10 +630,10 @@ export class SettingsDialog extends NavigationDialog {
pref: PrefKey.STATS_TEXT_SIZE,
onChange: StreamStats.refreshStyles,
}, {
pref: PrefKey.STATS_OPACITY,
pref: PrefKey.STATS_OPACITY_ALL,
onChange: StreamStats.refreshStyles,
}, {
pref: PrefKey.STATS_TRANSPARENT,
pref: PrefKey.STATS_OPACITY_BACKGROUND,
onChange: StreamStats.refreshStyles,
}, {
pref: PrefKey.STATS_CONDITIONAL_FORMATTING,

17
src/utils/settings-storages/global-settings-storage.ts
View File

@ -829,11 +829,7 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
'1.1rem': t('large'),
},
},
[PrefKey.STATS_TRANSPARENT]: {
label: t('transparent-background'),
default: false,
},
[PrefKey.STATS_OPACITY]: {
[PrefKey.STATS_OPACITY_ALL]: {
label: t('opacity'),
default: 80,
min: 50,
@ -844,6 +840,17 @@ export class GlobalSettingsStorage extends BaseSettingsStorage {
ticks: 10,
},
},
[PrefKey.STATS_OPACITY_BACKGROUND]: {
label: t('background-opacity'),
default: 100,
min: 0,
max: 100,
params: {
steps: 10,
suffix: '%',
ticks: 10,
},
},
[PrefKey.STATS_CONDITIONAL_FORMATTING]: {
label: t('conditional-formatting'),
default: false,

1
src/utils/translation.ts
View File

@ -27,6 +27,7 @@ export const SUPPORTED_LANGUAGES = {
};
const Texts = {
"background-opacity": "Background opacity",
"notifications": "Notifications",
"invites": "Invites",
"achievements": "Achievements",