From 4ef47844d863c6907009c0b6e22c3e5f3645aefb Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 21 Sep 2015 14:39:18 -0400
Subject: [PATCH] update tab fade

---
 dashboard-ui/css/librarybrowser.css          |  6 ++-
 dashboard-ui/edititemmetadata.html           | 42 +++++++++-----------
 dashboard-ui/itemdetails.html                | 16 ++++----
 dashboard-ui/scripts/librarybrowser.js       | 19 ++++++---
 dashboard-ui/scripts/tvrecommended.js        |  2 +-
 dashboard-ui/{tvrecommended.html => tv.html} | 22 +++++-----
 6 files changed, 56 insertions(+), 51 deletions(-)
 rename dashboard-ui/{tvrecommended.html => tv.html} (92%)

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 0ebcab950..245b1bd48 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -1,4 +1,8 @@
-/* Fixes the issue of jqm panels altering the page background. */
+.hidingAnimatedTab{
+    visibility: hidden;
+}
+
+/* Fixes the issue of jqm panels altering the page background. */
 .ui-panel-content-wrap {
     background: none !important;
 }
diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html
index f2c1ebcae..736b32d65 100644
--- a/dashboard-ui/edititemmetadata.html
+++ b/dashboard-ui/edititemmetadata.html
@@ -334,7 +334,7 @@
                 </form>
             </div>
         </div>
-        <div data-role="popup" class="popupIdentify popupIdentifyItem popup" data-theme="a">
+        <div data-role="popup" class="popupIdentify popupIdentifyItem popup" data-theme="b">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
 
@@ -362,12 +362,10 @@
                     </div>
 
                     <p>
-                        <button type="submit" data-theme="b" data-icon="search" data-mini="true">
-                            ${ButtonSearch}
-                        </button>
-                        <button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">
-                            ${ButtonCancel}
+                        <button type="submit" data-role="none" class="clearButton">
+                            <paper-button raised class="submit block"><iron-icon icon="search"></iron-icon><span>${ButtonSearch}</span></paper-button>
                         </button>
+                        <paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
                     </p>
                 </form>
 
@@ -386,18 +384,16 @@
                         <input id="chkIdentifyReplaceImages" type="checkbox" checked="checked" data-mini="true" />
                     </div>
                     <br />
-                    <button type="submit" data-theme="b" data-icon="check" data-mini="true">
-                        ${ButtonSubmit}
-                    </button>
-                    <button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">
-                        ${ButtonCancel}
+                    <button type="submit" data-role="none" class="clearButton">
+                        <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></paper-button>
                     </button>
+                    <paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
                 </form>
             </div>
 
         </div>
 
-        <div data-role="popup" id="popupEditPerson" class="popup" data-theme="a">
+        <div data-role="popup" id="popupEditPerson" class="popup" data-theme="b">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderPersonInfo}</h3>
@@ -406,11 +402,13 @@
             <div data-role="content">
                 <form class="popupEditPersonForm">
 
+                    <br />
                     <div>
                         <label for="txtPersonName">${LabelName}</label>
                         <input type="text" id="txtPersonName" required="required" />
                     </div>
 
+                    <br />
                     <div>
                         <label for="selectPersonType">${LabelType}</label>
                         <select id="selectPersonType" data-mini="true">
@@ -423,7 +421,7 @@
                             <option value="Writer">${OptionWriter}</option>
                         </select>
                     </div>
-
+                    <br />
                     <div>
                         <label for="txtPersonRole">${LabelPersonRole}</label>
                         <input type="text" id="txtPersonRole" />
@@ -432,19 +430,17 @@
                     <br />
                     <input type="hidden" id="fldPersonIndex" />
                     <p>
-                        <button type="submit" data-theme="b" data-icon="check" data-mini="true">
-                            ${ButtonOk}
-                        </button>
-                        <button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
-                            ${ButtonCancel}
+                        <button type="submit" data-role="none" class="clearButton">
+                            <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
                         </button>
+                        <paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
                     </p>
                 </form>
             </div>
 
         </div>
 
-        <div data-role="popup" class="popup popupAdvancedRefresh" data-theme="a">
+        <div data-role="popup" class="popup popupAdvancedRefresh" data-theme="b">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
                 <h3>${HeaderRefreshMetadata}</h3>
@@ -474,12 +470,10 @@
                     </div>
                     <br />
                     <p>
-                        <button type="submit" data-theme="b" data-icon="check" data-mini="true">
-                            ${ButtonOk}
-                        </button>
-                        <button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
-                            ${ButtonCancel}
+                        <button type="submit" data-role="none" class="clearButton">
+                            <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
                         </button>
+                        <paper-button raised class="cancel block btnCancel" onclick="jQuery(this).parents('.popup').popup('close');"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
                     </p>
                 </form>
             </div>
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 4a98d7f19..47d728f30 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -8,14 +8,14 @@
 
         <div id="tvShowsTabs" class="itemTabs" style="display: none;">
             <div class="libraryViewNav scopedLibraryViewNav">
-                <a href="tvrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
-                <a href="tvlatest.html"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
-                <a href="tvupcoming.html"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
-                <a href="tvshows.html" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
-                <a href="episodes.html" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
-                <a href="tvgenres.html"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-                <a href="tvpeople.html" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-                <a href="tvstudios.html" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
+                <a href="tv.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
+                <a href="tv.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
+                <a href="tv.html?tab=2"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
+                <a href="tv.html?tab=3" class="ui-btn-active"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
+                <a href="tv.html?tab=4" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
+                <a href="tv.html?tab=5"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
+                <a href="tv.html?tab=6" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
+                <a href="tv.html?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
             </div>
         </div>
 
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 909d6b9b6..5a3efc916 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -270,21 +270,28 @@
                 }, delay);
             });
 
-            function fadeOutLeftBig(elem, iterations) {
+            function fadeOutLeft(elem, iterations) {
                 var keyframes = [{ opacity: '1', transform: 'none', offset: 0 },
-                  { opacity: '0', transform: 'translate3d(-2000px, 0, 0)', offset: 1 }];
-                var timing = { duration: 700, iterations: iterations };
+                  { opacity: '0', transform: 'translate3d(-100%, 0, 0)', offset: 1 }];
+                var timing = { duration: 600, iterations: iterations };
                 return elem.animate(keyframes, timing);
             }
-
             if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
                 tabs.addEventListener('iron-select', function () {
 
                     var selected = pages.selected;
                     if (selected != null) {
                         var newValue = this.selected;
-                        fadeOutLeftBig(pages.querySelectorAll('.pageTabContent')[selected], 1).onfinish = function () {
+                        var currentTab = pages.querySelectorAll('.pageTabContent')[selected];
+
+                        if ($.browser.safari) {
+                            // Need this it flashes the previous content after the animation
+                            currentTab.classList.add('hidingAnimatedTab');
+                        }
+                        fadeOutLeft(currentTab, 1).onfinish = function () {
                             pages.selected = newValue;
+
+                            setTimeout(function () { currentTab.classList.remove('hidingAnimatedTab'); }, 500);
                         };
                     }
                     else {
@@ -965,7 +972,7 @@
                 }
 
                 if (item.CollectionType == 'tvshows') {
-                    return 'tvrecommended.html?topParentId=' + item.Id;
+                    return 'tv.html?topParentId=' + item.Id;
                 }
 
                 if (item.CollectionType == 'music') {
diff --git a/dashboard-ui/scripts/tvrecommended.js b/dashboard-ui/scripts/tvrecommended.js
index 953c7f344..0a324e487 100644
--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@@ -272,7 +272,7 @@
         var tabs = page.querySelector('paper-tabs');
         var pages = page.querySelector('neon-animated-pages');
 
-        var baseUrl = 'tvrecommended.html';
+        var baseUrl = 'tv.html';
         var topParentId = LibraryMenu.getTopParentId();
         if (topParentId) {
             baseUrl += '?topParentId=' + topParentId;
diff --git a/dashboard-ui/tvrecommended.html b/dashboard-ui/tv.html
similarity index 92%
rename from dashboard-ui/tvrecommended.html
rename to dashboard-ui/tv.html
index 44b90ba35..af05b4f9f 100644
--- a/dashboard-ui/tvrecommended.html
+++ b/dashboard-ui/tv.html
@@ -4,7 +4,7 @@
     <title>Emby</title>
 </head>
 <body>
-    <div id="tvRecommendedPage" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series" data-require="jqmpanel,jqmcollapsible,scripts/tvrecommended">
+    <div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series" data-require="jqmpanel,jqmcollapsible,scripts/tvrecommended">
 
         <div class="libraryViewNav libraryViewNavWithMinHeight">
             <paper-tabs hidescrollbuttons noink>
@@ -12,20 +12,20 @@
                 <paper-tab><iron-icon icon="new-releases"></iron-icon>${TabLatest}</paper-tab>
                 <paper-tab><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</paper-tab>
                 <paper-tab><iron-icon icon="live-tv"></iron-icon>${TabShows}</paper-tab>
-                <paper-tab><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</paper-tab>
-                <paper-tab class="tvEpisodesTab"><iron-icon icon="video-library"></iron-icon>${TabGenres}</paper-tab>
+                <paper-tab class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</paper-tab>
+                <paper-tab><iron-icon icon="video-library"></iron-icon>${TabGenres}</paper-tab>
                 <paper-tab class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</paper-tab>
                 <paper-tab class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</paper-tab>
             </paper-tabs>
             <div class="legacyTabs scopedLibraryViewNav">
-                <a href="tvrecommended.html">${TabSuggestions}</a>
-                <a href="tvrecommended.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
-                <a href="tvrecommended.html?tab=2"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
-                <a href="tvrecommended.html?tab=3"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
-                <a href="tvrecommended.html?tab=4" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
-                <a href="tvrecommended.html?tab=5"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
-                <a href="tvrecommended.html?tab=6" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
-                <a href="tvrecommended.html?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
+                <a href="tv.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
+                <a href="tv.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
+                <a href="tv.html?tab=2"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a>
+                <a href="tv.html?tab=3"><iron-icon icon="live-tv"></iron-icon>${TabShows}</a>
+                <a href="tv.html?tab=4" class="tvEpisodesTab"><iron-icon icon="slideshow"></iron-icon>${TabEpisodes}</a>
+                <a href="tv.html?tab=5"><iron-icon icon="video-library"></iron-icon>${TabGenres}</a>
+                <a href="tv.html?tab=6" class="tvPeopleTab"><iron-icon icon="people"></iron-icon>${TabPeople}</a>
+                <a href="tv.html?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
             </div>
         </div>