1
0
Fork 0
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:
Luke Pulverenti 2016-08-03 00:30:22 -04:00
parent db0bac5a2b
commit ff0882ba79
18 changed files with 87 additions and 73 deletions

View file

@ -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">&#xE256;</i>\
<i class="md-icon alphaPickerButtonIcon">&#xE256;</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">&#xE14A;</i>\
<i class="md-icon alphaPickerButtonIcon">&#xE14A;</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);
}
}
}

View file

@ -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;