From 467bda4ed76c0d22095fcd472aeb1ce642bf3056 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Mon, 11 May 2020 21:43:41 +0200 Subject: [PATCH 1/5] Make dialogs more bearable --- src/components/dialogHelper/dialoghelper.css | 15 ---- .../directorybrowser/directorybrowser.js | 2 +- src/components/formdialog.css | 18 ++++- .../imagedownloader/imagedownloader.js | 2 +- src/components/imageeditor/imageeditor.js | 2 +- .../imageoptionseditor/imageoptionseditor.js | 2 +- src/components/imageuploader/imageuploader.js | 2 +- .../itemidentifier/itemidentifier.js | 4 +- .../medialibrarycreator.js | 2 +- .../medialibraryeditor/medialibraryeditor.js | 2 +- .../metadataeditor/metadataeditor.js | 68 +++------------- .../metadataeditor.template.html | 78 +++++++++++-------- src/components/metadataeditor/personeditor.js | 2 +- src/dlnaprofile.html | 16 ++-- src/elements/emby-input/emby-input.css | 21 +++++ src/scheduledtask.html | 2 +- src/strings/en-us.json | 1 + 17 files changed, 112 insertions(+), 127 deletions(-) diff --git a/src/components/dialogHelper/dialoghelper.css b/src/components/dialogHelper/dialoghelper.css index df2adf075..98cfef1c5 100644 --- a/src/components/dialogHelper/dialoghelper.css +++ b/src/components/dialogHelper/dialoghelper.css @@ -126,25 +126,10 @@ } @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 { width: 60%; height: 80%; } - - .dialog-fullscreen-border { - width: 90%; - height: 90%; - } } .noScroll { diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js index 7f13f89ef..3b1bd4ea8 100644 --- a/src/components/directorybrowser/directorybrowser.js +++ b/src/components/directorybrowser/directorybrowser.js @@ -253,7 +253,7 @@ define(['loading', 'dialogHelper', 'dom', 'globalize', 'listViewStyle', 'emby-in var systemInfo = responses[0]; var initialPath = responses[1]; var dlg = dialogHelper.createDialog({ - size: 'medium-tall', + size: 'small', removeOnClose: true, scrollY: false }); diff --git a/src/components/formdialog.css b/src/components/formdialog.css index 788331da9..2b2df601c 100644 --- a/src/components/formdialog.css +++ b/src/components/formdialog.css @@ -19,6 +19,10 @@ margin-bottom: 0; } +.formDialogHeaderTitle:first-child { + margin-left: 1em; +} + .formDialogContent:not(.no-grow) { flex-grow: 1; } @@ -46,10 +50,16 @@ right: 0; display: flex; position: absolute; - padding: 1.25em 1em; + padding: 1em 1em; /* Without this emby-checkbox is able to appear on top */ z-index: 1; + align-items: flex-end; + justify-content: end; + flex-wrap: wrap; +} + +.layout-tv .formDialogFooter { align-items: center; justify-content: center; flex-wrap: wrap; @@ -69,8 +79,12 @@ .formDialogFooterItem { margin: 0.5em !important; - flex-grow: 1; text-align: center; + flex-basis: 12em; +} + +.layout-tv .formDialogFooterItem { + flex-grow: 1; flex-basis: 0; } diff --git a/src/components/imagedownloader/imagedownloader.js b/src/components/imagedownloader/imagedownloader.js index 3e0d00ac2..184526c76 100644 --- a/src/components/imagedownloader/imagedownloader.js +++ b/src/components/imagedownloader/imagedownloader.js @@ -334,7 +334,7 @@ define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'image if (layoutManager.tv) { dialogOptions.size = 'fullscreen'; } else { - dialogOptions.size = 'fullscreen-border'; + dialogOptions.size = 'small'; } var dlg = dialogHelper.createDialog(dialogOptions); diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js index 606cdfa71..228060b8b 100644 --- a/src/components/imageeditor/imageeditor.js +++ b/src/components/imageeditor/imageeditor.js @@ -457,7 +457,7 @@ define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', if (layoutManager.tv) { dialogOptions.size = 'fullscreen'; } else { - dialogOptions.size = 'fullscreen-border'; + dialogOptions.size = 'small'; } var dlg = dialogHelper.createDialog(dialogOptions); diff --git a/src/components/imageoptionseditor/imageoptionseditor.js b/src/components/imageoptionseditor/imageoptionseditor.js index 73a6d119d..09cbc25a0 100644 --- a/src/components/imageoptionseditor/imageoptionseditor.js +++ b/src/components/imageoptionseditor/imageoptionseditor.js @@ -87,7 +87,7 @@ define(['globalize', 'dom', 'dialogHelper', 'emby-checkbox', 'emby-select', 'emb xhr.onload = function (e) { var template = this.response; var dlg = dialogHelper.createDialog({ - size: 'medium-tall', + size: 'small', removeOnClose: true, scrollY: false }); diff --git a/src/components/imageuploader/imageuploader.js b/src/components/imageuploader/imageuploader.js index 87ecc1bc3..509bf32d6 100644 --- a/src/components/imageuploader/imageuploader.js +++ b/src/components/imageuploader/imageuploader.js @@ -137,7 +137,7 @@ define(['dialogHelper', 'connectionManager', 'dom', 'loading', 'scrollHelper', ' if (layoutManager.tv) { dialogOptions.size = 'fullscreen'; } else { - dialogOptions.size = 'fullscreen-border'; + dialogOptions.size = 'small'; } var dlg = dialogHelper.createDialog(dialogOptions); diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js index 871093602..b335d1dfd 100644 --- a/src/components/itemidentifier/itemidentifier.js +++ b/src/components/itemidentifier/itemidentifier.js @@ -348,7 +348,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', currentItemType = currentItem.Type; var dialogOptions = { - size: 'fullscreen-border', + size: 'small', removeOnClose: true, scrollY: false }; @@ -429,7 +429,7 @@ define(['dialogHelper', 'loading', 'connectionManager', 'require', 'globalize', require(['text!./itemidentifier.template.html'], function (template) { var dialogOptions = { - size: 'fullscreen-border', + size: 'small', removeOnClose: true, scrollY: false }; diff --git a/src/components/medialibrarycreator/medialibrarycreator.js b/src/components/medialibrarycreator/medialibrarycreator.js index 450f5a64e..42e26c252 100644 --- a/src/components/medialibrarycreator/medialibrarycreator.js +++ b/src/components/medialibrarycreator/medialibrarycreator.js @@ -187,7 +187,7 @@ define(['loading', 'dialogHelper', 'dom', 'jQuery', 'components/libraryoptionsed xhr.onload = function (e) { var template = this.response; var dlg = dialogHelper.createDialog({ - size: 'medium-tall', + size: 'small', modal: false, removeOnClose: true, scrollY: false diff --git a/src/components/medialibraryeditor/medialibraryeditor.js b/src/components/medialibraryeditor/medialibraryeditor.js index 314150962..1a2a5623b 100644 --- a/src/components/medialibraryeditor/medialibraryeditor.js +++ b/src/components/medialibraryeditor/medialibraryeditor.js @@ -204,7 +204,7 @@ define(['jQuery', 'loading', 'dialogHelper', 'dom', 'components/libraryoptionsed xhr.onload = function (e) { var template = this.response; var dlg = dialogHelper.createDialog({ - size: 'medium-tall', + size: 'small', modal: false, removeOnClose: true, scrollY: false diff --git a/src/components/metadataeditor/metadataeditor.js b/src/components/metadataeditor/metadataeditor.js index 7f1e50b5f..3b656abab 100644 --- a/src/components/metadataeditor/metadataeditor.js +++ b/src/components/metadataeditor/metadataeditor.js @@ -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) { var btnRemoveFromEditorList = dom.parentWithClass(e.target, 'btnRemoveFromEditorList'); @@ -307,6 +263,12 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi 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) { 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); }); - 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('.btnSave').click(); @@ -349,8 +303,8 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } }); - context.removeEventListener('click', onEditorClick); - context.addEventListener('click', onEditorClick); + context.removeEventListener('submit', onEditorClick); + context.addEventListener('submit', onEditorClick); var form = context.querySelector('form'); form.removeEventListener('submit', onSubmit); @@ -1081,7 +1035,7 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi if (layoutManager.tv) { dialogOptions.size = 'fullscreen'; } else { - dialogOptions.size = 'medium-tall'; + dialogOptions.size = 'small'; } var dlg = dialogHelper.createDialog(dialogOptions); diff --git a/src/components/metadataeditor/metadataeditor.template.html b/src/components/metadataeditor/metadataeditor.template.html index 39894d4f6..4f693da46 100644 --- a/src/components/metadataeditor/metadataeditor.template.html +++ b/src/components/metadataeditor/metadataeditor.template.html @@ -1,5 +1,4 @@
-

${Edit}

@@ -8,8 +7,8 @@ ${Save} -
@@ -57,11 +56,13 @@
-
- -
-
- +
+
+ +
+
+ +
@@ -129,24 +130,28 @@
-
- +
+
+ +
+
+ +
-
- -
-
- -
-
- +
+
+ +
+
+ +
@@ -160,14 +165,16 @@

${HeaderSpecialEpisodeInfo}

-
- -
-
- -
-
- +
+
+ +
+
+ +
+
+ +
@@ -240,8 +247,11 @@

+
diff --git a/src/components/metadataeditor/personeditor.js b/src/components/metadataeditor/personeditor.js index 9fb6fdec6..511e54807 100644 --- a/src/components/metadataeditor/personeditor.js +++ b/src/components/metadataeditor/personeditor.js @@ -21,7 +21,7 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'require', 'paper-icon-but if (layoutManager.tv) { dialogOptions.size = 'fullscreen'; } else { - dialogOptions.size = 'medium-tall'; + dialogOptions.size = 'small'; } var dlg = dialogHelper.createDialog(dialogOptions); diff --git a/src/dlnaprofile.html b/src/dlnaprofile.html index 45182fa59..edaee0e6f 100644 --- a/src/dlnaprofile.html +++ b/src/dlnaprofile.html @@ -272,7 +272,7 @@
-
+

${HeaderDirectPlayProfile}

@@ -312,7 +312,7 @@
-
+

${HeaderTranscodingProfile}

@@ -394,7 +394,7 @@
-
+

${HeaderContainerProfile}

@@ -426,7 +426,7 @@
-
+

${HeaderCodecProfile}

@@ -455,7 +455,7 @@
-
+

${HeaderResponseProfile}

@@ -495,7 +495,7 @@
-
+

${HeaderIdentificationHeader}

@@ -525,7 +525,7 @@
-
+

${HeaderXmlDocumentAttribute}

@@ -548,7 +548,7 @@
-
+

${HeaderSubtitleProfile}

diff --git a/src/elements/emby-input/emby-input.css b/src/elements/emby-input/emby-input.css index 18ad37a87..195e68027 100644 --- a/src/elements/emby-input/emby-input.css +++ b/src/elements/emby-input/emby-input.css @@ -29,6 +29,27 @@ 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 { display: inline-block; margin-bottom: 0.25em; diff --git a/src/scheduledtask.html b/src/scheduledtask.html index 6cfc8ace4..6789e5990 100644 --- a/src/scheduledtask.html +++ b/src/scheduledtask.html @@ -20,7 +20,7 @@
-
+

${HeaderAddScheduledTaskTrigger}

diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 9895bbc05..ee47d676a 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1303,6 +1303,7 @@ "Runtime": "Runtime", "Saturday": "Saturday", "Save": "Save", + "SaveChanges": "Save changes", "SaveSubtitlesIntoMediaFolders": "Save subtitles into media folders", "SaveSubtitlesIntoMediaFoldersHelp": "Storing subtitles next to video files will allow them to be more easily managed.", "ScanForNewAndUpdatedFiles": "Scan for new and updated files", From 88706e794ab9f682fc70038cac4c7b9750e27b3c Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Mon, 11 May 2020 22:23:08 +0200 Subject: [PATCH 2/5] Add TV and Mobile compatibility to the new metadata dialog --- src/components/metadataeditor/metadataeditor.js | 5 +++++ src/components/metadataeditor/metadataeditor.template.html | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/metadataeditor/metadataeditor.js b/src/components/metadataeditor/metadataeditor.js index 3b656abab..41d400062 100644 --- a/src/components/metadataeditor/metadataeditor.js +++ b/src/components/metadataeditor/metadataeditor.js @@ -284,6 +284,11 @@ define(['itemHelper', 'dom', 'layoutManager', 'dialogHelper', 'datetime', 'loadi } }); + if (!layoutManager.desktop) { + context.querySelector('.btnBack').classList.remove('hide'); + context.querySelector('.btnClose').classList.add('hide'); + } + bindAll(context.querySelectorAll('.btnCancel'), 'click', function (event) { event.preventDefault(); closeDialog(false); diff --git a/src/components/metadataeditor/metadataeditor.template.html b/src/components/metadataeditor/metadataeditor.template.html index 4f693da46..4b4e2cf96 100644 --- a/src/components/metadataeditor/metadataeditor.template.html +++ b/src/components/metadataeditor/metadataeditor.template.html @@ -1,4 +1,5 @@
+

${Edit}

@@ -7,7 +8,7 @@ ${Save} -
From 3577bcc52b190c6d6f183ad4ad13a456854f9c12 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Sat, 16 May 2020 18:58:27 +0200 Subject: [PATCH 3/5] Fix alignment of dialog button on Chrome --- src/components/formdialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/formdialog.css b/src/components/formdialog.css index 2b2df601c..94695f486 100644 --- a/src/components/formdialog.css +++ b/src/components/formdialog.css @@ -55,7 +55,7 @@ /* Without this emby-checkbox is able to appear on top */ z-index: 1; align-items: flex-end; - justify-content: end; + justify-content: flex-end; flex-wrap: wrap; } From e6526de5dd6e4607c611e603e9f087eb3251f11d Mon Sep 17 00:00:00 2001 From: ferferga Date: Sat, 16 May 2020 23:49:12 +0200 Subject: [PATCH 4/5] Fix scrollbars on dialog windows --- src/components/channelmapper/channelmapper.js | 2 +- src/components/imagedownloader/imagedownloader.template.html | 2 +- src/components/imageeditor/imageeditor.template.html | 2 +- src/components/imageuploader/imageuploader.template.html | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/channelmapper/channelmapper.js b/src/components/channelmapper/channelmapper.js index 83ae4d09c..f2ad88e71 100644 --- a/src/components/channelmapper/channelmapper.js +++ b/src/components/channelmapper/channelmapper.js @@ -79,7 +79,7 @@ define(['dom', 'dialogHelper', 'loading', 'connectionManager', 'globalize', 'act function getEditorHtml() { var html = ''; - html += '
'; + html += '
'; html += '
'; html += ''; html += '

' + globalize.translate('HeaderChannels') + '

'; diff --git a/src/components/imagedownloader/imagedownloader.template.html b/src/components/imagedownloader/imagedownloader.template.html index 6ca2a2418..b88ea7392 100644 --- a/src/components/imagedownloader/imagedownloader.template.html +++ b/src/components/imagedownloader/imagedownloader.template.html @@ -5,7 +5,7 @@
-
+
diff --git a/src/components/imageeditor/imageeditor.template.html b/src/components/imageeditor/imageeditor.template.html index 1bf34f1aa..ce24e724b 100644 --- a/src/components/imageeditor/imageeditor.template.html +++ b/src/components/imageeditor/imageeditor.template.html @@ -5,7 +5,7 @@
-
+
diff --git a/src/components/imageuploader/imageuploader.template.html b/src/components/imageuploader/imageuploader.template.html index 75f572375..9c6a139c0 100644 --- a/src/components/imageuploader/imageuploader.template.html +++ b/src/components/imageuploader/imageuploader.template.html @@ -5,7 +5,7 @@
-
+
From 9ee05151f0843d67a7f0815a40ae41557406f15a Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Mon, 18 May 2020 19:14:34 +0200 Subject: [PATCH 5/5] Fix ellipsis in dialog cards --- src/components/cardbuilder/card.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 3cd038cd0..c24fcf6ba 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -306,6 +306,10 @@ button::-moz-focus-inner { text-align: left; } +.dialog .cardText { + text-overflow: initial; +} + .cardText-secondary { font-size: 86%; }