gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-03-01 14:22:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

more attribute mockups (inherited attributes)

Browse Source
This commit is contained in:
zadam 2020-06-24 23:56:39 +02:00
parent 9615e25a67
commit 92e49214c7
1 changed files with 86 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/public/app/widgets/note_attributes.js
View File

@ -74,23 +74,30 @@ const mentionSetup = {
const TPL = ` const TPL = `
<div class="note-attributes"> <div class="note-attributes">
<style> <style>
.note-attributes {
margin-left: 7px;
margin-right: 7px;
}
.note-attributes-editor { .note-attributes-editor {
border-top: 0 !important; border: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid var(--main-border-color) !important;
outline: 0 !important; outline: 0 !important;
box-shadow: none !important; box-shadow: none !important;
position: relative; padding: 0 !important;
top: -8px; margin: 0 !important;
color: var(--muted-text-color);
max-height: 200px;
overflow: auto;
}
.inherited-attributes {
color: var(--muted-text-color);
max-height: 200px;
overflow: auto;
} }
.note-attributes-editor p { .note-attributes-editor p {
color: var(--muted-text-color); margin: 0 !important;
margin-top: 5px !important;
margin-bottom: 5px !important;
max-height: 100px;
overflow: auto;
} }
.note-attributes.error .note-attributes-editor { .note-attributes.error .note-attributes-editor {
@ -185,13 +192,13 @@ const TPL = `
font-size: small; font-size: small;
} }
.attr-expander hr { .note-attributes hr {
height: 1px; height: 1px;
border-color: var(--main-border-color); border-color: var(--main-border-color);
position: relative; position: relative;
top: 4px; top: 4px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 0px; margin-bottom: 0;
} }
.attr-expander-text { .attr-expander-text {
@ -221,15 +228,30 @@ const TPL = `
} }
</style> </style>
<div class="attr-expander"> <div class="attr-expander attr-owned-expander">
<hr class="w-100"> <hr class="w-100">
<div class="attr-expander-text">5 attributes</div> <div class="attr-expander-text"></div>
<hr class="w-100"> <hr class="w-100">
</div> </div>
<div class="note-attributes-editor" tabindex="200"></div> <div class="attr-display">
<div class="note-attributes-editor" tabindex="200"></div>
<hr class="w-100 attr-inherited-empty-expander">
<div class="attr-expander attr-inherited-expander">
<hr class="w-100">
<div class="attr-expander-text">5 inherited attributes</div>
<hr class="w-100">
</div>
<div class="inherited-attributes"></div>
</div>
</div> </div>
`; `;
@ -255,17 +277,35 @@ export default class NoteAttributesWidget extends TabAwareWidget {
this.$attrExtrasMoreNotes = this.$widget.find('.attr-extras-more-notes'); this.$attrExtrasMoreNotes = this.$widget.find('.attr-extras-more-notes');
this.initialized = this.initEditor(); this.initialized = this.initEditor();
this.$expander = this.$widget.find('.attr-expander'); this.$attrDisplay = this.$widget.find('.attr-display');
this.$expander.on('click', () => {
if (this.$editor.is(":visible")) { this.$ownedExpander = this.$widget.find('.attr-owned-expander');
this.$editor.slideUp(); this.$ownedExpander.on('click', () => {
if (this.$attrDisplay.is(":visible")) {
this.$attrDisplay.slideUp(200);
} }
else { else {
this.$editor.slideDown(); this.$attrDisplay.slideDown(200);
} }
}); });
this.$expanderText = this.$expander.find('.attr-expander-text'); this.$ownedExpanderText = this.$ownedExpander.find('.attr-expander-text');
this.$inheritedAttributes = this.$widget.find('.inherited-attributes');
this.$inheritedExpander = this.$widget.find('.attr-inherited-expander');
this.$inheritedExpander.on('click', () => {
if (this.$inheritedAttributes.is(":visible")) {
this.$inheritedAttributes.slideUp(200);
}
else {
this.$inheritedAttributes.slideDown(200);
}
});
this.$inheritedExpanderText = this.$inheritedExpander.find('.attr-expander-text');
this.$inheritedEmptyExpander = this.$widget.find('.attr-inherited-empty-expander');
this.$editor.on('keydown', async e => { this.$editor.on('keydown', async e => {
const keycode = (e.keyCode ? e.keyCode : e.which); const keycode = (e.keyCode ? e.keyCode : e.which);
@ -303,8 +343,8 @@ export default class NoteAttributesWidget extends TabAwareWidget {
this.$widget.removeClass("error"); this.$widget.removeClass("error");
this.$widget.removeAttr("title"); this.$widget.removeAttr("title");
this.$expander.removeClass("error"); this.$ownedExpander.removeClass("error");
this.$expanderText.text(attrs.length + ' attributes'); this.$ownedExpanderText.text(attrs.length + ' owned ' + this.attrPlural(attrs.length));
return attrs; return attrs;
} }
@ -312,8 +352,8 @@ export default class NoteAttributesWidget extends TabAwareWidget {
this.$widget.attr("title", e.message); this.$widget.attr("title", e.message);
this.$widget.addClass("error"); this.$widget.addClass("error");
this.$expander.addClass("error"); this.$ownedExpander.addClass("error");
this.$expanderText.text(e.message); this.$ownedExpanderText.text(e.message);
} }
} }
@ -499,6 +539,26 @@ export default class NoteAttributesWidget extends TabAwareWidget {
await this.renderAttributes(ownedAttributes, $attributesContainer); await this.renderAttributes(ownedAttributes, $attributesContainer);
this.textEditor.setData($attributesContainer.html()); this.textEditor.setData($attributesContainer.html());
const inheritedAttributes = note.getAttributes().filter(attr => attr.isInheritable && attr.noteId !== this.noteId);
const inheritedAttributeCount = inheritedAttributes.length;
if (inheritedAttributeCount === 0) {
this.$inheritedExpander.hide();
this.$inheritedEmptyExpander.show();
}
else {
this.$inheritedExpander.show();
this.$inheritedEmptyExpander.hide();
}
this.$inheritedExpanderText.text(inheritedAttributeCount + ' inherited ' + this.attrPlural(inheritedAttributeCount));
await this.renderAttributes(inheritedAttributes, this.$inheritedAttributes);
}
attrPlural(number) {
return 'attribute' + (number === 1 ? '' : 's');
} }
createNoteLink(noteId) { createNoteLink(noteId) {