diff --git a/package-lock.json b/package-lock.json index 30c6b8511..71100cbfa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "trilium", - "version": "0.34.1", + "version": "0.34.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/public/javascripts/services/attributes.js b/src/public/javascripts/services/attributes.js index ea15bcf32..5ee1db06e 100644 --- a/src/public/javascripts/services/attributes.js +++ b/src/public/javascripts/services/attributes.js @@ -11,8 +11,6 @@ class Attributes { */ constructor(ctx) { this.ctx = ctx; - this.$attributeList = ctx.$tabContent.find(".attribute-list"); - this.$attributeListInner = ctx.$tabContent.find(".attribute-list-inner"); this.$promotedAttributesContainer = ctx.$tabContent.find(".note-detail-promoted-attributes"); this.$savedIndicator = ctx.$tabContent.find(".saved-indicator"); this.attributePromise = null; @@ -42,10 +40,6 @@ class Attributes { async showAttributes() { this.$promotedAttributesContainer.empty(); - this.$attributeList.hide(); - this.$attributeListInner.empty(); - - const note = this.ctx.note; const attributes = await this.getAttributes(); @@ -89,36 +83,6 @@ class Attributes { // (previously we saw promoted attributes doubling) this.$promotedAttributesContainer.empty().append($tbody); } - else if (note.type !== 'relation-map') { - // display only "own" notes - const ownedAttributes = attributes.filter(attr => attr.noteId === note.noteId); - - if (ownedAttributes.length > 0) { - for (const attribute of ownedAttributes) { - if (attribute.type === 'label') { - this.$attributeListInner.append(utils.formatLabel(attribute) + " "); - } - else if (attribute.type === 'relation') { - if (attribute.value) { - this.$attributeListInner.append('@' + attribute.name + "="); - this.$attributeListInner.append(await linkService.createNoteLink(attribute.value)); - this.$attributeListInner.append(" "); - } - else { - messagingService.logError(`Relation ${attribute.attributeId} has empty target`); - } - } - else if (attribute.type === 'label-definition' || attribute.type === 'relation-definition') { - this.$attributeListInner.append(attribute.name + " definition "); - } - else { - messagingService.logError("Unknown attr type: " + attribute.type); - } - } - - this.$attributeList.show(); - } - } return attributes; } diff --git a/src/public/javascripts/services/sidebar.js b/src/public/javascripts/services/sidebar.js index 32415c376..1a47d14e6 100644 --- a/src/public/javascripts/services/sidebar.js +++ b/src/public/javascripts/services/sidebar.js @@ -1,6 +1,7 @@ import NoteInfoWidget from "../widgets/note_info.js"; import LinkMapWidget from "../widgets/link_map.js"; import NoteRevisionsWidget from "../widgets/note_revisions.js"; +import AttributesWidget from "../widgets/attributes.js"; const WIDGET_TPL = `
@@ -47,11 +48,21 @@ class Sidebar { async noteLoaded() { this.$widgets.empty(); + this.addAttributesWidget(); this.addNoteInfoWidget(); this.addLinkMapWidget(); this.addNoteRevisionsWidget(); } + async addAttributesWidget() { + const $widget = this.createWidgetElement(); + + const attributesWidget = new AttributesWidget(this.ctx, $widget); + await attributesWidget.renderBody(); + + this.$widgets.append($widget); + } + async addNoteInfoWidget() { const $widget = this.createWidgetElement(); diff --git a/src/public/javascripts/widgets/attributes.js b/src/public/javascripts/widgets/attributes.js new file mode 100644 index 000000000..1bbb42eaf --- /dev/null +++ b/src/public/javascripts/widgets/attributes.js @@ -0,0 +1,65 @@ +import attributesDialog from "../dialogs/attributes.js"; +import utils from "../services/utils.js"; +import linkService from "../services/link.js"; +import messagingService from "../services/messaging.js"; + +class AttributesWidget { + /** + * @param {TabContext} ctx + * @param {jQuery} $widget + */ + constructor(ctx, $widget) { + this.ctx = ctx; + this.$widget = $widget; + this.$title = this.$widget.find('.widget-title'); + this.$title.text("Attributes"); + this.$headerActions = this.$widget.find('.widget-header-actions'); + + const $showFullButton = $("").append("show dialog").addClass('widget-header-action'); + $showFullButton.click(() => { + attributesDialog.showDialog(); + }); + + this.$headerActions.append($showFullButton); + } + + async renderBody() { + const $body = this.$widget.find('.card-body'); + + $body.empty(); + + const attributes = await this.ctx.attributes.getAttributes(); + const ownedAttributes = attributes.filter(attr => attr.noteId === this.ctx.note.noteId); + + if (ownedAttributes.length === 0) { + $body.text("No attributes yet..."); + return; + } + + if (ownedAttributes.length > 0) { + for (const attribute of ownedAttributes) { + if (attribute.type === 'label') { + $body.append(utils.formatLabel(attribute) + " "); + } + else if (attribute.type === 'relation') { + if (attribute.value) { + $body.append('@' + attribute.name + "="); + $body.append(await linkService.createNoteLink(attribute.value)); + $body.append(" "); + } + else { + messagingService.logError(`Relation ${attribute.attributeId} has empty target`); + } + } + else if (attribute.type === 'label-definition' || attribute.type === 'relation-definition') { + $body.append(attribute.name + " definition "); + } + else { + messagingService.logError("Unknown attr type: " + attribute.type); + } + } + } + } +} + +export default AttributesWidget; \ No newline at end of file diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 86e767590..fc715f401 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -112,6 +112,7 @@ ul.fancytree-container { .note-detail-content { display: flex; flex-direction: column; + flex-grow: 100; height: 100%; } @@ -442,25 +443,8 @@ div.ui-tooltip { overflow-x: hidden; } -.cm-matchhighlight {background-color: #eeeeee} - -#attribute-list { - overflow: auto; - /* limiting the size since actual note content is more important */ - max-height: 30%; - flex-shrink: 0; - flex-basis: 2em; -} - -#label-list, #relation-list, #attribute-list { - color: var(--muted-text-color); - padding: 5px; - display: none; -} - -#label-list button, #relation-list button, #attribute-list button { - padding: 2px; - margin-right: 5px; +.cm-matchhighlight { + background-color: #eeeeee } .file-table th, .file-table td { @@ -895,4 +879,8 @@ a.external:after, a[href^="http://"]:after, a[href^="https://"]:after { .modal-header { padding: 0.7rem 1rem !important; /* make modal header padding slightly smaller */ +} + +.hide-sidebar-button { + color: var(--main-text-color); } \ No newline at end of file diff --git a/src/views/tabs.ejs b/src/views/tabs.ejs index 46f315fcb..55343ecc4 100644 --- a/src/views/tabs.ejs +++ b/src/views/tabs.ejs @@ -36,12 +36,6 @@
- -
- - - -
<% include sidebar.ejs %>