update components

This commit is contained in:
Luke Pulverenti 2016-06-11 11:55:39 -04:00
parent 84945cabc4
commit ab2d2eaf94
111 changed files with 4302 additions and 3100 deletions

View file

@ -15,12 +15,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.42",
"_release": "1.4.42",
"version": "1.4.45",
"_release": "1.4.45",
"_resolution": {
"type": "version",
"tag": "1.4.42",
"commit": "8a273500a1a3fa8e197800ba75da1377dbff0def"
"tag": "1.4.45",
"commit": "4cefbfaedea068552e25c904340e675e66de4964"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -64,6 +64,8 @@ button.actionSheetMenuItem {
.layout-tv .actionSheetScroller {
max-height: 60%;
max-width: 60%;
width: auto;
}
h1.actionSheetTitle {

View file

@ -1,4 +1,4 @@
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'emby-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
var currentServerId;
@ -160,15 +160,14 @@
html += '<br />';
html += '<div>';
html += '<paper-checkbox id="chkEnableInternetMetadata">' + globalize.translate('sharedcomponents#SearchForCollectionInternetMetadata') + '</paper-checkbox>';
html += '</div>';
html += '<label class="checkboxContainer">';
html += '<input is="emby-checkbox" type="checkbox" id="chkEnableInternetMetadata" />';
html += '<span>' + globalize.translate('sharedcomponents#SearchForCollectionInternetMetadata') + '</span>';
html += '</label>';
// newCollectionInfo
html += '</div>';
html += '<br />';
html += '<br />';
html += '<div>';
html += '<button is="emby-button" type="submit" class="raised btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
html += '</div>';

View file

@ -24,7 +24,6 @@
max-height: none !important;
max-width: none !important;
width: auto;
contain: strict;
}
.dialog.centeredDialog {

View file

@ -54,7 +54,6 @@
[is="emby-button"].fab i {
height: 4.4vh;
width: 4.4vh;
font-size: 4.4vh;
vertical-align: middle;
}
@ -63,17 +62,16 @@
}
[is="emby-button"].fab.mini {
padding: .4em;
min-width: 40px !important;
min-height: 40px !important;
height: 3.3vh !important;
width: 3.3vh !important;
padding: .4em;
}
[is="emby-button"].fab.mini i {
height: 2.6vh !important;
width: 2.6vh !important;
font-size: 2.6vh !important;
}
[is="emby-button"].fab iron-icon {
@ -82,6 +80,10 @@
vertical-align: middle;
}
[is="emby-button"].fab i {
vertical-align: middle;
}
[is="emby-button"].block {
display: block;
align-items: center;
@ -103,7 +105,7 @@
margin-left: .5em;
}
[is=emby-button].autoSize, [is=emby-button].autoSize.fab {
[is=emby-button].autoSize {
width: auto !important;
height: auto !important;
}

View file

@ -0,0 +1,139 @@
.mdl-checkbox {
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-flex;
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0;
padding-left: 36px;
align-items: center;
height: 32px;
}
.checkboxFieldDescription {
padding-left: 36px;
}
.checkboxContainer {
margin-bottom: 2em;
display: flex;
}
div.checkboxContainer {
display: block;
}
.mdl-checkbox__input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
.checkboxOutline {
position: absolute;
top: 3px;
left: 0;
display: inline-block;
box-sizing: border-box;
width: 24px;
height: 24px;
margin: 0;
cursor: pointer;
overflow: hidden;
border: 2px solid currentcolor;
border-radius: 2px;
z-index: 2;
}
.mdl-checkbox__input:checked + span + span + .checkboxOutline {
border: 2px solid #52B54B;
}
.mdl-checkbox__input[disabled] + span + span + .checkboxOutline {
border: 2px solid rgba(0, 0, 0, 0.26);
cursor: auto;
}
.mdl-checkbox__focus-helper {
position: absolute;
top: -12px;
left:-12px;
width: 48px;
height: 48px;
display: inline-block;
box-sizing: border-box;
margin: 3px 0 0 0;
border-radius: 50%;
background-color: transparent;
}
.mdl-checkbox__input:focus + span + .mdl-checkbox__focus-helper {
background-color: rgba(82, 181, 75, 0.26);
}
.mdl-checkbox__tick-outline {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: transparent;
transition-duration: 0.28s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: background;
}
.mdl-checkbox__input:checked + span + span + .checkboxOutline .mdl-checkbox__tick-outline {
background: #52B54B url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
}
.mdl-checkbox__input:checked[disabled] + span + span + .checkboxOutline .mdl-checkbox__tick-outline {
background: rgba(0, 0, 0, 0.26) url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
}
.checkboxLabel {
position: relative;
cursor: pointer;
margin: 0;
}
.mdl-checkbox__input[disabled] + .checkboxLabel {
color: rgba(0, 0, 0, 0.26);
cursor: auto;
}
.checkboxList .mdl-checkbox {
display: flex;
margin: .5em 0;
}
.layout-tv .mdl-checkbox {
height: 4.6vh;
padding-left: 6vh;
}
.layout-tv .checkboxFieldDescription {
padding-left: 6vh;
}
.layout-tv .checkboxOutline {
width: 4.6vh;
height: 4.6vh;
}
.layout-tv .mdl-checkbox__focus-helper {
top: -3.7vh;
left: -3.7vh;
width: 12vh;
height: 12vh;
}

View file

@ -0,0 +1,45 @@
define(['css!./emby-checkbox', 'registerElement'], function () {
var EmbyCheckboxPrototype = Object.create(HTMLInputElement.prototype);
function onKeyDown(e) {
// Don't submit form on enter
if (e.keyCode == 13) {
e.preventDefault();
this.checked = !this.checked;
return false;
}
}
EmbyCheckboxPrototype.attachedCallback = function () {
if (this.getAttribute('data-embycheckbox') == 'true') {
return;
}
this.setAttribute('data-embycheckbox', 'true');
this.classList.add('mdl-checkbox__input');
var labelElement = this.parentNode;
//labelElement.classList.add('mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events');
labelElement.classList.add('mdl-checkbox');
labelElement.classList.add('mdl-js-checkbox');
labelElement.classList.add('mdl-js-ripple-effect');
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>');
labelTextElement.classList.add('checkboxLabel');
this.addEventListener('keydown', onKeyDown);
};
document.registerElement('emby-checkbox', {
prototype: EmbyCheckboxPrototype,
extends: 'input'
});
});

View file

@ -45,7 +45,7 @@
label.innerHTML = this.getAttribute('label') || '';
label.classList.add('inputLabel');
if (!supportsFloatingLabel) {
if (!supportsFloatingLabel || this.type == 'date') {
label.classList.add('nofloat');
}
@ -78,6 +78,10 @@
this.addEventListener('valueset', onChange);
onChange.call(this);
this.label = function (text) {
label.innerHTML = text;
};
};
document.registerElement('emby-input', {

View file

@ -1,4 +1,4 @@
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'emby-input', 'paper-icon-button-light', 'emby-select', 'material-icons', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
var lastPlaylistId = '';
var currentServerId;

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
var currentProgramId;
var currentServerId;

View file

@ -14,25 +14,36 @@
<div id="eligibleForSeriesFields" class="hide">
<br />
<div>
<paper-checkbox id="chkRecordSeries">${RecordSeries}</paper-checkbox>
</div>
<label class="checkboxContainer">
<input type="checkbox" is="emby-checkbox" id="chkRecordSeries"/>
<span>${RecordSeries}</span>
</label>
<div class="seriesFields hide">
<br />
<div class="paperCheckboxList">
<paper-checkbox id="chkNewOnly">${RecordOnlyNewEpisodes}</paper-checkbox>
<paper-checkbox id="chkAnyTime">${RecordAnytime}</paper-checkbox>
<paper-checkbox id="chkAllChannels">${RecordOnAllChannels}</paper-checkbox>
<div class="checkboxList">
<label>
<input type="checkbox" is="emby-checkbox" id="chkNewOnly" />
<span>${RecordOnlyNewEpisodes}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkAnyTime" />
<span>${RecordAnytime}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkAllChannels" />
<span>${RecordOnAllChannels}</span>
</label>
</div>
</div>
<br />
</div>
<div class="convertRecordingsContainer hide">
<br />
<paper-checkbox id="chkConvertRecordings">${OptionConvertRecordingsToStreamingFormat}</paper-checkbox>
<div class="fieldDescription paperCheckboxFieldDescription">${OptionConvertRecordingsToStreamingFormatHelp}</div>
<div class="fieldDescription paperCheckboxFieldDescription btnSupporterForConverting hide">
<div class="convertRecordingsContainer hide checkboxContainer">
<label>
<input type="checkbox" is="emby-checkbox" id="chkConvertRecordings" />
<span>${OptionConvertRecordingsToStreamingFormat}</span>
</label>
<div class="fieldDescription checkboxFieldDescription">${OptionConvertRecordingsToStreamingFormatHelp}</div>
<div class="fieldDescription checkboxFieldDescription btnSupporterForConverting hide">
<a href="#" class="accent lnkPremiere">${FeatureRequiresEmbyPremiere}</a>
</div>
</div>
@ -44,14 +55,35 @@
<div>
<h1>${Days}</h1>
</div>
<div class="paperCheckboxList">
<paper-checkbox id="chkSunday">${Sunday}</paper-checkbox>
<paper-checkbox id="chkMonday">${Monday}</paper-checkbox>
<paper-checkbox id="chkTuesday">${Tuesday}</paper-checkbox>
<paper-checkbox id="chkWednesday">${Wednesday}</paper-checkbox>
<paper-checkbox id="chkThursday">${Thursday}</paper-checkbox>
<paper-checkbox id="chkFriday">${Friday}</paper-checkbox>
<paper-checkbox id="chkSaturday">${Saturday}</paper-checkbox>
<div class="checkboxList">
<label>
<input type="checkbox" is="emby-checkbox" id="chkSunday" />
<span>${Sunday}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkMonday" />
<span>${Monday}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkTuesday" />
<span>${Tuesday}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkWednesday" />
<span>${Wednesday}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkThursday" />
<span>${Thursday}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkFriday" />
<span>${Friday}</span>
</label>
<label>
<input type="checkbox" is="emby-checkbox" id="chkSaturday" />
<span>${Saturday}</span>
</label>
</div>
<br />
</div>

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
var currentDialog;
var recordingUpdated = false;