mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update shared components

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/emby-webcomponents/.bower.json vendored
View file

@ -14,12 +14,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.4.144", "version": "1.4.145",
"_release": "1.4.144", "_release": "1.4.145",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.4.144", "tag": "1.4.145",
"commit": "65443f540f435d1f89718aeef09a4587f5c1391b" "commit": "d49d1e90cccfd1735bf18aa8e67d459439c9474b"
}, },
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.1", "_target": "^1.2.1",

18
dashboard-ui/bower_components/emby-webcomponents/alphapicker/alphapicker.js vendored
View file

@ -1,7 +1,9 @@
define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light', 'material-icons'], function (focusManager) { define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-button-light', 'material-icons'], function (focusManager) {
var selectedButtonClass = 'alphaPickerButton-selected';
function focus() { function focus() {
var selected = this.querySelector('.selected'); var selected = this.querySelector('.' + selectedButtonClass);
if (selected) { if (selected) {
focusManager.focus(selected); focusManager.focus(selected);
@ -26,7 +28,7 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
if (options.mode == 'keyboard') { if (options.mode == 'keyboard') {
// space_bar icon // space_bar icon
html += '<button data-value=" " is="paper-icon-button-light" class="alphaPickerButton autoSize">\ 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>'; </button>';
} else { } else {
letters = ['#']; letters = ['#'];
@ -39,7 +41,7 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
if (options.mode == 'keyboard') { if (options.mode == 'keyboard') {
// backspace icon // backspace icon
html += '<button data-value="backspace" is="paper-icon-button-light" class="alphaPickerButton autoSize">\ 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>'; </button>';
html += '</div>'; html += '</div>';
@ -223,22 +225,22 @@ define(['focusManager', 'css!./style.css', 'clearButtonStyle', 'paper-icon-butto
currentValue = value; currentValue = value;
if (options.mode != 'keyboard') { if (options.mode != 'keyboard') {
selected = element.querySelector('.selected'); selected = element.querySelector('.' + selectedButtonClass);
btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']'); btn = element.querySelector('.alphaPickerButton[data-value=\'' + value + '\']');
if (btn && btn != selected) { if (btn && btn != selected) {
btn.classList.add('selected'); btn.classList.add(selectedButtonClass);
} }
if (selected && selected != btn) { if (selected && selected != btn) {
selected.classList.remove('selected'); selected.classList.remove(selectedButtonClass);
} }
} }
} else { } else {
currentValue = value; currentValue = value;
selected = element.querySelector('.selected'); selected = element.querySelector('.' + selectedButtonClass);
if (selected) { if (selected) {
selected.classList.remove('selected'); selected.classList.remove(selectedButtonClass);
} }
} }
} }

20
dashboard-ui/bower_components/emby-webcomponents/alphapicker/style.css vendored
View file

@ -11,35 +11,31 @@
flex-direction: row; flex-direction: row;
} }
.alphaPicker.vertical .alphaPickerRow { .alphaPicker-vertical .alphaPickerRow {
flex-direction: column; flex-direction: column;
} }
button.alphaPickerButton { .alphaPickerButton {
min-width: initial; min-width: initial;
margin: 0; margin: 0;
padding: .1em .4em !important; padding: .1em .4em !important;
width: auto; width: auto;
border-radius: .1em; border-radius: .1em;
font-weight: normal; font-weight: normal;
opacity: .25;
}
.vertical .alphaPickerButton {
padding: .25em .4em !important;
}
.layout-desktop .alphaPickerButton {
opacity: .7; opacity: .7;
} }
[is=paper-icon-button-light].alphaPickerButton i { .alphaPicker-vertical .alphaPickerButton {
padding: .2em .4em !important;
}
.alphaPickerButtonIcon {
width: 3.3vh; width: 3.3vh;
height: 3.3vh; height: 3.3vh;
font-size: 3.3vh; font-size: 3.3vh;
} }
.alphaPickerButton.selected { .alphaPickerButton-selected {
color: #000; color: #000;
background-color: #bbb; background-color: #bbb;
opacity: 1; opacity: 1;

21
dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css vendored
View file

@ -10,6 +10,7 @@
cursor: pointer; cursor: pointer;
contain: style; contain: style;
flex-shrink: 0; flex-shrink: 0;
font-weight: inherit !important;
} }
.itemsContainer { .itemsContainer {
@ -40,10 +41,6 @@
contain: layout style; contain: layout style;
} }
.card, .card:focus {
font-weight: inherit !important;
}
button.card { button.card {
border: 0 !important; border: 0 !important;
font-size: inherit !important; font-size: inherit !important;
@ -70,7 +67,7 @@ button.card {
padding-bottom: 18.5%; padding-bottom: 18.5%;
} }
.card .cardBox { .cardBox {
padding: 0 !important; padding: 0 !important;
margin: 0; margin: 0;
transition: none !important; transition: none !important;
@ -79,7 +76,7 @@ button.card {
overflow: hidden; overflow: hidden;
} }
.layout-tv .card .cardBox { .layout-tv .cardBox {
will-change: transform; will-change: transform;
} }
@ -90,10 +87,6 @@ button.card {
} }
} }
button.cardContent {
display: block;
}
.round .cardBox { .round .cardBox {
border: .7em solid transparent; border: .7em solid transparent;
} }
@ -105,6 +98,7 @@ button.cardContent {
.card:focus { .card:focus {
position: relative !important; position: relative !important;
z-index: 10 !important; z-index: 10 !important;
font-weight: inherit !important;
} }
.card:focus .cardBox { .card:focus .cardBox {
@ -140,11 +134,6 @@ button.cardContent {
margin: 0 !important; margin: 0 !important;
} }
/*.card[focused]:not(.noScale) .cardBox, .card:focus:not(.noScale) .cardBox {
animation:SHW .2s;
animation-fill-mode: both;
}*/
.dimunselected .card .cardImageContainer { .dimunselected .card .cardImageContainer {
-webkit-filter: brightness(50%); -webkit-filter: brightness(50%);
filter: brightness(50%); filter: brightness(50%);
@ -217,6 +206,8 @@ button.cardImageContainer {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
/* Needed in case this is a button */
display: block;
} }
.round .cardContent { .round .cardContent {

10
dashboard-ui/bower_components/emby-webcomponents/emby-checkbox/emby-checkbox.js vendored
View file

@ -31,7 +31,15 @@
labelElement.classList.add('mdl-js-ripple-effect'); labelElement.classList.add('mdl-js-ripple-effect');
var labelTextElement = labelElement.querySelector('span'); var labelTextElement = labelElement.querySelector('span');
labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-checkbox__focus-helper"></span><span class="checkboxOutline"><span class="mdl-checkbox__tick-outline"></span></span>');
var outlineClass = 'checkboxOutline';
var customClass = this.getAttribute('data-outlineclass');
if (customClass) {
outlineClass += ' ' + customClass;
}
labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-checkbox__focus-helper"></span><span class="' + outlineClass + '"><span class="mdl-checkbox__tick-outline"></span></span>');
labelTextElement.classList.add('checkboxLabel'); labelTextElement.classList.add('checkboxLabel');

14
dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.css vendored
View file

@ -1,4 +1,4 @@
[is="emby-input"] { .emby-input {
display: block; display: block;
margin: 0; margin: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
@ -33,12 +33,12 @@
transition: all .2s ease-out; transition: all .2s ease-out;
} }
.inputLabel.blank:not(.nofloat) { .inputLabel-float {
transform-origin: left top; transform-origin: left top;
transform: scale(1.3,1.3) translateY(86%); transform: scale(1.3,1.3) translateY(86%);
} }
.inputLabel.focused:not(.blank) { .inputLabelFocused {
color: #52B54B; color: #52B54B;
} }
@ -53,7 +53,7 @@
transform-origin: center center; transform-origin: center center;
} }
[is="emby-input"]:focus + .emby-input-selectionbar { .emby-input:focus + .emby-input-selectionbar {
background-color: #52B54B; background-color: #52B54B;
transform: none; transform: none;
} }

21
dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js vendored
View file

@ -36,20 +36,18 @@
EmbyInputPrototype.attachedCallback = function () { EmbyInputPrototype.attachedCallback = function () {
if (this.getAttribute('data-embyinput') == 'true') { if (this.classList.contains('emby-input')) {
return; return;
} }
this.setAttribute('data-embyinput', 'true'); this.classList.add('emby-input');
var parentNode = this.parentNode; var parentNode = this.parentNode;
var label = this.ownerDocument.createElement('label'); var label = this.ownerDocument.createElement('label');
label.innerHTML = this.getAttribute('label') || ''; label.innerHTML = this.getAttribute('label') || '';
label.classList.add('inputLabel'); label.classList.add('inputLabel');
if (!supportsFloatingLabel || this.type == 'date') { var instanceSupportsFloat = supportsFloatingLabel && this.type != 'date';
label.classList.add('nofloat');
}
label.htmlFor = this.id; label.htmlFor = this.id;
parentNode.insertBefore(label, this); parentNode.insertBefore(label, this);
@ -60,19 +58,24 @@
function onChange() { function onChange() {
if (this.value) { if (this.value) {
label.classList.remove('blank'); label.classList.remove('inputLabel-float');
} else { } else {
label.classList.add('blank');
if (instanceSupportsFloat) {
label.classList.add('inputLabel-float');
}
} }
} }
this.addEventListener('focus', function () { this.addEventListener('focus', function () {
onChange.call(this); onChange.call(this);
label.classList.add('focused'); label.classList.add('inputLabelFocused');
label.classList.remove('inputLabelUnfocused');
}); });
this.addEventListener('blur', function () { this.addEventListener('blur', function () {
onChange.call(this); onChange.call(this);
label.classList.remove('focused'); label.classList.remove('inputLabelFocused');
label.classList.add('inputLabelUnfocused');
}); });
this.addEventListener('change', onChange); this.addEventListener('change', onChange);

4
dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css vendored
View file

@ -41,6 +41,10 @@
font-size: 30px !important; font-size: 30px !important;
} }
.withHoverMenu {
overflow: hidden;
}
@media all and (max-width: 1200px) { @media all and (max-width: 1200px) {
.cardOverlayInner { .cardOverlayInner {

14
dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.js vendored
View file

@ -164,7 +164,17 @@
innerElem.classList.add('hide'); innerElem.classList.add('hide');
innerElem.classList.add('cardOverlayTarget'); innerElem.classList.add('cardOverlayTarget');
var appendTo = dom.parentWithClass(elem, 'cardContent') || elem; var appendTo = elem.querySelector('div.cardContent') || elem.querySelector('.cardScalable') || elem.querySelector('.cardBox');
//if (appendTo && appendTo.tagName == 'BUTTON') {
// appendTo = dom.parentWithClass(elem, 'cardScalable');
//}
if (!appendTo) {
appendTo = elem;
}
appendTo.classList.add('withHoverMenu');
appendTo.appendChild(innerElem); appendTo.appendChild(innerElem);
} }
@ -201,7 +211,7 @@
function onHoverIn(e) { function onHoverIn(e) {
var elem = e.target; var elem = e.target;
var card = dom.parentWithClass(elem, 'cardImageContainer'); var card = dom.parentWithClass(elem, 'cardBox');
if (!card) { if (!card) {
return; return;

2
dashboard-ui/bower_components/emby-webcomponents/multiselect/multiselect.css vendored
View file

@ -30,7 +30,7 @@
padding-top: 1px; padding-top: 1px;
} }
.itemSelectionPanel .checkboxOutline { .multiSelectCheckboxOutline {
top: 0 !important; top: 0 !important;
border-radius: 0 !important; border-radius: 0 !important;
} }

2
dashboard-ui/bower_components/emby-webcomponents/multiselect/multiselect.js vendored
View file

@ -134,7 +134,7 @@
cssClass += ' checkedInitial'; cssClass += ' checkedInitial';
} }
var checkedAttribute = isChecked ? ' checked' : ''; var checkedAttribute = isChecked ? ' checked' : '';
itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>'; itemSelectionPanel.innerHTML = '<label class="checkboxContainer"><input type="checkbox" is="emby-checkbox" data-outlineclass="multiSelectCheckboxOutline" class="' + cssClass + '"' + checkedAttribute + '/><span></span></label>';
var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect'); var chkItemSelect = itemSelectionPanel.querySelector('.chkItemSelect');
chkItemSelect.addEventListener('change', onSelectionChange); chkItemSelect.addEventListener('change', onSelectionChange);
} }

4
dashboard-ui/css/librarybrowser.css
View file

@ -955,7 +955,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
@media all and (max-height: 700px) { @media all and (max-height: 700px) {
.vertical.alphabetPicker .alphaPickerButton { .alphabetPicker-vertical .alphaPickerButton {
padding-top: 1px !important; padding-top: 1px !important;
padding-bottom: 1px !important; padding-bottom: 1px !important;
} }
@ -963,7 +963,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
@media all and (max-height: 600px) { @media all and (max-height: 600px) {
.vertical.alphabetPicker .alphaPickerButton { .alphabetPicker-vertical .alphaPickerButton {
padding-top: 0 !important; padding-top: 0 !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }

4
dashboard-ui/css/site.css
View file

@ -649,11 +649,11 @@ progress {
background-color: #fff; background-color: #fff;
} }
.ui-body-a .inputLabel, .ui-body-a .textareaLabel { .ui-body-a .inputLabelUnfocused, .ui-body-a .textareaLabel {
color: #555; color: #555;
} }
.ui-body-a .inputLabel.focused:not(.blank), .ui-body-a .textareaLabelFocused, .ui-body-a .selectLabelFocused { .ui-body-a .inputLabelFocused, .ui-body-a .textareaLabelFocused, .ui-body-a .selectLabelFocused {
color: green; color: green;
} }

2
dashboard-ui/itemlist.html
View file

@ -1,5 +1,5 @@
<div id="itemListPage" data-role="page" class="page libraryPage folderListPage noSecondaryNavPage"> <div id="itemListPage" data-role="page" class="page libraryPage folderListPage noSecondaryNavPage">
<div class="alphaPicker vertical alphabetPicker"> <div class="alphaPicker alphaPicker-vertical alphabetPicker">
</div> </div>
<div data-role="content" class="itemListContent"> <div data-role="content" class="itemListContent">

6
dashboard-ui/movies.html
View file

@ -52,7 +52,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
@ -68,7 +68,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker vertical-wrap"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker vertical-wrap">
@ -85,7 +85,7 @@
<button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button> <button type="button" is="paper-icon-button-light" class="btnNewCollection autoSize"><i class="md-icon">add</i></button>
</div> </div>
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker centered" style="text-align:center;"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker centered" style="text-align:center;">

6
dashboard-ui/music.html
View file

@ -50,7 +50,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
@ -66,7 +66,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">
@ -82,7 +82,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">

2
dashboard-ui/thirdparty/paper-button-style.css vendored
View file

@ -157,7 +157,7 @@ button[is="emby-button"].notext {
background-color: #e57373 !important; background-color: #e57373 !important;
} }
.ui-body-b .paperListLabel, .ui-body-b .fieldDescription, .ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabel, .ui-body-b .textareaLabelUnfocused { .ui-body-b .paperListLabel, .ui-body-b .fieldDescription, .ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabelUnfocused, .ui-body-b .textareaLabelUnfocused {
color: #ccc; color: #ccc;
} }

2
dashboard-ui/tv.html
View file

@ -70,7 +70,7 @@
<button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button> <button is="paper-icon-button-light" class="btnFilter autoSize" title="${ButtonFilter}"><i class="md-icon">filter_list</i></button>
</div> </div>
<div class="alphaPicker alphabetPicker vertical"> <div class="alphaPicker alphabetPicker alphaPicker-vertical">
</div> </div>
<div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker"> <div is="emby-itemscontainer" class="itemsContainer itemsContainerWithAlphaPicker">