mirror of
https://github.com/zadam/trilium.git
synced 2025-06-05 17:38:47 +02:00
add attributes to the sidebar and remove them from the bottom
This commit is contained in:
zadam
parent
6e260ee563
commit
c0c36d10e5
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "trilium",
|
||||
"version": "0.34.1",
|
||||
"version": "0.34.2",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
65
src/public/javascripts/widgets/attributes.js
Normal file
65
src/public/javascripts/widgets/attributes.js
Normal file
@ -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;
|
||||
@ -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);
|
||||
}
|
||||
@ -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 %>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user