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

Make dialogs more bearable

This commit is contained in:
MrTimscampi 2020-05-11 21:43:41 +02:00
parent ed12e7c4f9
commit 467bda4ed7
17 changed files with 112 additions and 127 deletions

View file

@ -126,25 +126,10 @@
} }
@media all and (min-width: 80em) and (min-height: 45em) { @media all and (min-width: 80em) and (min-height: 45em) {
.dialog-medium {
width: 80%;
height: 80%;
}
.dialog-medium-tall {
width: 80%;
height: 90%;
}
.dialog-small { .dialog-small {
width: 60%; width: 60%;
height: 80%; height: 80%;
} }
.dialog-fullscreen-border {
width: 90%;
height: 90%;
}
} }
.noScroll { .noScroll {

View file

@ -253,7 +253,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in
var systemInfo = responses[0]; var systemInfo = responses[0];
var initialPath = responses[1]; var initialPath = responses[1];
var dlg = dialogHelper.createDialog({ var dlg = dialogHelper.createDialog({
size: 'medium-tall', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}); });

View file

@ -19,6 +19,10 @@
margin-bottom: 0; margin-bottom: 0;
} }
.formDialogHeaderTitle:first-child {
margin-left: 1em;
}
.formDialogContent:not(.no-grow) { .formDialogContent:not(.no-grow) {
flex-grow: 1; flex-grow: 1;
} }
@ -46,10 +50,16 @@
right: 0; right: 0;
display: flex; display: flex;
position: absolute; position: absolute;
padding: 1.25em 1em; padding: 1em 1em;
/* Without this emby-checkbox is able to appear on top */ /* Without this emby-checkbox is able to appear on top */
z-index: 1; z-index: 1;
align-items: flex-end;
justify-content: end;
flex-wrap: wrap;
}
.layout-tv .formDialogFooter {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -69,8 +79,12 @@
.formDialogFooterItem { .formDialogFooterItem {
margin: 0.5em !important; margin: 0.5em !important;
flex-grow: 1;
text-align: center; text-align: center;
flex-basis: 12em;
}
.layout-tv .formDialogFooterItem {
flex-grow: 1;
flex-basis: 0; flex-basis: 0;
} }

View file

@ -334,7 +334,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
dialogOptions.size = 'fullscreen-border'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);

View file

@ -457,7 +457,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager',
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
dialogOptions.size = 'fullscreen-border'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);

View file

@ -87,7 +87,7 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb
xhr.onload = function (e) { xhr.onload = function (e) {
var template = this.response; var template = this.response;
var dlg = dialogHelper.createDialog({ var dlg = dialogHelper.createDialog({
size: 'medium-tall', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}); });

View file

@ -137,7 +137,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', '
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
dialogOptions.size = 'fullscreen-border'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);

View file

@ -348,7 +348,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
currentItemType = currentItem.Type; currentItemType = currentItem.Type;
var dialogOptions = { var dialogOptions = {
size: 'fullscreen-border', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };
@ -429,7 +429,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize',
require(['text!./itemidentifier.template.html'], function (template) { require(['text!./itemidentifier.template.html'], function (template) {
var dialogOptions = { var dialogOptions = {
size: 'fullscreen-border', size: 'small',
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false
}; };

View file

@ -187,7 +187,7 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed
xhr.onload = function (e) { xhr.onload = function (e) {
var template = this.response; var template = this.response;
var dlg = dialogHelper.createDialog({ var dlg = dialogHelper.createDialog({
size: 'medium-tall', size: 'small',
modal: false, modal: false,
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false

View file

@ -204,7 +204,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed
xhr.onload = function (e) { xhr.onload = function (e) {
var template = this.response; var template = this.response;
var dlg = dialogHelper.createDialog({ var dlg = dialogHelper.createDialog({
size: 'medium-tall', size: 'small',
modal: false, modal: false,
removeOnClose: true, removeOnClose: true,
scrollY: false scrollY: false

View file

@ -245,50 +245,6 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
}); });
} }
function showMoreMenu(context, button, user) {
require(['itemContextMenu'], function (itemContextMenu) {
var item = currentItem;
itemContextMenu.show({
item: item,
positionTo: button,
edit: false,
editImages: true,
editSubtitles: true,
sync: false,
share: false,
play: false,
queue: false,
user: user
}).then(function (result) {
if (result.deleted) {
afterDeleted(context, item);
} else if (result.updated) {
reload(context, item.Id, item.ServerId);
}
});
});
}
function afterDeleted(context, item) {
var parentId = item.ParentId || item.SeasonId || item.SeriesId;
if (parentId) {
reload(context, parentId, item.ServerId);
} else {
require(['appRouter'], function (appRouter) {
appRouter.goHome();
});
}
}
function onEditorClick(e) { function onEditorClick(e) {
var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList'); var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList');
@ -307,6 +263,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
return connectionManager.getApiClient(currentItem.ServerId); return connectionManager.getApiClient(currentItem.ServerId);
} }
function bindAll(elems, eventName, fn) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener(eventName, fn);
}
}
function init(context, apiClient) { function init(context, apiClient) {
context.querySelector('.externalIds').addEventListener('click', function (e) { context.querySelector('.externalIds').addEventListener('click', function (e) {
@ -322,19 +284,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
}); });
context.querySelector('.btnCancel').addEventListener('click', function () { bindAll(context.querySelectorAll('.btnCancel'), 'click', function (event) {
event.preventDefault();
closeDialog(false); closeDialog(false);
}); });
context.querySelector('.btnMore').addEventListener('click', function (e) {
getApiClient().getCurrentUser().then(function (user) {
showMoreMenu(context, e.target, user);
});
});
context.querySelector('.btnHeaderSave').addEventListener('click', function (e) { context.querySelector('.btnHeaderSave').addEventListener('click', function (e) {
context.querySelector('.btnSave').click(); context.querySelector('.btnSave').click();
@ -349,8 +303,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
} }
}); });
context.removeEventListener('click', onEditorClick); context.removeEventListener('submit', onEditorClick);
context.addEventListener('click', onEditorClick); context.addEventListener('submit', onEditorClick);
var form = context.querySelector('form'); var form = context.querySelector('form');
form.removeEventListener('submit', onSubmit); form.removeEventListener('submit', onSubmit);
@ -1081,7 +1035,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
dialogOptions.size = 'medium-tall'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);

View file

@ -1,5 +1,4 @@
<div class="formDialogHeader"> <div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><span class="material-icons arrow_back"></span></button>
<h3 class="formDialogHeaderTitle"> <h3 class="formDialogHeaderTitle">
${Edit} ${Edit}
</h3> </h3>
@ -8,8 +7,8 @@
<span class="material-icons check"></span> <span class="material-icons check"></span>
<span>${Save}</span> <span>${Save}</span>
</button> </button>
<button is="paper-icon-button-light" class="btnMore autoSize" tabindex="-1"> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
<span class="material-icons more_horiz"></span> <span class="material-icons close"></span>
</button> </button>
</div> </div>
</div> </div>
@ -57,11 +56,13 @@
<div id="fldAlbum" class="hide inputContainer"> <div id="fldAlbum" class="hide inputContainer">
<input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" /> <input is="emby-input" id="txtAlbum" type="text" label="${LabelAlbum}" />
</div> </div>
<div id="fldParentIndexNumber" class="hide inputContainer"> <div class="inlineForm">
<input is="emby-input" id="txtParentIndexNumber" type="number" /> <div id="fldParentIndexNumber" class="hide inputContainer">
</div> <input is="emby-input" id="txtParentIndexNumber" type="number" />
<div id="fldIndexNumber" class="hide inputContainer"> </div>
<input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" /> <div id="fldIndexNumber" class="hide inputContainer">
<input is="emby-input" id="txtIndexNumber" type="number" pattern="[0-9]*" />
</div>
</div> </div>
<div id="fldCommunityRating" class="hide inputContainer"> <div id="fldCommunityRating" class="hide inputContainer">
<input is="emby-input" id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}" /> <input is="emby-input" id="txtCommunityRating" type="number" step=".1" min="0" max="10" label="${LabelCommunityRating}" />
@ -129,24 +130,28 @@
<div id="fldSeriesRuntime" class="inputContainer hide"> <div id="fldSeriesRuntime" class="inputContainer hide">
<input is="emby-input" id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}" /> <input is="emby-input" id="txtSeriesRuntime" type="number" label="${LabelRuntimeMinutes}" />
</div> </div>
<div id="fldOfficialRating" class="selectContainer hide"> <div class="inlineForm">
<select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select> <div id="fldOfficialRating" class="selectContainer hide">
<select is="emby-select" id="selectOfficialRating" label="${LabelParentalRating}"></select>
</div>
<div id="fldCustomRating" class="selectContainer hide">
<select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select>
</div>
</div> </div>
<div id="fldCustomRating" class="selectContainer hide"> <div class="inlineForm">
<select is="emby-select" id="selectCustomRating" label="${LabelCustomRating}"></select> <div id="fldOriginalAspectRatio" class="inputContainer hide">
</div> <input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" />
<div id="fldOriginalAspectRatio" class="inputContainer hide"> </div>
<input is="emby-input" id="txtOriginalAspectRatio" type="text" label="${LabelOriginalAspectRatio}" /> <div id="fld3dFormat" class="selectContainer hide">
</div> <select is="emby-select" id="select3dFormat" label="${Label3DFormat}">
<div id="fld3dFormat" class="selectContainer hide"> <option value=""></option>
<select is="emby-select" id="select3dFormat" label="${Label3DFormat}"> <option value="HalfSideBySide">HSBS</option>
<option value=""></option> <option value="HalfTopAndBottom">HTAB</option>
<option value="HalfSideBySide">HSBS</option> <option value="FullSideBySide">FSBS</option>
<option value="HalfTopAndBottom">HTAB</option> <option value="FullTopAndBottom">FTAB</option>
<option value="FullSideBySide">FSBS</option> <option value="MVC">MVC</option>
<option value="FullTopAndBottom">FTAB</option> </select>
<option value="MVC">MVC</option> </div>
</select>
</div> </div>
<div id="fldDisplayOrder" class="fldDisplaySetting selectContainer hide"> <div id="fldDisplayOrder" class="fldDisplaySetting selectContainer hide">
@ -160,14 +165,16 @@
<h2> <h2>
${HeaderSpecialEpisodeInfo} ${HeaderSpecialEpisodeInfo}
</h2> </h2>
<div class="inputContainer"> <div class="inlineForm">
<input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" /> <div class="inputContainer">
</div> <input is="emby-input" id="txtAirsBeforeSeason" type="number" pattern="[0-9]*" label="${LabelAirsBeforeSeason}" />
<div class="inputContainer"> </div>
<input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" /> <div class="inputContainer">
</div> <input is="emby-input" id="txtAirsAfterSeason" type="number" pattern="[0-9]*" label="${LabelAirsAfterSeason}" />
<div class="inputContainer"> </div>
<input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" /> <div class="inputContainer">
<input is="emby-input" id="txtAirsBeforeEpisode" type="number" pattern="[0-9]*" label="${LabelAirsBeforeEpisode}" />
</div>
</div> </div>
</div> </div>
@ -240,8 +247,11 @@
</div> </div>
<br /> <br />
<div class="formDialogFooter"> <div class="formDialogFooter">
<button is="emby-button" class="raised button-cancel block btnCancel formDialogFooterItem">
<span>${Cancel}</span>
</button>
<button is="emby-button" type="submit" class="raised button-submit block btnSave formDialogFooterItem"> <button is="emby-button" type="submit" class="raised button-submit block btnSave formDialogFooterItem">
<span>${Save}</span> <span>${SaveChanges}</span>
</button> </button>
</div> </div>

View file

@ -21,7 +21,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but
if (layoutManager.tv) { if (layoutManager.tv) {
dialogOptions.size = 'fullscreen'; dialogOptions.size = 'fullscreen';
} else { } else {
dialogOptions.size = 'medium-tall'; dialogOptions.size = 'small';
} }
var dlg = dialogHelper.createDialog(dialogOptions); var dlg = dialogHelper.createDialog(dialogOptions);

View file

@ -272,7 +272,7 @@
</form> </form>
</div> </div>
</div> </div>
<div data-role="popup" id="popupEditDirectPlayProfile" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="popupEditDirectPlayProfile" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="editDirectPlayProfileForm" style="padding:1em;"> <form class="editDirectPlayProfileForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderDirectPlayProfile}</h3> <h3 class="sectionTitle">${HeaderDirectPlayProfile}</h3>
@ -312,7 +312,7 @@
</div> </div>
</form> </form>
</div> </div>
<div data-role="popup" id="transcodingProfilePopup" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="transcodingProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="transcodingProfileForm" style="padding:1em;"> <form class="transcodingProfileForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderTranscodingProfile}</h3> <h3 class="sectionTitle">${HeaderTranscodingProfile}</h3>
@ -394,7 +394,7 @@
</div> </div>
</form> </form>
</div> </div>
<div data-role="popup" id="containerProfilePopup" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="containerProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="containerProfileForm" style="padding:1em;"> <form class="containerProfileForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderContainerProfile}</h3> <h3 class="sectionTitle">${HeaderContainerProfile}</h3>
@ -426,7 +426,7 @@
</div> </div>
</form> </form>
</div> </div>
<div data-role="popup" id="codecProfilePopup" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="codecProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="codecProfileForm" style="padding:1em;"> <form class="codecProfileForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderCodecProfile}</h3> <h3 class="sectionTitle">${HeaderCodecProfile}</h3>
@ -455,7 +455,7 @@
</div> </div>
</form> </form>
</div> </div>
<div data-role="popup" id="responseProfilePopup" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="responseProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="editResponseProfileForm" style="padding:1em;"> <form class="editResponseProfileForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderResponseProfile}</h3> <h3 class="sectionTitle">${HeaderResponseProfile}</h3>
@ -495,7 +495,7 @@
</div> </div>
</form> </form>
</div> </div>
<div data-role="popup" id="identificationHeaderPopup" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="identificationHeaderPopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="identificationHeaderForm" style="padding:1em;"> <form class="identificationHeaderForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderIdentificationHeader}</h3> <h3 class="sectionTitle">${HeaderIdentificationHeader}</h3>
@ -525,7 +525,7 @@
</div> </div>
</form> </form>
</div> </div>
<div data-role="popup" id="xmlAttributePopup" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="xmlAttributePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="xmlAttributeForm" style="padding:1em;"> <form class="xmlAttributeForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderXmlDocumentAttribute}</h3> <h3 class="sectionTitle">${HeaderXmlDocumentAttribute}</h3>
@ -548,7 +548,7 @@
</div> </div>
</form> </form>
</div> </div>
<div data-role="popup" id="subtitleProfilePopup" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="subtitleProfilePopup" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="subtitleProfileForm" style="padding:1em;"> <form class="subtitleProfileForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3 class="sectionTitle">${HeaderSubtitleProfile}</h3> <h3 class="sectionTitle">${HeaderSubtitleProfile}</h3>

View file

@ -29,6 +29,27 @@
margin-bottom: 1.8em; margin-bottom: 1.8em;
} }
.inlineForm {
display: flex;
}
.inlineForm .inputContainer,
.inlineForm .selectContainer {
flex-basis: 0;
flex-grow: 1;
margin: 0 0.5em 1.8em;
}
.inlineForm .inputContainer:first-child,
.inlineForm .selectContainer:first-child {
margin-left: 0;
}
.inlineForm .inputContainer:last-child,
.inlineForm .selectContainer:last-child {
margin-right: 0;
}
.inputLabel { .inputLabel {
display: inline-block; display: inline-block;
margin-bottom: 0.25em; margin-bottom: 0.25em;

View file

@ -20,7 +20,7 @@
</div> </div>
</div> </div>
</div> </div>
<div data-role="popup" id="popupAddTrigger" class="dialog dialog-fixedSize dialog-medium-tall hide" style="position: fixed; top: 10%;"> <div data-role="popup" id="popupAddTrigger" class="dialog dialog-fixedSize dialog-medium hide" style="position: fixed; top: 10%;">
<form class="addTriggerForm" style="padding:1em;"> <form class="addTriggerForm" style="padding:1em;">
<div class="ui-bar-a"> <div class="ui-bar-a">
<h3>${HeaderAddScheduledTaskTrigger}</h3> <h3>${HeaderAddScheduledTaskTrigger}</h3>

View file

@ -1303,6 +1303,7 @@
"Runtime": "Runtime", "Runtime": "Runtime",
"Saturday": "Saturday", "Saturday": "Saturday",
"Save": "Save", "Save": "Save",
"SaveChanges": "Save changes",
"SaveSubtitlesIntoMediaFolders": "Save subtitles into media folders", "SaveSubtitlesIntoMediaFolders": "Save subtitles into media folders",
"SaveSubtitlesIntoMediaFoldersHelp": "Storing subtitles next to video files will allow them to be more easily managed.", "SaveSubtitlesIntoMediaFoldersHelp": "Storing subtitles next to video files will allow them to be more easily managed.",
"ScanForNewAndUpdatedFiles": "Scan for new and updated files", "ScanForNewAndUpdatedFiles": "Scan for new and updated files",