diff --git a/dashboard-ui/components/viewcontainer-lite.js b/dashboard-ui/components/viewcontainer-lite.js index 4cd059f0ae..252679a48c 100644 --- a/dashboard-ui/components/viewcontainer-lite.js +++ b/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) { diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index e7052af336..74a2430c2b 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/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 { - 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; - } +.ui-body-b .libraryViewNav { + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),1px 5px 1px rgba(0,0,0,.12); + position: fixed; + right: 0; + left: 0; + top: 50px; +} - /*.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 { - font-weight: bold !important; - } + .pageTabButton:focus { + font-weight: bold !important; + } - .libraryViewNav .pageTabButton.is-active { - color: #52B54B !important; - } + .pageTabButton.is-active { + 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 { - width: auto !important; - } - - .mainDrawerPanel .viewMenuBarTabs .tab-content { - display: block !important; - } + .viewMenuBarTabs .libraryViewNav { + text-align: left !important; + } .dashboardDocument .mainDrawer { z-index: 998 !important; diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 311442bf64..673f2b5eec 100644 --- a/dashboard-ui/css/site.css +++ b/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; } diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index 61ec99cc35..185bddba79 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -40,7 +40,7 @@ html += ''; html += ''; - html += '
'; + html += '
'; html += '
'; 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 = '
' + builder().map(function (t) { - viewMenuBarTabs.innerHTML = '' + builder().map(function (t) { + var tabClass = selectedIndex == index ? 'pageTabButton is-active' : 'pageTabButton'; - return '
' + t.name + '
'; + var tabHtml = '' + t.name + '
'; + index++; + return tabHtml; - }).join('') + '
'; - document.body.classList.add('withTallToolbar'); - LibraryMenu.tabType = type; - }); + }).join('') + '
'; + + 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; }, diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 50462731cf..ae2066a727 100644 --- a/dashboard-ui/scripts/site.js +++ b/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'