update tabs

dashboard-ui/components/viewcontainer-lite.js

@@ -50,13 +50,12 @@ define(['browser'], function (browser) {
             dependencies.push('legacy/dashboard');
             dependencies.push('legacy/selectmenu');
             dependencies.push('jqmcontrolgroup');
+            dependencies.push('jqmlistview');
         }
 
         if (isPluginpage || (newView.classList && newView.classList.contains('type-interior'))) {
-            dependencies.push('jqmlistview');
             dependencies.push('scripts/notifications');
             dependencies.push('dashboardcss');
-            dependencies.push('emby-icons');
         }
 
         return new Promise(function (resolve, reject) {

dashboard-ui/css/librarymenu.css

@@ -135,25 +135,11 @@
 
 .libraryViewNav {
     overflow: hidden;
-    position: fixed;
-    right: 0;
-    left: 0;
-    top: 50px;
     z-index: 999;
     text-align: center;
     text-transform: uppercase;
     white-space: nowrap;
     padding: 0 0 0;
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),1px 5px 1px rgba(0,0,0,.12);
-}
-
-    .libraryViewNav.bottom {
-        top: auto !important;
-        bottom: 0;
-    }
-
-
-.libraryViewNav {
     display: flex;
     display: block;
     text-align: center;
@@ -161,32 +147,45 @@
     align-items: center;
 }
 
-    .libraryViewNav .pageTabButton {
+.ui-body-b .libraryViewNav {
-        background: transparent;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),1px 5px 1px rgba(0,0,0,.12);
-        border: 0 !important;
+    position: fixed;
-        cursor: pointer;
+    right: 0;
-        outline: none !important;
+    left: 0;
-        width: auto;
+    top: 50px;
-        font-family: inherit;
+}
-        font-size: inherit;
-        color: #aaa !important;
-        display: inline-block;
-        vertical-align: middle;
-        flex-shrink: 0;
-        margin: 0;
-        padding: 1.2em .9em;
-        transition: none !important;
-        position: relative;
-        text-transform: uppercase;
-        font-weight: bold !important;
-        height: auto;
-        min-width: initial;
-        line-height: initial;
-        border-radius: 0 !important;
-        overflow: hidden;
-    }
 
-        /*.libraryViewNav .pageTabButton:hover {
+.libraryViewNav.bottom {
+    top: auto !important;
+    bottom: 0;
+}
+
+.pageTabButton {
+    background: transparent;
+    border: 0 !important;
+    cursor: pointer;
+    outline: none !important;
+    width: auto;
+    font-family: inherit;
+    font-size: inherit;
+    color: #aaa !important;
+    display: inline-block;
+    vertical-align: middle;
+    flex-shrink: 0;
+    margin: 0;
+    padding: 1.2em .9em;
+    transition: none !important;
+    position: relative;
+    text-transform: uppercase;
+    font-weight: bold !important;
+    height: auto;
+    min-width: initial;
+    line-height: initial;
+    border-radius: 0 !important;
+    overflow: hidden;
+}
+
+    /*.libraryViewNav .pageTabButton:hover {
             background-color: transparent;
         }
 
@@ -194,13 +193,13 @@
             background-color: rgba(100,100,100, 0.20);
         }*/
 
-        .libraryViewNav .pageTabButton:focus {
+    .pageTabButton:focus {
-            font-weight: bold !important;
+        font-weight: bold !important;
-        }
+    }
 
-        .libraryViewNav .pageTabButton.is-active {
+    .pageTabButton.is-active {
-            color: #52B54B !important;
+        color: #52B54B !important;
-        }
+    }
 
 .pageTabButtonSelectionBar {
     position: absolute;
@@ -218,7 +217,7 @@
     background: #52B54B;
 }
 
-.viewMenuBar, .libraryViewNav {
+.viewMenuBar, .ui-body-b .libraryViewNav {
     background-color: #2b2b2b;
     color: #fff;
 }
@@ -252,63 +251,15 @@
     width: 100%;
 }
 
-    .viewMenuBarTabs paper-tabs {
-        background: none;
-        box-shadow: none;
-    }
-
-    .viewMenuBarTabs .paperTabLink {
-        align-items: center;
-        justify-content: center;
-        display: flex;
-    }
-
-
-    .viewMenuBarTabs #tabsContent {
-        display: block !important;
-        width: 100%;
-    }
-
-    .viewMenuBarTabs #tabsContainer {
-        margin: auto;
-        -ms-flex: none;
-        -webkit-flex: none;
-        flex: none;
-        flex-shrink: 0;
-        flex-grow: 1;
-        touch-action: auto !important;
-    }
-
-    .viewMenuBarTabs paper-tabs {
-        overflow: visible !important;
-    }
-
     .viewMenuBarTabs .paperTabLink {
         padding-left: 1.5em;
         padding-right: 1.5em;
     }
 
-.viewMenuBar paper-icon-button.paper-tabs {
-    display: none !important;
-}
-
 .viewMenuBar.semiTransparent {
     background-color: rgba(15, 15, 15, .3);
 }
 
-.paperLibraryViewNav {
-    background-color: transparent !important;
-}
-
-.libraryViewNav iron-icon {
-    display: none;
-}
-
-.libraryViewNav::-webkit-scrollbar {
-    height: 0 !important;
-    display: none;
-}
-
 .viewMenuLink {
     text-decoration: none;
     color: #eee !important;
@@ -469,13 +420,9 @@ body:not(.dashboardDocument) .headerAppsButton {
         padding-left: 272px;
     }
 
-        .mainDrawerPanel .viewMenuBarTabs paper-tab {
+    .viewMenuBarTabs .libraryViewNav {
-            width: auto !important;
+        text-align: left !important;
-        }
+    }
-
-        .mainDrawerPanel .viewMenuBarTabs .tab-content {
-            display: block !important;
-        }
 
     .dashboardDocument .mainDrawer {
         z-index: 998 !important;

dashboard-ui/css/site.css

@@ -226,16 +226,11 @@ div[data-role='page'] {
     transform: translateY(-100%);
 }
 
-.libraryViewNav:not(.paperLibraryViewNav).headroom--unpinned:not(.headroomDisabled) {
+.libraryViewNav.headroom--unpinned:not(.headroomDisabled) {
     -webkit-transform: translateY(-210%);
     transform: translateY(-210%);
 }
 
-.paperLibraryViewNav.headroom--unpinned:not(.headroomDisabled) {
-    -webkit-transform: translateY(-240%);
-    transform: translateY(-240%);
-}
-
 .checkboxContainer {
     white-space: nowrap;
 }

dashboard-ui/scripts/librarymenu.js

@@ -40,7 +40,7 @@
         html += '</div>';
         html += '</div>';
 
-        html += '<div class="viewMenuBarTabs hiddenScrollX">';
+        html += '<div class="viewMenuBarTabs">';
         html += '</div>';
 
         var viewMenuBar = document.createElement('div');
@@ -710,22 +710,29 @@
 
             if (LibraryMenu.tabType != type) {
 
-                require(['paper-tabs'], function () {
+                var index = 0;
 
-                    var noInk = browserInfo.animate ? '' : ' noink';
+                viewMenuBarTabs.innerHTML = '<div class="libraryViewNav hiddenScrollX">' + builder().map(function (t) {
 
-                    viewMenuBarTabs.innerHTML = '<paper-tabs selected="' + selectedIndex + '" hidescrollbuttons ' + noInk + '>' + builder().map(function (t) {
+                    var tabClass = selectedIndex == index ? 'pageTabButton is-active' : 'pageTabButton';
 
-                        return '<paper-tab link><a class="clearLink paperTabLink" href="' + t.href + '"><div>' + t.name + '</div></a></paper-tab>';
+                    var tabHtml = '<a class="' + tabClass + '" href="' + t.href + '" data-index="' + index + '">' + t.name + '<div class="pageTabButtonSelectionBar"></div></a>';
+                    index++;
+                    return tabHtml;
 
-                    }).join('') + '</paper-tabs>';
+                }).join('') + '</div>';
-                    document.body.classList.add('withTallToolbar');
+
-                    LibraryMenu.tabType = type;
+                document.body.classList.add('withTallToolbar');
-                });
+                LibraryMenu.tabType = type;
                 return;
             }
 
-            viewMenuBarTabs.querySelector('paper-tabs').selected = selectedIndex;
+            var activeTab = viewMenuBarTabs.querySelector('.is-active');
+            var newTab = viewMenuBarTabs.querySelector('.pageTabButton[data-index="' + selectedIndex + '"]');
+            newTab.classList.add('is-active');
+            if (newTab != activeTab && activeTab) {
+                activeTab.classList.remove('is-active');
+            }
             LibraryMenu.tabType = type;
         },
 

dashboard-ui/scripts/site.js

@@ -1922,7 +1922,6 @@ var AppInfo = {};
 
         define("jqmpanel", ['jqmbase', "thirdparty/jquerymobile-1.4.5/jqm.panel", 'css!thirdparty/jquerymobile-1.4.5/jqm.panel.css']);
 
-        define("iron-icon-set", ["html!" + bowerPath + "/iron-icon/iron-icon.html", "html!" + bowerPath + "/iron-iconset-svg/iron-iconset-svg.html"]);
         define("slideshow", [embyWebComponentsBowerPath + "/slideshow/slideshow"], returnFirstDependency);
 
         define('fetch', [bowerPath + '/fetch/fetch']);
@@ -2595,7 +2594,7 @@ var AppInfo = {};
 
         defineRoute({
             path: '/librarysettings.html',
-            dependencies: ['emby-collapsible', 'paper-input', 'paper-checkbox', 'emby-button'],
+            dependencies: ['emby-collapsible', 'paper-input', 'paper-checkbox', 'emby-button', 'jqmlistview'],
             autoFocus: false,
             roles: 'admin',
             controller: 'scripts/librarysettings'