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

update dialogs

This commit is contained in:
Luke Pulverenti 2016-08-07 02:15:03 -04:00
parent c71f597c58
commit afc7e51fc8
33 changed files with 152 additions and 139 deletions

View file

@ -14,12 +14,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.4.158", "version": "1.4.159",
"_release": "1.4.158", "_release": "1.4.159",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.4.158", "tag": "1.4.159",
"commit": "ffda5994565e3f458e9da09c168cfce699237a0f" "commit": "6320b765b9390fc57210d45c8e9bfcf66d1a2706"
}, },
"_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

@ -137,7 +137,7 @@
var html = ''; var html = '';
html += '<div class="dialogContent smoothScrollY" style="padding-top:2em;">'; html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form class="newCollectionForm" style="margin:auto;">'; html += '<form class="newCollectionForm" style="margin:auto;">';
@ -249,9 +249,9 @@
var html = ''; var html = '';
var title = items.length ? globalize.translate('sharedcomponents#HeaderAddToCollection') : globalize.translate('sharedcomponents#NewCollection'); var title = items.length ? globalize.translate('sharedcomponents#HeaderAddToCollection') : globalize.translate('sharedcomponents#NewCollection');
html += '<div class="dialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
html += '<div class="dialogHeaderTitle">'; html += '<div class="formDialogHeaderTitle">';
html += title; html += title;
html += '</div>'; html += '</div>';
@ -272,13 +272,13 @@
}); });
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
dlg.addEventListener('close', resolve); dlg.addEventListener('close', resolve);

View file

@ -1,8 +1,15 @@
.promptDialog {
border-radius: .25em !important;
}
.dialogButtons { .promptDialogContent {
padding: 1em 1.6em;
}
.promptDialogButtons {
position: relative; position: relative;
padding: 0 !important; padding: 0 !important;
margin: 1em; margin: 1em 0;
display: -ms-flexbox; display: -ms-flexbox;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
@ -14,13 +21,13 @@
justify-content: flex-end; justify-content: flex-end;
} }
.dialogButton { .promptDialogButton {
color: #52B54B; color: #52B54B;
padding: 0.35em 1em; padding: 0.35em 1em;
margin: 0; margin: 0;
} }
.dialogButton:focus { .promptDialogButton:focus {
color: #fff; color: #fff;
background-color: #52B54B; background-color: #52B54B;
} }

View file

@ -36,8 +36,13 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
} }
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('promptDialog');
var html = ''; var html = '';
html += '<div class="promptDialogContent">';
if (options.title) { if (options.title) {
html += '<h2>' + options.title + '</h2>'; html += '<h2>' + options.title + '</h2>';
} }
@ -48,16 +53,17 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
html += '<div style="margin:1em 0;">' + text + '</div>'; html += '<div style="margin:1em 0;">' + text + '</div>';
} }
html += '<div class="dialogButtons">'; html += '<div class="promptDialogButtons">';
var i, length; var i, length;
for (i = 0, length = options.buttons.length; i < length; i++) { for (i = 0, length = options.buttons.length; i < length; i++) {
var item = options.buttons[i]; var item = options.buttons[i];
var autoFocus = i == 0 ? ' autofocus' : ''; var autoFocus = i == 0 ? ' autofocus' : '';
html += '<button is="emby-button" type="button" class="btnOption dialogButton" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>'; html += '<button is="emby-button" type="button" class="btnOption promptDialogButton" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>';
} }
html += '</div>';
html += '</div>'; html += '</div>';
dlg.innerHTML = html; dlg.innerHTML = html;

View file

@ -64,10 +64,6 @@
overflow-y: hidden !important; overflow-y: hidden !important;
} }
.dialog > * {
padding: 0 24px;
}
.dialogBackdrop { .dialogBackdrop {
background-color: #000; background-color: #000;
opacity: 0; opacity: 0;

View file

@ -3,25 +3,24 @@
flex-direction: column; flex-direction: column;
} }
.formDialog .dialogHeader { .formDialogHeader {
padding: .7em .5em; padding: .7em .5em;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #101010; background-color: #101010;
flex-shrink: 0; flex-shrink: 0;
} }
.formDialog .dialogHeaderTitle { .formDialogHeaderTitle {
margin-left: .75em; margin-left: .75em;
} }
.formDialog .dialogContent { .formDialogContent {
flex-grow: 1; flex-grow: 1;
} }
.dialogContentInner { .dialogContentInner {
padding-top: .5em; padding: .5em 1em 30vh 1em;
padding-bottom: 30vh;
} }
.dialog-content-centered { .dialog-content-centered {

View file

@ -299,7 +299,7 @@
page.querySelector('.identifyProviderIds').innerHTML = html; page.querySelector('.identifyProviderIds').innerHTML = html;
page.querySelector('.dialogHeaderTitle').innerHTML = globalize.translate('sharedcomponents#Identify'); page.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('sharedcomponents#Identify');
}); });
} }
@ -341,7 +341,7 @@
dlg.addEventListener('close', onDialogClosed); dlg.addEventListener('close', onDialogClosed);
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false); scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
} }
dialogHelper.open(dlg); dialogHelper.open(dlg);
@ -412,7 +412,7 @@
document.body.appendChild(dlg); document.body.appendChild(dlg);
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false); scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
} }
dialogHelper.open(dlg); dialogHelper.open(dlg);
@ -458,7 +458,7 @@
dlg.querySelector('#txtLookupYear').value = itemYear; dlg.querySelector('#txtLookupYear').value = itemYear;
} }
dlg.querySelector('.dialogHeaderTitle').innerHTML = globalize.translate('sharedcomponents#Search'); dlg.querySelector('.formDialogHeaderTitle').innerHTML = globalize.translate('sharedcomponents#Search');
} }
return { return {

View file

@ -1,11 +1,11 @@
<div class="dialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
${Identify} ${Identify}
</div> </div>
</div> </div>
<div class="dialogContent smoothScrollY"> <div class="formDialogContent smoothScrollY">
<div class="dialogContentInner dialog-content-centered"> <div class="dialogContentInner dialog-content-centered">
<form class="popupIdentifyForm" style="margin:auto;"> <form class="popupIdentifyForm" style="margin:auto;">

View file

@ -1183,14 +1183,14 @@
document.body.appendChild(dlg); document.body.appendChild(dlg);
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
dialogHelper.open(dlg); dialogHelper.open(dlg);
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
unbindItemChanged(dlg, connectionManager.getApiClient(serverId)); unbindItemChanged(dlg, connectionManager.getApiClient(serverId));

View file

@ -1,6 +1,6 @@
<div class="dialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
${Edit} ${Edit}
</div> </div>
<div style="margin-left: auto; display: flex; align-items: center; justify-content: center;"> <div style="margin-left: auto; display: flex; align-items: center; justify-content: center;">
@ -14,7 +14,7 @@
</div> </div>
</div> </div>
<div class="dialogContent smoothScrollY" style="padding-top:2em;"> <div class="formDialogContent smoothScrollY" style="padding-top:2em;">
<form class="editItemMetadataForm editMetadataForm dialogContentInner dialog-content-centered"> <form class="editItemMetadataForm editMetadataForm dialogContentInner dialog-content-centered">
<div class="metadataFormFields"> <div class="metadataFormFields">

View file

@ -43,7 +43,7 @@
dlg.querySelector('.txtPersonRole', dlg).value = person.Role || ''; dlg.querySelector('.txtPersonRole', dlg).value = person.Role || '';
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
dialogHelper.open(dlg); dialogHelper.open(dlg);
@ -51,7 +51,7 @@
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
if (submitted) { if (submitted) {

View file

@ -1,11 +1,11 @@
<div class="dialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
${Edit} ${Edit}
</div> </div>
</div> </div>
<div class="dialogContent smoothScrollY" style="padding-top:2em;"> <div class="formDialogContent smoothScrollY" style="padding-top:2em;">
<form class="popupEditPersonForm dialogContentInner dialog-content-centered"> <form class="popupEditPersonForm dialogContentInner dialog-content-centered">
<div class="inputContainer"> <div class="inputContainer">

View file

@ -137,7 +137,7 @@
var html = ''; var html = '';
html += '<div class="dialogContent smoothScrollY" style="padding-top:2em;">'; html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form style="margin:auto;">'; html += '<form style="margin:auto;">';
@ -230,9 +230,9 @@
var html = ''; var html = '';
var title = globalize.translate('sharedcomponents#HeaderAddToPlaylist'); var title = globalize.translate('sharedcomponents#HeaderAddToPlaylist');
html += '<div class="dialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
html += '<div class="dialogHeaderTitle">'; html += '<div class="formDialogHeaderTitle">';
html += title; html += title;
html += '</div>'; html += '</div>';
@ -251,13 +251,13 @@
}); });
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
dlg.addEventListener('close', resolve); dlg.addEventListener('close', resolve);

View file

@ -391,7 +391,7 @@
}); });
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false); scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
} }
dlg.querySelector('.btnSupporterForConverting').addEventListener('click', onSupporterButtonClick); dlg.querySelector('.btnSupporterForConverting').addEventListener('click', onSupporterButtonClick);

View file

@ -1,10 +1,10 @@
<div class="dialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
${HeaderNewRecording} ${HeaderNewRecording}
</div> </div>
</div> </div>
<div class="dialogContent smoothScrollY"> <div class="formDialogContent smoothScrollY">
<form class="dialogContentInner dialog-content-centered"> <form class="dialogContentInner dialog-content-centered">
<h1 class="itemName dialogContentTitle"></h1> <h1 class="itemName dialogContentTitle"></h1>

View file

@ -15,7 +15,7 @@
context.querySelector('.itemGenres').innerHTML = (programInfo.Genres || []).join(' / '); context.querySelector('.itemGenres').innerHTML = (programInfo.Genres || []).join(' / ');
context.querySelector('.itemOverview').innerHTML = programInfo.Overview || ''; context.querySelector('.itemOverview').innerHTML = programInfo.Overview || '';
var timerPageImageContainer = context.querySelector('.timerPageImageContainer'); //var timerPageImageContainer = context.querySelector('.timerPageImageContainer');
context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(programInfo); context.querySelector('.itemMiscInfoPrimary').innerHTML = mediaInfo.getPrimaryMediaInfoHtml(programInfo);
context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(programInfo); context.querySelector('.itemMiscInfoSecondary').innerHTML = mediaInfo.getSecondaryMediaInfoHtml(programInfo);
@ -144,7 +144,7 @@
}); });
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false); scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
} }
init(dlg); init(dlg);

View file

@ -1,6 +1,6 @@
<div class="dialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
${Edit} ${Edit}
</div> </div>
<div style="margin-left:auto; display: flex; align-items: center; justify-content: center;"> <div style="margin-left:auto; display: flex; align-items: center; justify-content: center;">
@ -11,7 +11,7 @@
</div> </div>
</div> </div>
<div class="dialogContent smoothScrollY"> <div class="formDialogContent smoothScrollY">
<div class="dialogContentInner dialog-content-centered"> <div class="dialogContentInner dialog-content-centered">
<h1 class="itemName dialogContentTitle"></h1> <h1 class="itemName dialogContentTitle"></h1>
<p class="itemEpisodeName"></p> <p class="itemEpisodeName"></p>

View file

@ -17,7 +17,7 @@
var html = ''; var html = '';
html += '<div class="dialogContent smoothScrollY" style="padding-top:2em;">'; html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form style="margin:auto;">'; html += '<form style="margin:auto;">';
@ -121,9 +121,9 @@
var html = ''; var html = '';
var title = globalize.translate('sharedcomponents#RefreshMetadata'); var title = globalize.translate('sharedcomponents#RefreshMetadata');
html += '<div class="dialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
html += '<div class="dialogHeaderTitle">'; html += '<div class="formDialogHeaderTitle">';
html += title; html += title;
html += '</div>'; html += '</div>';
@ -142,13 +142,13 @@
}); });
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
} }
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
dlg.addEventListener('close', resolve); dlg.addEventListener('close', resolve);

View file

@ -333,7 +333,7 @@
var lang = form.querySelector('#selectLanguage', form).value; var lang = form.querySelector('#selectLanguage', form).value;
searchForSubtitles(dom.parentWithClass(form, 'dialogContent'), lang); searchForSubtitles(dom.parentWithClass(form, 'formDialogContent'), lang);
e.preventDefault(); e.preventDefault();
return false; return false;
@ -429,17 +429,13 @@
var btnSubmit = dlg.querySelector('.btnSubmit'); var btnSubmit = dlg.querySelector('.btnSubmit');
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, true); centerFocus(dlg.querySelector('.formDialogContent'), false, true);
}
if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, true);
dlg.querySelector('.btnSearchSubtitles').classList.add('hide'); dlg.querySelector('.btnSearchSubtitles').classList.add('hide');
} else { } else {
btnSubmit.classList.add('hide'); btnSubmit.classList.add('hide');
} }
var editorContent = dlg.querySelector('.dialogContent'); var editorContent = dlg.querySelector('.formDialogContent');
dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick); dlg.querySelector('.subtitleList').addEventListener('click', onSubtitleListClick);
dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick); dlg.querySelector('.subtitleResults').addEventListener('click', onSubtitleResultsClick);
@ -459,7 +455,7 @@
dlg.addEventListener('close', function () { dlg.addEventListener('close', function () {
if (layoutManager.tv) { if (layoutManager.tv) {
centerFocus(dlg.querySelector('.dialogContent'), false, false); centerFocus(dlg.querySelector('.formDialogContent'), false, false);
} }
if (hasChanges) { if (hasChanges) {

View file

@ -1,8 +1,8 @@
<div class="dialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="dialogHeaderTitle">${Subtitles}</div> <div class="formDialogHeaderTitle">${Subtitles}</div>
</div> </div>
<div class="dialogContent smoothScrollY"> <div class="formDialogContent smoothScrollY">
<div class="dialogContentInner dialog-content-centered"> <div class="dialogContentInner dialog-content-centered">
<div class="subtitleList" style="margin-bottom:2em;"></div> <div class="subtitleList" style="margin-bottom:2em;"></div>

View file

@ -111,16 +111,16 @@ define(['dialogHelper', 'voiceReceiver', 'voiceProcessor', 'globalize', 'emby-bu
dlg.classList.add('formDialog'); dlg.classList.add('formDialog');
var html = ''; var html = '';
html += '<div class="dialogHeader">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancelVoiceInput autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>'; html += '<button is="paper-icon-button-light" class="btnCancelVoiceInput autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
html += '<div class="dialogHeaderTitle">'; html += '<div class="formDialogHeaderTitle">';
html += globalize.translate('sharedcomponents#VoiceInput'); html += globalize.translate('sharedcomponents#VoiceInput');
html += '</div>'; html += '</div>';
html += '</div>'; html += '</div>';
html += '<div>'; html += '<div>';
html += '<div class="dialogContent smoothScrollY" style="padding-top:2em;">'; html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<div class="voiceHelpContent">'; html += '<div class="voiceHelpContent">';

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'actionsheet', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-button', 'listViewStyle', 'material-icons'], define(['dialogHelper', 'loading', 'connectionManager', 'globalize', 'actionsheet', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-button', 'listViewStyle', 'material-icons', 'formDialogStyle'],
function (dialogHelper, loading, connectionManager, globalize, actionsheet) { function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
return function (options) { return function (options) {
@ -121,7 +121,7 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
var html = ''; var html = '';
html += '<div class="dialogContent">'; html += '<div class="formDialogContent">';
html += '<div class="dialogContentInner dialog-content-centered">'; html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form style="margin:auto;">'; html += '<form style="margin:auto;">';
@ -170,9 +170,9 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
var html = ''; var html = '';
var title = globalize.translate('MapChannels'); var title = globalize.translate('MapChannels');
html += '<div class="dialogHeader" style="margin:0 0 2em;">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
html += '<div class="dialogHeaderTitle">'; html += '<div class="formDialogHeaderTitle">';
html += title; html += title;
html += '</div>'; html += '</div>';

View file

@ -216,7 +216,7 @@
dlg.innerHTML = html; dlg.innerHTML = html;
document.body.appendChild(dlg); document.body.appendChild(dlg);
dlg.querySelector('.dialogHeaderTitle').innerHTML = Globalize.translate('FileOrganizeManually'); dlg.querySelector('.formDialogHeaderTitle').innerHTML = Globalize.translate('FileOrganizeManually');
dialogHelper.open(dlg); dialogHelper.open(dlg);

View file

@ -1,8 +1,8 @@
<div class="dialogHeader" style="margin:0 0 2em;"> <div class="formDialogHeader" style="margin:0 0 2em;">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<i class="md-icon">&#xE5C4;</i> <i class="md-icon">&#xE5C4;</i>
</button> </button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
</div> </div>
</div> </div>

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'jQuery', 'emby-input', 'emby-button', 'emby-collapse', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, $) { define(['dialogHelper', 'jQuery', 'emby-input', 'emby-button', 'emby-collapse', 'paper-checkbox', 'paper-icon-button-light', 'formDialogStyle'], function (dialogHelper, $) {
function updateUserInfo(user, newConnectUsername, actionCallback, noActionCallback) { function updateUserInfo(user, newConnectUsername, actionCallback, noActionCallback) {
var currentConnectUsername = user.ConnectUserName || ''; var currentConnectUsername = user.ConnectUserName || '';

View file

@ -1,8 +1,8 @@
<div class="dialogHeader" style="margin:0 0 2em;"> <div class="formDialogHeader" style="margin:0 0 2em;">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<i class="md-icon">&#xE5C4;</i> <i class="md-icon">&#xE5C4;</i>
</button> </button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
Emby Connect Emby Connect
</div> </div>
</div> </div>

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'jQuery', 'emby-input', 'emby-button', 'emby-collapse', 'paper-checkbox', 'paper-icon-button-light'], function (dialogHelper, $) { define(['dialogHelper', 'jQuery', 'emby-input', 'emby-button', 'emby-collapse', 'paper-checkbox', 'paper-icon-button-light', 'formDialogStyle'], function (dialogHelper, $) {
function renderLibrarySharingList(context, result) { function renderLibrarySharingList(context, result) {

View file

@ -1,37 +1,38 @@
<div class="dialogHeader" style="margin:0 0 2em;"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<i class="md-icon">&#xE5C4;</i> <div class="formDialogHeaderTitle">
</button>
<div class="dialogHeaderTitle">
${HeaderInviteUser} ${HeaderInviteUser}
</div> </div>
</div> </div>
<div class="formDialogContent smoothScrollY" style="padding-top:2em;">
<div class="dialogContentInner dialog-content-centered">
<form class="addUserForm" style="max-width: none;margin:0;">
<form class="addUserForm" style="max-width: none;margin:0;"> <div class="inputContainer">
<input is="emby-input" type="text" id="txtConnectUsername" value="" label="${LabelConnectGuestUserName}" required />
<div class="inputContainer"> <div class="fieldDescription">
<input is="emby-input" type="text" id="txtConnectUsername" value="" label="${LabelConnectGuestUserName}" required /> <div>${LabelConnectGuestUserNameHelp}</div>
<div class="fieldDescription"> <div style="margin-top: .25em;"><a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a></div>
<div>${LabelConnectGuestUserNameHelp}</div> </div>
<div style="margin-top: .25em;"><a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a></div>
</div>
</div>
<div is="emby-collapse" title="${HeaderShareMediaFolders}">
<div class="collapseContent">
<div class="librarySharingList">
</div> </div>
</div>
<div is="emby-collapse" title="${HeaderShareMediaFolders}">
<div class="collapseContent">
<div class="librarySharingList">
</div>
</div>
</div>
<p class="fieldDescription" style="margin-top:.5em;">${MessageGuestSharingPermissionsHelp}</p>
<br />
<button is="emby-button" type="submit" class="raised submit block">
<i class="md-icon">check</i>
<span>${ButtonSendInvitation}</span>
</button>
<br />
<br />
<br />
<br />
</form>
</div> </div>
<p class="fieldDescription" style="margin-top:.5em;">${MessageGuestSharingPermissionsHelp}</p> </div>
<br />
<button is="emby-button" type="submit" class="raised submit block">
<i class="md-icon">check</i>
<span>${ButtonSendInvitation}</span>
</button>
<br />
<br />
<br />
<br />
</form>

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'jQuery', 'emby-input', 'emby-select', 'paper-icon-button-light', 'listViewStyle'], function (dialogHelper, $) { define(['dialogHelper', 'jQuery', 'emby-input', 'emby-select', 'paper-icon-button-light', 'listViewStyle', 'formDialogStyle'], function (dialogHelper, $) {
var currentDeferred; var currentDeferred;
var hasChanges; var hasChanges;

View file

@ -1,11 +1,11 @@
<div class="dialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="dialogHeaderTitle"> <div class="formDialogHeaderTitle">
${ButtonAddMediaLibrary} ${ButtonAddMediaLibrary}
</div> </div>
</div> </div>
<div class="dialogContent smoothScrollY" style="padding-top:2em;"> <div class="formDialogContent smoothScrollY" style="padding-top:2em;">
<div class="dialogContentInner dialog-content-centered"> <div class="dialogContentInner dialog-content-centered">
<form style="margin:auto;"> <form style="margin:auto;">
<div id="fldCollectionType" class="selectContainer"> <div id="fldCollectionType" class="selectContainer">

View file

@ -1550,6 +1550,7 @@ var AppInfo = {};
define("userdataButtons", [embyWebComponentsBowerPath + "/userdatabuttons/userdatabuttons"], returnFirstDependency); define("userdataButtons", [embyWebComponentsBowerPath + "/userdatabuttons/userdatabuttons"], returnFirstDependency);
define("listView", [embyWebComponentsBowerPath + "/listview/listview"], returnFirstDependency); define("listView", [embyWebComponentsBowerPath + "/listview/listview"], returnFirstDependency);
define("listViewStyle", ['css!' + embyWebComponentsBowerPath + "/listview/listview"], returnFirstDependency); define("listViewStyle", ['css!' + embyWebComponentsBowerPath + "/listview/listview"], returnFirstDependency);
define("formDialogStyle", ['css!' + embyWebComponentsBowerPath + "/formdialog"], returnFirstDependency);
define("indicators", [embyWebComponentsBowerPath + "/indicators/indicators"], returnFirstDependency); define("indicators", [embyWebComponentsBowerPath + "/indicators/indicators"], returnFirstDependency);
if ('registerElement' in document && 'content' in document.createElement('template')) { if ('registerElement' in document && 'content' in document.createElement('template')) {

View file

@ -228,7 +228,7 @@
function showSyncMenuInternal(options) { function showSyncMenuInternal(options) {
require(['dialogHelper'], function (dialogHelper) { require(['dialogHelper', 'formDialogStyle'], function (dialogHelper) {
var userId = Dashboard.getCurrentUserId(); var userId = Dashboard.getCurrentUserId();
@ -254,12 +254,12 @@
dlg.classList.add('ui-body-a'); dlg.classList.add('ui-body-a');
dlg.classList.add('background-theme-a'); dlg.classList.add('background-theme-a');
dlg.classList.add('popupEditor'); dlg.classList.add('formDialog');
var html = ''; var html = '';
html += '<div class="dialogHeader" style="margin:0 0 2em;">'; html += '<div class="formDialogHeader">';
html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>'; html += '<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
html += '<div class="dialogHeaderTitle">'; html += '<div class="formDialogHeaderTitle">';
html += Globalize.translate('SyncMedia'); html += Globalize.translate('SyncMedia');
html += '</div>'; html += '</div>';
@ -267,6 +267,9 @@
html += '</div>'; html += '</div>';
html += '<div class="formDialogContent smoothScrollY" style="padding-top:2em;">';
html += '<div class="dialogContentInner dialog-content-centered">';
html += '<form class="formSubmitSyncRequest" style="margin: auto;">'; html += '<form class="formSubmitSyncRequest" style="margin: auto;">';
html += '<div class="formFields"></div>'; html += '<div class="formFields"></div>';
@ -277,6 +280,10 @@
html += '</form>'; html += '</form>';
html += '</div>';
html += '</div>';
dlg.innerHTML = html; dlg.innerHTML = html;
document.body.appendChild(dlg); document.body.appendChild(dlg);

View file

@ -158,21 +158,21 @@ div.dialogHeader {
font-size: 110%; font-size: 110%;
} }
.ui-body-a div.dialogHeader { .ui-body-a div.formDialogHeader {
background-color: #52B54B; background-color: #52B54B;
color: #fff; color: #fff;
} }
.ui-body-a .dialogHeader a { .ui-body-a .formDialogHeader a {
color: #fff !important; color: #fff !important;
text-transform: uppercase; text-transform: uppercase;
} }
.ui-body-b div.dialogHeader { .ui-body-b div.formDialogHeader {
background-color: #101010; background-color: #101010;
} }
.dialogHeaderTitle { .formDialogHeaderTitle {
margin-left: .75em; margin-left: .75em;
} }
@ -183,7 +183,7 @@ div.dialogHeader {
margin-top: .7em; margin-top: .7em;
} }
.dialogHeader button { .formDialogHeader button {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }