Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 13:01:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

reworked section container to be icon based

Browse Source
This commit is contained in:
zadam 2021-05-23 23:41:01 +02:00
parent 30cc566518
commit 7d94202460
10 changed files with 51 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/public/app/services/branches.js
View File

@ -120,7 +120,7 @@ async function moveNodeUpInHierarchy(node) {
if (!hoistedNoteService.isTopLevelNode(node) && node.getParent().getChildren().length <= 1) {
node.getParent().folder = false;
node.getParent().renderTitle();
node.getParent().getTitle();
}
}

28
src/public/app/widgets/containers/collapsible_section_container.js
View File

@ -23,6 +23,12 @@ const TPL = `
border-bottom: 1px solid var(--main-border-color);
}
.section-title .bx {
font-size: 170%;
position: relative;
top: 6px;
}
.section-title.active {
color: var(--main-text-color);
border-bottom: 1px solid var(--main-text-color);
@ -37,6 +43,10 @@ const TPL = `
}
.section-title-empty {
flex-basis: 20px;
}
.section-title-empty:last-of-type {
flex-shrink: 1;
flex-grow: 1;
}
@ -51,6 +61,14 @@ const TPL = `
.section-body.active {
display: block;
}
.section-title-label {
display: none;
}
.section-title.active .section-title-label {
display: inline;
}
</style>
<div class="section-title-container"></div>
@ -128,7 +146,7 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
this.$titleContainer.empty().append('<div class="section-title section-title-empty">');
for (const widget of this.children) {
const ret = widget.renderTitle(note);
const ret = widget.getTitle(note);
if (!ret.show) {
continue;
@ -136,7 +154,11 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
const $sectionTitle = $('<div class="section-title section-title-real">')
.attr('data-section-component-id', widget.componentId)
.append(ret.$title);
.append($('<span class="section-title-icon">')
.addClass(ret.icon)
.attr("title", ret.title))
.append(" ")
.append($('<span class="section-title-label">').text(ret.title));
this.$titleContainer.append($sectionTitle);
this.$titleContainer.append('<div class="section-title section-title-empty">');
@ -150,6 +172,8 @@ export default class CollapsibleSectionContainer extends NoteContextAwareWidget
}
}
this.$titleContainer.find('.section-title-icon').tooltip();
if (!$sectionToActivate) {
$sectionToActivate = $lastActiveSection;
}

2
src/public/app/widgets/note_tree.js
View File

@ -580,7 +580,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
node.setExpanded(branch.isExpanded, {noEvents: true, noAnimation: true});
}
node.renderTitle();
node.getTitle();
}
/**

5
src/public/app/widgets/type_property_widgets/file_properties.js
View File

@ -61,11 +61,12 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
return this.note && this.note.type === 'file';
}
renderTitle(note) {
getTitle() {
return {
show: this.isEnabled(),
activate: true,
$title: 'File'
title: 'File',
icon: 'bx bx-file'
};
}

5
src/public/app/widgets/type_property_widgets/image_properties.js
View File

@ -43,11 +43,12 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
return this.note && this.note.type === 'image';
}
renderTitle(note) {
getTitle(note) {
return {
show: this.isEnabled(),
activate: true,
$title: 'Image'
title: 'Image',
icon: 'bx bx-image'
};
}

11
src/public/app/widgets/type_property_widgets/inherited_attribute_list.js
View File

@ -28,14 +28,11 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
this.child(this.attributeDetailWidget);
}
renderTitle(note) {
const inheritedAttributes = this.getInheritedAttributes(note);
this.$title.text(`Inherited attrs (${inheritedAttributes.length})`);
getTitle() {
return {
show: true,
$title: this.$title
title: "Inherited attributes",
icon: "bx bx-list-plus"
};
}
@ -45,8 +42,6 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
this.$container = this.$widget.find('.inherited-attributes-container');
this.$widget.append(this.attributeDetailWidget.render());
this.$title = $('<div>');
}
async refreshWithNote(note) {

5
src/public/app/widgets/type_property_widgets/note_properties.js
View File

@ -21,11 +21,12 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
return this.note && !!this.note.getLabelValue('pageUrl');
}
renderTitle(note) {
getTitle() {
return {
show: this.isEnabled(),
activate: true,
$title: 'Info'
title: 'Info',
icon: 'bx bx-info-square'
};
}

11
src/public/app/widgets/type_property_widgets/owned_attribute_list.js
View File

@ -31,14 +31,11 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
this.child(this.attributeEditorWidget, this.attributeDetailWidget);
}
renderTitle(note) {
const ownedAttrs = note.getAttributes().filter(attr => attr.noteId === this.noteId && !attr.isAutoLink)
this.$title.text(`Owned attrs (${ownedAttrs.length})`);
getTitle() {
return {
show: true,
$title: this.$title
title: "Owned attributes",
icon: "bx bx-list-check"
};
}
@ -68,7 +65,7 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
this.refreshWithNote(this.note, true);
this.renderTitle(this.note);
this.getTitle(this.note);
}
}
}

11
src/public/app/widgets/type_property_widgets/promoted_attributes.js
View File

@ -39,23 +39,20 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
this.$widget = $(TPL);
this.overflowing();
this.$container = this.$widget.find(".promoted-attributes-container");
this.$title = $('<div>');
}
renderTitle(note) {
getTitle(note) {
const promotedDefAttrs = note.getPromotedDefinitionAttributes();
if (promotedDefAttrs.length === 0) {
return { show: false };
}
this.$title.text(`Promoted attrs (${promotedDefAttrs.length})`);
return {
show: true,
activate: true,
$title: this.$title
title: "Promoted attributes",
icon: "bx bx-table"
};
}
@ -292,7 +289,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
if (loadResults.getAttributes(this.componentId).find(attr => attr.isAffecting(this.note))) {
this.refresh();
this.renderTitle(this.note);
this.getTitle(this.note);
this.triggerCommand('refreshSectionContainer');
}
}

5
src/public/app/widgets/type_property_widgets/search_definition.js
View File

@ -206,11 +206,12 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
return this.note && this.note.type === 'search';
}
renderTitle(note) {
getTitle() {
return {
show: this.isEnabled(),
activate: true,
$title: 'Search'
title: 'Search',
icon: 'bx bx-search'
};
}