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

fixes #834 - Change view of TV Shows or Interface for plugins

Browse source
This commit is contained in:
Luke Pulverenti 2014-07-05 12:51:39 -04:00
parent 66a2e3ce93
commit 4318490be2
13 changed files with 146 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

13
dashboard-ui/css/icons.css
View file

@ -140,3 +140,16 @@
.ui-nosvg .ui-icon-remote:after {
background-image: url("images/icons/remote.png");
}
.ui-icon-ellipsis-v:after {
background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%20Tiny%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11-tiny.dtd%22%3E%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20d%3D%22M107.143%20348.214v53.571q0%2011.161-7.813%2018.973t-18.973%207.813h-53.571q-11.161%200-18.973-7.813t-7.813-18.973v-53.571q0-11.161%207.813-18.973t18.973-7.813h53.571q11.161%200%2018.973%207.813t7.813%2018.973zM107.143%20205.357v53.571q0%2011.161-7.813%2018.973t-18.973%207.813h-53.571q-11.161%200-18.973-7.813t-7.813-18.973v-53.571q0-11.161%207.813-18.973t18.973-7.813h53.571q11.161%200%2018.973%207.813t7.813%2018.973zM107.143%2062.5v53.571q0%2011.161-7.813%2018.973t-18.973%207.813h-53.571q-11.161%200-18.973-7.813t-7.813-18.973v-53.571q0-11.161%207.813-18.973t18.973-7.813h53.571q11.161%200%2018.973%207.813t7.813%2018.973z%22%20fill%3D%22%23ffffff%22%20%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: 9px 3px;
}
/* Fallback */
.ui-nosvg .ui-icon-ellipsis-v:after {
background-image: url("images/icons/ellipsis-v.png");
background-repeat: no-repeat;
}

BIN
dashboard-ui/css/images/icons/ellipsis-v.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 252 B

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

@ -1247,3 +1247,37 @@ a.itemTag:hover {
max-height: 500px;
}
}
.itemsListview {
max-width: 800px;
margin: 0 auto!important;
}
.itemsListview .ui-li-aside {
right: 1.5em;
font-weight: normal;
font-size: 13px;
font-family: "Open Sans";
}
.itemsListview .ui-li-count {
right: 1.2em;
top: 70%;
background: rgba(82, 181, 75, .8);
border: 0;
}
.listviewImage {
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
@media all and (max-width: 600px) {
.itemsListview .ui-li-aside {
display: none;
}
}

1
dashboard-ui/movies.html
View file

@ -26,6 +26,7 @@
<option value="Thumb">${OptionThumb}</option>
<option value="Poster">${OptionPoster}</option>
<option value="Banner">${OptionBanner}</option>
<option value="List">${OptionList}</option>
<option value="Timeline">${OptionTimeline}</option>
</select>
</div>

1
dashboard-ui/musicalbums.html
View file

@ -22,6 +22,7 @@
<div style="display: inline-block;">
<select data-mini="true" data-inline="true" id="selectView" name="selectView">
<option value="Poster">${OptionPoster}</option>
<option value="List">${OptionList}</option>
<option value="Timeline">${OptionTimeline}</option>
</select>
</div>

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

@ -40,7 +40,7 @@
renderHeader(page, item, context);
LibraryBrowser.renderName(item, $('.itemName', page));
LibraryBrowser.renderName(item, $('.itemName', page), false, context);
LibraryBrowser.renderParentName(item, $('.parentName', page));
Dashboard.getCurrentUser().done(function (user) {

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

@ -493,6 +493,66 @@
},
getListViewHtml: function (options) {
var outerHtml = "";
outerHtml += '<ul data-role="listview" data-inset="true" class="itemsListview">';
outerHtml += options.items.map(function (item) {
var html = '';
var href = LibraryBrowser.getHref(item, options.context);
html += '<li class="ui-li-has-thumb"><a href="' + href + '">';
var imgUrl;
if (item.ImageTags.Primary) {
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
width: 80,
tag: item.ImageTags.Primary,
type: "Primary",
index: 0
});
}
if (imgUrl) {
html += '<div class="listviewImage ui-li-thumb" style="background-image:url(\'' + imgUrl + '\');"></div>';
}
html += '<h3>';
html += LibraryBrowser.getPosterViewDisplayName(item);
html += '</h3>';
html += '<p>';
html += LibraryBrowser.getMiscInfoHtml(item);
html += '</p>';
html += '<div class="ui-li-aside">';
html += LibraryBrowser.getRatingHtml(item, false);
html += '</div>';
if (item.UserData.UnplayedItemCount) {
html += '<span class="ui-li-count">' + item.UserData.UnplayedItemCount + '</span>';
}
html += '</a>';
html += '<a href="#" data-icon="ellipsis-v">';
html += '</a>';
html += '</li>';
return html;
}).join('');
outerHtml += '</ul>';
return outerHtml;
},
getPosterViewHtml: function (options) {
var items = options.items;
@ -1212,14 +1272,14 @@
},
renderName: function (item, nameElem, linkToElement) {
renderName: function (item, nameElem, linkToElement, context) {
var name = LibraryBrowser.getPosterViewDisplayName(item, false, false);
Dashboard.setPageTitle(name);
if (linkToElement) {
nameElem.html('<a class="detailPageParentLink" href="' + LibraryBrowser.getHref(item) + '">' + name + '</a>').trigger('create');
nameElem.html('<a class="detailPageParentLink" href="' + LibraryBrowser.getHref(item, context) + '">' + name + '</a>').trigger('create');
} else {
nameElem.html(name);
}

54
dashboard-ui/scripts/librarylist.js
View file

@ -290,46 +290,6 @@
return false;
}
function getGroupingHeaderHtml(item) {
var itemHtml = '';
var href = LibraryBrowser.getHref(item);
itemHtml += '<li><a href="' + href + '">';
var imgUrl = "css/images/media/chapterflyout.png";
if (item.ImageTags.Primary) {
itemHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
imgUrl = ApiClient.getScaledImageUrl(item.Id, {
width: 160,
tag: item.ImageTags.Primary,
type: "Primary",
index: 0
});
itemHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
} else {
itemHtml += '<img src="' + imgUrl + '" />';
}
itemHtml += '<h3>';
itemHtml += LibraryBrowser.getPosterViewDisplayName(item);
itemHtml += '</h3>';
var date = parseISO8601Date(item.DateCreated, { toLocal: true });
itemHtml += '<p>';
itemHtml += Globalize.translate('LabelAddedOnDate').replace('{0}', date.toLocaleDateString());
itemHtml += '</p>';
itemHtml += '</a></li>';
return itemHtml;
}
function onGroupedPosterItemClick(e) {
var posterItem = this;
@ -387,25 +347,23 @@
var itemHtml = '';
href = LibraryBrowser.getHref(latestItem);
itemHtml += '<li><a href="' + href + '">';
itemHtml += '<li class="ui-li-has-thumb"><a href="' + href + '">';
var imgUrl = "css/images/media/chapterflyout.png";
var imgUrl;
if (latestItem.ImageTags.Primary) {
itemHtml += '<img src="' + imgUrl + '" style="visibility:hidden;" />';
imgUrl = ApiClient.getScaledImageUrl(latestItem.Id, {
width: 160,
width: 80,
tag: latestItem.ImageTags.Primary,
type: "Primary",
index: 0
});
itemHtml += '<div class="videoChapterPopupImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
} else {
itemHtml += '<img src="' + imgUrl + '" />';
}
if (imgUrl) {
itemHtml += '<div class="listviewImage ui-li-thumb" style="background-image:url(\'' + imgUrl + '\');"></div>';
}
itemHtml += '<h3>';
itemHtml += LibraryBrowser.getPosterViewDisplayName(latestItem);

4
dashboard-ui/scripts/librarymenu.js
View file

@ -59,9 +59,9 @@
$('.dashboardMenuButton').createHoverTouch().on('hovertouch', showDashboardMenu);
}
function getItemHref(item) {
function getItemHref(item, context) {
return LibraryBrowser.getHref(item);
return LibraryBrowser.getHref(item, context);
}
function getViewsHtml() {

8
dashboard-ui/scripts/movies.js
View file

@ -55,6 +55,14 @@
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
context: 'movies'
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Poster") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,

8
dashboard-ui/scripts/musicalbums.js
View file

@ -44,6 +44,14 @@
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
context: 'music'
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Timeline") {
html = LibraryBrowser.getPosterViewHtml({
items: result.Items,

8
dashboard-ui/scripts/tvshows.js
View file

@ -68,6 +68,14 @@
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "List") {
html = LibraryBrowser.getListViewHtml({
items: result.Items,
context: 'tv'
});
$('.itemsContainer', page).removeClass('timelineItemsContainer');
}
else if (view == "Timeline") {
html = LibraryBrowser.getPosterViewHtml({

1
dashboard-ui/tvshows.html
View file

@ -24,6 +24,7 @@
<option value="Thumb">${OptionThumb}</option>
<option value="Poster">${OptionPoster}</option>
<option value="Banner">${OptionBanner}</option>
<option value="List">${OptionList}</option>
<option value="Timeline">${OptionTimeline}</option>
</select>
</div>