mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 19:38:20 -07:00
85 lines
1.8 KiB
HTML
85 lines
1.8 KiB
HTML
<link rel="import" href="../polymer/polymer.html">
|
|
<link rel="import" href="../iron-icon/iron-icon.html">
|
|
<link rel="import" href="../iron-icons/iron-icons.html">
|
|
<link rel="import" href="../iron-collapse/iron-collapse.html">
|
|
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
|
|
<link rel="import" href="../paper-item/paper-item.html">
|
|
<link rel="import" href="../paper-item/paper-item-body.html">
|
|
<link rel="import" href="../paper-styles/paper-styles.html">
|
|
|
|
<dom-module id='paper-collapse-item'>
|
|
|
|
<template>
|
|
|
|
<style>
|
|
.header {
|
|
min-height: 48px;
|
|
color: var(--primary-text-color);
|
|
@apply(--layout-horizontal);
|
|
@apply(--layout-center-center);
|
|
@apply(--paper-font-subhead);
|
|
}
|
|
|
|
.icon {
|
|
margin-right: 24px;
|
|
--iron-icon-height: 32px;
|
|
--iron-icon-width: 32px;
|
|
}
|
|
|
|
.icon,.toogle {
|
|
color: var(--disabled-text-color);
|
|
}
|
|
|
|
.content {
|
|
color: var(--primary-text-color);
|
|
@apply(--paper-font-body1);
|
|
}
|
|
</style>
|
|
|
|
<paper-item on-tap="_toggleOpened">
|
|
<paper-item-body>
|
|
<div class="header">
|
|
<iron-icon class='icon' icon=[[icon]]></iron-icon>
|
|
<div class="flex">[[header]]</div>
|
|
<paper-icon-button class='toogle' icon=[[_toggleIcon]]></paper-icon-button>
|
|
</div>
|
|
<iron-collapse class="content" opened={{opened}}>
|
|
<content></content>
|
|
</iron-collapse>
|
|
</paper-item-body>
|
|
</paper-item>
|
|
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
|
|
(function() {
|
|
|
|
Polymer({
|
|
is: 'paper-collapse-item',
|
|
properties: {
|
|
header: String,
|
|
icon: String,
|
|
|
|
opened: Boolean,
|
|
|
|
_toggleIcon: {
|
|
type: String,
|
|
computed: '_computeToggleIcon(opened)'
|
|
}
|
|
},
|
|
|
|
// Private methods
|
|
_toggleOpened: function(e) {
|
|
this.opened = !this.opened;
|
|
},
|
|
_computeToggleIcon: function(opened) {
|
|
return opened ? "icons:expand-less" : "icons:expand-more";
|
|
}
|
|
});
|
|
|
|
})();
|
|
|
|
</script>
|