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

mockup of hidable attributes

Browse Source
This commit is contained in:
zadam 2020-06-24 00:02:54 +02:00
parent b245b249d3
commit 99d66ea89f
1 changed files with 81 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -74,6 +74,17 @@ const mentionSetup = {
const TPL = `
<div class="note-attributes">
<style>
.note-attributes-editor {
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid var(--main-border-color) !important;
outline: 0 !important;
box-shadow: none !important;
position: relative;
top: -8px;
}
.note-attributes-editor p {
color: var(--muted-text-color);
margin-top: 5px !important;
@ -166,6 +177,58 @@ const TPL = `
<div class="attr-extras-more-notes"></div>
</div>
<style>
.attr-expander {
display: flex;
flex-direction: row;
color: var(--muted-text-color);
font-size: small;
}
.attr-expander hr {
height: 1px;
border-color: var(--main-border-color);
position: relative;
top: 4px;
margin-top: 5px;
margin-bottom: 0px;
}
.attr-expander-text {
padding-left: 20px;
padding-right: 20px;
white-space: nowrap;
}
.attr-expander:hover {
cursor: pointer;
}
.attr-expander:not(.error):hover hr {
border-color: black;
}
.attr-expander:not(.error):hover .attr-expander-text {
color: black;
}
.attr-expander.error .attr-expander-text {
color: red;
}
.attr-expander.error hr {
border-color: red;
}
</style>
<div class="attr-expander">
<hr class="w-100">
<div class="attr-expander-text">5 attributes</div>
<hr class="w-100">
</div>
<div class="note-attributes-editor" tabindex="200"></div>
</div>
`;
@ -192,6 +255,18 @@ export default class NoteAttributesWidget extends TabAwareWidget {
this.$attrExtrasMoreNotes = this.$widget.find('.attr-extras-more-notes');
this.initialized = this.initEditor();
this.$expander = this.$widget.find('.attr-expander');
this.$expander.on('click', () => {
if (this.$editor.is(":visible")) {
this.$editor.slideUp();
}
else {
this.$editor.slideDown();
}
});
this.$expanderText = this.$expander.find('.attr-expander-text');
this.$editor.on('keydown', async e => {
const keycode = (e.keyCode ? e.keyCode : e.which);
@ -228,11 +303,17 @@ export default class NoteAttributesWidget extends TabAwareWidget {
this.$widget.removeClass("error");
this.$widget.removeAttr("title");
this.$expander.removeClass("error");
this.$expanderText.text(attrs.length + ' attributes');
return attrs;
}
catch (e) {
this.$widget.attr("title", e.message);
this.$widget.addClass("error");
this.$expander.addClass("error");
this.$expanderText.text(e.message);
}
}