From cd9c36d8e41b00daed586fccf76b743ac30be18e Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 15 Apr 2016 15:37:34 -0400
Subject: [PATCH] update metadata config page

---
 dashboard-ui/css/librarymenu.css              |  2 +-
 dashboard-ui/metadataimages.html              |  2 +-
 dashboard-ui/scripts/metadataimagespage.js    | 44 ++++++++++---------
 .../thirdparty/paper-button-style.css         |  2 +-
 4 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css
index fa7d0e96a6..c99f2111cd 100644
--- a/dashboard-ui/css/librarymenu.css
+++ b/dashboard-ui/css/librarymenu.css
@@ -510,7 +510,7 @@ body:not(.dashboardDocument) .btnNotifications {
 }
 
 .adminDrawerPanel .sidebarLink.selectedSidebarLink {
-    background: #66BB6A !important;
+    background: #52B54B !important;
     color: #fff !important;
 }
 
diff --git a/dashboard-ui/metadataimages.html b/dashboard-ui/metadataimages.html
index fc25fb98d6..a297689277 100644
--- a/dashboard-ui/metadataimages.html
+++ b/dashboard-ui/metadataimages.html
@@ -1,4 +1,4 @@
-<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs" data-require="emby-collapsible,scripts/metadataimagespage,jqmcheckbox,paper-checkbox,paper-input">
+<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs" data-require="emby-collapsible,scripts/metadataimagespage,jqmcheckbox,paper-checkbox,paper-input,paper-fab,paper-icon-item,paper-item-body">
 
     <div data-role="content">
 
diff --git a/dashboard-ui/scripts/metadataimagespage.js b/dashboard-ui/scripts/metadataimagespage.js
index 5c6a52e231..504d8054bc 100644
--- a/dashboard-ui/scripts/metadataimagespage.js
+++ b/dashboard-ui/scripts/metadataimagespage.js
@@ -235,7 +235,7 @@
         }
 
         html += '<div class="paperCheckboxListLabel">' + Globalize.translate('LabelMetadataSavers') + '</div>';
-        html += '<div class="paperCheckboxList">';
+        html += '<div class="paperCheckboxList paperList">';
 
         for (var i = 0, length = plugins.length; i < length; i++) {
 
@@ -351,38 +351,40 @@
             return;
         }
 
-        html += '<div class="ui-controlgroup-label" style="margin-bottom:0;padding-left:2px;">' + Globalize.translate('LabelMetadataReaders') + '</div>';
-        html += '<ul data-role="listview" data-inset="true" data-mini="true" style="margin-top:.5em;margin-bottom:.5em;">';
+        html += '<div class="paperCheckboxListLabel">' + Globalize.translate('LabelMetadataReaders') + '</div>';
+        html += '<div class="paperList">';
 
         for (var i = 0, length = plugins.length; i < length; i++) {
 
             var plugin = plugins[i];
 
-            html += '<li data-mini="true" class="localReaderOption" data-pluginname="' + plugin.Name + '">';
+            html += '<paper-icon-item class="localReaderOption" data-pluginname="' + plugin.Name + '">';
+
+            html += '<paper-fab mini style="background:#52B54B;" icon="live-tv" item-icon></paper-fab>';
+
+            html += '<paper-item-body>';
+
+            html += '<div>';
+            html += plugin.Name;
+            html += '</div>';
+
+            html += '</paper-item-body>';
 
             if (i > 0) {
-                html += '<a href="#" style="font-weight:normal;">' + plugin.Name + '</a>';
-
-                html += '<a class="btnLocalReaderUp btnLocalReaderMove" data-pluginindex="' + i + '" href="#" style="font-weight:normal;" data-icon="arrow-u">' + Globalize.translate('ButtonUp') + '</a>';
+                html += '<paper-icon-button title="' + Globalize.translate('ButtonUp') + '" icon="keyboard-arrow-up" class="btnLocalReaderUp btnLocalReaderMove" data-pluginindex="' + i + '"></paper-icon-button>';
             }
             else if (plugins.length > 1) {
 
-                html += '<a href="#" style="font-weight:normal;">' + plugin.Name + '</a>';
-
-                html += '<a class="btnLocalReaderDown btnLocalReaderMove" data-pluginindex="' + i + '" href="#" style="font-weight:normal;" data-icon="arrow-d">' + Globalize.translate('ButtonDown') + '</a>';
+                html += '<paper-icon-button title="' + Globalize.translate('ButtonDown') + '" icon="keyboard-arrow-down" class="btnLocalReaderDown btnLocalReaderMove" data-pluginindex="' + i + '"></paper-icon-button>';
             }
-            else {
 
-                html += plugin.Name;
-
-            }
-            html += '</li>';
+            html += '</paper-icon-item>';
         }
 
-        html += '</ul>';
+        html += '</div>';
         html += '<div class="fieldDescription">' + Globalize.translate('LabelMetadataReadersHelp') + '</div>';
 
-        $('.metadataReaders', page).html(html).show().trigger('create');
+        $('.metadataReaders', page).html(html).show();
     }
 
     function loadPage(page) {
@@ -536,7 +538,7 @@
         $('.metadataReaders', page).on('click', '.btnLocalReaderMove', function () {
 
             var li = $(this).parents('.localReaderOption');
-            var ul = li.parents('ul');
+            var list = li.parents('.paperList');
 
             if ($(this).hasClass('btnLocalReaderDown')) {
 
@@ -551,12 +553,12 @@
                 li.remove().insertBefore(prev);
             }
 
-            $('.localReaderOption', ul).each(function () {
+            $('.localReaderOption', list).each(function () {
 
                 if ($(this).prev('.localReaderOption').length) {
-                    $('.btnLocalReaderMove', this).addClass('btnLocalReaderUp').removeClass('btnLocalReaderDown').attr('data-icon', 'arrow-u').removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u');
+                    $('.btnLocalReaderMove', this).addClass('btnLocalReaderUp').removeClass('btnLocalReaderDown').attr('icon', 'keyboard-arrow-up');
                 } else {
-                    $('.btnLocalReaderMove', this).addClass('btnLocalReaderDown').removeClass('btnLocalReaderUp').attr('data-icon', 'arrow-d').removeClass('ui-icon-arrow-u').addClass('ui-icon-arrow-d');
+                    $('.btnLocalReaderMove', this).addClass('btnLocalReaderDown').removeClass('btnLocalReaderUp').attr('icon', 'keyboard-arrow-down');
                 }
 
             });
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index 674130c5b0..05741a2888 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -465,7 +465,7 @@ paper-textarea.mono textarea {
 }
 
 .paperList {
-    padding-top: 12px;
+    padding: .5em 0;
     margin: 12px auto;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
     background-color: #fff;