From b1feee2d1c0c74bd5132d836fd4bb0ddd3efa280 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 8 Aug 2016 14:13:52 -0400
Subject: [PATCH] update components

---
 .../emby-webcomponents/cardbuilder/card.css       | 15 +++++----------
 .../emby-webcomponents/cardbuilder/cardbuilder.js |  2 +-
 .../emby-webcomponents/listview/listview.css      | 15 +++++++--------
 .../emby-webcomponents/listview/listview.js       | 14 ++++++++++++--
 .../subtitleeditor/subtitleeditor.js              |  4 +++-
 .../directorybrowser/directorybrowser.js          |  1 -
 .../components/imagedownloader/imagedownloader.js |  1 -
 .../components/imageeditor/imageeditor.js         |  1 -
 .../components/imageuploader/imageuploader.js     |  1 -
 .../medialibrarycreator/medialibrarycreator.js    |  6 +++---
 .../medialibraryeditor/medialibraryeditor.js      |  1 -
 dashboard-ui/mypreferencesmenu.html               | 10 +++++-----
 dashboard-ui/scripts/dashboardpage.js             |  4 ++--
 dashboard-ui/scripts/registrationservices.js      |  1 -
 dashboard-ui/scripts/tvshows.js                   |  4 ----
 dashboard-ui/scripts/userprofilespage.js          |  2 +-
 dashboard-ui/thirdparty/paper-button-style.css    | 11 -----------
 17 files changed, 39 insertions(+), 54 deletions(-)

diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index 3ee3c59bec..50b7c0a6cb 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -172,6 +172,7 @@ button.card {
     position: relative;
     background-clip: content-box !important;
     border-radius: 2px;
+    color: #fff;
 }
 
 .visualCardBox .cardImageContainer {
@@ -259,6 +260,7 @@ button.cardImageContainer {
     z-index: 1;
     overflow: hidden;
     max-width: 100%;
+    color: #fff;
 }
 
 .innerCardFooterClear {
@@ -274,16 +276,9 @@ button.cardImageContainer {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-}
-
-.cardText {
     color: inherit;
 }
 
-.innerCardFooter .cardText, .cardImageContainer .cardText {
-    color: #fff;
-}
-
 .cardTextCentered {
     text-align: center;
 }
@@ -310,7 +305,7 @@ button.cardImageContainer {
     color: #fff;
 }
 
-.card .indicators {
+.cardIndicators {
     right: 2.5%;
     top: 2.5%;
     position: absolute;
@@ -318,12 +313,12 @@ button.cardImageContainer {
     align-items: center;
 }
 
-.portraitCard .indicators {
+.portraitCardIndicators {
     right: 3%;
     top: 2%;
 }
 
-.backdropCard .indicators {
+.backdropCardIndicators {
     right: 1.5%;
     top: 2.8%;
 }
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index d78201eb3a..0b4b249edc 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -1102,7 +1102,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
             }
 
             if (indicatorsHtml) {
-                cardImageContainerOpen += '<div class="indicators">' + indicatorsHtml + '</div>';
+                cardImageContainerOpen += '<div class="cardIndicators ' + options.shape + 'CardIndicators">' + indicatorsHtml + '</div>';
             }
 
             var forceName = imgInfo.forceName;
diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
index 1e707ef583..08c2301b5c 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.css
@@ -12,12 +12,15 @@
     text-align: left;
     padding: .25em 1.15em;
     line-height: 160%;
-    border-bottom: 1px solid #2a2a2a;
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
 }
 
+.listItem-border {
+    border-bottom: 1px solid #2a2a2a;
+}
+
 .listItem-button {
     width: 100%;
 }
@@ -131,11 +134,11 @@
     color: inherit !important;
 }
 
-.layout-tv .listItem {
+.listItem-focusscale {
     transition: transform .2s ease-out;
 }
 
-    .layout-tv .listItem:focus {
+    .listItem-focusscale:focus {
         transform: scale(1.025, 1.025);
     }
 
@@ -150,11 +153,7 @@
     background-color: transparent !important;
 }
 
-.paperList .listItem {
-    border-bottom: 0;
-}
-
-.layout-tv .listItemMediaInfo {
+.listItemMediaInfo-padded {
     margin: .5em 0;
 }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
index 45ef17286b..673f1c1026 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/listview/listview.js
@@ -178,12 +178,16 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
                 }
             }
 
-            var cssClass = "listItem listItem-nosidepadding";
+            var cssClass = "listItem listItem-nosidepadding listItem-border";
 
             if (clickEntireItem) {
                 cssClass += ' itemAction listItem-button';
             }
 
+            if (layoutManager.tv) {
+                cssClass += ' listItem-focusscale';
+            }
+
             var downloadWidth = 80;
 
             if (isLargeStyle) {
@@ -281,7 +285,13 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
             html += getTextLinesHtml(textlines, isLargeStyle);
 
             if (!enableSideMediaInfo) {
-                html += '<div class="secondary listItemMediaInfo listItemBodyText">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
+
+                var mediaInfoClass = 'secondary listItemMediaInfo listItemBodyText';
+                if (layoutManager.tv) {
+                    mediaInfoClass += ' listItemMediaInfo-padded';
+                }
+
+                html += '<div class="' + mediaInfoClass + '">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
             }
 
             if (enableOverview && item.Overview) {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
index 5d9dd465c8..82a6703e9b 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js
@@ -117,7 +117,9 @@
                 var itemHtml = '';
 
                 var tagName = layoutManager.tv ? 'button' : 'div';
-                var className = layoutManager.tv && s.Path ? 'listItem btnDelete' : 'listItem';
+                var className = layoutManager.tv && s.Path ? 'listItem listItem-focusscale btnDelete' : 'listItem';
+
+                className += ' listItem-noborder';
 
                 itemHtml += '<' + tagName + ' class="' + className + '" data-index="' + s.Index + '">';
 
diff --git a/dashboard-ui/components/directorybrowser/directorybrowser.js b/dashboard-ui/components/directorybrowser/directorybrowser.js
index 7299983e69..1eec1fe597 100644
--- a/dashboard-ui/components/directorybrowser/directorybrowser.js
+++ b/dashboard-ui/components/directorybrowser/directorybrowser.js
@@ -233,7 +233,6 @@
 
                 dlg.classList.add('ui-body-a');
                 dlg.classList.add('background-theme-a');
-                dlg.classList.add('popupEditor');
 
                 dlg.classList.add('directoryPicker');
 
diff --git a/dashboard-ui/components/imagedownloader/imagedownloader.js b/dashboard-ui/components/imagedownloader/imagedownloader.js
index f1ee46c265..8f1b610c8e 100644
--- a/dashboard-ui/components/imagedownloader/imagedownloader.js
+++ b/dashboard-ui/components/imagedownloader/imagedownloader.js
@@ -308,7 +308,6 @@
 
             dlg.classList.add('ui-body-' + theme);
             dlg.classList.add('background-theme-' + theme);
-            dlg.classList.add('popupEditor');
 
             var html = '';
             html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/components/imageeditor/imageeditor.js b/dashboard-ui/components/imageeditor/imageeditor.js
index 47300373d6..cfaee66117 100644
--- a/dashboard-ui/components/imageeditor/imageeditor.js
+++ b/dashboard-ui/components/imageeditor/imageeditor.js
@@ -283,7 +283,6 @@
 
                 dlg.classList.add('ui-body-' + theme);
                 dlg.classList.add('background-theme-' + theme);
-                dlg.classList.add('popupEditor');
 
                 var html = '';
                 html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/components/imageuploader/imageuploader.js b/dashboard-ui/components/imageuploader/imageuploader.js
index a5744b30e3..66b330fe54 100644
--- a/dashboard-ui/components/imageuploader/imageuploader.js
+++ b/dashboard-ui/components/imageuploader/imageuploader.js
@@ -145,7 +145,6 @@
 
             dlg.classList.add('ui-body-' + theme);
             dlg.classList.add('background-theme-' + theme);
-            dlg.classList.add('popupEditor');
 
             var html = '';
             html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/components/medialibrarycreator/medialibrarycreator.js b/dashboard-ui/components/medialibrarycreator/medialibrarycreator.js
index 9cf057f71d..6e57bee07a 100644
--- a/dashboard-ui/components/medialibrarycreator/medialibrarycreator.js
+++ b/dashboard-ui/components/medialibrarycreator/medialibrarycreator.js
@@ -92,7 +92,7 @@
 
     function onAddButtonClick() {
 
-        var page = $(this).parents('.popupEditor')[0];
+        var page = $(this).parents('.dlg-librarycreator')[0];
 
         require(['directorybrowser'], function (directoryBrowser) {
 
@@ -168,7 +168,7 @@
 
             return p.toLowerCase() != location.toLowerCase();
         });
-        var page = $(this).parents('.popupEditor')[0];
+        var page = $(this).parents('.dlg-librarycreator')[0];
         renderPaths(page);
     }
 
@@ -207,7 +207,7 @@
 
                 dlg.classList.add('ui-body-a');
                 dlg.classList.add('background-theme-a');
-                dlg.classList.add('popupEditor');
+                dlg.classList.add('dlg-librarycreator');
 
                 dlg.innerHTML = Globalize.translateDocument(template);
                 document.body.appendChild(dlg);
diff --git a/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
index 10555ae2a7..a23e593fb3 100644
--- a/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
+++ b/dashboard-ui/components/medialibraryeditor/medialibraryeditor.js
@@ -161,7 +161,6 @@
 
                 dlg.classList.add('ui-body-a');
                 dlg.classList.add('background-theme-a');
-                dlg.classList.add('popupEditor');
 
                 var html = '';
                 html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/mypreferencesmenu.html b/dashboard-ui/mypreferencesmenu.html
index e656bd9562..5ad8f2bd8b 100644
--- a/dashboard-ui/mypreferencesmenu.html
+++ b/dashboard-ui/mypreferencesmenu.html
@@ -6,7 +6,7 @@
             <div>
                 <a href="#" class="clearLink lnkDisplayPreferences">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">tv</i></button>
+                        <button type="button" is="emby-button" class="fab mini autoSize blue listItemButton" item-icon><i class="md-icon">tv</i></button>
                         <div class="listItemBody two-line">
                             <div>${ButtonDisplaySettings}</div>
                             <div class="secondary">${ButtonDisplaySettingsHelp}</div>
@@ -16,7 +16,7 @@
 
                 <a href="#" class="clearLink lnkHomeScreenPreferences">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize red" item-icon><i class="md-icon">home</i></button>
+                        <button type="button" is="emby-button" class="fab mini autoSize red listItemButton" item-icon><i class="md-icon">home</i></button>
                         <div class="listItemBody two-line">
                             <div>${ButtonHomeScreenSettings}</div>
                             <div class="secondary">${ButtonHomeScreenSettingsHelp}</div>
@@ -26,7 +26,7 @@
 
                 <a href="#" class="clearLink lnkLanguagePreferences">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize green" item-icon><i class="md-icon">play_circle_filled</i></button>
+                        <button type="button" is="emby-button" class="fab mini autoSize green listItemButton" item-icon><i class="md-icon">play_circle_filled</i></button>
                         <div class="listItemBody two-line">
                             <div>${ButtonPlaybackSettings}</div>
                             <div class="secondary">${ButtonPlaybackSettingsHelp}</div>
@@ -36,7 +36,7 @@
 
                 <a href="#" class="clearLink lnkMyProfile">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize orange" item-icon><i class="md-icon">person</i></button>
+                        <button type="button" is="emby-button" class="fab mini autoSize orange listItemButton" item-icon><i class="md-icon">person</i></button>
                         <div class="listItemBody two-line">
                             <div>${ButtonProfile}</div>
                             <div class="secondary">${ButtonProfileHelp}</div>
@@ -46,7 +46,7 @@
 
                 <a href="#" class="clearLink lnkSync hide">
                     <div class="listItem">
-                        <button type="button" is="emby-button" class="fab mini autoSize" style="background-color: #673AB7;" item-icon><i class="md-icon">sync</i></button>
+                        <button type="button" is="emby-button" class="fab mini autoSize listItemButton" style="background-color: #673AB7;" item-icon><i class="md-icon">sync</i></button>
                         <div class="listItemBody two-line">
                             <div>${ButtonSyncSettings}</div>
                             <div class="secondary">${ButtonSyncSettingsHelp}</div>
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index ee86c4a5a4..5c01e2d734 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -151,7 +151,7 @@
                     var itemHtml = '';
 
                     itemHtml += '<a class="clearLink" href="' + item.Link + '" target="_blank">';
-                    itemHtml += '<div class="listItem">';
+                    itemHtml += '<div class="listItem listItem-noborder">';
 
                     itemHtml += '<i class="listItemIcon md-icon">dvr</i>';
 
@@ -1034,7 +1034,7 @@
 
             var html = '';
 
-            html += '<div class="listItem">';
+            html += '<div class="listItem listItem-noborder">';
 
             var color = entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn' ? '#cc0000' : '#52B54B';
 
diff --git a/dashboard-ui/scripts/registrationservices.js b/dashboard-ui/scripts/registrationservices.js
index 1ec9290571..f1059f66e5 100644
--- a/dashboard-ui/scripts/registrationservices.js
+++ b/dashboard-ui/scripts/registrationservices.js
@@ -99,7 +99,6 @@
 
             dlg.classList.add('ui-body-b');
             dlg.classList.add('background-theme-b');
-            dlg.classList.add('popupEditor');
 
             var html = '';
             html += '<h2 class="dialogHeader">';
diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js
index 4d4cdb1576..2f66b3c960 100644
--- a/dashboard-ui/scripts/tvshows.js
+++ b/dashboard-ui/scripts/tvshows.js
@@ -265,10 +265,6 @@
                         name: Globalize.translate('OptionParentalRating'),
                         id: 'OfficialRating,SortName'
                     },
-                    {
-                        name: Globalize.translate('OptionPlayCount'),
-                        id: 'PlayCount,SortName'
-                    },
                     {
                         name: Globalize.translate('OptionReleaseDate'),
                         id: 'PremiereDate,SortName'
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index 1f0c27d576..826615f998 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -122,7 +122,7 @@
         html += '<div class="' + imageClass + '" style="background-image:url(\'' + imgUrl + '\');">';
 
         if (user.ConnectUserId && addConnectIndicator) {
-            html += '<div class="indicators">';
+            html += '<div class="cardIndicators">';
             html += '<div class="playedIndicator" title="' + Globalize.translate('TooltipLinkedToEmbyConnect') + '"><i class="md-icon playedIndicatorIcon indicatorIcon">cloud</i></div>';
             html += "</div>";
         }
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index cd807751fd..f9783b1f69 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -176,22 +176,11 @@ div.dialogHeader {
     margin-left: .75em;
 }
 
-.dialog.popupEditor h2.dialogHeader {
-    font-weight: inherit !important;
-    line-height: 36px;
-    padding: 0 1em;
-    margin-top: .7em;
-}
-
 .formDialogHeader button {
     margin-top: 0;
     margin-bottom: 0;
 }
 
-.dialog.popupEditor {
-    padding-bottom: 100px;
-}
-
 .formDialog.background-theme-b {
     background-color: #181818;
 }