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

Update bx-select's layout

Browse Source
This commit is contained in:
redphx 2024-07-15 21:18:51 +07:00
parent 394dc68ece
commit be338f3e34
5 changed files with 47 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
dist/better-xcloud.user.js vendored
View File

File diff suppressed because one or more lines are too long

9
src/assets/css/global-settings.styl
View File

@ -134,14 +134,19 @@
}
}
input[type=checkbox], select {
input[type=checkbox] {
cursor: pointer;
}
input[type=checkbox],
select {
&:focus {
filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}
}
&:has(input:focus), &:has(select:focus) {
&:has(input:focus), &:has(select:focus), &:has(button:focus) {
&::before {
content: ' ';
border-radius: 4px;

9
src/assets/css/web-components.styl
View File

@ -29,6 +29,15 @@
label {
margin-bottom: 0;
font-size: 14px;
width: 100%;
span {
display: block;
font-size: 10px;
font-weight: bold;
text-align: left;
line-height: initial;
}
}
}

7
src/modules/ui/global-settings.ts
View File

@ -381,7 +381,7 @@ export function setupSettingsUi() {
$control.setAttribute('tabindex', -1);
}
const $label = CE('label', labelAttrs, settingLabel);
const $label = CE<HTMLLabelElement>('label', labelAttrs, settingLabel);
if (settingNote) {
$label.appendChild(CE('b', {}, settingNote));
}
@ -397,7 +397,10 @@ export function setupSettingsUi() {
} else {
$elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
$label,
CE('div', {class: 'bx-setting-control'}, $control),
$control instanceof HTMLInputElement ? CE('label', {
class: 'bx-setting-control',
for: $label.getAttribute('for'),
}, $control) : CE('div', {class: 'bx-setting-control'}, $control),
);
}

15
src/web-components/bx-select.ts
View File

@ -65,11 +65,18 @@ export class BxSelectElement {
content = $option.textContent || '';
if (content && $option.parentElement!.tagName === 'OPTGROUP') {
content = ($option.parentElement as HTMLOptionElement).label + ' ❯ ' + content;
}
}
$label.innerHTML = '';
const fragment = document.createDocumentFragment();
fragment.appendChild(CE('span', {}, ($option.parentElement as HTMLOptGroupElement).label));
fragment.appendChild(document.createTextNode(content));
$label.textContent = content;
$label.appendChild(fragment);
} else {
$label.textContent = content;
}
} else {
$label.textContent = content;
}
// Hide checkbox when the selection is empty
if (isMultiple) {