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

drop jqm collapsible

Browse source
This commit is contained in:
Luke Pulverenti 2016-03-01 22:27:33 -05:00
parent b796e249e3
commit 45b881dd00
8 changed files with 240 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

157
dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html vendored Normal file
View file

@ -0,0 +1,157 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../neon-animation/animations/transform-animation.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<iron-iconset-svg name="emby-collapsible-icons" size="24">
<svg>
<defs>
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></g>
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></g>
</defs>
</svg>
</iron-iconset-svg>
<dom-module id="emby-collapsible">
<template>
<style>
iron-collapse {
padding-left: 16px;
padding-right: 16px;
}
</style>
<div>
<paper-button on-tap="toggleExpand" id="expandButton" class="emby-collapsible-button" style="margin:0;display: flex; justify-content: center; align-items: center;">
<h3 class="emby-collapsible-title" title="[[title]]">[[title]]</h3>
<iron-icon id="expandIcon" style="margin-left: auto; margin-right: .5em;"></iron-icon>
</paper-button>
<iron-collapse id="contentCollapse" class="emby-collapsible-content" opened="{{expanded}}">
<content></content>
</iron-collapse>
</div>
</template>
<script>
Polymer({
is: 'emby-collapsible',
behaviors: [Polymer.NeonAnimationRunnerBehavior],
properties: {
expanded: {
type: Boolean,
value: false,
notify: true,
observer: '_expandedChanged'
},
expandMoreTitle: {
type: String,
value: "Show More"
},
expandLessTitle: {
type: String,
value: "Show Less"
},
enableRotateAnimation: {
type: Boolean,
value: true
},
expandMoreIcon: {
type: String,
value: "expand-more"
},
expandLessIcon: {
type: String,
value: "expand-less"
},
animationConfig: {
value: function () {
return {
'rotateIcon': {
name: 'transform-animation',
node: this.$.expandIcon,
transformOrigin: "50% 50%",
transformFrom: "rotate(0)",
transformTo: "rotate(180deg)",
timing: { duration: 350 }
}
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
_onNeonAnimationFinish: function () {
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
},
// Fires when an instance of the element is created
created: function () { },
// Fires when the local DOM has been fully prepared
ready: function () {
//Set initial icon
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
//Set initial title
if (this.expanded) {
this.$.expandButton.title = this.expandLessTitle;
}
else {
this.$.expandButton.title = this.expandMoreTitle;
}
},
// Fires when the element was inserted into the document
attached: function () { },
// Fires when the element was removed from the document
detached: function () { },
// Fires when an attribute was added, removed, or updated
_expandedChanged: function (newVal, oldVal) {
//If icon is already set no need to animate!
if ((newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-less")) || (!newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-more"))) {
return;
}
//Set title
if (newVal) {
this.$.expandButton.title = this.expandLessTitle;
}
else {
this.$.expandButton.title = this.expandMoreTitle;
}
if (this.enableRotateAnimation) {
//Play rotate animation
this.cancelAnimation();
this.playAnimation('rotateIcon');
}
else {
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
}
},
toggleExpand: function () {
this.expanded = !this.expanded;
}
});
</script>
</dom-module>

5
dashboard-ui/components/filterdialog/filterdialog.js
View file

@ -1,4 +1,4 @@
define(['paperdialoghelper', 'events', 'browser', 'paper-checkbox', 'jqmcollapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (paperDialogHelper, events, browser) { define(['paperdialoghelper', 'events', 'browser', 'paper-checkbox', 'emby-collapsible', 'css!components/filterdialog/style', 'paper-radio-button', 'paper-radio-group'], function (paperDialogHelper, events, browser) {
function renderOptions(context, selector, cssClass, items, isCheckedFn) { function renderOptions(context, selector, cssClass, items, isCheckedFn) {
@ -526,9 +526,6 @@
setVisibility(dlg, options); setVisibility(dlg, options);
document.body.appendChild(dlg); document.body.appendChild(dlg);
// needed for jqm collapsibles
$(dlg.querySelectorAll('div[data-role="collapsible"]')).collapsible({});
paperDialogHelper.open(dlg); paperDialogHelper.open(dlg);
dlg.addEventListener('iron-overlay-closed', resolve); dlg.addEventListener('iron-overlay-closed', resolve);

49
dashboard-ui/components/filterdialog/filterdialog.template.html
View file

@ -25,9 +25,7 @@
</div> </div>
</div> </div>
<br /> <br />
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="airdays hide"> <emby-collapsible title="${HeaderAirDays}" class="airdays hide">
<h2>${HeaderAirDays}</h2>
<div class="paperCheckboxList"> <div class="paperCheckboxList">
<paper-checkbox class="chkAirDays" id="chkSunday" data-filter="Sunday">${OptionSunday}</paper-checkbox> <paper-checkbox class="chkAirDays" id="chkSunday" data-filter="Sunday">${OptionSunday}</paper-checkbox>
<paper-checkbox class="chkAirDays" id="chkMonday" data-filter="Monday">${OptionMonday}</paper-checkbox> <paper-checkbox class="chkAirDays" id="chkMonday" data-filter="Monday">${OptionMonday}</paper-checkbox>
@ -37,10 +35,8 @@
<paper-checkbox class="chkAirDays" id="chkFriday" data-filter="Friday">${OptionFriday}</paper-checkbox> <paper-checkbox class="chkAirDays" id="chkFriday" data-filter="Friday">${OptionFriday}</paper-checkbox>
<paper-checkbox class="chkAirDays" id="chkSaturday" data-filter="Saturday">${OptionSaturday}</paper-checkbox> <paper-checkbox class="chkAirDays" id="chkSaturday" data-filter="Saturday">${OptionSaturday}</paper-checkbox>
</div> </div>
</div> </emby-collapsible>
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="features hide"> <emby-collapsible title="${HeaderFeatures}" class="features hide">
<h2>${HeaderFeatures}</h2>
<div class="paperCheckboxList"> <div class="paperCheckboxList">
<paper-checkbox class="chkFeatureFilter" id="chkSubtitle">${OptionHasSubtitles}</paper-checkbox> <paper-checkbox class="chkFeatureFilter" id="chkSubtitle">${OptionHasSubtitles}</paper-checkbox>
<paper-checkbox class="chkFeatureFilter" id="chkTrailer">${OptionHasTrailer}</paper-checkbox> <paper-checkbox class="chkFeatureFilter" id="chkTrailer">${OptionHasTrailer}</paper-checkbox>
@ -48,7 +44,7 @@
<paper-checkbox class="chkFeatureFilter" id="chkThemeSong">${OptionHasThemeSong}</paper-checkbox> <paper-checkbox class="chkFeatureFilter" id="chkThemeSong">${OptionHasThemeSong}</paper-checkbox>
<paper-checkbox class="chkFeatureFilter" id="chkThemeVideo">${OptionHasThemeVideo}</paper-checkbox> <paper-checkbox class="chkFeatureFilter" id="chkThemeVideo">${OptionHasThemeVideo}</paper-checkbox>
</div> </div>
</div> </emby-collapsible>
<div class="players hide"> <div class="players hide">
<h2 style="margin-bottom: .25em;"> <h2 style="margin-bottom: .25em;">
@ -61,37 +57,22 @@
<paper-radio-button class="radioPlayers" name="4">${Option4Player}</paper-radio-button> <paper-radio-button class="radioPlayers" name="4">${Option4Player}</paper-radio-button>
</paper-radio-group> </paper-radio-group>
</div> </div>
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="genreFilters hide"> <emby-collapsible title="${HeaderGenres}" class="genreFilters hide">
<h2>${HeaderGenres}</h2>
<div class="filterOptions"> <div class="filterOptions">
</div> </div>
</div> </emby-collapsible>
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="officialRatingFilters hide">
<h2>${HeaderParentalRatings}</h2>
<emby-collapsible title="${HeaderParentalRatings}" class="officialRatingFilters hide">
<div class="filterOptions"> <div class="filterOptions">
</div> </div>
</div> </emby-collapsible>
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
<h2>${HeaderTags}</h2>
<emby-collapsible title="${HeaderTags}" class="tagFilters hide">
<div class="filterOptions"> <div class="filterOptions">
</div> </div>
</div> </emby-collapsible>
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="tagFilters hide">
<h2>${HeaderTags}</h2>
<div class="filterOptions">
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="videoTypeFilters hide">
<h2>${HeaderVideoTypes}</h2>
<emby-collapsible title="${HeaderVideoTypes}" class="videoTypeFilters hide">
<div class="paperCheckboxList"> <div class="paperCheckboxList">
<paper-checkbox class="chkVideoTypeFilter chkBluray" data-filter="Bluray">${OptionBluray}</paper-checkbox> <paper-checkbox class="chkVideoTypeFilter chkBluray" data-filter="Bluray">${OptionBluray}</paper-checkbox>
<paper-checkbox class="chkVideoTypeFilter chkDvd" data-filter="Dvd">${OptionDvd}</paper-checkbox> <paper-checkbox class="chkVideoTypeFilter chkDvd" data-filter="Dvd">${OptionDvd}</paper-checkbox>
@ -101,12 +82,10 @@
<paper-checkbox class="chkSDFilter IsHD">${OptionIsSD}</paper-checkbox> <paper-checkbox class="chkSDFilter IsHD">${OptionIsSD}</paper-checkbox>
<paper-checkbox class="chk3DFilter chk3D">${Option3D}</paper-checkbox> <paper-checkbox class="chk3DFilter chk3D">${Option3D}</paper-checkbox>
</div> </div>
</div> </emby-collapsible>
<div data-role="collapsible" data-collapsed="true" data-mini="true" class="yearFilters hide">
<h2>${HeaderYears}</h2>
<emby-collapsible title="${HeaderYears}" class="yearFilters hide">
<div class="filterOptions"> <div class="filterOptions">
</div> </div>
</div> </emby-collapsible>
</div> </div>

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

@ -1878,3 +1878,27 @@ progress {
.actionSheetMenuItem:hover { .actionSheetMenuItem:hover {
background-color: #e8e8e8; background-color: #e8e8e8;
} }
emby-collapsible>.style-scope {
margin: .5em 0;
}
.ui-body-a .emby-collapsible-button {
border: 1px solid #ddd;
background-color: #f2f2f2;
text-transform: none;
}
.ui-body-a .emby-collapsible-title {
margin: .25em 0;
color: #000;
padding: 0 0 0 .25em;
font-weight: 500;
}
.ui-body-a .emby-collapsible-content {
border: 1px solid #ddd;
border-width: 0 1px 1px 1px;
padding: 1em 1.25em;
background-color: #fff;
}

71
dashboard-ui/dashboard.html
View file

@ -4,7 +4,7 @@
<title>Emby</title> <title>Emby</title>
</head> </head>
<body> <body>
<div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage" data-require="jqmcollapsible,scripts/dashboardpage,humanedate,buttonenabled,paper-icon-item,paper-item-body,paper-fab"> <div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage" data-require="scripts/dashboardpage,humanedate,buttonenabled,paper-icon-item,paper-item-body,paper-fab,emby-collapsible">
<div data-role="content"> <div data-role="content">
<div class="content-primary"> <div class="content-primary">
@ -23,6 +23,8 @@
<div class="readOnlyContent dashboardHomeLeftColumn"> <div class="readOnlyContent dashboardHomeLeftColumn">
<div>
</div>
<div> <div>
<h1>${HeaderServerInformation}</h1> <h1>${HeaderServerInformation}</h1>
<div class="paperList" style="padding:1em;"> <div class="paperList" style="padding:1em;">
@ -57,15 +59,17 @@
<p class="supporterIconContainer" style="padding-left: .5em;margin: 1em 0 0;"> <p class="supporterIconContainer" style="padding-left: .5em;margin: 1em 0 0;">
</p> </p>
<div id="collapsiblePendingInstallations" data-role="collapsible" data-collapsed="false" style="margin-top: 2em; display: none;">
<h3>${HeaderPendingInstallations}</h3> <div id="collapsiblePendingInstallations" style="margin-top: 2em; display: none;">
<p>${LabelComponentsUpdated}</p> <emby-collapsible title="${HeaderPendingInstallations}" expanded>
<div id="pendingInstallations"> <p>${LabelComponentsUpdated}</p>
</div> <div id="pendingInstallations">
<p>${MessagePleaseRestartServerToFinishUpdating}</p> </div>
<div class="btnRestartContainer hide"> <p>${MessagePleaseRestartServerToFinishUpdating}</p>
<paper-button raised class="submit" onclick="DashboardPage.restart();"><iron-icon icon="refresh"></iron-icon><span>${ButtonRestartNow}</span></paper-button> <div class="btnRestartContainer hide">
</div> <paper-button raised class="submit" onclick="DashboardPage.restart();"><iron-icon icon="refresh"></iron-icon><span>${ButtonRestartNow}</span></paper-button>
</div>
</emby-collapsible>
</div> </div>
<div class="activeDevicesCollapsible" style="margin-top: 2em;"> <div class="activeDevicesCollapsible" style="margin-top: 2em;">
@ -74,35 +78,32 @@
</div> </div>
</div> </div>
<div id="runningTasksCollapsible" data-role="collapsible" data-collapsed="false" style="margin-top: 1em; display: none;"> <div id="runningTasksCollapsible" style="margin-top: 2em; display: none;">
<h3>${HeaderRunningTasks}</h3> <emby-collapsible title="${HeaderRunningTasks}" expanded>
<div>
<div id="divRunningTasks"> <div id="divRunningTasks">
</div> </div>
</div> </emby-collapsible>
</div> </div>
<div data-role="collapsible" data-collapsed="true"> <br />
<h3>${HeaderPaths}</h3> <emby-collapsible title="${HeaderPaths}">
<div> <p>
<p> <b>${LabelCache}</b><br />
<b>${LabelCache}</b><br /> <span id="cachePath"></span>
<span id="cachePath"></span> </p>
</p> <p>
<p> <b>${LabelLogs}</b><br />
<b>${LabelLogs}</b><br /> <span id="logPath"></span>
<span id="logPath"></span> </p>
</p> <p>
<p> <b>${LabelMetadata}</b><br />
<b>${LabelMetadata}</b><br /> <span id="metadataPath"></span>
<span id="metadataPath"></span> </p>
</p> <p>
<p> <b>${LabelTranscodingTemporaryFiles}</b><br />
<b>${LabelTranscodingTemporaryFiles}</b><br /> <span id="transcodingTemporaryPath"></span>
<span id="transcodingTemporaryPath"></span> </p>
</p> </emby-collapsible>
</div>
</div>
</div> </div>
<div class="readOnlyContent dashboardHomeRightColumn firstDashboardHomeRightColumn"> <div class="readOnlyContent dashboardHomeRightColumn firstDashboardHomeRightColumn">

6
dashboard-ui/manifest.json
View file

@ -16,13 +16,11 @@
} }
], ],
"icons": [ { "icons": [ {
"src": "images/icon-144x144.png", "src": "css/images/touchicon144.png",
"sizes": "144x144", "sizes": "144x144",
"type": "image/png", "type": "image/png",
"density": "3.0" "density": "3.0"
}], }],
"display": "standalone", "display": "standalone",
"display": "standalone", "theme_color": "#52B54B"
"theme_color": "#52B54B",
"start_image": "images/start-image.png"
} }

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

@ -1491,7 +1491,7 @@ var AppInfo = {};
// This doesn't perform well on iOS // This doesn't perform well on iOS
AppInfo.enableHeadRoom = !isIOS; AppInfo.enableHeadRoom = !isIOS;
AppInfo.supportsDownloading = !(AppInfo.isNativeApp && isIOS); AppInfo.supportsDownloading = !(AppInfo.isNativeApp);
// This currently isn't working on android, unfortunately // This currently isn't working on android, unfortunately
AppInfo.supportsFileInput = !(AppInfo.isNativeApp && isAndroid); AppInfo.supportsFileInput = !(AppInfo.isNativeApp && isAndroid);
@ -1842,6 +1842,7 @@ var AppInfo = {};
define("paper-item-body", ["html!" + bowerPath + "/paper-item/paper-item-body.html"]); define("paper-item-body", ["html!" + bowerPath + "/paper-item/paper-item-body.html"]);
define("paper-collapse-item", ["html!" + bowerPath + "/paper-collapse-item/paper-collapse-item.html"]); define("paper-collapse-item", ["html!" + bowerPath + "/paper-collapse-item/paper-collapse-item.html"]);
define("emby-collapsible", ["html!" + bowerPath + "/emby-collapsible/emby-collapsible.html"]);
define("jstree", [bowerPath + "/jstree/dist/jstree", "css!thirdparty/jstree/themes/default/style.min.css"]); define("jstree", [bowerPath + "/jstree/dist/jstree", "css!thirdparty/jstree/themes/default/style.min.css"]);

9
dashboard-ui/scripts/sync.js
View file

@ -81,7 +81,7 @@
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['paper-checkbox', 'paper-input', 'jqmcollapsible'], function () { require(['paper-checkbox', 'paper-input', 'emby-collapsible'], function () {
renderFormInternal(options); renderFormInternal(options);
resolve(); resolve();
}); });
@ -162,8 +162,7 @@
dialogOptions.Options.indexOf('ItemLimit') != -1) { dialogOptions.Options.indexOf('ItemLimit') != -1) {
html += '<br/>'; html += '<br/>';
html += '<div data-role="collapsible" data-mini="true">'; html += '<emby-collapsible title="' + Globalize.translate('HeaderAdvanced') + '">';
html += '<h2>' + Globalize.translate('HeaderAdvanced') + '</h2>';
html += '<div style="padding:0 0 1em;">'; html += '<div style="padding:0 0 1em;">';
if (dialogOptions.Options.indexOf('SyncNewContent') != -1) { if (dialogOptions.Options.indexOf('SyncNewContent') != -1) {
html += '<br/>'; html += '<br/>';
@ -179,14 +178,14 @@
html += '<div class="fieldDescription">' + Globalize.translate('LabelItemLimitHelp') + '</div>'; html += '<div class="fieldDescription">' + Globalize.translate('LabelItemLimitHelp') + '</div>';
html += '</div>'; html += '</div>';
} }
html += '</div>'; html += '</emby-collapsible>';
html += '</div>'; html += '</div>';
} }
//html += '</div>'; //html += '</div>';
//html += '</div>'; //html += '</div>';
$(elem).html(html).trigger('create'); $(elem).html(html);
$('#selectSyncTarget', elem).on('change', function () { $('#selectSyncTarget', elem).on('change', function () {