Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-17 10:40:41 +01:00
Code Issues Packages Projects Releases Activity

promoted attributes are now part of attr list and also responsive

Browse Source
This commit is contained in:
zadam
2020-07-25 00:06:49 +02:00
parent b60efbbf5a
commit 2217c5a3e0
3 changed files with 138 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/public/app/widgets/attribute_list.js
View File

@@ -3,90 +3,102 @@ import AttributeDetailWidget from "./attribute_detail.js";
import attributeRenderer from "../services/attribute_renderer.js";
import AttributeEditorWidget from "./attribute_editor.js";
import options from '../services/options.js';
import PromotedAttributesWidget from "./promoted_attributes.js";
const TPL = `
<div class="attribute-list">
<style>
.attribute-list {
margin-left: 7px;
margin-right: 7px;
}
<style>
.attribute-list {
margin-left: 7px;
margin-right: 7px;
}
.inherited-attributes {
color: var(--muted-text-color);
max-height: 200px;
overflow: auto;
padding-bottom: 5px;
padding-left: 7px;
}
.attribute-list-editor p {
margin: 0 !important;
}
.attribute-list.error .attribute-list-editor {
border-color: red !important;
}
.attr-expander {
display: flex;
flex-direction: row;
color: var(--muted-text-color);
font-size: small;
}
.attribute-list hr {
height: 1px;
border-color: var(--main-border-color);
position: relative;
top: 4px;
margin-top: 5px;
margin-bottom: 0;
}
.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;
}
</style>
.inherited-attributes {
color: var(--muted-text-color);
max-height: 200px;
overflow: auto;
padding-bottom: 5px;
padding-left: 7px;
}
.attribute-list-editor p {
margin: 0 !important;
}
.attribute-list.error .attribute-list-editor {
border-color: red !important;
}
.attr-expander {
display: flex;
flex-direction: row;
color: var(--muted-text-color);
font-size: small;
}
.attribute-list hr {
height: 1px;
border-color: var(--main-border-color);
position: relative;
top: 4px;
margin-top: 5px;
margin-bottom: 0;
}
.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;
}
</style>
<div class="attr-expander attr-owned-expander">
<hr class="w-100">
<div class="attr-expander-text"></div>
<hr class="w-100">
</div>
<div class="attr-display">
<div class="attr-editor-placeholder"></div>
<hr class="w-100 attr-inherited-empty-expander" style="margin-bottom: 10px;">
<div class="attr-expander attr-inherited-expander">
<div class="attr-expander attr-promoted-expander">
<hr class="w-100">
<div class="attr-expander-text"></div>
<div class="attr-expander-text">Promoted attributes</div>
<hr class="w-100">
</div>
<div class="inherited-attributes"></div>
</div>
<div class="all-attr-wrapper">
<div class="promoted-attributes-placeholder"></div>
<div class="attr-expander attr-owned-and-inherited-expander">
<hr class="w-100">
<div class="attr-expander-text"></div>
<hr class="w-100">
</div>
<div class="owned-and-inherited-wrapper">
<div class="attr-editor-placeholder"></div>
<hr class="w-100 attr-inherited-empty-expander" style="margin-bottom: 10px;">
<div class="attr-expander attr-inherited-expander">
<hr class="w-100">
<div class="attr-expander-text"></div>
<hr class="w-100">
</div>
<div class="inherited-attributes"></div>
</div>
</div>
</div>
`;
@@ -94,21 +106,33 @@ export default class AttributeListWidget extends TabAwareWidget {
constructor() {
super();
this.promotedAttributesWidget = new PromotedAttributesWidget().setParent(this);
this.attributeDetailWidget = new AttributeDetailWidget().setParent(this);
this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).setParent(this);
this.child(this.attributeEditorWidget, this.attributeDetailWidget);
this.child(this.promotedAttributesWidget, this.attributeEditorWidget, this.attributeDetailWidget);
}
doRender() {
this.$widget = $(TPL);
this.$attrDisplay = this.$widget.find('.attr-display');
this.$attrDisplay.toggle(options.is('attributeListExpanded'));
this.$promotedExpander = this.$widget.find('.attr-promoted-expander');
this.$allAttrWrapper = this.$widget.find('.all-attr-wrapper');
this.$ownedExpander = this.$widget.find('.attr-owned-expander');
this.$promotedExpander.on('click', async () => {
if (this.$allAttrWrapper.is(":visible")) {
this.$allAttrWrapper.slideUp(200);
} else {
this.$allAttrWrapper.slideDown(200);
}
});
this.$ownedAndInheritedWrapper = this.$widget.find('.owned-and-inherited-wrapper');
this.$ownedAndInheritedWrapper.toggle(options.is('attributeListExpanded'));
this.$ownedExpander = this.$widget.find('.attr-owned-and-inherited-expander');
this.$ownedExpander.on('click', async () => {
const collapse = this.$attrDisplay.is(":visible");
const collapse = this.$ownedAndInheritedWrapper.is(":visible");
await options.save('attributeListExpanded', !collapse);
@@ -133,6 +157,7 @@ export default class AttributeListWidget extends TabAwareWidget {
this.$inheritedEmptyExpander = this.$widget.find('.attr-inherited-empty-expander');
this.$widget.find('.promoted-attributes-placeholder').replaceWith(this.promotedAttributesWidget.render());
this.$widget.find('.attr-editor-placeholder').replaceWith(this.attributeEditorWidget.render());
this.$widget.append(this.attributeDetailWidget.render());
}
@@ -199,10 +224,9 @@ export default class AttributeListWidget extends TabAwareWidget {
*/
attributeListCollapsedStateChangedEvent({collapse}) {
if (collapse) {
this.$attrDisplay.slideUp(200);
}
else {
this.$attrDisplay.slideDown(200);
this.$ownedAndInheritedWrapper.slideUp(200);
} else {
this.$ownedAndInheritedWrapper.slideDown(200);
}
}
}