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

update list styles

This commit is contained in:
Luke Pulverenti 2016-08-05 15:34:10 -04:00
parent 5b72e1c91b
commit fad66be11a
23 changed files with 183 additions and 279 deletions

View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'listViewStyle'], function ($) {
function deleteDevice(page, id) {
@ -36,35 +36,39 @@
html += devices.map(function (d) {
var deviceHtml = '';
deviceHtml += '<paper-icon-item>';
deviceHtml += '<div class="listItem">';
deviceHtml += '<paper-fab mini style="background:#999;" icon="tablet-android" item-icon></paper-fab>';
deviceHtml += '<i class="listItemIcon md-icon" style="background:#999;">tablet_android</i>';
deviceHtml += '<paper-item-body three-line>';
if (d.AppName && d.LastUserName) {
deviceHtml += '<div class="listItemBody three-line">';
} else {
deviceHtml += '<div class="listItemBody two-line">';
}
deviceHtml += '<a class="clearLink" href="device.html?id=' + d.Id + '">';
deviceHtml += '<div>';
deviceHtml += '<div class="listItemBodyText">';
deviceHtml += d.Name;
deviceHtml += '</div>';
if (d.AppName) {
deviceHtml += '<div secondary>';
deviceHtml += '<div class="listItemBodyText secondary">';
deviceHtml += d.AppName;
deviceHtml += '</div>';
}
if (d.LastUserName) {
deviceHtml += '<div secondary>';
deviceHtml += '<div class="listItemBodyText secondary">';
deviceHtml += Globalize.translate('DeviceLastUsedByUserName', d.LastUserName);
deviceHtml += '</div>';
}
deviceHtml += '</a>';
deviceHtml += '</paper-item-body>';
deviceHtml += '</div>';
deviceHtml += '<button type="button" is="paper-icon-button-light" class="btnDeleteDevice" data-id="' + d.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
deviceHtml += '<button type="button" is="paper-icon-button-light" class="btnDeleteDevice" data-id="' + d.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><i class="md-icon">delete</i></button>';
deviceHtml += '</paper-icon-item>';
deviceHtml += '</div>';
return deviceHtml;
@ -91,9 +95,7 @@
})).then(function (result) {
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
load(page, result.Items);
});
load(page, result.Items);
Dashboard.hideLoadingMsg();
});

View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'listViewStyle'], function ($) {
function loadProfiles(page) {
@ -30,51 +30,48 @@
function renderProfiles(page, element, profiles) {
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
var html = '';
var html = '';
if (profiles.length) {
html += '<div class="paperList">';
}
if (profiles.length) {
html += '<div class="paperList">';
for (var i = 0, length = profiles.length; i < length; i++) {
var profile = profiles[i];
html += '<div class="listItem">';
html += "<a item-icon class='clearLink listItemIconContainer' href='dlnaprofile.html?id=" + profile.Id + "'>";
html += '<i class="md-icon listItemIcon">dvr</i>';
html += "</a>";
html += '<div class="listItemBody">';
html += "<a class='clearLink' href='dlnaprofile.html?id=" + profile.Id + "'>";
html += "<div>" + profile.Name + "</div>";
//html += "<div secondary>" + task.Description + "</div>";
html += "</a>";
html += '</div>';
if (profile.Type == 'User') {
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><i class="md-icon">delete</i></button>';
}
for (var i = 0, length = profiles.length; i < length; i++) {
html += '</div>';
}
var profile = profiles[i];
if (profiles.length) {
html += '</div>';
}
html += '<paper-icon-item>';
element.innerHTML = html;
html += "<a item-icon class='clearLink' href='dlnaprofile.html?id=" + profile.Id + "'>";
html += '<paper-fab mini icon="dvr" class="blue"></paper-fab>';
html += "</a>";
$('.btnDeleteProfile', element).on('click', function () {
html += '<paper-item-body two-line>';
html += "<a class='clearLink' href='dlnaprofile.html?id=" + profile.Id + "'>";
html += "<div>" + profile.Name + "</div>";
//html += "<div secondary>" + task.Description + "</div>";
html += "</a>";
html += '</paper-item-body>';
if (profile.Type == 'User') {
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile" data-profileid="' + profile.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
}
html += '</paper-icon-item>';
}
if (profiles.length) {
html += '</div>';
}
element.innerHTML = html;
$('.btnDeleteProfile', element).on('click', function () {
var id = this.getAttribute('data-profileid');
deleteProfile(page, id);
});
var id = this.getAttribute('data-profileid');
deleteProfile(page, id);
});
}

View file

@ -1522,8 +1522,7 @@
page.querySelector('#themeSongsCollapsible').classList.remove('hide');
var html = listView.getListViewHtml({
items: items,
sortBy: query.SortBy
items: items
});
page.querySelector('#themeSongsContent').innerHTML = html;

View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'listViewStyle'], function ($) {
var currentConfig;
@ -37,21 +37,21 @@
var html = config.PathSubstitutions.map(function (map) {
var mapHtml = '';
mapHtml += '<paper-icon-item>';
mapHtml += '<div class="listItem">';
mapHtml += '<paper-fab mini icon="folder" class="blue" item-icon></paper-fab>';
mapHtml += '<i class="listItemIcon md-icon">folder</i>';
mapHtml += '<paper-item-body three-line>';
mapHtml += '<div class="listItemBody three-line">';
mapHtml += "<div>" + map.From + "</div>";
mapHtml += "<div secondary><b>" + Globalize.translate('HeaderTo') + "</b></div>";
mapHtml += "<div secondary>" + map.To + "</div>";
mapHtml += "<h3 class='listItemBodyText'>" + map.From + "</h3>";
mapHtml += "<div class='listItemBodyText secondary'>" + Globalize.translate('HeaderTo') + "</div>";
mapHtml += "<div class='listItemBodyText secondary'>" + map.To + "</div>";
mapHtml += '</paper-item-body>';
mapHtml += '</div>';
mapHtml += '<button type="button" is="paper-icon-button-light" data-index="' + index + '" class="btnDeletePath"><iron-icon icon="delete"></iron-icon></button>';
mapHtml += '<button type="button" is="paper-icon-button-light" data-index="' + index + '" class="btnDeletePath"><i class="md-icon">delete</i></button>';
mapHtml += '</paper-icon-item>';
mapHtml += '</div>';
index++;
@ -75,10 +75,8 @@
currentConfig = config;
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
reloadPathMappings(page, config);
Dashboard.hideLoadingMsg();
});
reloadPathMappings(page, config);
Dashboard.hideLoadingMsg();
}
function reload(page) {

View file

@ -35,14 +35,14 @@
var logHtml = '';
logHtml += '<div class="listItem">';
logHtml += '<a item-icon class="clearLink" href="' + logUrl + '" target="_blank" style="margin-left:1em;">';
logHtml += '<a item-icon class="clearLink" href="' + logUrl + '" target="_blank">';
logHtml += '<i class="md-icon listItemIcon">schedule</i>';
logHtml += "</a>";
logHtml += '<div class="listItemBody">';
logHtml += '<div class="listItemBody two-line">';
logHtml += '<a class="clearLink" href="' + logUrl + '" target="_blank">';
logHtml += "<div>" + log.Name + "</div>";
logHtml += "<h3 class='listItemBodyText'>" + log.Name + "</h3>";
var date = datetime.parseISO8601Date(log.DateModified, true);
@ -50,7 +50,7 @@
text += ' ' + datetime.getDisplayTime(date);
logHtml += '<div class="secondary">' + text + '</div>';
logHtml += '<div class="listItemBodyText secondary">' + text + '</div>';
logHtml += "</a>";
logHtml += '</div>';

View file

@ -1,4 +1,4 @@
(function ($, document, Notifications) {
define(['jQuery'], function ($) {
$(document).on("pageshow", "#notificationsPage", function () {
@ -21,8 +21,7 @@
Notifications.showNotificationsList(startIndex, limit, elem);
})
.on("click", ".btnNextPage", function (e) {
}).on("click", ".btnNextPage", function (e) {
e.preventDefault();
@ -36,4 +35,4 @@
});
})(jQuery, document, Notifications);
});

View file

@ -1,4 +1,4 @@
define(['libraryBrowser'], function (libraryBrowser) {
define(['libraryBrowser', 'listViewStyle'], function (libraryBrowser) {
function notifications() {
@ -115,7 +115,7 @@
});
}
require(['humanedate', 'paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
require(['humanedate'], function () {
for (var i = 0, length = list.length; i < length; i++) {
var notification = list[i];
@ -136,33 +136,33 @@
itemHtml += '<a class="clearLink" href="' + notification.Url + '" target="_blank">';
}
itemHtml += '<paper-icon-item>';
itemHtml += '<div class="listItem">';
if (notification.Level == "Error") {
itemHtml += '<paper-fab mini class="" style="background:#cc3333;" icon="error" item-icon></paper-fab>';
itemHtml += '<i class="listItemIcon md-icon" style="background:#cc3333;">error</i>';
} else {
itemHtml += '<paper-fab mini class="blue" icon="dvr" item-icon></paper-fab>';
itemHtml += '<i class="listItemIcon md-icon">dvr</i>';
}
itemHtml += '<paper-item-body three-line>';
itemHtml += '<div class="listItemBody three-line">';
itemHtml += '<div>';
itemHtml += '<h3 class="listItemBodyText">';
itemHtml += notification.Name;
itemHtml += '</div>';
itemHtml += '</h3>';
itemHtml += '<div secondary>';
itemHtml += '<div class="listItemBodyText secondary">';
itemHtml += humane_date(notification.Date);
itemHtml += '</div>';
if (notification.Description) {
itemHtml += '<div secondary>';
itemHtml += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
itemHtml += notification.Description;
itemHtml += '</div>';
}
itemHtml += '</paper-item-body>';
itemHtml += '</div>';
itemHtml += '</paper-icon-item>';
itemHtml += '</div>';
if (notification.Url) {
itemHtml += '</a>';

View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'listViewStyle'], function ($) {
function reload(page) {
@ -29,23 +29,23 @@
}
itemHtml += '<a class="clearLink" href="notificationsetting.html?type=' + i.Type + '">';
itemHtml += '<paper-icon-item>';
itemHtml += '<div class="listItem">';
if (i.Enabled) {
itemHtml += '<paper-fab mini class="blue" icon="notifications-active" item-icon></paper-fab>';
itemHtml += '<i class="listItemIcon md-icon">notifications_active</i>';
}
else {
itemHtml += '<paper-fab mini style="background-color:#999;" icon="notifications-off" item-icon></paper-fab>';
itemHtml += '<i class="listItemIcon md-icon" style="background-color:#999;">notifications_off</i>';
}
itemHtml += '<paper-item-body two-line>';
itemHtml += '<div>' + i.Name + '</div>';
itemHtml += '<div class="listItemBody two-line">';
itemHtml += '<div class="listItemBodyText">' + i.Name + '</div>';
itemHtml += '</paper-item-body>';
itemHtml += '</div>';
itemHtml += '<button type="button" is="paper-icon-button-light"><iron-icon icon="mode-edit"></iron-icon></button>';
itemHtml += '<button type="button" is="paper-icon-button-light"><i class="md-icon">mode_edit</i></button>';
itemHtml += '</paper-icon-item>';
itemHtml += '</div>';
itemHtml += '</a>';
return itemHtml;
@ -80,9 +80,7 @@
LibraryMenu.setTabs('notifications', 0, getTabs);
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
reload(view);
});
reload(view);
});
};
});

View file

@ -24,7 +24,7 @@ var ScheduledTaskPage = {
$('#pTaskDescription', page).html(task.Description);
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () {
require(['listViewStyle'], function () {
ScheduledTaskPage.loadTaskTriggers(page, task);
});
@ -41,16 +41,16 @@ var ScheduledTaskPage = {
var trigger = task.Triggers[i];
html += '<paper-icon-item>';
html += '<div class="listItem">';
html += '<paper-fab mini icon="schedule" class="blue" item-icon></paper-fab>';
html += '<i class="md-icon listItemIcon">schedule</i>';
html += '<paper-item-body two-line>';
html += '<div class="listItemBody two-line">';
html += "<div>" + ScheduledTaskPage.getTriggerFriendlyName(trigger) + "</div>";
html += "<div class='listItemBodyText'>" + ScheduledTaskPage.getTriggerFriendlyName(trigger) + "</div>";
if (trigger.MaxRuntimeMs) {
html += '<div secondary>';
html += '<div class="listItemBodyText secondary">';
var hours = trigger.MaxRuntimeMs / 3600000;
@ -62,11 +62,11 @@ var ScheduledTaskPage = {
html += '</div>';
}
html += '</paper-item-body>';
html += '</div>';
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDelete') + '" onclick="ScheduledTaskPage.confirmDeleteTrigger(' + i + ');"><iron-icon icon="delete"></iron-icon></button>';
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDelete') + '" onclick="ScheduledTaskPage.confirmDeleteTrigger(' + i + ');"><i class="md-icon">delete</i></button>';
html += '</paper-icon-item>';
html += '</div>';
}
html += '</div>';

View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) {
define(['jQuery', 'listViewStyle', 'paper-progress'], function ($) {
function reloadList(page) {
@ -50,37 +50,37 @@
html += '<div class="paperList">';
}
html += '<paper-icon-item class="scheduledTaskPaperIconItem" data-status="' + task.State + '">';
html += '<div class="listItem scheduledTaskPaperIconItem" data-status="' + task.State + '">';
html += "<a item-icon class='clearLink' href='scheduledtask.html?id=" + task.Id + "'>";
html += '<paper-fab mini icon="schedule"></paper-fab>';
html += "<a item-icon class='clearLink listItemIconContainer' href='scheduledtask.html?id=" + task.Id + "'>";
html += '<i class="md-icon listItemIcon">schedule</i>';
html += "</a>";
html += '<paper-item-body two-line>';
html += '<div class="listItemBody two-line">';
html += "<a class='clearLink' href='scheduledtask.html?id=" + task.Id + "'>";
html += "<div>" + task.Name + "</div>";
html += "<h3 class='listItemBodyText'>" + task.Name + "</h3>";
//html += "<div secondary>" + task.Description + "</div>";
html += "<div secondary id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + "</div>";
html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + "</div>";
html += "</a>";
html += '</paper-item-body>';
html += '</div>';
if (task.State == "Idle") {
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"><iron-icon icon="play-arrow"></iron-icon></button>';
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"><i class="md-icon">play_arrow</i></button>';
}
else if (task.State == "Running") {
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStop') + '"><iron-icon icon="stop"></iron-icon></button>';
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStopTask" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStop') + '"><i class="md-icon">stop</i></button>';
} else {
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask hide" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"><iron-icon icon="play-arrow"></iron-icon></button>';
html += '<button type="button" is="paper-icon-button-light" id="btnTask' + task.Id + '" class="btnStartTask hide" data-taskid="' + task.Id + '" title="' + Globalize.translate('ButtonStart') + '"><i class="md-icon">play_arrow</i></button>';
}
html += '</paper-icon-item>';
html += '</div>';
}
if (tasks.length) {
@ -186,7 +186,7 @@
elem.classList.add('btnStartTask');
elem.classList.remove('btnStopTask');
elem.classList.remove('hide');
elem.querySelector('iron-icon').icon = 'play-arrow';
elem.querySelector('i').innerHTML = 'play_arrow';
elem.title = Globalize.translate('ButtonStart');
}
else if (state == "Running") {
@ -194,7 +194,7 @@
elem.classList.remove('btnStartTask');
elem.classList.add('btnStopTask');
elem.classList.remove('hide');
elem.querySelector('iron-icon').icon = 'stop';
elem.querySelector('i').innerHTML = 'stop';
elem.title = Globalize.translate('ButtonStop');
} else {
@ -202,11 +202,11 @@
elem.classList.add('btnStartTask');
elem.classList.remove('btnStopTask');
elem.classList.add('hide');
elem.querySelector('iron-icon').icon = 'play-arrow';
elem.querySelector('i').innerHTML = 'play_arrow';
elem.title = Globalize.translate('ButtonStart');
}
var item = $(elem).parents('paper-icon-item')[0];
var item = $(elem).parents('.listItem')[0];
item.setAttribute('data-status', state);
}
@ -280,9 +280,7 @@
startInterval();
require(['paper-fab', 'paper-progress', 'paper-item-body', 'paper-icon-item'], function () {
reloadList(page);
});
reloadList(page);
Events.on(ApiClient, "websocketmessage", onWebSocketMessage);
Events.on(ApiClient, "websocketopen", onWebSocketConnectionOpen);