update buttons

This commit is contained in:
Luke Pulverenti 2016-06-04 20:17:35 -04:00
parent 467ff3657f
commit 3a045a664b
33 changed files with 360 additions and 166 deletions

View File

@ -15,12 +15,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.18",
"_release": "1.4.18",
"version": "1.4.24",
"_release": "1.4.24",
"_resolution": {
"type": "version",
"tag": "1.4.18",
"commit": "39d5a6a55acf536c14945385fbce917516fe23ea"
"tag": "1.4.24",
"commit": "05159909e71faf74eb1d39f3cac661614b0a5d5b"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View File

@ -27,7 +27,7 @@
text-align: center;
}
.actionSheetMenuItem {
button.actionSheetMenuItem {
padding: 0 1.6em;
margin: 0;
text-transform: none;
@ -35,13 +35,14 @@
display: flex;
font-weight: inherit;
align-items: center;
flex-shrink: 0;
}
.actionSheetItemText {
padding: .8em 0;
}
.layout-tv .actionSheetMenuItem {
.layout-tv button.actionSheetMenuItem {
padding-top: .16em;
padding-bottom: .16em;
}
@ -53,6 +54,8 @@
.actionSheetScroller {
/* Override default style being applied by polymer */
margin-bottom: 0 !important;
display: flex;
flex-direction: column;
}
.layout-tv .actionSheetScroller {

View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'layoutManager', 'globalize', 'paper-button', 'css!./actionsheet', 'html!./../icons/nav.html', 'scrollStyles'], function (dialogHelper, layoutManager, globalize) {
define(['dialogHelper', 'layoutManager', 'globalize', 'emby-button', 'css!./actionsheet', 'html!./../icons/nav.html', 'scrollStyles'], function (dialogHelper, layoutManager, globalize) {
function parentWithClass(elem, className) {
@ -151,14 +151,14 @@
dlg.classList.add('centered');
}
var itemTagName = 'paper-button';
var itemTagName = 'button';
for (i = 0, length = options.items.length; i < length; i++) {
option = options.items[i];
var autoFocus = option.selected ? ' autoFocus' : '';
html += '<' + itemTagName + autoFocus + ' class="actionSheetMenuItem" data-id="' + (option.id || option.value) + '">';
html += '<' + itemTagName + autoFocus + ' is="emby-button" type="button" class="actionSheetMenuItem" data-id="' + (option.id || option.value) + '">';
if (option.ironIcon) {
html += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
@ -172,7 +172,7 @@
if (options.showCancel) {
html += '<div class="buttons">';
html += '<paper-button class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
html += '<button is="emby-button" type="button" class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
html += '</div>';
}
html += '</div>';

View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./../prompt/style.css', 'paper-button', 'paper-icon-button-light'], function (dialogHelper, layoutManager, globalize) {
define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./../prompt/style.css', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, layoutManager, globalize) {
function getIcon(icon, cssClass, canFocus, autoFocus) {
@ -72,10 +72,10 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
var buttonText = options.type == 'error' ? 'sharedcomponents#ButtonOk' : 'sharedcomponents#ButtonGotIt';
if (raisedButtons) {
html += '<paper-button raised class="btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate(buttonText) + '</span></paper-button>';
html += '<button is="emby-button" type="button" class="raised btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate(buttonText) + '</span></button>';
} else {
html += '<div class="buttons" style="text-align:right;">';
html += '<paper-button class="btnSubmit">' + globalize.translate(buttonText) + '</paper-button>';
html += '<button is="emby-button" type="button" class="btnSubmit">' + globalize.translate(buttonText) + '</button>';
html += '</div>';
}

View File

@ -101,5 +101,7 @@
browser.tv = isTv();
browser.operaTv = browser.tv && userAgent.toLowerCase().indexOf('opr/') != -1;
browser.noFlex = browser.tv && !browser.chrome && !browser.operaTv;
return browser;
});

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', 'html!./../icons/nav.html', 'css!./../formdialog'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
var currentServerId;
@ -170,7 +170,7 @@
html += '<br />';
html += '<br />';
html += '<div>';
html += '<paper-button raised class="btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
html += '<button is="emby-button" type="submit" class="raised btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
html += '</div>';
html += '<input type="hidden" class="fldSelectedItemIds" />';
@ -201,21 +201,6 @@
}
});
content.querySelector('.btnSubmit').addEventListener('click', function () {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = content.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
});
content.querySelector('form').addEventListener('submit', onSubmit);
content.querySelector('.fldSelectedItemIds', content).value = items.join(',');

View File

@ -74,9 +74,9 @@ define(['layoutManager', 'globalize'], function (layoutManager, globalize) {
html += '<div class="buttons">';
html += '<paper-button class="btnConfirm" autofocus>' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
html += '<button is="emby-button" type="button" class="btnConfirm" autofocus>' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
html += '<paper-button class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
html += '<button is="emby-button" type="button" class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
html += '</div>';
@ -106,7 +106,7 @@ define(['layoutManager', 'globalize'], function (layoutManager, globalize) {
function showConfirm(options) {
return new Promise(function (resolve, reject) {
require(['dialogHelper', 'paper-button'], function (dialogHelper) {
require(['dialogHelper', 'emby-button'], function (dialogHelper) {
showConfirmInternal(options, dialogHelper, resolve, reject);
});
});

View File

@ -0,0 +1,73 @@
[is="emby-button"] {
position: relative;
display: inline-flex;
align-items: center;
box-sizing: border-box;
margin: 0 .29em;
background: transparent;
text-align: center;
font: inherit;
color: inherit;
outline-width: 0;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: pointer;
z-index: 0;
padding: 0.7em 0.57em;
font-weight: normal;
vertical-align: middle;
border: 0;
vertical-align: middle;
border-radius: 3px;
/* These are getting an outline in opera tv browsers, which run chrome 30 */
outline: none !important;
position: relative;
overflow: hidden;
}
[is="emby-button"].raised {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
[is="emby-button"].block {
display: flex;
align-items: center;
justify-content: center;
margin: .25em .29em;
width: 100%;
}
[is="emby-button"].raised:focus {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
[is="emby-button"] iron-icon + span {
margin-left: .5em;
}
.ripple-effect {
position: absolute;
border-radius: 50%;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
background: white;
animation: ripple-animation 2s;
opacity: 0.4;
}
@keyframes ripple-animation {
from {
transform: none;
opacity: 0.4;
}
to {
transform: scale(100);
opacity: 0;
}
}

View File

@ -0,0 +1,50 @@
define(['css!./emby-button'], function (layoutManager, browser) {
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
function animateButton(e) {
var div = document.createElement('div');
div.classList.add('ripple-effect');
var offsetX = e.offsetX || 0;
var offsetY = e.offsetY || 0;
if (offsetX > 0 && offsetY > 0) {
div.style.left = offsetX + 'px';
div.style.top = offsetY + 'px';
}
this.appendChild(div);
setTimeout(function () {
div.parentNode.removeChild(div);
}, 2000);
}
function onKeyDown(e) {
if (e.keyCode == 13) {
animateButton.call(this, e);
}
}
EmbyButtonPrototype.attachedCallback = function () {
if (this.getAttribute('data-embybutton') == 'true') {
return;
}
this.setAttribute('data-embybutton', 'true');
this.addEventListener('keydown', onKeyDown);
this.addEventListener('mousedown', animateButton);
//this.addEventListener('click', animateButton);
};
document.registerElement('emby-button', {
prototype: EmbyButtonPrototype,
extends: 'button'
});
});

View File

@ -4,6 +4,22 @@
var inputId = 0;
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
var baseSetMethod = descriptor.set;
descriptor.set = function (value) {
baseSetMethod.call(this, value);
this.dispatchEvent(new CustomEvent('valueset', {
bubbles: false,
cancelable: false
}));
}
Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);
}
EmbyInputPrototype.createdCallback = function () {
if (!this.id) {
@ -45,11 +61,13 @@
label.classList.add('focused');
});
this.addEventListener('blur', function () {
onChange.call(this);
label.classList.remove('focused');
});
this.addEventListener('change', onChange);
this.addEventListener('input', onChange);
this.addEventListener('valueset', onChange);
onChange.call(this);
};

View File

@ -21,7 +21,7 @@ define([], function () {
function focus(element) {
var tagName = element.tagName;
if (tagName == 'PAPER-INPUT' || tagName == 'EMBY-DROPDOWN-MENU') {
if (tagName == 'PAPER-INPUT') {
element = element.querySelector('input') || element;
}
@ -32,7 +32,7 @@ define([], function () {
}
}
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-CHECKBOX', 'EMBY-DROPDOWN-MENU'];
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-CHECKBOX'];
var focusableContainerTagNames = ['BODY', 'DIALOG'];
var focusableQuery = focusableTagNames.join(',') + ',.focusable';

View File

@ -1,4 +1,4 @@
define(['require', 'browser', 'globalize', 'connectionManager', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'scrollStyles'], function (require, browser, globalize, connectionManager, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
define(['require', 'browser', 'globalize', 'connectionManager', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'scrollStyles', 'emby-button'], function (require, browser, globalize, connectionManager, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
function Guide(options) {

View File

@ -18,5 +18,5 @@
<div class="guideRequiresUnlock readOnlyContent hide" style="margin:1em auto;text-align:center;padding:1em;flex-shrink:0;">
<p class="unlockText"></p>
<paper-button raised class="secondary block btnUnlockGuide"><iron-icon icon="nav:check"></iron-icon><span>${ButtonUnlockGuide}</span></paper-button>
<button is="emby-button" type="button" class="raised secondary block btnUnlockGuide"><iron-icon icon="nav:check"></iron-icon><span>${UnlockGuide}</span></button>
</div>

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', 'html!./../icons/nav.html', 'css!./../formdialog'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
var lastPlaylistId = '';
var currentServerId;
@ -158,7 +158,7 @@
html += '<br />';
html += '<div>';
html += '<paper-button raised class="btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
html += '<button is="emby-button" type="submit" class="raised btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
html += '</div>';
html += '<input type="hidden" class="fldSelectedItemIds" />';
@ -182,23 +182,6 @@
}
});
populatePlaylists(content);
content.querySelector('.btnSubmit').addEventListener('click', function () {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = content.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
});
content.querySelector('form').addEventListener('submit', onSubmit);
content.querySelector('.fldSelectedItemIds', content).value = items.join(',');

View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./style.css', 'paper-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./style.css', 'emby-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
function getIcon(icon, cssClass, canFocus, autoFocus) {
@ -66,11 +66,11 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
html += '<br/>';
if (raisedButtons) {
html += '<paper-button raised class="btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></paper-button>';
html += '<button is="emby-button" type="submit" class="raised btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></button>';
} else {
html += '<div class="buttons">';
html += '<paper-button class="btnSubmit">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
html += '<paper-button class="btnPromptExit">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
html += '<button is="emby-button" type="submit" class="btnSubmit">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
html += '<button is="emby-button" type="button" class="btnPromptExit">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
html += '</div>';
}
html += '</form>';
@ -95,18 +95,6 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
return false;
});
dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = dlg.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
form.removeChild(fakeSubmit);
});
dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {
dialogHelper.close(dlg);

View File

@ -22,7 +22,10 @@
}
.promptDialog.fullscreen .btnSubmit {
display: block;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.promptDialog.fullscreen .btnPromptExit {

View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'paper-checkbox', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
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', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
var currentProgramId;
var currentServerId;
@ -208,21 +208,10 @@
});
}
function onPremiereLinkClicked(e) {
require(['shell'], function (shell) {
shell.openUrl('https://emby.media/premiere');
});
e.preventDefault();
return false;
}
function init(context) {
var apiClient = connectionManager.getApiClient(currentServerId);
context.querySelector('.lnkPremiere').addEventListener('click', onPremiereLinkClicked);
context.querySelector('#chkRecordSeries').addEventListener('change', function () {
if (this.checked) {
@ -232,22 +221,6 @@
}
});
context.querySelector('.btnSubmit').addEventListener('click', function () {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = context.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
});
context.querySelector('.btnCancel').addEventListener('click', function () {
closeDialog(false);
@ -269,12 +242,6 @@
}
}
if (appHost.supports('externalpremium')) {
context.querySelector('.btnSupporterForConverting a').href = 'https://emby.media/premiere';
} else {
context.querySelector('.btnSupporterForConverting a').href = '#';
}
apiClient.getNamedConfiguration("livetv").then(function (config) {
context.querySelector('#chkConvertRecordings').checked = config.EnableRecordingEncoding;
@ -348,6 +315,15 @@
});
}
function onSupporterButtonClick() {
if (appHost.supports('externalpremium')) {
require(['shell'], function (shell) {
shell.openUrl('https://emby.media/premiere');
});
} else {
}
}
function reload(context, programId) {
loading.show();
@ -418,6 +394,8 @@
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
}
dlg.querySelector('.btnSupporterForConverting').addEventListener('click', onSupporterButtonClick);
hideSeriesRecordingFields(dlg);
init(dlg);

View File

@ -55,7 +55,7 @@
</div>
<br />
</div>
<br/>
<br />
<div class="inputContainer">
<input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}" />
</div>
@ -71,9 +71,9 @@
<div class="supporterContainer hide">
<p>${MessageActiveSubscriptionRequiredSeriesRecordings}</p>
<p class="supporterTrial hide">${HeaderEnjoyDayTrial}</p>
<a class="clearLink btnSupporter hide" href="http://emby.media/premiere" target="_blank"><paper-button raised class="accent block"><iron-icon icon="nav:check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></paper-button></a>
<button is="emby-button" type="button" raised class="btnSupporter hide raised accent block"><iron-icon icon="nav:check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></button>
</div>
<paper-button raised class="btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Record}</span></paper-button>
<button is="emby-button" type="submit" class="raised btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Record}</span></button>
</div>
</form>
</div>

View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
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', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
var currentDialog;
var recordingUpdated = false;
@ -81,22 +81,6 @@
context.querySelector('.btnSubmit').click();
});
context.querySelector('.btnSubmit').addEventListener('click', function () {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = context.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
});
}
function reload(context, id) {

View File

@ -4,10 +4,10 @@
${Edit}
</div>
<div style="margin-left:auto; display: flex; align-items: center; justify-content: center;">
<paper-button class="btnHeaderSave accent" tabindex="-1">
<button is="emby-button" type="button" class="btnHeaderSave accent" tabindex="-1">
<iron-icon icon="check"></iron-icon>
<span>${Save}</span>
</paper-button>
</button>
</div>
</div>
@ -33,7 +33,7 @@
<input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
</div>
<br />
<paper-button raised class="btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Save}</span></paper-button>
<button is="emby-button" type="submit" class="raised btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Save}</span></button>
</form>
</div>
</div>

View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'layoutManager', 'globalize', './social-share-kit-1.0.4/dist/js/social-share-kit.min', 'css!./social-share-kit-1.0.4/dist/css/social-share-kit.css'], function (dialogHelper, layoutManager, globalize) {
define(['dialogHelper', 'layoutManager', 'globalize', './social-share-kit-1.0.4/dist/js/social-share-kit.min', 'css!./social-share-kit-1.0.4/dist/css/social-share-kit.css', 'emby-button'], function (dialogHelper, layoutManager, globalize) {
function showMenu(options) {
@ -22,7 +22,7 @@
html += '</div>';
html += '<div class="buttons">';
html += '<paper-button class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
html += '<button is="emby-button" type="button" class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
html += '</div>';
dlg.innerHTML = html;

View File

@ -79,5 +79,6 @@
"ConfirmDeletion": "Confirm Deletion",
"MySubtitles": "My Subtitles",
"MessageDownloadQueued": "Download queued.",
"EditSubtitles": "Edit Subtitles"
"EditSubtitles": "Edit Subtitles",
"UnlockGuide": "Unlock Guide"
}

View File

@ -1,4 +1,4 @@
define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'css!./subtitleeditor'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'css!./subtitleeditor', 'emby-button'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
var currentItem;
var hasChanges;
@ -400,22 +400,6 @@
});
}
function onSubmitButtonClick(e) {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = parentWithClass(this, 'subtitleSearchForm');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
}
function showEditorInternal(itemId, serverId, template) {
hasChanges = false;
@ -469,8 +453,6 @@
dialogHelper.close(dlg);
});
btnSubmit.addEventListener('click', onSubmitButtonClick);
return new Promise(function (resolve, reject) {
dlg.addEventListener('close', function () {

View File

@ -17,7 +17,7 @@
</div>
<button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles" style="flex-shrink: 0;"><iron-icon icon="search"></iron-icon></button>
</div>
<paper-button raised class="btnSubmit block">${Search}</paper-button>
<button is="emby-button" type="submit" class="raised btnSubmit block">${Search}</button>
</form>
<br />
<div class="subtitleResults"></div>

View File

@ -39,6 +39,6 @@
"commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.1.0",
"_target": "^1.0.0",
"_originalSource": "Polymer/polymer"
}

View File

@ -1,4 +1,4 @@
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections">
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections">
<div class="libraryViewNav">
<button class="pageTabButton is-active" data-index="0">${TabLatest}</button>

View File

@ -67,6 +67,11 @@ body {
overflow-y: auto !important;
}
.mainAnimatedPage {
/* Have to override because it breaks scrolling when dependant on window scroll */
contain: style !important;
}
iron-icon {
min-width: 24px;
min-height: 24px;
@ -748,6 +753,6 @@ emby-collapsible > .style-scope {
padding: 1em 1.25em;
}
#editItemMetadataPage #txtOverview .paper-input-input {
max-height: 90px;
#editItemMetadataPage #txtOverview .paper-input-input {
max-height: 90px;
}

View File

@ -1,4 +1,4 @@
<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage" data-title="${ButtonHome}" data-backdroptype="movie,series,game,book">
<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs" data-title="${ButtonHome}" data-backdroptype="movie,series,game,book">
<div class="libraryViewNav">
<button class="pageTabButton is-active" data-index="0">${TabHome}</button>

View File

@ -1,4 +1,4 @@
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage" data-backdroptype="movie">
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs" data-backdroptype="movie">
<div class="libraryViewNav">
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>

View File

@ -1,4 +1,4 @@
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage" data-backdroptype="musicartist">
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist">
<div class="libraryViewNav">
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>

View File

@ -1479,6 +1479,7 @@ var AppInfo = {};
}
AppInfo.supportsExternalPlayers = true;
AppInfo.enableAppLayouts = true;
if (isCordova) {
AppInfo.enableAppLayouts = true;
@ -1775,6 +1776,7 @@ var AppInfo = {};
define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency);
define("emby-input", [embyWebComponentsBowerPath + "/emby-input/emby-input"], returnFirstDependency);
define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
define("collectionEditor", [embyWebComponentsBowerPath + "/collectioneditor/collectioneditor"], returnFirstDependency);

View File

@ -129,6 +129,114 @@ paper-button.iconRight iron-icon {
top: 5px;
}
button[is="emby-button"].blue {
color: #03a9f4;
}
button[is="emby-button"].blue:hover {
background: #e1f5f3;
}
button[is="emby-button"].menuButton {
color: #212121;
text-align: left;
}
button[is="emby-button"].menuButton:hover {
background: #e1f5f3;
}
button[is="emby-button"].submit {
color: #52B54B;
}
button[is="emby-button"].raised.submit, button[is="emby-button"].raised:not(.subdued):not(.cancel) {
background: #52B54B;
color: #fff;
}
button[is="emby-button"].more {
color: #EC407A;
}
button[is="emby-button"].raised.more {
background: #EC407A;
color: #fff;
}
button[is="emby-button"].secondary {
color: #4285f4;
}
button[is="emby-button"].raised.secondary {
background: #4285f4;
color: #fff;
}
button[is="emby-button"].accent {
color: #52B54B;
}
button[is="emby-button"].raised.accent {
background: #52B54B;
color: #fff;
}
button[is="emby-button"].alt {
color: #F57F17;
}
button[is="emby-button"].raised.alt {
background: #F57F17;
color: #fff;
}
.ui-body-b button[is="emby-button"].cancel {
color: #444;
}
.ui-body-b button[is="emby-button"].raised.cancel {
background: #444;
color: #fff;
}
button[is="emby-button"].cancelDark {
color: #444;
}
button[is="emby-button"].raised.cancelDark {
background: #444;
color: #fff;
}
.ui-body-b button[is="emby-button"].subdued:not([disabled]) {
color: #404040;
}
.ui-body-b button[is="emby-button"].raised.subdued:not([disabled]) {
background: #404040;
color: #fff;
}
.ui-body-b button[is="emby-button"].raised[disabled].subduedd {
background: #111;
}
button[is="emby-button"] span {
vertical-align: middle;
}
button[is="emby-button"]:not(.iconRight) > iron-icon {
margin-right: .5em;
}
button[is="emby-button"].iconRight iron-icon {
position: absolute;
right: 5px;
top: 5px;
}
.clearButton {
background: transparent;
border: 0;
@ -149,6 +257,23 @@ paper-button.iconRight iron-icon {
color: inherit !important;
}
button[is="emby-button"].mini {
min-width: initial;
}
button[is="emby-button"].mini {
padding: 0.4em 0.7em;
}
button[is="emby-button"].mini.noIcon {
padding: 0.4em 0.7em;
}
button[is="emby-button"].mini iron-icon {
height: 20px;
width: 20px;
}
paper-button.mini {
min-width: initial;
}
@ -166,7 +291,6 @@ paper-button.mini {
width: 20px;
}
paper-toast {
z-index: 9999999;
}
@ -184,6 +308,19 @@ paper-button.notext {
margin-right: 0;
}
button[is="emby-button"].notext {
min-width: 2.8em;
}
button[is="emby-button"].notext .content {
padding-left: 0 !important;
padding-right: 0 !important;
}
button[is="emby-button"].notext iron-icon {
margin-right: 0;
}
paper-icon-button paper-ripple {
color: inherit !important;
}
@ -404,9 +541,9 @@ paper-input label, paper-textarea label {
color: #656565;
}
.ui-body-a .inputLabel.focused:not(.blank) {
color: green;
}
.ui-body-a .inputLabel.focused:not(.blank) {
color: green;
}
.ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabel {
color: #ccc;
@ -498,7 +635,7 @@ div.dialogHeader {
margin-top: .7em;
}
.dialogHeader paper-button {
.dialogHeader paper-button, .dialogHeader button {
margin-top: 0;
margin-bottom: 0;
}

View File

@ -1,4 +1,4 @@
<div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series">
<div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series">
<div class="libraryViewNav">
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>