add attributes to the sidebar and remove them from the bottom

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.34.1",
+  "version": "0.34.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

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;
     }

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 = `
 <div class="card widget">
@@ -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();
 

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 = $("<a>").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;

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);
 }

src/views/tabs.ejs

@@ -36,12 +36,6 @@
 
                 <div class="children-overview hide-toggle"></div>
             </div>
-
-            <div class="attribute-list">
-                <button class="btn btn-sm show-attributes-button">Attributes:</button>
-
-                <span class="attribute-list-inner"></span>
-            </div>
         </div>
 
         <% include sidebar.ejs %>