mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
switch to shared paperdialoghelper
This commit is contained in:
parent
1cd7f5bac7
commit
024642e556
24 changed files with 152 additions and 296 deletions
|
@ -15,12 +15,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.0.32",
|
"version": "1.0.35",
|
||||||
"_release": "1.0.32",
|
"_release": "1.0.35",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.0.32",
|
"tag": "1.0.35",
|
||||||
"commit": "4f59bdceba30ab8a9e1bf4c7d6bacd659d27b9bb"
|
"commit": "3fbcae2c9495ad83a36aa1bcf34f985f979923e7"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "~1.0.0",
|
"_target": "~1.0.0",
|
||||||
|
|
|
@ -1,17 +1,19 @@
|
||||||
.paperDialog {
|
.paperDialog {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
position: fixed;
|
|
||||||
max-width: none !important;
|
|
||||||
max-height: none !important;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.paperDialog.fixedSize {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 0 !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
right: 0 !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
max-height: none !important;
|
||||||
|
max-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.paperDialog.scrollY {
|
.paperDialog.scrollY {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
@ -25,4 +27,36 @@
|
||||||
.paperDialog.hiddenScroll {
|
.paperDialog.hiddenScroll {
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none;
|
||||||
overflow: -moz-scrollbars-none;
|
overflow: -moz-scrollbars-none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 1280px) and (min-height: 720px) {
|
||||||
|
|
||||||
|
.paperDialog.medium {
|
||||||
|
top: 10% !important;
|
||||||
|
bottom: 10% !important;
|
||||||
|
left: 10% !important;
|
||||||
|
right: 10% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paperDialog.small {
|
||||||
|
top: 10% !important;
|
||||||
|
bottom: 10% !important;
|
||||||
|
left: 20% !important;
|
||||||
|
right: 20% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 1280px) and (min-height: 720px) {
|
||||||
|
|
||||||
|
.paperDialog.fullscreen-border {
|
||||||
|
top: 5% !important;
|
||||||
|
bottom: 5% !important;
|
||||||
|
left: 5% !important;
|
||||||
|
right: 5% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.noScroll {
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
}
|
|
@ -5,6 +5,7 @@
|
||||||
var self = this;
|
var self = this;
|
||||||
self.originalUrl = window.location.href;
|
self.originalUrl = window.location.href;
|
||||||
var activeElement = document.activeElement;
|
var activeElement = document.activeElement;
|
||||||
|
var removeScrollLockOnClose = false;
|
||||||
|
|
||||||
function onHashChange(e) {
|
function onHashChange(e) {
|
||||||
|
|
||||||
|
@ -22,9 +23,8 @@
|
||||||
|
|
||||||
function onDialogClosed() {
|
function onDialogClosed() {
|
||||||
|
|
||||||
if (lockDocumentScroll !== false) {
|
if (removeScrollLockOnClose) {
|
||||||
// TODO
|
document.body.classList.remove('noScroll');
|
||||||
//Dashboard.onPopupClose();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.removeEventListener('popstate', onHashChange);
|
window.removeEventListener('popstate', onHashChange);
|
||||||
|
@ -55,9 +55,9 @@
|
||||||
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
|
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
|
||||||
dlg.open();
|
dlg.open();
|
||||||
|
|
||||||
if (lockDocumentScroll !== false) {
|
if (lockDocumentScroll !== false && !document.body.classList.contains('noScroll')) {
|
||||||
// TODO
|
document.body.classList.add('noScroll');
|
||||||
//Dashboard.onPopupOpen();
|
removeScrollLockOnClose = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
historyManager.pushState({ dialogId: hash }, "Dialog", hash);
|
historyManager.pushState({ dialogId: hash }, "Dialog", hash);
|
||||||
|
@ -135,7 +135,14 @@
|
||||||
dlg.setAttribute('data-removeonclose', 'true');
|
dlg.setAttribute('data-removeonclose', 'true');
|
||||||
}
|
}
|
||||||
|
|
||||||
dlg.addEventListener('iron-overlay-opened', onDialogOpened);
|
if (options.size) {
|
||||||
|
dlg.classList.add('fixedSize');
|
||||||
|
dlg.classList.add(options.size);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options.autoFocus !== false) {
|
||||||
|
dlg.addEventListener('iron-overlay-opened', onDialogOpened);
|
||||||
|
}
|
||||||
|
|
||||||
return dlg;
|
return dlg;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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.12",
|
"_release": "1.0.12",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.12",
|
"tag": "v1.0.12",
|
||||||
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
|
"commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
|
||||||
},
|
},
|
||||||
"_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"
|
||||||
}
|
}
|
|
@ -193,11 +193,14 @@
|
||||||
size: 'small'
|
size: 'small'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection');
|
var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection');
|
||||||
|
|
||||||
html += '<div class="dialogHeader">';
|
html += '<div class="dialogHeader">';
|
||||||
html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
|
html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
|
||||||
html += '<div class="dialogHeaderTitle">';
|
html += '<div class="dialogHeaderTitle">';
|
||||||
html += title;
|
html += title;
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
@ -208,10 +208,13 @@
|
||||||
getSystemInfo().then(function (systemInfo) {
|
getSystemInfo().then(function (systemInfo) {
|
||||||
|
|
||||||
var dlg = paperDialogHelper.createDialog({
|
var dlg = paperDialogHelper.createDialog({
|
||||||
theme: 'a',
|
|
||||||
size: 'medium'
|
size: 'medium'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-a');
|
||||||
|
dlg.classList.add('background-theme-a');
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
dlg.classList.add('directoryPicker');
|
dlg.classList.add('directoryPicker');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
|
@ -271,11 +271,19 @@
|
||||||
currentItemId = itemId;
|
currentItemId = itemId;
|
||||||
currentItemType = itemType;
|
currentItemType = itemType;
|
||||||
|
|
||||||
var dlg = paperDialogHelper.createDialog();
|
var dlg = paperDialogHelper.createDialog({
|
||||||
|
size: 'fullscreen-border'
|
||||||
|
});
|
||||||
|
|
||||||
|
var theme = 'b';
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-' + theme);
|
||||||
|
dlg.classList.add('background-theme-' + theme);
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
|
||||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
|
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderSearch') + '</div>';
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
|
|
||||||
|
|
|
@ -242,12 +242,18 @@
|
||||||
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {
|
ApiClient.getItem(Dashboard.getCurrentUserId(), itemId).then(function (item) {
|
||||||
|
|
||||||
var dlg = paperDialogHelper.createDialog({
|
var dlg = paperDialogHelper.createDialog({
|
||||||
theme: options.theme
|
size: 'fullscreen-border'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var theme = options.theme || 'b';
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-' + theme);
|
||||||
|
dlg.classList.add('background-theme-' + theme);
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
|
||||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
|
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + item.Name + '</div>';
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
|
|
||||||
|
|
|
@ -134,12 +134,18 @@
|
||||||
currentItemId = itemId;
|
currentItemId = itemId;
|
||||||
|
|
||||||
var dlg = paperDialogHelper.createDialog({
|
var dlg = paperDialogHelper.createDialog({
|
||||||
theme: options.theme
|
size: 'fullscreen-border'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var theme = options.theme || 'b';
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-' + theme);
|
||||||
|
dlg.classList.add('background-theme-' + theme);
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
|
||||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderUploadImage') + '</div>';
|
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderUploadImage') + '</div>';
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
|
|
||||||
|
|
|
@ -295,6 +295,9 @@
|
||||||
size: 'medium'
|
size: 'medium'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += Globalize.translateDocument(template);
|
html += Globalize.translateDocument(template);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="dialogHeader">
|
<div class="dialogHeader">
|
||||||
<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
|
<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
|
||||||
<div class="dialogHeaderTitle">
|
<div class="dialogHeaderTitle">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -194,15 +194,18 @@
|
||||||
var template = this.response;
|
var template = this.response;
|
||||||
var dlg = paperDialogHelper.createDialog({
|
var dlg = paperDialogHelper.createDialog({
|
||||||
size: 'small',
|
size: 'small',
|
||||||
theme: 'a',
|
|
||||||
|
|
||||||
// In (at least) chrome this is causing the text field to not be editable
|
// In (at least) chrome this is causing the text field to not be editable
|
||||||
modal: false
|
modal: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-a');
|
||||||
|
dlg.classList.add('background-theme-a');
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
|
||||||
|
|
||||||
var title = Globalize.translate('ButtonAddMediaLibrary');
|
var title = Globalize.translate('ButtonAddMediaLibrary');
|
||||||
|
|
||||||
|
|
|
@ -148,15 +148,18 @@
|
||||||
var template = this.response;
|
var template = this.response;
|
||||||
var dlg = paperDialogHelper.createDialog({
|
var dlg = paperDialogHelper.createDialog({
|
||||||
size: 'small',
|
size: 'small',
|
||||||
theme: 'a',
|
|
||||||
|
|
||||||
// In (at least) chrome this is causing the text field to not be editable
|
// In (at least) chrome this is causing the text field to not be editable
|
||||||
modal: false
|
modal: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-a');
|
||||||
|
dlg.classList.add('background-theme-a');
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog" tabindex="-1"></paper-fab>';
|
||||||
|
|
||||||
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + options.library.Name + '</div>';
|
html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + options.library.Name + '</div>';
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
|
|
|
@ -868,6 +868,9 @@
|
||||||
size: 'small'
|
size: 'small'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
|
||||||
dlg.classList.add('formDialog');
|
dlg.classList.add('formDialog');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
|
@ -1,207 +0,0 @@
|
||||||
define(['paper-dialog', 'scale-up-animation', 'fade-out-animation', 'fade-in-animation'], function () {
|
|
||||||
|
|
||||||
function paperDialogHashHandler(dlg, hash, resolve, lockDocumentScroll) {
|
|
||||||
|
|
||||||
var self = this;
|
|
||||||
self.originalUrl = window.location.href;
|
|
||||||
var activeElement = document.activeElement;
|
|
||||||
|
|
||||||
function onHashChange(e) {
|
|
||||||
|
|
||||||
var isBack = self.originalUrl == window.location.href;
|
|
||||||
|
|
||||||
if (isBack || !dlg.opened) {
|
|
||||||
window.removeEventListener('popstate', onHashChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (isBack) {
|
|
||||||
self.closedByBack = true;
|
|
||||||
dlg.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDialogClosed() {
|
|
||||||
|
|
||||||
if (lockDocumentScroll !== false) {
|
|
||||||
Dashboard.onPopupClose();
|
|
||||||
}
|
|
||||||
|
|
||||||
window.removeEventListener('popstate', onHashChange);
|
|
||||||
|
|
||||||
if (!self.closedByBack) {
|
|
||||||
var state = history.state || {};
|
|
||||||
if (state.dialogId == hash) {
|
|
||||||
history.back();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
activeElement.focus();
|
|
||||||
|
|
||||||
if (dlg.getAttribute('data-removeonclose') == 'true') {
|
|
||||||
dlg.parentNode.removeChild(dlg);
|
|
||||||
}
|
|
||||||
|
|
||||||
//resolve();
|
|
||||||
// if we just called history.back(), then use a timeout to allow the history events to fire first
|
|
||||||
setTimeout(function () {
|
|
||||||
resolve({
|
|
||||||
element: dlg,
|
|
||||||
closedByBack: self.closedByBack
|
|
||||||
});
|
|
||||||
}, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
dlg.addEventListener('iron-overlay-closed', onDialogClosed);
|
|
||||||
dlg.open();
|
|
||||||
|
|
||||||
if (lockDocumentScroll !== false) {
|
|
||||||
Dashboard.onPopupOpen();
|
|
||||||
}
|
|
||||||
|
|
||||||
var state = {
|
|
||||||
dialogId: hash,
|
|
||||||
navigate: false
|
|
||||||
};
|
|
||||||
history.pushState(state, "Dialog", hash);
|
|
||||||
|
|
||||||
jQuery.onStatePushed(state);
|
|
||||||
|
|
||||||
window.addEventListener('popstate', onHashChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
function open(dlg) {
|
|
||||||
|
|
||||||
return new Promise(function (resolve, reject) {
|
|
||||||
|
|
||||||
new paperDialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function close(dlg) {
|
|
||||||
|
|
||||||
if (dlg.opened) {
|
|
||||||
history.back();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDialogOpened(e) {
|
|
||||||
|
|
||||||
//Emby.FocusManager.autoFocus(e.target, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function createDialog(options) {
|
|
||||||
|
|
||||||
options = options || {};
|
|
||||||
|
|
||||||
var dlg = document.createElement('paper-dialog');
|
|
||||||
|
|
||||||
dlg.setAttribute('with-backdrop', 'with-backdrop');
|
|
||||||
dlg.setAttribute('role', 'alertdialog');
|
|
||||||
|
|
||||||
// without this safari will scroll the background instead of the dialog contents
|
|
||||||
// but not needed here since this is already on top of an existing dialog
|
|
||||||
// but skip it in IE because it's causing the entire browser to hang
|
|
||||||
// Also have to disable for firefox because it's causing select elements to not be clickable
|
|
||||||
if (!browserInfo.msie && !browserInfo.firefox) {
|
|
||||||
if (options.modal !== false) {
|
|
||||||
//dlg.setAttribute('modal', 'modal');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// seeing max call stack size exceeded in the debugger with this
|
|
||||||
dlg.setAttribute('noAutoFocus', 'noAutoFocus');
|
|
||||||
|
|
||||||
// These don't seem to perform well on mobile
|
|
||||||
var defaultEntryAnimation = browserInfo.mobile ? 'fade-in-animation' : 'scale-up-animation';
|
|
||||||
dlg.entryAnimation = options.entryAnimation || defaultEntryAnimation;
|
|
||||||
dlg.exitAnimation = 'fade-out-animation';
|
|
||||||
|
|
||||||
dlg.animationConfig = {
|
|
||||||
// scale up
|
|
||||||
'entry': {
|
|
||||||
name: options.entryAnimation || defaultEntryAnimation,
|
|
||||||
node: dlg,
|
|
||||||
timing: { duration: options.entryAnimationDuration || 300, easing: 'ease-out' }
|
|
||||||
},
|
|
||||||
// fade out
|
|
||||||
'exit': {
|
|
||||||
name: 'fade-out-animation',
|
|
||||||
node: dlg,
|
|
||||||
timing: { duration: options.exitAnimationDuration || 400, easing: 'ease-in' }
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (options.size != 'auto') {
|
|
||||||
dlg.classList.add('popupEditor');
|
|
||||||
|
|
||||||
if (options.size == 'small') {
|
|
||||||
dlg.classList.add('small-paper-dialog');
|
|
||||||
}
|
|
||||||
else if (options.size == 'medium') {
|
|
||||||
dlg.classList.add('medium-paper-dialog');
|
|
||||||
} else {
|
|
||||||
dlg.classList.add('fullscreen-paper-dialog');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var theme = options.theme || 'b';
|
|
||||||
|
|
||||||
dlg.classList.add('ui-body-' + theme);
|
|
||||||
dlg.classList.add('background-theme-' + theme);
|
|
||||||
dlg.classList.add('smoothScrollY');
|
|
||||||
|
|
||||||
if (options.removeOnClose) {
|
|
||||||
dlg.setAttribute('data-removeonclose', 'true');
|
|
||||||
}
|
|
||||||
|
|
||||||
return dlg;
|
|
||||||
}
|
|
||||||
|
|
||||||
function positionTo(dlg, elem) {
|
|
||||||
|
|
||||||
var windowHeight = $(window).height();
|
|
||||||
|
|
||||||
// If the window height is under a certain amount, don't bother trying to position
|
|
||||||
// based on an element.
|
|
||||||
if (windowHeight >= 540) {
|
|
||||||
|
|
||||||
var pos = $(elem).offset();
|
|
||||||
|
|
||||||
pos.top += elem.offsetHeight / 2;
|
|
||||||
pos.left += elem.offsetWidth / 2;
|
|
||||||
|
|
||||||
// Account for margins
|
|
||||||
pos.top -= 24;
|
|
||||||
pos.left -= 24;
|
|
||||||
|
|
||||||
// Account for popup size - we can't predict this yet so just estimate
|
|
||||||
pos.top -= $(dlg).height() / 2;
|
|
||||||
pos.left -= $(dlg).width() / 2;
|
|
||||||
|
|
||||||
// Account for scroll position
|
|
||||||
pos.top -= $(window).scrollTop();
|
|
||||||
pos.left -= $(window).scrollLeft();
|
|
||||||
|
|
||||||
// Avoid showing too close to the bottom
|
|
||||||
pos.top = Math.min(pos.top, windowHeight - 300);
|
|
||||||
pos.left = Math.min(pos.left, $(window).width() - 300);
|
|
||||||
|
|
||||||
// Do some boundary checking
|
|
||||||
pos.top = Math.max(pos.top, 0);
|
|
||||||
pos.left = Math.max(pos.left, 0);
|
|
||||||
|
|
||||||
dlg.style.position = 'fixed';
|
|
||||||
dlg.style.left = pos.left + 'px';
|
|
||||||
dlg.style.top = pos.top + 'px';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.PaperDialogHelper = {
|
|
||||||
open: open,
|
|
||||||
close: close,
|
|
||||||
createDialog: createDialog,
|
|
||||||
positionTo: positionTo
|
|
||||||
};
|
|
||||||
|
|
||||||
return PaperDialogHelper;
|
|
||||||
});
|
|
|
@ -198,12 +198,15 @@
|
||||||
size: 'small'
|
size: 'small'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
var title = Globalize.translate('HeaderAddToPlaylist');
|
var title = Globalize.translate('HeaderAddToPlaylist');
|
||||||
|
|
||||||
html += '<div class="dialogHeader">';
|
html += '<div class="dialogHeader">';
|
||||||
html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
|
html += '<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>';
|
||||||
html += '<div class="dialogHeaderTitle">';
|
html += '<div class="dialogHeaderTitle">';
|
||||||
html += title;
|
html += title;
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
@ -296,6 +296,9 @@
|
||||||
size: 'small'
|
size: 'small'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
|
||||||
dlg.classList.add('formDialog');
|
dlg.classList.add('formDialog');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="dialogHeader">
|
<div class="dialogHeader">
|
||||||
<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
|
<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
|
||||||
<div class="dialogHeaderTitle">
|
<div class="dialogHeaderTitle">
|
||||||
${HeaderNewRecording}
|
${HeaderNewRecording}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -344,9 +344,12 @@
|
||||||
removeOnClose: true
|
removeOnClose: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<div class="dialogHeader">';
|
html += '<div class="dialogHeader">';
|
||||||
html += '<paper-icon-button icon="arrow-back" class="btnCancel"></paper-icon-button>';
|
html += '<paper-icon-button icon="arrow-back" class="btnCancel" tabindex="-1"></paper-icon-button>';
|
||||||
html += '<div class="dialogHeaderTitle">';
|
html += '<div class="dialogHeaderTitle">';
|
||||||
html += item.Name;
|
html += item.Name;
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
@ -2881,11 +2881,12 @@
|
||||||
|
|
||||||
var dlg = paperDialogHelper.createDialog({
|
var dlg = paperDialogHelper.createDialog({
|
||||||
removeOnClose: true,
|
removeOnClose: true,
|
||||||
theme: 'a',
|
|
||||||
size: 'auto',
|
|
||||||
modal: false
|
modal: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-a');
|
||||||
|
dlg.classList.add('background-theme-a');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
// There seems to be a bug with this in safari causing it to immediately roll up to 0 height
|
// There seems to be a bug with this in safari causing it to immediately roll up to 0 height
|
||||||
|
|
|
@ -99,14 +99,20 @@
|
||||||
|
|
||||||
require(['paperdialoghelper', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper) {
|
require(['paperdialoghelper', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function (paperDialogHelper) {
|
||||||
|
|
||||||
var dlg = paperDialogHelper.createDialog({});
|
var dlg = paperDialogHelper.createDialog({
|
||||||
|
size: 'fullscreen-border'
|
||||||
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCancelSupporterInfo"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCancelSupporterInfo" tabindex="-1"></paper-fab>';
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
|
|
||||||
html += '<div class="readOnlyContent" style="margin:20px auto 0;color:#fff;padding:1em;">';
|
html += '<div class="readOnlyContent" style="margin:0 auto 0;color:#fff;padding:1em;">';
|
||||||
|
|
||||||
html += '<h1>' + Globalize.translate('HeaderTryEmbyPremiere') + '</h1>';
|
html += '<h1>' + Globalize.translate('HeaderTryEmbyPremiere') + '</h1>';
|
||||||
|
|
||||||
|
@ -123,7 +129,7 @@
|
||||||
|
|
||||||
html += '<br/>';
|
html += '<br/>';
|
||||||
|
|
||||||
html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></paper-button></a>';
|
html += '<a class="clearLink" href="http://emby.media/premiere" target="_blank"><paper-button raised class="submit block" autoFocus><iron-icon icon="check"></iron-icon><span>' + Globalize.translate('ButtonBecomeSupporter') + '</span></paper-button></a>';
|
||||||
html += '<paper-button raised class="subdued block btnCancelSupporterInfo" style="background:#444;"><iron-icon icon="close"></iron-icon><span>' + Globalize.translate('ButtonClosePlayVideo') + '</span></paper-button>';
|
html += '<paper-button raised class="subdued block btnCancelSupporterInfo" style="background:#444;"><iron-icon icon="close"></iron-icon><span>' + Globalize.translate('ButtonClosePlayVideo') + '</span></paper-button>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
@ -236,10 +236,14 @@
|
||||||
|
|
||||||
var dlg = paperDialogHelper.createDialog({
|
var dlg = paperDialogHelper.createDialog({
|
||||||
size: 'small',
|
size: 'small',
|
||||||
theme: 'a',
|
removeOnClose: true,
|
||||||
removeOnClose: true
|
autoFocus: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-a');
|
||||||
|
dlg.classList.add('background-theme-a');
|
||||||
|
dlg.classList.add('popupEditor');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCancel"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCancel"></paper-fab>';
|
||||||
|
|
39
dashboard-ui/thirdparty/paper-button-style.css
vendored
39
dashboard-ui/thirdparty/paper-button-style.css
vendored
|
@ -532,45 +532,6 @@ paper-dialog paper-radio-group paper-radio-button {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen-paper-dialog, .medium-paper-dialog, .small-paper-dialog {
|
|
||||||
position: fixed !important;
|
|
||||||
top: 0 !important;
|
|
||||||
bottom: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
right: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
max-height: none !important;
|
|
||||||
max-width: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1280px) and (min-height: 720px) {
|
|
||||||
|
|
||||||
.medium-paper-dialog {
|
|
||||||
top: 10% !important;
|
|
||||||
bottom: 10% !important;
|
|
||||||
left: 10% !important;
|
|
||||||
right: 10% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-paper-dialog {
|
|
||||||
top: 10% !important;
|
|
||||||
bottom: 10% !important;
|
|
||||||
left: 20% !important;
|
|
||||||
right: 20% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 1280px) and (min-height: 720px) {
|
|
||||||
|
|
||||||
.fullscreen-paper-dialog {
|
|
||||||
top: 5% !important;
|
|
||||||
bottom: 5% !important;
|
|
||||||
left: 5% !important;
|
|
||||||
right: 5% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.dialogHeader {
|
div.dialogHeader {
|
||||||
margin: 0 0 2.5em!important;
|
margin: 0 0 2.5em!important;
|
||||||
padding: .35em .5em;
|
padding: .35em .5em;
|
||||||
|
|
|
@ -234,9 +234,12 @@
|
||||||
removeOnClose: true
|
removeOnClose: true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
dlg.classList.add('ui-body-b');
|
||||||
|
dlg.classList.add('background-theme-b');
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
html += '<h2 class="dialogHeader">';
|
html += '<h2 class="dialogHeader">';
|
||||||
html += '<paper-fab icon="arrow-back" mini class="btnCancelVoiceInput"></paper-fab>';
|
html += '<paper-fab icon="arrow-back" mini class="btnCancelVoiceInput" tabindex="-1"></paper-fab>';
|
||||||
html += '</h2>';
|
html += '</h2>';
|
||||||
|
|
||||||
html += '<div>';
|
html += '<div>';
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue