marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-07 08:07:18 +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 { &: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); 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 { &::before {
content: ' '; content: ' ';
border-radius: 4px; border-radius: 4px;

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

@ -29,6 +29,15 @@
label { label {
margin-bottom: 0; margin-bottom: 0;
font-size: 14px; 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); $control.setAttribute('tabindex', -1);
} }
const $label = CE('label', labelAttrs, settingLabel); const $label = CE<HTMLLabelElement>('label', labelAttrs, settingLabel);
if (settingNote) { if (settingNote) {
$label.appendChild(CE('b', {}, settingNote)); $label.appendChild(CE('b', {}, settingNote));
} }
@ -397,7 +397,10 @@ export function setupSettingsUi() {
} else { } else {
$elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0}, $elm = CE('div', {'class': 'bx-settings-row', 'data-group': 0},
$label, $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 || ''; content = $option.textContent || '';
if (content && $option.parentElement!.tagName === 'OPTGROUP') { 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 // Hide checkbox when the selection is empty
if (isMultiple) { if (isMultiple) {