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

improvements to collapsible section container

Browse Source
This commit is contained in:
zadam
2020-11-19 23:02:25 +01:00
parent c737a3adc9
commit af1fd5bd06
8 changed files with 209 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/app/widgets/attribute_editor.js
View File

@@ -34,7 +34,7 @@ const TPL = `
.save-attributes-button {
color: var(--muted-text-color);
position: absolute;
bottom: 3px;
bottom: 14px;
right: 25px;
cursor: pointer;
border: 1px solid transparent;
@@ -44,7 +44,7 @@ const TPL = `
.add-new-attribute-button {
color: var(--muted-text-color);
position: absolute;
bottom: 2px;
bottom: 13px;
right: 0;
cursor: pointer;
border: 1px solid transparent;

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

@@ -4,7 +4,7 @@ const TPL = `
<div class="section-container">
<style>
.section-container {
margin-bottom: 10px;
margin-bottom: 10px;
}
.section-title-container {
@@ -12,6 +12,8 @@ const TPL = `
flex-direction: row;
justify-content: center;
margin-top: 7px;
margin-left: 10px;
margin-right: 10px;
}
.section-title {
@@ -42,6 +44,8 @@ const TPL = `
.section-body {
display: none;
border-bottom: 1px solid var(--main-border-color);
margin-left: 10px;
margin-right: 10px;
}
.section-body.active {
@@ -88,17 +92,7 @@ export default class CollapsibleSectionContainer extends TabAwareWidget {
this.$titleContainer = this.$widget.find('.section-title-container');
this.$bodyContainer = this.$widget.find('.section-body-container');
this.$titleContainer.append('<div class="section-title section-title-empty">');
for (const widget of this.children) {
this.$titleContainer.append(
$('<div class="section-title section-title-real">')
.attr('data-section-component-id', widget.componentId)
.append(widget.renderTitle())
);
this.$titleContainer.append('<div class="section-title section-title-empty">');
this.$bodyContainer.append(
$('<div class="section-body">')
.attr('data-section-component-id', widget.componentId)
@@ -115,13 +109,56 @@ export default class CollapsibleSectionContainer extends TabAwareWidget {
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");
const sectionComponentId = $sectionTitle.attr('data-section-component-id');
this.lastActiveComponentId = sectionComponentId;
this.$titleContainer.find(`.section-title-real[data-section-component-id="${sectionComponentId}"]`).addClass("active");
this.$bodyContainer.find(`.section-body[data-section-component-id="${sectionComponentId}"]`).addClass("active");
}
else {
this.lastActiveComponentId = null;
}
});
}
async refreshWithNote(note) {
this.$titleContainer.find('.section-title-real:first').trigger('click');
let $sectionToActivate, $lastActiveSection;
this.$titleContainer.empty().append('<div class="section-title section-title-empty">');
for (const widget of this.children) {
const ret = widget.renderTitle(note);
if (!ret.show) {
continue;
}
const $sectionTitle = $('<div class="section-title section-title-real">')
.attr('data-section-component-id', widget.componentId)
.append(ret.$title);
this.$titleContainer.append($sectionTitle);
this.$titleContainer.append('<div class="section-title section-title-empty">');
if (ret.activate && !$sectionToActivate) {
$sectionToActivate = $sectionTitle;
}
if (this.lastActiveComponentId === widget.componentId) {
$lastActiveSection = $sectionTitle;
}
}
if (!$sectionToActivate) {
$sectionToActivate = $lastActiveSection;
}
if ($sectionToActivate) {
$sectionToActivate.trigger('click');
}
else {
this.$bodyContainer.find('.section-body').removeClass("active");
}
}
}

27
src/public/app/widgets/inherited_attribute_list.js
View File

@@ -16,7 +16,7 @@ const TPL = `
</style>
<div class="inherited-attributes-container"></div>
</div>`
</div>`;
export default class InheritedAttributesWidget extends TabAwareWidget {
constructor() {
@@ -26,9 +26,15 @@ export default class InheritedAttributesWidget extends TabAwareWidget {
this.child(this.attributeDetailWidget);
}
renderTitle() {
this.$title = $('<div>').text('Inherited attributes');
return this.$title;
renderTitle(note) {
const inheritedAttributes = this.getInheritedAttributes(note);
this.$title.text(`Inherited attrs (${inheritedAttributes.length})`);
return {
show: true,
$title: this.$title
};
}
doRender() {
@@ -37,12 +43,19 @@ export default class InheritedAttributesWidget extends TabAwareWidget {
this.$container = this.$widget.find('.inherited-attributes-container');
this.$widget.append(this.attributeDetailWidget.render());
this.$title = $('<div>');
}
async refreshWithNote(note) {
this.$container.empty();
const inheritedAttributes = note.getAttributes().filter(attr => attr.noteId !== this.noteId);
const inheritedAttributes = this.getInheritedAttributes(note);
if (inheritedAttributes.length === 0) {
this.$container.append("No inherited attributes.");
return;
}
for (const attribute of inheritedAttributes) {
const $attr = (await attributeRenderer.renderAttribute(attribute, false))
@@ -63,4 +76,8 @@ export default class InheritedAttributesWidget extends TabAwareWidget {
.append(" ");
}
}
getInheritedAttributes(note) {
return note.getAttributes().filter(attr => attr.noteId !== this.noteId);
}
}

17
src/public/app/widgets/owned_attribute_list.js
View File

@@ -8,6 +8,7 @@ const TPL = `
.attribute-list {
margin-left: 7px;
margin-right: 7px;
margin-top: 3px;
position: relative;
}
@@ -30,9 +31,15 @@ export default class OwnedAttributeListWidget extends TabAwareWidget {
this.child(this.attributeEditorWidget, this.attributeDetailWidget);
}
renderTitle() {
this.$title = $('<div>').text('Owned attributes');
return this.$title;
renderTitle(note) {
const ownedNotes = note.getAttributes().filter(attr => attr.noteId === this.noteId)
this.$title.text(`Owned attrs (${ownedNotes.length})`);
return {
show: true,
$title: this.$title
};
}
doRender() {
@@ -41,6 +48,8 @@ export default class OwnedAttributeListWidget extends TabAwareWidget {
this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
this.$widget.append(this.attributeDetailWidget.render());
this.$title = $('<div>');
}
async saveAttributesCommand() {
@@ -58,6 +67,8 @@ export default class OwnedAttributeListWidget extends TabAwareWidget {
entitiesReloadedEvent({loadResults}) {
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
this.refreshWithNote(this.note, true);
this.renderTitle(this.note);
}
}
}

21
src/public/app/widgets/promoted_attributes.js
View File

@@ -39,11 +39,24 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
this.$widget = $(TPL);
this.overflowing();
this.$container = this.$widget.find(".promoted-attributes-container");
this.$title = $('<div>');
}
renderTitle() {
this.$title = $('<div>').text('Promoted attributes');
return this.$title;
renderTitle(note) {
const promotedDefAttrs = this.getPromotedDefinitionAttributes();
if (promotedDefAttrs.length === 0) {
return { show: false };
}
this.$title.text(`Promoted attrs (${promotedDefAttrs.length})`);
return {
show: true,
activate: true,
$title: this.$title
};
}
async refreshWithNote(note) {
@@ -292,6 +305,8 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
entitiesReloadedEvent({loadResults}) {
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
this.refresh();
this.renderTitle(this.note);
}
}
}