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

update components

This commit is contained in:
Luke Pulverenti 2016-08-02 21:32:16 -04:00
parent 823f69bb92
commit db0bac5a2b
22 changed files with 113 additions and 91 deletions

View file

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

View file

@ -288,7 +288,7 @@ define(['browser'], function (browser) {
if (isEdgeUniversal()) { if (isEdgeUniversal()) {
videoAudioCodecs.push('dca'); videoAudioCodecs.push('dca');
videoAudioCodecs.push('truehd'); //videoAudioCodecs.push('truehd');
} }
if (canPlayH264()) { if (canPlayH264()) {

View file

@ -105,6 +105,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
function getImageWidth(shape) { function getImageWidth(shape) {
var screenWidth = window.innerWidth; var screenWidth = window.innerWidth;
if (!browser.mobile && !browser.tv) {
var roundScreenTo = 100;
screenWidth = Math.ceil(screenWidth / roundScreenTo) * roundScreenTo;
}
var imagesPerRow = getPostersPerRow(shape, screenWidth); var imagesPerRow = getPostersPerRow(shape, screenWidth);
var shapeWidth = screenWidth / imagesPerRow; var shapeWidth = screenWidth / imagesPerRow;

View file

@ -1,4 +1,4 @@
[is=emby-collapse] { .emby-collapse {
margin: .5em 0; margin: .5em 0;
} }

View file

@ -62,11 +62,11 @@
EmbyButtonPrototype.attachedCallback = function () { EmbyButtonPrototype.attachedCallback = function () {
if (this.getAttribute('data-embycollapse') == 'true') { if (this.classList.contains('emby-collapse')) {
return; return;
} }
this.setAttribute('data-embycollapse', 'true'); this.classList.add('emby-collapse');
var collapseContent = this.querySelector('.collapseContent'); var collapseContent = this.querySelector('.collapseContent');
if (collapseContent) { if (collapseContent) {

View file

@ -1,4 +1,4 @@
[is="emby-select"] { .emby-select {
display: block; display: block;
margin: 0; margin: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
@ -25,7 +25,7 @@
appearance: none; appearance: none;
} }
[is="emby-select"] option { .emby-select option {
color: initial; color: initial;
} }
@ -64,7 +64,7 @@
transform-origin: center center; transform-origin: center center;
} }
[is="emby-select"]:focus + .emby-select-selectionbar { .emby-select:focus + .emby-select-selectionbar {
background-color: #52B54B; background-color: #52B54B;
transform: none; transform: none;
} }

View file

@ -140,31 +140,33 @@
EmbySelectPrototype.attachedCallback = function () { EmbySelectPrototype.attachedCallback = function () {
if (this.getAttribute('data-embyselect') != 'true') { if (this.classList.contains('emby-select')) {
this.setAttribute('data-embyselect', 'true'); return;
var label = this.ownerDocument.createElement('label');
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('selectLabel');
label.classList.add('selectLabelUnfocused');
label.htmlFor = this.id;
this.parentNode.insertBefore(label, this);
var div = document.createElement('div');
div.classList.add('emby-select-selectionbar');
this.parentNode.insertBefore(div, this.nextSibling);
var arrowContainer = document.createElement('div');
arrowContainer.classList.add('selectArrowContainer');
arrowContainer.innerHTML = '<div style="visibility:hidden;">0</div>';
this.parentNode.appendChild(arrowContainer);
var arrow = document.createElement('i');
arrow.classList.add('md-icon');
arrow.classList.add('selectArrow');
arrow.innerHTML = '&#xE313;';
arrowContainer.appendChild(arrow);
} }
this.classList.add('emby-select');
var label = this.ownerDocument.createElement('label');
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('selectLabel');
label.classList.add('selectLabelUnfocused');
label.htmlFor = this.id;
this.parentNode.insertBefore(label, this);
var div = document.createElement('div');
div.classList.add('emby-select-selectionbar');
this.parentNode.insertBefore(div, this.nextSibling);
var arrowContainer = document.createElement('div');
arrowContainer.classList.add('selectArrowContainer');
arrowContainer.innerHTML = '<div style="visibility:hidden;">0</div>';
this.parentNode.appendChild(arrowContainer);
var arrow = document.createElement('i');
arrow.classList.add('md-icon');
arrow.classList.add('selectArrow');
arrow.innerHTML = '&#xE313;';
arrowContainer.appendChild(arrow);
}; };
document.registerElement('emby-select', { document.registerElement('emby-select', {

View file

@ -6,9 +6,6 @@ _:-ms-input-placeholder, :root .mdl-slider.mdl-slider {
.mdl-slider { .mdl-slider {
width: 100%; width: 100%;
}
.mdl-slider {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;

View file

@ -1,4 +1,4 @@
[is="emby-textarea"] { .emby-textarea {
display: block; display: block;
margin: 0; margin: 0;
margin-bottom: 0 !important; margin-bottom: 0 !important;
@ -33,7 +33,7 @@
transition: all .2s ease-out; transition: all .2s ease-out;
} }
.textareaLabel.focused:not(.blank) { .textareaLabelFocused {
color: #52B54B; color: #52B54B;
} }
@ -48,7 +48,7 @@
transform-origin: center center; transform-origin: center center;
} }
[is="emby-textarea"]:focus + .emby-textarea-selectionbar { .emby-textarea:focus + .emby-textarea-selectionbar {
background-color: #52B54B; background-color: #52B54B;
transform: none; transform: none;
} }

View file

@ -101,12 +101,12 @@
EmbyTextAreaPrototype.attachedCallback = function () { EmbyTextAreaPrototype.attachedCallback = function () {
if (this.getAttribute('data-embytextarea') == 'true') { if (this.classList.contains('emby-textarea')) {
return; return;
} }
this.rows = 1; this.rows = 1;
this.setAttribute('data-embytextarea', 'true'); this.classList.add('emby-textarea');
var parentNode = this.parentNode; var parentNode = this.parentNode;
var label = this.ownerDocument.createElement('label'); var label = this.ownerDocument.createElement('label');
@ -124,29 +124,15 @@
div.classList.add('emby-textarea-selectionbar'); div.classList.add('emby-textarea-selectionbar');
parentNode.insertBefore(div, this.nextSibling); parentNode.insertBefore(div, this.nextSibling);
function onChange() {
if (this.value) {
label.classList.remove('blank');
} else {
label.classList.add('blank');
}
}
this.addEventListener('focus', function () { this.addEventListener('focus', function () {
onChange.call(this); label.classList.add('textareaLabelFocused');
label.classList.add('focused'); label.classList.remove('textareaLabelUnfocused');
}); });
this.addEventListener('blur', function () { this.addEventListener('blur', function () {
onChange.call(this); label.classList.remove('textareaLabelFocused');
label.classList.remove('focused'); label.classList.add('textareaLabelUnfocused');
}); });
this.addEventListener('change', onChange);
this.addEventListener('input', onChange);
this.addEventListener('valueset', onChange);
onChange.call(this);
this.label = function (text) { this.label = function (text) {
label.innerHTML = text; label.innerHTML = text;
}; };

View file

@ -67,19 +67,19 @@
height: 2px; height: 2px;
} }
.sportsProgramInfo .programAccent { .sportsAccent {
background-color: #0A7C33; background-color: #0A7C33;
} }
.newsProgramInfo .programAccent { .newsAccent {
background-color: #523378; background-color: #523378;
} }
.movieProgramInfo .programAccent { .movieAccent {
background-color: #A43913; background-color: #A43913;
} }
.childProgramInfo .programAccent { .childAccent {
background-color: #0B487D; background-color: #0B487D;
} }
@ -245,7 +245,7 @@
@media all and (max-width: 1200px) { @media all and (max-width: 1200px) {
.channelHeaderCell.withImage .guideChannelNumber { .guideChannelNumberWithImage {
display: none; display: none;
} }
} }
@ -367,7 +367,7 @@
color: #bbb; color: #bbb;
} }
.programCell i { .programIcon {
margin-left: auto; margin-left: auto;
margin-right: .5em; margin-right: .5em;
height: 3.5vh; height: 3.5vh;
@ -377,7 +377,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
.programCell i + i { .programIcon + .programIcon {
margin-left: .25em; margin-left: .25em;
} }

View file

@ -341,18 +341,27 @@
html += '</div>'; html += '</div>';
if (program.IsHD && options.showHdIcon) { if (program.IsHD && options.showHdIcon) {
html += '<i class="guideHdIcon md-icon">hd</i>'; html += '<i class="guideHdIcon md-icon programIcon">hd</i>';
} }
if (program.SeriesTimerId) { if (program.SeriesTimerId) {
html += '<i class="seriesTimerIcon md-icon">fiber_smart_record</i>'; html += '<i class="seriesTimerIcon md-icon programIcon">fiber_smart_record</i>';
} }
else if (program.TimerId) { else if (program.TimerId) {
html += '<i class="timerIcon md-icon">fiber_manual_record</i>'; html += '<i class="timerIcon md-icon programIcon">fiber_manual_record</i>';
} }
if (addAccent) { if (addAccent) {
html += '<div class="programAccent"></div>';
if (program.IsKids) {
html += '<div class="programAccent childAccent"></div>';
} else if (program.IsSports) {
html += '<div class="programAccent sportsAccent"></div>';
} else if (program.IsNews) {
html += '<div class="programAccent newsAccent"></div>';
} else if (program.IsMovie) {
html += '<div class="programAccent movieAccent"></div>';
}
} }
html += '</button>'; html += '</button>';
@ -413,13 +422,15 @@
} }
var cssClass = 'channelHeaderCell clearButton itemAction lazy'; var cssClass = 'channelHeaderCell clearButton itemAction lazy';
if (hasChannelImage) {
cssClass += ' withImage';
}
html += '<button type="button" class="' + cssClass + '"' + dataSrc + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">'; html += '<button type="button" class="' + cssClass + '"' + dataSrc + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
html += '<div class="guideChannelNumber">' + channel.Number + '</div>'; cssClass = 'guideChannelNumber';
if (hasChannelImage) {
cssClass += ' guideChannelNumberWithImage';
}
html += '<div class="' + cssClass + '">' + channel.Number + '</div>';
if (!hasChannelImage) { if (!hasChannelImage) {
html += '<div class="guideChannelName">' + channel.Name + '</div>'; html += '<div class="guideChannelName">' + channel.Name + '</div>';

View file

@ -115,7 +115,7 @@
} }
} }
var searchImages = elem.querySelectorAll('.searchImage'); var searchImages = elem.querySelectorAll('.card');
for (i = 0, length = searchImages.length; i < length; i++) { for (i = 0, length = searchImages.length; i < length; i++) {
searchImages[i].addEventListener('click', onSearchImageClick); searchImages[i].addEventListener('click', onSearchImageClick);
@ -185,12 +185,12 @@
cssClass += " portraitCard"; cssClass += " portraitCard";
} }
html += '<button type="button" class="' + cssClass + '">'; html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
html += '<div class="cardBox visualCardBox">'; html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable">'; html += '<div class="cardScalable">';
html += '<div class="cardPadder"></div>'; html += '<div class="cardPadder"></div>';
html += '<div class="cardContent searchImage" data-index="' + index + '">'; html += '<div class="cardContent searchImage">';
if (result.ImageUrl) { if (result.ImageUrl) {
var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName); var displayUrl = getSearchImageDisplayUrl(result.ImageUrl, result.SearchProviderName);

View file

@ -29,14 +29,14 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"ignore": [], "ignore": [],
"homepage": "https://github.com/polymerelements/iron-behaviors", "homepage": "https://github.com/PolymerElements/iron-behaviors",
"_release": "1.0.17", "_release": "1.0.17",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.0.17", "tag": "v1.0.17",
"commit": "ef8e89b5f0aa4e8a6b51ca6491ea453bf395f94f" "commit": "ef8e89b5f0aa4e8a6b51ca6491ea453bf395f94f"
}, },
"_source": "git://github.com/polymerelements/iron-behaviors.git", "_source": "git://github.com/PolymerElements/iron-behaviors.git",
"_target": "^1.0.0", "_target": "^1.0.0",
"_originalSource": "polymerelements/iron-behaviors" "_originalSource": "PolymerElements/iron-behaviors"
} }

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-input", "name": "paper-input",
"version": "1.1.16", "version": "1.1.17",
"description": "Material design text fields", "description": "Material design text fields",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"
@ -48,11 +48,11 @@
"web-component-tester": "^4.0.0", "web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}, },
"_release": "1.1.16", "_release": "1.1.17",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "v1.1.16", "tag": "v1.1.17",
"commit": "0222d1d585c330c3ab47bb2fc16e3b5ec689ddd6" "commit": "61d482886c58324b682cea3c605695c31154e084"
}, },
"_source": "git://github.com/PolymerElements/paper-input.git", "_source": "git://github.com/PolymerElements/paper-input.git",
"_target": "^1.1.11", "_target": "^1.1.11",

View file

@ -1,6 +1,6 @@
{ {
"name": "paper-input", "name": "paper-input",
"version": "1.1.16", "version": "1.1.17",
"description": "Material design text fields", "description": "Material design text fields",
"authors": [ "authors": [
"The Polymer Authors" "The Polymer Authors"

View file

@ -73,7 +73,7 @@ style this element.
:host { :host {
display: block; display: block;
} }
:host([focused]) { :host([focused]) {
outline: none; outline: none;
} }
@ -97,6 +97,10 @@ style this element.
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: var(--paper-input-container-color, --secondary-text-color); color: var(--paper-input-container-color, --secondary-text-color);
} }
label {
pointer-events: none;
}
</style> </style>
<paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> <paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">

View file

@ -43,6 +43,10 @@ style this element.
:host([hidden]) { :host([hidden]) {
display: none !important; display: none !important;
} }
label {
pointer-events: none;
}
</style> </style>
<paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]"> <paper-input-container no-label-float$="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">

View file

@ -161,6 +161,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating'); assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
}); });
test('label does not receive pointer events', function() {
var input = fixture('always-float-label');
var label = Polymer.dom(input.root).querySelector('label');
assert.equal(getComputedStyle(label).pointerEvents, 'none');
});
test('error message is displayed', function() { test('error message is displayed', function() {
var input = fixture('error'); var input = fixture('error');
forceXIfStamp(input); forceXIfStamp(input);

View file

@ -125,6 +125,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
var inputContent = Polymer.dom(container.root).querySelector('.input-content'); var inputContent = Polymer.dom(container.root).querySelector('.input-content');
assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating'); assert.isTrue(inputContent.classList.contains('label-is-floating'), 'label is floating');
}); });
test('label does not receive pointer events', function() {
var input = fixture('always-float-label');
var label = Polymer.dom(input.root).querySelector('label');
assert.equal(getComputedStyle(label).pointerEvents, 'none');
});
}); });
suite('focus/blur events', function() { suite('focus/blur events', function() {

View file

@ -653,11 +653,11 @@ progress {
color: #555; color: #555;
} }
.ui-body-a .inputLabel.focused:not(.blank), .ui-body-a .textareaLabel.focused:not(.blank) { .ui-body-a .inputLabel.focused:not(.blank), .ui-body-a .textareaLabelFocused, .ui-body-a .selectLabelFocused {
color: green; color: green;
} }
.ui-body-a .selectLabel, .ui-body-a .paperListLabel, .ui-body-a .fieldDescription { .ui-body-a .selectLabelUnfocused, .ui-body-a .paperListLabel, .ui-body-a .fieldDescription {
color: #555; color: #555;
} }

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 .textareaLabel { .ui-body-b .paperListLabel, .ui-body-b .fieldDescription, .ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabel, .ui-body-b .textareaLabelUnfocused {
color: #ccc; color: #ccc;
} }