1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update tabs

This commit is contained in:
Luke Pulverenti 2016-05-15 12:30:32 -04:00
parent 516c5715a1
commit 26dcecb51f
29 changed files with 535 additions and 501 deletions

View file

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.3.25",
"_release": "1.3.25",
"version": "1.3.26",
"_release": "1.3.26",
"_resolution": {
"type": "version",
"tag": "1.3.25",
"commit": "004eca200cd748222897d11f6bd92a29899d7945"
"tag": "1.3.26",
"commit": "094d2fc7c9e0c008e1c44744da95a69d1aa6516f"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -24,10 +24,14 @@
}
.formDialog .dialogContentInner {
padding-bottom: 50vh;
padding-bottom: 10vh;
padding-top: 1em;
}
.layout-tv .formDialog .dialogContentInner {
padding-bottom: 50vh;
}
@media all and (min-width: 1000px) {
.formDialog form {

View file

@ -49,5 +49,5 @@
"Download": "Download",
"Advanced": "Advanced",
"Refresh": "Refresh",
"RefreshQueued": "Refresh queued"
"RefreshQueued": "Refresh queued."
}

View file

@ -30,14 +30,14 @@
"web-component-tester": "polymer/web-component-tester#^3.4.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-a11y-announcer",
"homepage": "https://github.com/PolymerElements/iron-a11y-announcer",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "5ce3eb8c4282bb53cd72e348858dc6be6b4c50b9"
},
"_source": "git://github.com/polymerelements/iron-a11y-announcer.git",
"_source": "git://github.com/PolymerElements/iron-a11y-announcer.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-a11y-announcer"
"_originalSource": "PolymerElements/iron-a11y-announcer"
}

View file

@ -36,7 +36,7 @@
"tag": "v1.5.1",
"commit": "e3e34408fad8f7cde59c4255cf3fe90f7dcf91d8"
},
"_source": "git://github.com/polymerelements/iron-selector.git",
"_source": "git://github.com/PolymerElements/iron-selector.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-selector"
"_originalSource": "PolymerElements/iron-selector"
}

View file

@ -45,7 +45,7 @@
"tag": "v1.0.11",
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
},
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
"_source": "git://github.com/polymerelements/paper-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-behaviors"
"_originalSource": "polymerelements/paper-behaviors"
}

View file

@ -32,14 +32,14 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/paper-ripple",
"homepage": "https://github.com/polymerelements/paper-ripple",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
},
"_source": "git://github.com/PolymerElements/paper-ripple.git",
"_source": "git://github.com/polymerelements/paper-ripple.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/paper-ripple"
"_originalSource": "polymerelements/paper-ripple"
}

View file

@ -34,6 +34,6 @@
"commit": "11c987b2eb3c73b388a79fc8aaea8ca01624f514"
},
"_source": "git://github.com/Polymer/polymer.git",
"_target": "^1.1.0",
"_target": "^1.0.0",
"_originalSource": "Polymer/polymer"
}

View file

@ -1,21 +1,17 @@
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections,MaterialTabs">
<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#latestTab" class="mdl-tabs__tab is-active" data-index="0">${TabLatest}</a>
<a href="#channelsTab" class="mdl-tabs__tab" data-index="1">${TabChannels}</a>
<button class="pageTabButton is-active" data-index="0">${TabLatest}</button>
<button class="pageTabButton" data-index="1">${TabChannels}</button>
</div>
</div>
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="latestTab" data-index="0">
<div class="is-active pageTabContent ehsContent" id="latestTab" data-index="0">
<div class="latestItems"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="channelsTab" data-index="1">
<div class="pageTabContent ehsContent" id="channelsTab" data-index="1">
<div class="viewSettings">
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
</div>
<div data-role="content">
</div>

View file

@ -32,12 +32,12 @@
}
var menuItem = {
name: name,
name: s.DisplayTitle || name,
id: s.Index
};
if (s.Index == currentIndex) {
menuItem.ironIcon = 'check';
menuItem.selected = true;
}
return menuItem;
@ -83,12 +83,12 @@
}
var menuItem = {
name: name,
name: s.DisplayTitle || name,
id: s.Index
};
if (s.Index == currentIndex) {
menuItem.ironIcon = 'check';
menuItem.selected = true;
}
return menuItem;
@ -459,7 +459,7 @@
}
function isPlaylistOpen(context) {
return libraryBrowser.selectedTab(context.querySelector('.mdl-tabs')) == 2;
return libraryBrowser.selectedTab(context.querySelector('.libraryViewNav')) == 2;
}
function onStateChanged(e, state) {
@ -813,7 +813,7 @@
// showSlideshowMenu(context);
//});
var mdlTabs = context.querySelector('.mdl-tabs');
var mdlTabs = context.querySelector('.libraryViewNav');
if (AppInfo.enableNowPlayingPageBottomTabs) {
context.querySelector('.libraryViewNav').classList.add('bottom');
@ -821,7 +821,7 @@
context.querySelector('.libraryViewNav').classList.remove('bottom');
}
libraryBrowser.configurePaperLibraryTabs(ownerView, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(ownerView, mdlTabs, ownerView.querySelectorAll('.pageTabContent'));
mdlTabs.addEventListener('tabchange', function (e) {
if (e.detail.selectedTabIndex == 2 && playlistNeedsRefresh) {
@ -862,7 +862,6 @@
context.querySelector('.topRightContainer').style.position = 'relative';
}
componentHandler.upgradeAllRegistered(dlg);
init(ownerView, dlg);
};

View file

@ -29,6 +29,10 @@
bottom: -92px !important;
}
.pageTabContent:not(.is-active) {
display: none !important;
}
.sidebarDivider {
height: 1px;
background: #eaeaea;
@ -181,10 +185,6 @@
text-transform: uppercase;
white-space: nowrap;
padding: 0 0 0;
overflow-x: scroll;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
-webkit-overflow-scrolling: touch;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
@ -194,37 +194,61 @@
}
.libraryViewNav .mdl-tabs__tab-bar {
-webkit-justify-content: initial;
justify-content: initial;
display: inline-flex;
.libraryViewNav {
justify-content: center;
display: flex;
display: block;
text-align: center;
margin: 0 auto;
align-items: center;
}
.libraryViewNav .mdl-tabs__tab {
color: #aaa !important;
padding: 0 1.25em;
float: none;
.libraryViewNav .pageTabButton {
background: transparent;
border: 0 !important;
cursor: pointer;
outline: none !important;
width: auto;
font-family: inherit;
font-size: inherit;
color: #999 !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: 500 !important;
height: auto;
min-width: initial;
line-height: initial;
}
.libraryViewNav .mdl-tabs__tab.is-active {
.libraryViewNav .pageTabButton:focus {
font-weight: 500 !important;
}
.libraryViewNav .pageTabButton.is-active {
color: #fff !important;
}
.libraryViewNav .mdl-tabs__tab.is-active:after {
background: #52B54B !important;
.libraryViewNav .pageTabButton:before {
content: '';
position: absolute;
left: 0;
border: 0;
bottom: 0;
height: 2px;
transition: all .12s cubic-bezier(.4,0,1,1);
right: 0;
transform: translateX(-100%);
}
.libraryViewNav::-webkit-scrollbar {
height: 0 !important;
display: none;
}
.libraryViewNav .mdl-tabs__tab .mdl-tabs__ripple-container .mdl-ripple {
background: #52B54B !important;
.libraryViewNav .pageTabButton.is-active:before {
transform: none;
background: #52B54B;
}
.viewMenuBar, .libraryViewNav {

View file

@ -2,17 +2,21 @@
font-weight: bold !important;
}
.libraryViewNav .mdl-tabs__tab {
.libraryViewNav .pageTabButton {
font-weight: bold !important;
}
.libraryViewNav .pageTabButton:focus {
font-weight: bold !important;
}
@media all and (min-width: 300px) {
.libraryViewNav .mdl-tabs__tab-bar {
.libraryViewNav {
display: flex;
}
.libraryViewNav .mdl-tabs__tab {
.libraryViewNav .pageTabButton {
flex-grow: 1;
}
}

View file

@ -59,15 +59,11 @@ body:not(.dashboardDocument) .mainDrawerButton {
padding: 12px 13px 8px;
}
.libraryViewNav .mdl-tabs__ripple-container {
.libraryViewNav .pageTabButton.is-active:after {
display: none !important;
}
.libraryViewNav .mdl-tabs__tab.is-active:after {
display: none !important;
}
.libraryViewNav .mdl-tabs__tab.is-active {
.libraryViewNav .pageTabButton.is-active {
color: #52B54B !important;
}

View file

@ -1,15 +1,12 @@
<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs" data-title="${ButtonHome}" data-backdroptype="movie,series,game,book">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#homeTab" class="mdl-tabs__tab is-active" data-index="0">${TabHome}</a>
<a href="#nextUpTab" class="mdl-tabs__tab" data-index="1">${TabNextUp}</a>
<a href="#favoritesTab" class="mdl-tabs__tab homeFavoritesTab" data-index="2">${TabFavorites}</a>
<a href="#upcomingTab" class="mdl-tabs__tab" data-index="3">${TabUpcoming}</a>
<button class="pageTabButton is-active" data-index="0">${TabHome}</button>
<button class="pageTabButton" data-index="1">${TabNextUp}</button>
<button class="pageTabButton homeFavoritesTab" data-index="2">${TabFavorites}</button>
<button class="pageTabButton" data-index="3">${TabUpcoming}</button>
</div>
</div>
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="homeTab" data-index="0">
<div class="is-active pageTabContent ehsContent" id="homeTab" data-index="0">
<div class="ui-bar-b readOnlyContent welcomeMessage" style="display: none; padding: 2em; border-radius: 10px; margin: 2em auto; font-weight: normal;">
<h1 style="margin-top: 0;" class="tourHeader"></h1>
<p>
@ -19,7 +16,7 @@
<div class="sections"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="nextUpTab" data-index="1">
<div class="pageTabContent ehsContent" id="nextUpTab" data-index="1">
<div class="homePageSection">
<div>
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
@ -30,10 +27,10 @@
</div>
<p class="noNextUpItems" style="display: none;">${NoNextUpItemsMessage}</p>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="favoritesTab" data-index="2">
<div class="pageTabContent ehsContent" id="favoritesTab" data-index="2">
<div class="favoriteSections"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="upcomingTab" data-index="3">
<div class="pageTabContent ehsContent" id="upcomingTab" data-index="3">
<div id="upcomingItems" class="itemsContainer">
</div>
<div class="noItemsMessage" style="display: none;">
@ -44,7 +41,6 @@
</div>
</div>
</div>
<div data-role="content">

View file

@ -1,16 +1,13 @@
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,MaterialTabs,paper-checkbox,paper-button">
<div id="liveTvSuggestedPage" data-dom-cache="true" data-role="page" class="page libraryPage liveTvPage pageWithAbsoluteTabs" data-contextname="${HeaderLiveTv}" data-backdroptype="series,movie" data-require="scripts/livetvsuggested,livetvcss,scripts/livetvcomponents,paper-checkbox">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
<a href="#guideTab" class="mdl-tabs__tab" data-index="1">${TabGuide}</a>
<a href="#channelsTab" class="mdl-tabs__tab" data-index="2">${TabChannels}</a>
<a href="#recordingsTab" class="mdl-tabs__tab" data-index="3">${TabRecordings}</a>
<a href="#seriesTab" class="mdl-tabs__tab" data-index="4">${TabSeries}</a>
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
<button class="pageTabButton" data-index="1">${TabGuide}</button>
<button class="pageTabButton" data-index="2">${TabChannels}</button>
<button class="pageTabButton" data-index="3">${TabRecordings}</button>
<button class="pageTabButton" data-index="4">${TabSeries}</button>
</div>
</div>
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div id="activePrograms" class="homePageSection">
<h1 class="listHeader">${HeaderWhatsOnTV}</h1>
<div class="activeProgramItems itemsContainer noautoinit"></div>
@ -46,16 +43,16 @@
<br />
</div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent fullWidth flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0;">
<div class="pageTabContent ehsContent fullWidth flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0;">
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="channelsTab" data-index="2">
<div class="pageTabContent ehsContent" id="channelsTab" data-index="2">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="recordingsTab" data-index="3">
<div class="pageTabContent ehsContent" id="recordingsTab" data-index="3">
<div id="activeRecordings" class="homePageSection hide">
<h1 class="listHeader">${HeaderActiveRecordings}</h1>
<div class="recordingItems itemsContainer"></div>
@ -80,11 +77,10 @@
<div id="recordingGroupItems"></div>
</div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="seriesTab" data-index="4">
<div class="pageTabContent ehsContent" id="seriesTab" data-index="4">
<div style="max-width: 700px; margin: 0 auto;" id="items">
</div>
</div>
</div>
<div data-role="content">
</div>

View file

@ -1,17 +1,14 @@
<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage pageWithAbsoluteTabs collectionEditorPage" data-backdroptype="movie">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
<a href="#moviesTab" class="mdl-tabs__tab" data-index="1">${TabMovies}</a>
<a href="#trailersTab" class="mdl-tabs__tab movieTrailersTab" data-index="2">${TabTrailers}</a>
<a href="#collectionsTab" class="mdl-tabs__tab" data-index="3">${TabCollections}</a>
<a href="#genresTab" class="mdl-tabs__tab" data-index="4">${TabGenres}</a>
<a href="#studiosTab" class="mdl-tabs__tab movieStudiosTab" data-index="5">${TabStudios}</a>
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
<button class="pageTabButton" data-index="1">${TabMovies}</button>
<button class="pageTabButton movieTrailersTab" data-index="2">${TabTrailers}</button>
<button class="pageTabButton" data-index="3">${TabCollections}</button>
<button class="pageTabButton" data-index="4">${TabGenres}</button>
<button class="pageTabButton movieStudiosTab" data-index="5">${TabStudios}</button>
</div>
</div>
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div id="resumableSection" style="display: none;" class="homePageSection">
<div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
@ -39,7 +36,7 @@
<p>${MessageNoMovieSuggestionsAvailable}</p>
</div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="moviesTab" data-index="1">
<div class="pageTabContent ehsContent" id="moviesTab" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -48,7 +45,7 @@
</div>
<div class="itemsContainer" style="text-align:center;"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="trailersTab" data-index="2">
<div class="pageTabContent ehsContent" id="trailersTab" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -58,7 +55,7 @@
<div class="itemsContainer" style="text-align:center;"></div>
<p class="noItemsMessage" style="display:none;text-align:center;">${MessageNoTrailersFound}</p>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="collectionsTab" data-index="3">
<div class="pageTabContent ehsContent" id="collectionsTab" data-index="3">
<div class="viewSettings">
<div class="listTopPaging">
@ -72,21 +69,20 @@
<paper-fab class="btnNewCollection bottomFab" icon="add" style="position:fixed;right:20px;background-color:#db4437;"></paper-fab>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="genresTab" data-index="4">
<div class="pageTabContent ehsContent" id="genresTab" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="studiosTab" data-index="5">
<div class="pageTabContent ehsContent" id="studiosTab" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div class="itemsContainer" style="text-align:center;"></div>
</div>
</div>
<div data-role="content">

View file

@ -1,18 +1,15 @@
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,MaterialTabs,paper-checkbox,scripts/alphapicker">
<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist" data-require="scripts/musicrecommended,paper-checkbox,scripts/alphapicker">
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav">
<div class="mdl-tabs__tab-bar">
<a href="#suggestionsTab" class="mdl-tabs__tab is-active" data-index="0">${TabSuggestions}</a>
<a href="#albumsTab" class="mdl-tabs__tab" data-index="1">${TabAlbums}</a>
<a href="#albumArtistsTab" class="mdl-tabs__tab" data-index="2">${TabAlbumArtists}</a>
<a href="#artistsTab" class="mdl-tabs__tab" data-index="3">${TabArtists}</a>
<a href="#songsTab" class="mdl-tabs__tab" data-index="4">${TabSongs}</a>
<a href="#genresTab" class="mdl-tabs__tab" data-index="5">${TabGenres}</a>
<a href="#foldersTab" class="mdl-tabs__tab" data-index="6">${TabFolders}</a>
<button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>
<button class="pageTabButton" data-index="1">${TabAlbums}</button>
<button class="pageTabButton" data-index="2">${TabAlbumArtists}</button>
<button class="pageTabButton" data-index="3">${TabArtists}</button>
<button class="pageTabButton" data-index="4">${TabSongs}</button>
<button class="pageTabButton" data-index="5">${TabGenres}</button>
<button class="pageTabButton" data-index="6">${TabFolders}</button>
</div>
</div>
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div class="pageTabContent is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
<div class="homePageSection">
<h1 class="listHeader">${HeaderLatestMusic}</h1>
@ -43,7 +40,7 @@
<div class="favoriteSections homePageSection"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="albumsTab" data-index="1">
<div class="pageTabContent pageTabContent ehsContent" id="albumsTab" data-index="1">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -52,7 +49,7 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
<div class="pageTabContent pageTabContent ehsContent" id="albumArtistsTab" data-index="2">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -61,7 +58,7 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="artistsTab" data-index="3">
<div class="pageTabContent pageTabContent ehsContent" id="artistsTab" data-index="3">
<div class="alphabetPicker">
</div>
<div class="viewSettings">
@ -70,28 +67,27 @@
</div>
<div id="items" class="itemsContainer paddedItemsContainer" style="text-align:center;"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="songsTab" data-index="4">
<div class="pageTabContent pageTabContent ehsContent" id="songsTab" data-index="4">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="genresTab" data-index="5">
<div class="pageTabContent pageTabContent ehsContent" id="genresTab" data-index="5">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="foldersTab" data-index="6">
<div class="pageTabContent pageTabContent ehsContent" id="foldersTab" data-index="6">
<div class="viewSettings">
<div class="listTopPaging">
</div>
</div>
<div id="items" class="itemsContainer paddedItemsContainer"></div>
</div>
</div>
<div data-role="content">
</div>

View file

@ -9,7 +9,7 @@
<div class="detailSectionContent">
<div class="fldSyncPath hide">
<paper-input type="text" id="txtSyncPath" label="${LabelSyncPath}" style="display:inline-block;width:80%;" readonly></paper-input>
<paper-input type="text" id="txtSyncPath" label="${LabelSyncPath}" style="display:inline-block;width:80%;"></paper-input>
<button is="paper-icon-button-light" class="btnSelectSyncPath"><iron-icon icon="search"></iron-icon></button>
</div>

View file

@ -10,15 +10,12 @@
</div>
</div>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="libraryViewNav headroomDisabled">
<div class="mdl-tabs__tab-bar">
<a href="#nowPlayingTab" class="mdl-tabs__tab is-active" data-index="0">${TabNowPlaying}</a>
<a href="#controlsTab" class="mdl-tabs__tab" data-index="1">${TabControls}</a>
<a href="#playlistTab" class="mdl-tabs__tab" data-index="2">${TabPlaylist}</a>
<button class="pageTabButton is-active" data-index="0">${TabNowPlaying}</button>
<button class="pageTabButton" data-index="1">${TabControls}</button>
<button class="pageTabButton" data-index="2">${TabPlaylist}</button>
</div>
</div>
<div class="mdl-tabs__panel is-active pageTabContent ehsContent" id="nowPlayingTab" data-index="0">
<div class="is-active pageTabContent ehsContent" id="nowPlayingTab" data-index="0">
<div style="text-align:center;">
<div class="nowPlayingPageTitle" style="line-height: normal;">
</div>
@ -62,7 +59,7 @@
</div>
</div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="controlsTab" data-index="1">
<div class="pageTabContent ehsContent" id="controlsTab" data-index="1">
<div style="text-align:center;">
<div>
<paper-fab icon="keyboard-arrow-up" class="btnArrowUp btnCommand subdued" title="${ButtonArrowUp}" data-command="MoveUp"></paper-fab>
@ -122,12 +119,11 @@
</div>
</div>
</div>
<div class="mdl-tabs__panel pageTabContent ehsContent" id="playlistTab" data-index="2">
<div class="pageTabContent ehsContent" id="playlistTab" data-index="2">
<div class="playlist itemsContainer" style="max-width: 800px; margin: 3em auto 0; padding-bottom: 200px;">
</div>
</div>
</div>
</div>
<div data-role="content" style="overflow:visible;">
</div>

View file

@ -74,11 +74,9 @@
var page = this;
var mdlTabs = page.querySelector('.mdl-tabs');
var mdlTabs = page.querySelector('.libraryViewNav');
componentHandler.upgradeAllRegistered(page);
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent'));
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));

View file

@ -26,7 +26,7 @@
pageIdOn('pageinit', "channelsPage", function () {
var page = this;
var mdlTabs = page.querySelector('.mdl-tabs');
var mdlTabs = page.querySelector('.libraryViewNav');
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));

View file

@ -243,21 +243,20 @@
var self = this;
self.renderTab = function () {
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
loadHomeTab(view, tabContent);
};
var mdlTabs = view.querySelector('.mdl-tabs');
var mdlTabs = view.querySelector('.libraryViewNav');
componentHandler.upgradeAllRegistered(view);
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'));
var tabControllers = [];
var renderedTabs = [];
function loadTab(page, index) {
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
switch (index) {

View file

@ -1,4 +1,4 @@
define(['playlistManager', 'appSettings', 'appStorage', 'apphost', 'datetime', 'jQuery', 'itemHelper', 'mediaInfo', 'scrollStyles'], function (playlistManager, appSettings, appStorage, appHost, datetime, $, itemHelper, mediaInfo) {
define(['playlistManager', 'scrollHelper', 'appSettings', 'appStorage', 'apphost', 'datetime', 'jQuery', 'itemHelper', 'mediaInfo', 'scrollStyles'], function (playlistManager, scrollHelper, appSettings, appStorage, appHost, datetime, $, itemHelper, mediaInfo) {
function parentWithClass(elem, className) {
@ -176,7 +176,7 @@
if (selected == null) {
var elem = tabs.querySelector('.mdl-tabs__tab.is-active');
var elem = tabs.querySelector('.pageTabButton.is-active');
if (elem) {
return parseInt(elem.getAttribute('data-index'));
}
@ -191,18 +191,18 @@
}
}));
} else {
var tabButtons = tabs.querySelectorAll('.mdl-tabs__tab');
var tabButtons = tabs.querySelectorAll('.pageTabButton');
tabButtons[selected].click();
}
},
configureSwipeTabs: function (ownerpage, tabs) {
var pageCount = tabs.querySelectorAll('.mdl-tabs__panel').length;
var pageCount = ownerpage.querySelectorAll('.pageTabContent').length;
require(['hammer'], function (Hammer) {
var hammertime = new Hammer(tabs);
var hammertime = new Hammer(ownerpage);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammertime.on('swipeleft', function (e) {
@ -225,22 +225,64 @@
});
},
configurePaperLibraryTabs: function (ownerpage, tabs) {
configurePaperLibraryTabs: function (ownerpage, tabs, panels) {
if (!browserInfo.safari) {
LibraryBrowser.configureSwipeTabs(ownerpage, tabs);
}
tabs.querySelector('.mdl-tabs__tab-bar').addEventListener('click', function (e) {
var buttons = tabs.querySelectorAll('.pageTabButton');
for (var i = 0, length = buttons.length; i < length; i++) {
buttons[i].classList.add('mdl-button');
buttons[i].classList.add('mdl-js-button');
}
var link = parentWithClass(e.target, 'mdl-tabs__tab');
tabs.classList.add('hiddenScrollX');
if (link) {
function fadeInRight(elem) {
var pct = browserInfo.mobile ? '1%' : '0.5%';
var keyframes = [
{ opacity: '0', transform: 'translate3d(' + pct + ', 0, 0)', offset: 0 },
{ opacity: '1', transform: 'none', offset: 1 }];
elem.animate(keyframes, {
duration: 300,
iterations: 1,
easing: 'ease-out'
});
}
tabs.addEventListener('click', function (e) {
var current = tabs.querySelector('.is-active');
var link = parentWithClass(e.target, 'pageTabButton');
if (link && link != current) {
if (current) {
current.classList.remove('is-active');
panels[parseInt(current.getAttribute('data-index'))].classList.remove('is-active');
}
link.classList.add('is-active');
var index = parseInt(link.getAttribute('data-index'));
tabs.dispatchEvent(new CustomEvent("tabchange", {
detail: {
selectedTabIndex: parseInt(link.getAttribute('data-index'))
selectedTabIndex: index
}
}));
panels[index].classList.add('is-active');
//if (browserInfo.animate) {
// fadeInRight(panels[index]);
//}
// If toCenter is called syncronously within the click event, it sometimes ends up canceling it
//setTimeout(function() {
// scrollHelper.toCenter(tabs, link, true);
//}, 10);
}
});
@ -271,7 +313,7 @@
onTabbedpagebeforeshowInternal: function (page, e, isFirstLoad) {
var pageTabsContainer = page.querySelector('.mdl-tabs');
var pageTabsContainer = page.querySelector('.libraryViewNav');
if (isFirstLoad) {

View file

@ -98,7 +98,7 @@
ApiClient.getLiveTvRecordings({
userId: Dashboard.getCurrentUserId(),
limit: 6,
limit: 4,
IsInProgress: false,
Fields: 'CanDelete,PrimaryImageAspectRatio'

View file

@ -141,7 +141,7 @@
function loadTab(page, index) {
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
var scope = 'LiveTvPage';
var renderMethod = '';
@ -197,11 +197,9 @@
var page = this;
var mdlTabs = page.querySelector('.mdl-tabs');
var mdlTabs = page.querySelector('.libraryViewNav');
componentHandler.upgradeAllRegistered(page);
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent'));
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));

View file

@ -272,18 +272,18 @@
var self = this;
self.initTab = function () {
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
initSuggestedTab(view, tabContent);
};
self.renderTab = function () {
var tabContent = view.querySelector('.mdl-tabs__panel[data-index=\'' + 0 + '\']');
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + 0 + '\']');
loadSuggestionsTab(view, params, tabContent);
};
$('.recommendations', view).createCardMenus();
var mdlTabs = view.querySelector('.mdl-tabs');
var mdlTabs = view.querySelector('.libraryViewNav');
function onPlaybackStop(e, state) {
@ -297,22 +297,20 @@
}
}
componentHandler.upgradeAllRegistered(view);
var baseUrl = 'movies.html';
var topParentId = params.topParentId;
if (topParentId) {
baseUrl += '?topParentId=' + topParentId;
}
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'));
var tabControllers = [];
var renderedTabs = [];
function loadTab(page, index) {
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var tabContent = view.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
switch (index) {

View file

@ -216,7 +216,7 @@
function loadTab(page, index) {
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
var scope = 'MusicPage';
var renderMethod = '';
@ -285,7 +285,7 @@
$('.recommendations', page).createCardMenus();
var mdlTabs = page.querySelector('.mdl-tabs');
var mdlTabs = page.querySelector('.libraryViewNav');
var baseUrl = 'music.html';
var topParentId = LibraryMenu.getTopParentId();
@ -293,8 +293,7 @@
baseUrl += '?topParentId=' + topParentId;
}
componentHandler.upgradeAllRegistered(page);
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(page, mdlTabs, page.querySelectorAll('.pageTabContent'));
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(page, parseInt(e.detail.selectedTabIndex));

View file

@ -2004,7 +2004,6 @@ var AppInfo = {};
define("material-design-lite", [bowerPath + "/material-design-lite/material.min", "css!" + bowerPath + "/material-design-lite/material"]);
define("MaterialSpinner", ["material-design-lite"]);
define("MaterialTabs", ["material-design-lite"]);
define("jQuery", [bowerPath + '/jquery/dist/jquery.slim.min'], function () {
@ -2560,7 +2559,7 @@ var AppInfo = {};
defineRoute({
path: '/home.html',
dependencies: ['MaterialTabs'],
dependencies: [],
autoFocus: false,
controller: 'scripts/indexpage'
});
@ -2614,7 +2613,7 @@ var AppInfo = {};
defineRoute({
path: '/livetv.html',
dependencies: [],
dependencies: ['paper-button'],
autoFocus: false
});
@ -2729,7 +2728,7 @@ var AppInfo = {};
defineRoute({
path: '/movies.html',
dependencies: ['MaterialTabs', 'paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
dependencies: ['paper-checkbox', 'paper-fab', 'scripts/alphapicker', 'paper-button'],
autoFocus: false,
controller: 'scripts/moviesrecommended'
});
@ -2811,7 +2810,7 @@ var AppInfo = {};
defineRoute({
path: '/nowplaying.html',
dependencies: ['MaterialTabs', 'paper-icon-button-light', 'paper-slider', 'paper-button'],
dependencies: ['paper-icon-button-light', 'paper-slider', 'paper-button'],
controller: 'scripts/nowplayingpage',
autoFocus: false
});
@ -2944,7 +2943,7 @@ var AppInfo = {};
defineRoute({
path: '/tv.html',
dependencies: ['paper-checkbox', 'paper-button', 'paper-icon-button-light', 'MaterialTabs'],
dependencies: ['paper-checkbox', 'paper-icon-button-light', 'paper-button'],
autoFocus: false,
controller: 'scripts/tvrecommended'
});

View file

@ -181,7 +181,7 @@
function loadTab(page, index) {
var tabContent = page.querySelector('.mdl-tabs__panel[data-index=\'' + index + '\']');
var tabContent = page.querySelector('.pageTabContent[data-index=\'' + index + '\']');
var depends = [];
switch (index) {
@ -232,7 +232,7 @@
});
}
var mdlTabs = view.querySelector('.mdl-tabs');
var mdlTabs = view.querySelector('.libraryViewNav');
function onPlaybackStop(e, state) {
@ -246,8 +246,6 @@
}
}
componentHandler.upgradeAllRegistered(view);
var baseUrl = 'tv.html';
var topParentId = params.topParentId;
if (topParentId) {
@ -260,7 +258,7 @@
view.querySelector('#resumableItems').classList.remove('hiddenScrollX');
}
libraryBrowser.createCardMenus(view.querySelector('#resumableItems'));
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs);
libraryBrowser.configurePaperLibraryTabs(view, mdlTabs, view.querySelectorAll('.pageTabContent'));
mdlTabs.addEventListener('tabchange', function (e) {
loadTab(view, parseInt(e.detail.selectedTabIndex));