Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-17 10:40:41 +01:00
Code Issues Packages Projects Releases Activity

new CollapsibleSectionContainer WIP

Browse Source
This commit is contained in:
zadam
2020-10-31 22:47:15 +01:00
parent 435200ec5a
commit 2c028f7c45
11 changed files with 233 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/public/app/widgets/collapsible_section_container.js
View File

@@ -1,8 +1,12 @@
import AbstractContainer from "./abstract_container.js";
import TabAwareWidget from "./tab_aware_widget.js";
const TPL = `
<div class="section-container">
<style>
.section-container {
margin-bottom: 10px;
}
.section-title-container {
display: flex;
flex-direction: row;
@@ -17,6 +21,11 @@ const TPL = `
border-bottom: 1px solid var(--main-border-color);
}
.section-title.active {
color: var(--main-text-color);
border-bottom: 1px solid var(--main-text-color);
}
.section-title:hover {
cursor: pointer;
}
@@ -29,13 +38,49 @@ const TPL = `
flex-shrink: 1;
flex-grow: 1;
}
.section-body {
display: none;
border-bottom: 1px solid var(--main-border-color);
}
.section-body.active {
display: block;
}
</style>
<div class="section-title-container"></div>
<div class="section-body-container"></div>
</div>`;
export default class CollapsibleSectionContainer extends AbstractContainer {
export default class CollapsibleSectionContainer extends TabAwareWidget {
constructor() {
super();
this.children = [];
this.positionCounter = 10;
}
child(...components) {
if (!components) {
return this;
}
super.child(...components);
for (const component of components) {
if (!component.position) {
component.position = this.positionCounter;
this.positionCounter += 10;
}
}
this.children.sort((a, b) => a.position - b.position < 0 ? -1 : 1);
return this;
}
doRender() {
this.$widget = $(TPL);
this.contentSized();
@@ -47,7 +92,8 @@ export default class CollapsibleSectionContainer extends AbstractContainer {
for (const widget of this.children) {
this.$titleContainer.append(
$('<div class="section-title">')
$('<div class="section-title section-title-real">')
.attr('data-section-component-id', widget.componentId)
.append(widget.renderTitle())
);
@@ -55,8 +101,27 @@ export default class CollapsibleSectionContainer extends AbstractContainer {
this.$bodyContainer.append(
$('<div class="section-body">')
.attr('data-section-component-id', widget.componentId)
.append(widget.render())
);
}
this.$titleContainer.on('click', '.section-title-real', e => {
const $sectionTitle = $(e.target).closest('.section-title-real');
const activate = !$sectionTitle.hasClass("active");
this.$titleContainer.find('.section-title-real').removeClass("active");
this.$bodyContainer.find('.section-body').removeClass("active");
if (activate) {
this.$titleContainer.find(`.section-title-real[data-section-component-id="${$sectionTitle.attr('data-section-component-id')}"]`).addClass("active");
this.$bodyContainer.find(`.section-body[data-section-component-id="${$sectionTitle.attr('data-section-component-id')}"]`).addClass("active");
}
});
}
async refreshWithNote(note) {
this.$titleContainer.find('.section-title-real:first').trigger('click');
}
}