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 list styles

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
dashboard-ui/bower_components/emby-webcomponents/itemhovermenu/itemhovermenu.css vendored
View file

@ -35,12 +35,6 @@
margin-right: .25em !important; margin-right: .25em !important;
} }
.cardOverlayFab-md-icon {
width: auto !important;
height: auto !important;
font-size: 30px !important;
}
.withHoverMenu { .withHoverMenu {
overflow: hidden; overflow: hidden;
} }

95
dashboard-ui/bower_components/emby-webcomponents/listview/listview.css vendored
View file

@ -16,16 +16,18 @@ button.listItem {
display: block; display: block;
align-items: center; align-items: center;
text-align: left; text-align: left;
padding: .25em .25em .25em .25em !important; padding: .25em 1.15em;
line-height: 170%; line-height: 160%;
border-bottom: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a;
}
div.listItem {
cursor: pointer; cursor: pointer;
} }
.listItem.largeImage { .listItem-nosidepadding {
padding-left: 0;
padding-right: 0;
}
.listItem-largeImage {
padding: .5em !important; padding: .5em !important;
} }
@ -57,27 +59,16 @@ div.listItem {
min-height: 48px; min-height: 48px;
} }
.listItemBody.two-line { .two-line {
min-height: 72px; min-height: 72px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.listItemBody.three-line { .three-line {
min-height: 88px; min-height: 88px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
}
.listItemBody h2, .listItemBody h3 {
margin: 0;
padding: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.layout-tv .listItemBody h3 {
padding: 0;
} }
.listItemBody > div:not(.secondary) { .listItemBody > div:not(.secondary) {
@ -85,10 +76,16 @@ div.listItem {
} }
.listItemBodyText { .listItemBodyText {
margin: 0;
padding: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.listItemBodyText-nowrap {
white-space: nowrap;
}
.listItemImage { .listItemImage {
width: 7.4vh; width: 7.4vh;
height: 7.4vh; height: 7.4vh;
@ -101,6 +98,14 @@ div.listItem {
position: relative; position: relative;
} }
.listItemImage-large {
width: 45vh;
height: 30vh;
background-position: center center;
margin-right: 2%;
margin-left: 1%;
}
.listItemIcon { .listItemIcon {
width: auto !important; width: auto !important;
height: auto !important; height: auto !important;
@ -112,14 +117,6 @@ div.listItem {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
} }
.listItem.largeImage .listItemImage {
width: 45vh;
height: 30vh;
background-position: center center;
margin-right: 2%;
margin-left: 1%;
}
.listItemImage .itemProgressBar { .listItemImage .itemProgressBar {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -128,7 +125,7 @@ div.listItem {
} }
.listItem .secondary { .listItem .secondary {
color: #737373; color: #888;
} }
.listItem:focus .secondary { .listItem:focus .secondary {
@ -143,14 +140,6 @@ div.listItem {
transform: scale(1.025, 1.025); transform: scale(1.025, 1.025);
} }
.listItem > .fab:first-child, .listItem > i:first-child {
margin-left: .3em;
}
.paperList .listItem > .fab:first-child, .paperList .listItem > i:first-child {
margin-left: .65em;
}
.paperList { .paperList {
padding: .5em 0; padding: .5em 0;
margin: 1em auto; margin: 1em auto;
@ -166,25 +155,23 @@ div.listItem {
border-bottom: 0; border-bottom: 0;
} }
.listItemMediaInfo {
align-items: center;
}
.layout-tv .listItemMediaInfo { .layout-tv .listItemMediaInfo {
margin: .5em 0; margin: .5em 0;
} }
.listItemMediaInfo > * { .listItemMediaInfo {
display: inline-block; /* Don't display if flex not supported */
display: none;
align-items: center;
} }
.listGroupHeader { .listGroupHeader {
margin: 2em 0 1em; margin: 2em 0 1em;
} }
.listGroupHeader.first { .listGroupHeader-first {
margin-top: 0; margin-top: 0;
} }
.listItem .indicators { .listItem .indicators {
right: .5vh; right: .5vh;
@ -196,10 +183,6 @@ div.listItem {
@supports (display: flex) { @supports (display: flex) {
.listItem > * {
display: flex;
}
.listItem, .listItemBody, .listItemMediaInfo { .listItem, .listItemBody, .listItemMediaInfo {
display: flex; display: flex;
} }

22
dashboard-ui/bower_components/emby-webcomponents/listview/listview.js vendored
View file

@ -113,12 +113,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
if (i === 0) { if (i === 0) {
if (isLargeStyle) { if (isLargeStyle) {
html += '<h2>'; html += '<h2 class="listItemBodyText">';
} else { } else {
html += '<div>'; html += '<div class="listItemBodyText">';
} }
} else { } else {
html += '<div class="secondary">'; html += '<div class="secondary listItemBodyText">';
} }
html += (textlines[i] || '&nbsp;'); html += (textlines[i] || '&nbsp;');
if (i === 0 && isLargeStyle) { if (i === 0 && isLargeStyle) {
@ -164,7 +164,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
if (i == 0) { if (i == 0) {
html += '<h1 class="listGroupHeader first">'; html += '<h1 class="listGroupHeader listGroupHeader-first">';
} }
else { else {
html += '<h1 class="listGroupHeader">'; html += '<h1 class="listGroupHeader">';
@ -178,7 +178,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
} }
} }
var cssClass = "listItem"; var cssClass = "listItem listItem-nosidepadding";
if (clickEntireItem) { if (clickEntireItem) {
cssClass += ' itemAction'; cssClass += ' itemAction';
@ -187,7 +187,7 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
var downloadWidth = 80; var downloadWidth = 80;
if (isLargeStyle) { if (isLargeStyle) {
cssClass += " largeImage"; cssClass += " listItem-largeImage";
downloadWidth = 500; downloadWidth = 500;
} }
@ -208,10 +208,12 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
var imgUrl = getImageUrl(item, downloadWidth); var imgUrl = getImageUrl(item, downloadWidth);
var imageClass = isLargeStyle ? 'listItemImage listItemImage-large' : 'listItemImage';
if (imgUrl) { if (imgUrl) {
html += '<div class="listItemImage lazy" data-src="' + imgUrl + '" item-icon>'; html += '<div class="' + imageClass + ' lazy" data-src="' + imgUrl + '" item-icon>';
} else { } else {
html += '<div class="listItemImage">'; html += '<div class="' + imageClass + '">';
} }
var indicatorsHtml = ''; var indicatorsHtml = '';
@ -277,11 +279,11 @@ define(['itemHelper', 'mediaInfo', 'indicators', 'connectionManager', 'layoutMan
html += getTextLinesHtml(textlines, isLargeStyle); html += getTextLinesHtml(textlines, isLargeStyle);
if (!enableSideMediaInfo) { if (!enableSideMediaInfo) {
html += '<div class="secondary listItemMediaInfo">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>'; html += '<div class="secondary listItemMediaInfo listItemBodyText">' + mediaInfo.getPrimaryMediaInfoHtml(item) + '</div>';
} }
if (enableOverview && item.Overview) { if (enableOverview && item.Overview) {
html += '<div class="secondary overview">'; html += '<div class="secondary overview listItemBodyText">';
html += item.Overview; html += item.Overview;
html += '</div>'; html += '</div>';
} }

60
dashboard-ui/css/dashboard.css
View file

@ -160,12 +160,6 @@ paper-input + .fieldDescription {
} }
} }
/* Swatches */
paper-fab.blue {
background: #03a9f4;
}
paper-checkbox #checkboxContainer { paper-checkbox #checkboxContainer {
width: 22px !important; width: 22px !important;
height: 22px !important; height: 22px !important;
@ -196,48 +190,6 @@ paper-input label, paper-textarea label {
margin-bottom: .5em; margin-bottom: .5em;
} }
paper-fab {
vertical-align: middle;
display: inline-flex !important;
}
paper-fab.mini {
width: 22px;
height: 22px;
}
paper-fab.mini iron-icon {
width: 22px;
height: 22px;
}
.ui-body-a paper-fab.subdued {
background: #fff;
color: #000;
}
.ui-body-a paper-fab.subdued paper-material.keyboard-focus {
background: #686868 !important;
}
paper-fab.white {
background: #fff;
color: #000;
}
paper-fab.white paper-material.keyboard-focus {
background: #01579b !important;
color: #fff;
}
paper-fab.square {
border-radius: 5px;
}
paper-fab.accent {
background-color: #52B54B;
}
paper-textarea.mono textarea { paper-textarea.mono textarea {
font-family: monospace !important; font-family: monospace !important;
} }
@ -724,18 +676,6 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
outline: none !important; outline: none !important;
} }
.scheduledTaskPaperIconItem[data-status='Idle'] paper-fab {
background-color: #999;
}
.scheduledTaskPaperIconItem[data-status="Cancelling"] paper-fab {
background-color: #cc3333;
}
.scheduledTaskPaperIconItem[data-status="Running"] paper-fab {
background-color: #52B54B;
}
.scheduledTaskPaperIconItem #progressContainer { .scheduledTaskPaperIconItem #progressContainer {
height: 8px !important; height: 8px !important;
border-radius: 5px; border-radius: 5px;

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

@ -253,13 +253,6 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
margin-left: 1.25em; margin-left: 1.25em;
} }
.userDataIcons paper-fab {
background: #444;
width: 40px;
height: 40px;
padding: 8px;
}
.itemBackdrop { .itemBackdrop {
background-size: cover; background-size: cover;
background-position: center 15%; background-position: center 15%;

7
dashboard-ui/css/site.css
View file

@ -16,6 +16,7 @@
.emby-button iron-icon + span { .emby-button iron-icon + span {
margin-left: .5em; margin-left: .5em;
} }
.paper-icon-button-light > iron-icon { .paper-icon-button-light > iron-icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -114,7 +115,7 @@ h2 {
} }
h3 { h3 {
font-weight: 500; font-weight: 400;
} }
a, a:active, a:hover { a, a:active, a:hover {
@ -686,3 +687,7 @@ progress {
.ui-body-a .cardFooter .cardText + .cardText { .ui-body-a .cardFooter .cardText + .cardText {
opacity: .8; opacity: .8;
} }
.ui-body-a .listItem .secondary {
color: #737373;
}

2
dashboard-ui/encodingsettings.html
View file

@ -29,7 +29,7 @@
</select> </select>
<div class="fieldDescription">${LabelTranscodingThreadCountHelp}</div> <div class="fieldDescription">${LabelTranscodingThreadCountHelp}</div>
</div> </div>
<div class="checkboxContainer"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input is="emby-checkbox" type="checkbox" id="chkEnableThrottle" /> <input is="emby-checkbox" type="checkbox" id="chkEnableThrottle" />
<span>${OptionEnableTranscodingThrottle}</span> <span>${OptionEnableTranscodingThrottle}</span>

2
dashboard-ui/mypreferenceshome.html
View file

@ -79,7 +79,7 @@
<div class="fieldDescription checkboxFieldDescription">${LabelSelectFolderGroupsHelp}</div> <div class="fieldDescription checkboxFieldDescription">${LabelSelectFolderGroupsHelp}</div>
</div> </div>
<br/> <br/>
<div class="checkboxContainer"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input class="chkDisplayChannelsInline" type="checkbox" is="emby-checkbox" /> <input class="chkDisplayChannelsInline" type="checkbox" is="emby-checkbox" />
<span>${OptionDisplayChannelsInline}</span> <span>${OptionDisplayChannelsInline}</span>

4
dashboard-ui/mypreferenceslanguages.html
View file

@ -52,7 +52,7 @@
${HeaderCinemaMode} ${HeaderCinemaMode}
</h1> </h1>
<br/> <br/>
<div class="checkboxContainer"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input type="checkbox" is="emby-checkbox" class="chkEnableCinemaMode" /> <input type="checkbox" is="emby-checkbox" class="chkEnableCinemaMode" />
<span>${LabelEnableCinemaMode}</span> <span>${LabelEnableCinemaMode}</span>
@ -82,7 +82,7 @@
<span>${OptionPlayNextEpisodeAutomatically}</span> <span>${OptionPlayNextEpisodeAutomatically}</span>
</label> </label>
<div class="checkboxContainer fldExternalPlayer"> <div class="checkboxContainer fldExternalPlayer checkboxContainer-withDescription">
<label> <label>
<input type="checkbox" is="emby-checkbox" class="chkExternalVideoPlayer" /> <input type="checkbox" is="emby-checkbox" class="chkExternalVideoPlayer" />
<span>${OptionEnableExternalVideoPlayers}</span> <span>${OptionEnableExternalVideoPlayers}</span>

2
dashboard-ui/myprofile.html
View file

@ -74,7 +74,7 @@
<div class="inputContainer"> <div class="inputContainer">
<input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" /> <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
</div> </div>
<div class="checkboxContainer"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" /> <input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
<span>${LabelInNetworkSignInWithEasyPassword}</span> <span>${LabelInNetworkSignInWithEasyPassword}</span>

2
dashboard-ui/scheduledtask.html
View file

@ -1,4 +1,4 @@
<div id="scheduledTaskPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks" data-require="jQuery,jqmpopup,scripts/scheduledtaskpage,paper-input,emby-button,jqmlistview"> <div id="scheduledTaskPage" data-role="page" class="page type-interior scheduledTasksConfigurationPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Scheduled%20tasks" data-require="jQuery,jqmpopup,scripts/scheduledtaskpage,paper-input,emby-button">
<div data-role="content"> <div data-role="content">
<div class="content-primary"> <div class="content-primary">

28
dashboard-ui/scripts/devices.js
View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) { define(['jQuery', 'listViewStyle'], function ($) {
function deleteDevice(page, id) { function deleteDevice(page, id) {
@ -36,35 +36,39 @@
html += devices.map(function (d) { html += devices.map(function (d) {
var deviceHtml = ''; 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 += '<a class="clearLink" href="device.html?id=' + d.Id + '">';
deviceHtml += '<div>'; deviceHtml += '<div class="listItemBodyText">';
deviceHtml += d.Name; deviceHtml += d.Name;
deviceHtml += '</div>'; deviceHtml += '</div>';
if (d.AppName) { if (d.AppName) {
deviceHtml += '<div secondary>'; deviceHtml += '<div class="listItemBodyText secondary">';
deviceHtml += d.AppName; deviceHtml += d.AppName;
deviceHtml += '</div>'; deviceHtml += '</div>';
} }
if (d.LastUserName) { if (d.LastUserName) {
deviceHtml += '<div secondary>'; deviceHtml += '<div class="listItemBodyText secondary">';
deviceHtml += Globalize.translate('DeviceLastUsedByUserName', d.LastUserName); deviceHtml += Globalize.translate('DeviceLastUsedByUserName', d.LastUserName);
deviceHtml += '</div>'; deviceHtml += '</div>';
} }
deviceHtml += '</a>'; 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; return deviceHtml;
@ -91,9 +95,7 @@
})).then(function (result) { })).then(function (result) {
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { load(page, result.Items);
load(page, result.Items);
});
Dashboard.hideLoadingMsg(); Dashboard.hideLoadingMsg();
}); });

73
dashboard-ui/scripts/dlnaprofiles.js
View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) { define(['jQuery', 'listViewStyle'], function ($) {
function loadProfiles(page) { function loadProfiles(page) {
@ -30,51 +30,48 @@
function renderProfiles(page, element, profiles) { 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) { for (var i = 0, length = profiles.length; i < length; i++) {
html += '<div class="paperList">';
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 + "'>"; $('.btnDeleteProfile', element).on('click', function () {
html += '<paper-fab mini icon="dvr" class="blue"></paper-fab>';
html += "</a>";
html += '<paper-item-body two-line>'; var id = this.getAttribute('data-profileid');
html += "<a class='clearLink' href='dlnaprofile.html?id=" + profile.Id + "'>"; deleteProfile(page, 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);
});
}); });
} }

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

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

26
dashboard-ui/scripts/librarypathmapping.js
View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) { define(['jQuery', 'listViewStyle'], function ($) {
var currentConfig; var currentConfig;
@ -37,21 +37,21 @@
var html = config.PathSubstitutions.map(function (map) { var html = config.PathSubstitutions.map(function (map) {
var mapHtml = ''; 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 += "<h3 class='listItemBodyText'>" + map.From + "</h3>";
mapHtml += "<div secondary><b>" + Globalize.translate('HeaderTo') + "</b></div>"; mapHtml += "<div class='listItemBodyText secondary'>" + Globalize.translate('HeaderTo') + "</div>";
mapHtml += "<div secondary>" + map.To + "</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++; index++;
@ -75,10 +75,8 @@
currentConfig = config; currentConfig = config;
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { reloadPathMappings(page, config);
reloadPathMappings(page, config); Dashboard.hideLoadingMsg();
Dashboard.hideLoadingMsg();
});
} }
function reload(page) { function reload(page) {

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

@ -35,14 +35,14 @@
var logHtml = ''; var logHtml = '';
logHtml += '<div class="listItem">'; 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 += '<i class="md-icon listItemIcon">schedule</i>';
logHtml += "</a>"; logHtml += "</a>";
logHtml += '<div class="listItemBody">'; logHtml += '<div class="listItemBody two-line">';
logHtml += '<a class="clearLink" href="' + logUrl + '" target="_blank">'; 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); var date = datetime.parseISO8601Date(log.DateModified, true);
@ -50,7 +50,7 @@
text += ' ' + datetime.getDisplayTime(date); text += ' ' + datetime.getDisplayTime(date);
logHtml += '<div class="secondary">' + text + '</div>'; logHtml += '<div class="listItemBodyText secondary">' + text + '</div>';
logHtml += "</a>"; logHtml += "</a>";
logHtml += '</div>'; logHtml += '</div>';

7
dashboard-ui/scripts/notificationlist.js
View file

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

24
dashboard-ui/scripts/notifications.js
View file

@ -1,4 +1,4 @@
define(['libraryBrowser'], function (libraryBrowser) { define(['libraryBrowser', 'listViewStyle'], function (libraryBrowser) {
function notifications() { 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++) { for (var i = 0, length = list.length; i < length; i++) {
var notification = list[i]; var notification = list[i];
@ -136,33 +136,33 @@
itemHtml += '<a class="clearLink" href="' + notification.Url + '" target="_blank">'; itemHtml += '<a class="clearLink" href="' + notification.Url + '" target="_blank">';
} }
itemHtml += '<paper-icon-item>'; itemHtml += '<div class="listItem">';
if (notification.Level == "Error") { 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 { } 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 += notification.Name;
itemHtml += '</div>'; itemHtml += '</h3>';
itemHtml += '<div secondary>'; itemHtml += '<div class="listItemBodyText secondary">';
itemHtml += humane_date(notification.Date); itemHtml += humane_date(notification.Date);
itemHtml += '</div>'; itemHtml += '</div>';
if (notification.Description) { if (notification.Description) {
itemHtml += '<div secondary>'; itemHtml += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
itemHtml += notification.Description; itemHtml += notification.Description;
itemHtml += '</div>'; itemHtml += '</div>';
} }
itemHtml += '</paper-item-body>'; itemHtml += '</div>';
itemHtml += '</paper-icon-item>'; itemHtml += '</div>';
if (notification.Url) { if (notification.Url) {
itemHtml += '</a>'; itemHtml += '</a>';

22
dashboard-ui/scripts/notificationsettings.js
View file

@ -1,4 +1,4 @@
define(['jQuery'], function ($) { define(['jQuery', 'listViewStyle'], function ($) {
function reload(page) { function reload(page) {
@ -29,23 +29,23 @@
} }
itemHtml += '<a class="clearLink" href="notificationsetting.html?type=' + i.Type + '">'; itemHtml += '<a class="clearLink" href="notificationsetting.html?type=' + i.Type + '">';
itemHtml += '<paper-icon-item>'; itemHtml += '<div class="listItem">';
if (i.Enabled) { 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 { 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 class="listItemBody two-line">';
itemHtml += '<div>' + i.Name + '</div>'; 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>'; itemHtml += '</a>';
return itemHtml; return itemHtml;
@ -80,9 +80,7 @@
LibraryMenu.setTabs('notifications', 0, getTabs); LibraryMenu.setTabs('notifications', 0, getTabs);
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { reload(view);
reload(view);
});
}); });
}; };
}); });

18
dashboard-ui/scripts/scheduledtaskpage.js
View file

@ -24,7 +24,7 @@ var ScheduledTaskPage = {
$('#pTaskDescription', page).html(task.Description); $('#pTaskDescription', page).html(task.Description);
require(['paper-fab', 'paper-item-body', 'paper-icon-item'], function () { require(['listViewStyle'], function () {
ScheduledTaskPage.loadTaskTriggers(page, task); ScheduledTaskPage.loadTaskTriggers(page, task);
}); });
@ -41,16 +41,16 @@ var ScheduledTaskPage = {
var trigger = task.Triggers[i]; 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) { if (trigger.MaxRuntimeMs) {
html += '<div secondary>'; html += '<div class="listItemBodyText secondary">';
var hours = trigger.MaxRuntimeMs / 3600000; var hours = trigger.MaxRuntimeMs / 3600000;
@ -62,11 +62,11 @@ var ScheduledTaskPage = {
html += '</div>'; 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>'; html += '</div>';

36
dashboard-ui/scripts/scheduledtaskspage.js
View file

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

6
dashboard-ui/thirdparty/paper-button-style.css vendored
View file

@ -209,8 +209,4 @@ div.dialogHeader {
.formDialog.background-theme-b { .formDialog.background-theme-b {
background-color: #181818; background-color: #181818;
} }
.ui-body-b .listItem .secondary {
color: #aaa;
}

2
dashboard-ui/userpassword.html
View file

@ -48,7 +48,7 @@
<input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" /> <input is="emby-input" type="number" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off" pattern="[0-9]*" step="1" maxlength="5" />
</div> </div>
<br /> <br />
<div class="checkboxContainer"> <div class="checkboxContainer checkboxContainer-withDescription">
<label> <label>
<input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" /> <input type="checkbox" is="emby-checkbox" class="chkEnableLocalEasyPassword" />
<span>${LabelInNetworkSignInWithEasyPassword}</span> <span>${LabelInNetworkSignInWithEasyPassword}</span>