mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update shared components
This commit is contained in:
parent
db0bac5a2b
commit
ff0882ba79
18 changed files with 87 additions and 73 deletions
|
@ -1,7 +1,9 @@
|
|||
define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light', 'material-icons'], function (focusManager) {
|
||||
|
||||
var selectedButtonClass = 'alphaPickerButton-selected';
|
||||
|
||||
function focus() {
|
||||
var selected = this.querySelector('.selected');
|
||||
var selected = this.querySelector('.' + selectedButtonClass);
|
||||
|
||||
if (selected) {
|
||||
focusManager.focus(selected);
|
||||
|
@ -26,7 +28,7 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
|
|||
if (options.mode == 'keyboard') {
|
||||
// space_bar icon
|
||||
html += '<button data-value=" " is="paper-icon-button-light" class="alphaPickerButton autoSize">\
|
||||
<i class="md-icon"></i>\
|
||||
<i class="md-icon alphaPickerButtonIcon"></i>\
|
||||
</button>';
|
||||
} else {
|
||||
letters = ['#'];
|
||||
|
@ -39,7 +41,7 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
|
|||
if (options.mode == 'keyboard') {
|
||||
// backspace icon
|
||||
html += '<button data-value="backspace" is="paper-icon-button-light" class="alphaPickerButton autoSize">\
|
||||
<i class="md-icon"></i>\
|
||||
<i class="md-icon alphaPickerButtonIcon"></i>\
|
||||
</button>';
|
||||
html += '</div>';
|
||||
|
||||
|
@ -223,22 +225,22 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
|
|||
currentValue = value;
|
||||
|
||||
if (options.mode != 'keyboard') {
|
||||
selected = element.querySelector('.selected');
|
||||
selected = element.querySelector('.' + selectedButtonClass);
|
||||
btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
|
||||
|
||||
if (btn && btn != selected) {
|
||||
btn.classList.add('selected');
|
||||
btn.classList.add(selectedButtonClass);
|
||||
}
|
||||
if (selected && selected != btn) {
|
||||
selected.classList.remove('selected');
|
||||
selected.classList.remove(selectedButtonClass);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
currentValue = value;
|
||||
|
||||
selected = element.querySelector('.selected');
|
||||
selected = element.querySelector('.' + selectedButtonClass);
|
||||
if (selected) {
|
||||
selected.classList.remove('selected');
|
||||
selected.classList.remove(selectedButtonClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,35 +11,31 @@
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.alphaPicker.vertical .alphaPickerRow {
|
||||
.alphaPicker-vertical .alphaPickerRow {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button.alphaPickerButton {
|
||||
.alphaPickerButton {
|
||||
min-width: initial;
|
||||
margin: 0;
|
||||
padding: .1em .4em !important;
|
||||
width: auto;
|
||||
border-radius: .1em;
|
||||
font-weight: normal;
|
||||
opacity: .25;
|
||||
}
|
||||
|
||||
.vertical .alphaPickerButton {
|
||||
padding: .25em .4em !important;
|
||||
}
|
||||
|
||||
.layout-desktop .alphaPickerButton {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light].alphaPickerButton i {
|
||||
.alphaPicker-vertical .alphaPickerButton {
|
||||
padding: .2em .4em !important;
|
||||
}
|
||||
|
||||
.alphaPickerButtonIcon {
|
||||
width: 3.3vh;
|
||||
height: 3.3vh;
|
||||
font-size: 3.3vh;
|
||||
}
|
||||
|
||||
.alphaPickerButton.selected {
|
||||
.alphaPickerButton-selected {
|
||||
color: #000;
|
||||
background-color: #bbb;
|
||||
opacity: 1;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue