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

update tab fade

Browse source
This commit is contained in:
Luke Pulverenti 2015-09-21 14:39:18 -04:00
parent 88dc11d90f
commit 4ef47844d8
6 changed files with 56 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dashboard-ui/css/librarybrowser.css
View file

@ -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 { .ui-panel-content-wrap {
background: none !important; background: none !important;
} }

42
dashboard-ui/edititemmetadata.html
View file

@ -334,7 +334,7 @@
</form> </form>
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px; position: relative;">
@ -362,12 +362,10 @@
</div> </div>
<p> <p>
<button type="submit" data-theme="b" data-icon="search" data-mini="true"> <button type="submit" data-role="none" class="clearButton">
${ButtonSearch} <paper-button raised class="submit block"><iron-icon icon="search"></iron-icon><span>${ButtonSearch}</span></paper-button>
</button>
<button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">
${ButtonCancel}
</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> </p>
</form> </form>
@ -386,18 +384,16 @@
<input id="chkIdentifyReplaceImages" type="checkbox" checked="checked" data-mini="true" /> <input id="chkIdentifyReplaceImages" type="checkbox" checked="checked" data-mini="true" />
</div> </div>
<br /> <br />
<button type="submit" data-theme="b" data-icon="check" data-mini="true"> <button type="submit" data-role="none" class="clearButton">
${ButtonSubmit} <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSubmit}</span></paper-button>
</button>
<button type="button" data-icon="delete" data-mini="true" onclick="$(this).parents('.popup').popup('close');">
${ButtonCancel}
</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> </form>
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderPersonInfo}</h3> <h3>${HeaderPersonInfo}</h3>
@ -406,11 +402,13 @@
<div data-role="content"> <div data-role="content">
<form class="popupEditPersonForm"> <form class="popupEditPersonForm">
<br />
<div> <div>
<label for="txtPersonName">${LabelName}</label> <label for="txtPersonName">${LabelName}</label>
<input type="text" id="txtPersonName" required="required" /> <input type="text" id="txtPersonName" required="required" />
</div> </div>
<br />
<div> <div>
<label for="selectPersonType">${LabelType}</label> <label for="selectPersonType">${LabelType}</label>
<select id="selectPersonType" data-mini="true"> <select id="selectPersonType" data-mini="true">
@ -423,7 +421,7 @@
<option value="Writer">${OptionWriter}</option> <option value="Writer">${OptionWriter}</option>
</select> </select>
</div> </div>
<br />
<div> <div>
<label for="txtPersonRole">${LabelPersonRole}</label> <label for="txtPersonRole">${LabelPersonRole}</label>
<input type="text" id="txtPersonRole" /> <input type="text" id="txtPersonRole" />
@ -432,19 +430,17 @@
<br /> <br />
<input type="hidden" id="fldPersonIndex" /> <input type="hidden" id="fldPersonIndex" />
<p> <p>
<button type="submit" data-theme="b" data-icon="check" data-mini="true"> <button type="submit" data-role="none" class="clearButton">
${ButtonOk} <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
</button>
<button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
${ButtonCancel}
</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> </p>
</form> </form>
</div> </div>
</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;"> <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">
<h3>${HeaderRefreshMetadata}</h3> <h3>${HeaderRefreshMetadata}</h3>
@ -474,12 +470,10 @@
</div> </div>
<br /> <br />
<p> <p>
<button type="submit" data-theme="b" data-icon="check" data-mini="true"> <button type="submit" data-role="none" class="clearButton">
${ButtonOk} <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
</button>
<button type="button" data-icon="delete" onclick="$(this).parents('.popup').popup('close');" data-mini="true">
${ButtonCancel}
</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> </p>
</form> </form>
</div> </div>

16
dashboard-ui/itemdetails.html
View file

@ -8,14 +8,14 @@
<div id="tvShowsTabs" class="itemTabs" style="display: none;"> <div id="tvShowsTabs" class="itemTabs" style="display: none;">
<div class="libraryViewNav scopedLibraryViewNav"> <div class="libraryViewNav scopedLibraryViewNav">
<a href="tvrecommended.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a> <a href="tv.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
<a href="tvlatest.html"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a> <a href="tv.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a>
<a href="tvupcoming.html"><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</a> <a href="tv.html?tab=2"><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="tv.html?tab=3" 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="tv.html?tab=4" 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="tv.html?tab=5"><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="tv.html?tab=6" 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?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
</div> </div>
</div> </div>

19
dashboard-ui/scripts/librarybrowser.js
View file

@ -270,21 +270,28 @@
}, delay); }, delay);
}); });
function fadeOutLeftBig(elem, iterations) { function fadeOutLeft(elem, iterations) {
var keyframes = [{ opacity: '1', transform: 'none', offset: 0 }, var keyframes = [{ opacity: '1', transform: 'none', offset: 0 },
{ opacity: '0', transform: 'translate3d(-2000px, 0, 0)', offset: 1 }]; { opacity: '0', transform: 'translate3d(-100%, 0, 0)', offset: 1 }];
var timing = { duration: 700, iterations: iterations }; var timing = { duration: 600, iterations: iterations };
return elem.animate(keyframes, timing); return elem.animate(keyframes, timing);
} }
if (!LibraryBrowser.navigateOnLibraryTabSelect()) { if (!LibraryBrowser.navigateOnLibraryTabSelect()) {
tabs.addEventListener('iron-select', function () { tabs.addEventListener('iron-select', function () {
var selected = pages.selected; var selected = pages.selected;
if (selected != null) { if (selected != null) {
var newValue = this.selected; 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; pages.selected = newValue;
setTimeout(function () { currentTab.classList.remove('hidingAnimatedTab'); }, 500);
}; };
} }
else { else {
@ -965,7 +972,7 @@
} }
if (item.CollectionType == 'tvshows') { if (item.CollectionType == 'tvshows') {
return 'tvrecommended.html?topParentId=' + item.Id; return 'tv.html?topParentId=' + item.Id;
} }
if (item.CollectionType == 'music') { if (item.CollectionType == 'music') {

2
dashboard-ui/scripts/tvrecommended.js
View file

@ -272,7 +272,7 @@
var tabs = page.querySelector('paper-tabs'); var tabs = page.querySelector('paper-tabs');
var pages = page.querySelector('neon-animated-pages'); var pages = page.querySelector('neon-animated-pages');
var baseUrl = 'tvrecommended.html'; var baseUrl = 'tv.html';
var topParentId = LibraryMenu.getTopParentId(); var topParentId = LibraryMenu.getTopParentId();
if (topParentId) { if (topParentId) {
baseUrl += '?topParentId=' + topParentId; baseUrl += '?topParentId=' + topParentId;

22
dashboard-ui/tvrecommended.html → dashboard-ui/tv.html
View file

@ -4,7 +4,7 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <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"> <div class="libraryViewNav libraryViewNavWithMinHeight">
<paper-tabs hidescrollbuttons noink> <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="new-releases"></iron-icon>${TabLatest}</paper-tab>
<paper-tab><iron-icon icon="schedule"></iron-icon>${TabUpcoming}</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="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="slideshow"></iron-icon>${TabEpisodes}</paper-tab>
<paper-tab class="tvEpisodesTab"><iron-icon icon="video-library"></iron-icon>${TabGenres}</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="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-tab class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</paper-tab>
</paper-tabs> </paper-tabs>
<div class="legacyTabs scopedLibraryViewNav"> <div class="legacyTabs scopedLibraryViewNav">
<a href="tvrecommended.html">${TabSuggestions}</a> <a href="tv.html"><iron-icon icon="info"></iron-icon>${TabSuggestions}</a>
<a href="tvrecommended.html?tab=1"><iron-icon icon="new-releases"></iron-icon>${TabLatest}</a> <a href="tv.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="tv.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="tv.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="tv.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="tv.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="tv.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?tab=7" class="tvStudiosTab"><iron-icon icon="account-box"></iron-icon>${TabNetworks}</a>
</div> </div>
</div> </div>