From 1a754cb2836b30b6b35a818ab39be16ebfcfe099 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 15 Dec 2015 15:10:41 -0500
Subject: [PATCH] rework dialog headers

---
 .../collectioneditor/collectioneditor.js      | 25 ++++++++-----------
 .../itemidentifier/itemidentifier.js          | 18 ++++---------
 .../itemidentifier.template.html              |  8 +++++-
 .../playlisteditor/playlisteditor.js          | 24 ++++++++----------
 .../thirdparty/paper-button-style.css         |  2 +-
 5 files changed, 33 insertions(+), 44 deletions(-)

diff --git a/dashboard-ui/components/collectioneditor/collectioneditor.js b/dashboard-ui/components/collectioneditor/collectioneditor.js
index 6fe88da392..d125aaabd0 100644
--- a/dashboard-ui/components/collectioneditor/collectioneditor.js
+++ b/dashboard-ui/components/collectioneditor/collectioneditor.js
@@ -119,12 +119,9 @@
 
         var html = '';
 
-        html += '<form class="newCollectionForm" style="max-width:100%;">';
-
-        html += '<br />';
+        html += '<form class="newCollectionForm" style="margin:auto;">';
 
         html += '<div class="fldSelectCollection">';
-        html += '<br />';
         html += '<label for="selectCollectionToAddTo">' + Globalize.translate('LabelSelectCollection') + '</label>';
         html += '<select id="selectCollectionToAddTo" data-mini="true"></select>';
         html += '</div>';
@@ -197,29 +194,27 @@
             });
 
             var html = '';
-            html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
-
             var title = items.length ? Globalize.translate('HeaderAddToCollection') : Globalize.translate('HeaderNewCollection');
 
-            html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + title + '</div>';
-            html += '</h2>';
-
-            html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
-            html += getEditorHtml();
+            html += '<div class="dialogHeader">';
+            html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
+            html += '<div class="dialogHeaderTitle">';
+            html += title;
             html += '</div>';
+            html += '</div>';
+
+            html += getEditorHtml();
 
             dlg.innerHTML = html;
             document.body.appendChild(dlg);
 
-            var editorContent = dlg.querySelector('.editorContent');
-            initEditor(editorContent, items);
+            initEditor(dlg, items);
 
             $(dlg).on('iron-overlay-closed', onDialogClosed);
 
             paperDialogHelper.open(dlg);
 
-            $('.btnCloseDialog', dlg).on('click', function () {
+            $('.btnCancel', dlg).on('click', function () {
 
                 paperDialogHelper.close(dlg);
             });
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.js b/dashboard-ui/components/itemidentifier/itemidentifier.js
index ccbdf36c6e..d45cd2f0a3 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.js
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.js
@@ -7,7 +7,7 @@
 
     function onIdentificationFormSubmitted() {
 
-        var page = $(this).parents('.editorContent');
+        var page = $(this).parents('paper-dialog');
 
         searchForIdentificationResults(page);
         return false;
@@ -193,7 +193,7 @@
 
     function onIdentificationOptionsSubmit() {
 
-        var page = $(this).parents('.editorContent');
+        var page = $(this).parents('paper-dialog');
 
         submitIdentficationResult(page);
         return false;
@@ -273,7 +273,7 @@
 
             $('.identifyProviderIds', page).html(html).trigger('create');
 
-            $('.identificationHeader', page).html(Globalize.translate('HeaderIdentify'));
+            page.querySelector('.dialogHeaderTitle').innerHTML = Globalize.translate('HeaderIdentify');
         });
     }
 
@@ -294,14 +294,7 @@
                 var dlg = paperDialogHelper.createDialog();
 
                 var html = '';
-                html += '<h2 class="dialogHeader">';
-                html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
-                html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + Globalize.translate('HeaderIdentifyItem') + '</div>';
-                html += '</h2>';
-
-                html += '<div class="editorContent">';
                 html += Globalize.translateDocument(template);
-                html += '</div>';
 
                 dlg.innerHTML = html;
                 document.body.appendChild(dlg);
@@ -311,10 +304,9 @@
 
                 paperDialogHelper.open(dlg);
 
-                var editorContent = dlg.querySelector('.editorContent');
-                initEditor(editorContent);
+                initEditor(dlg);
 
-                $('.btnCloseDialog', dlg).on('click', function () {
+                $('.btnCancel', dlg).on('click', function () {
 
                     paperDialogHelper.close(dlg);
                 });
diff --git a/dashboard-ui/components/itemidentifier/itemidentifier.template.html b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
index 180eda9b5a..e3f9d74f75 100644
--- a/dashboard-ui/components/itemidentifier/itemidentifier.template.html
+++ b/dashboard-ui/components/itemidentifier/itemidentifier.template.html
@@ -1,4 +1,10 @@
-<form class="popupIdentifyForm" style="margin:auto;">
+<div class="dialogHeader">
+    <paper-icon-button icon="close" class="btnCancel"></paper-icon-button>
+    <div class="dialogHeaderTitle">
+    </div>
+</div>
+
+<form class="popupIdentifyForm" style="margin:auto;">
 
     <p>${HeaderIdentifyItemHelp}</p>
 
diff --git a/dashboard-ui/components/playlisteditor/playlisteditor.js b/dashboard-ui/components/playlisteditor/playlisteditor.js
index 5513991913..96362c939d 100644
--- a/dashboard-ui/components/playlisteditor/playlisteditor.js
+++ b/dashboard-ui/components/playlisteditor/playlisteditor.js
@@ -127,12 +127,9 @@
 
         var html = '';
 
-        html += '<form style="max-width:100%;">';
-
-        html += '<br />';
+        html += '<form style="margin:auto;">';
 
         html += '<div class="fldSelectPlaylist">';
-        html += '<br />';
         html += '<label for="selectPlaylistToAddTo">' + Globalize.translate('LabelSelectPlaylist') + '</label>';
         html += '<select id="selectPlaylistToAddTo" data-mini="true"></select>';
         html += '</div>';
@@ -202,29 +199,28 @@
             });
 
             var html = '';
-            html += '<h2 class="dialogHeader">';
-            html += '<paper-fab icon="arrow-back" mini class="btnCloseDialog"></paper-fab>';
 
             var title = Globalize.translate('HeaderAddToPlaylist');
 
-            html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + title + '</div>';
-            html += '</h2>';
-
-            html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
-            html += getEditorHtml();
+            html += '<div class="dialogHeader">';
+            html += '<paper-icon-button icon="close" class="btnCancel"></paper-icon-button>';
+            html += '<div class="dialogHeaderTitle">';
+            html += title;
             html += '</div>';
+            html += '</div>';
+
+            html += getEditorHtml();
 
             dlg.innerHTML = html;
             document.body.appendChild(dlg);
 
-            var editorContent = dlg.querySelector('.editorContent');
-            initEditor(editorContent, items);
+            initEditor(dlg, items);
 
             $(dlg).on('iron-overlay-closed', onDialogClosed);
 
             paperDialogHelper.open(dlg);
 
-            $('.btnCloseDialog', dlg).on('click', function () {
+            $('.btnCancel', dlg).on('click', function () {
 
                 paperDialogHelper.close(dlg);
             });
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index b615a90e66..091b01657c 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -572,7 +572,7 @@ paper-dialog paper-radio-group paper-radio-button {
 
 div.dialogHeader {
     margin: 0 0 2.5em!important;
-    padding: .35em 1em;
+    padding: .35em .5em;
     background-color: #101010;
     display: flex;
     align-items: center;