mirror of
https://github.com/zadam/trilium.git
synced 2025-03-01 14:22:32 +01:00
promoted attributes are now part of attr list and also responsive
This commit is contained in:
zadam
parent
b60efbbf5a
commit
2217c5a3e0
@ -136,7 +136,6 @@ export default class DesktopMainWindowLayout {
|
||||
.child(new NoteActionsWidget().hideInZenMode())
|
||||
)
|
||||
.child(new TabCachingWidget(() => new AttributeListWidget()))
|
||||
.child(new TabCachingWidget(() => new PromotedAttributesWidget()))
|
||||
.child(new TabCachingWidget(() => new NoteDetailWidget()))
|
||||
.child(...this.customWidgets.get('center-pane'))
|
||||
)
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,34 +5,39 @@ import noteAutocompleteService from "../services/note_autocomplete.js";
|
||||
import TabAwareWidget from "./tab_aware_widget.js";
|
||||
|
||||
const TPL = `
|
||||
<div class="promoted-attributes-wrapper">
|
||||
<div>
|
||||
<style>
|
||||
.promoted-attributes-wrapper {
|
||||
.promoted-attributes-container {
|
||||
margin: auto;
|
||||
/* setting the display to block since "table" doesn't support scrolling */
|
||||
display: block;
|
||||
/** flex-basis: content; - use once "content" is implemented by chrome */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
justify-content: space-evenly;
|
||||
overflow: auto;
|
||||
max-height: 400px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.promoted-attributes td, .promoted-attributes th {
|
||||
padding: 5px;
|
||||
min-width: 50px; /* otherwise checkboxes can collapse into 0 width (if there are only checkboxes) */
|
||||
.promoted-attribute-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.promoted-attribute-cell div.input-group {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="promoted-attributes"></table>
|
||||
<div class="promoted-attributes-container"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
this.$container = this.$widget.find(".promoted-attributes");
|
||||
this.$container = this.$widget.find(".promoted-attributes-container");
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
@ -48,9 +53,9 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
return def && def.isPromoted;
|
||||
});
|
||||
|
||||
if (promoted.length > 0 && !note.hasLabel('hidePromotedAttributes')) {
|
||||
const $tbody = $("<tbody>");
|
||||
const cells = [];
|
||||
|
||||
if (promoted.length > 0 && !note.hasLabel('hidePromotedAttributes')) {
|
||||
for (const definitionAttr of promoted) {
|
||||
const definitionType = definitionAttr.name.startsWith('label:') ? 'label' : 'relation';
|
||||
const valueName = definitionAttr.name.substr(definitionType.length + 1);
|
||||
@ -71,15 +76,15 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
}
|
||||
|
||||
for (const valueAttr of valueAttrs) {
|
||||
const $tr = await this.createPromotedAttributeRow(definitionAttr, valueAttr, valueName);
|
||||
const $cell = await this.createPromotedAttributeCell(definitionAttr, valueAttr, valueName);
|
||||
|
||||
$tbody.append($tr);
|
||||
cells.push($cell);
|
||||
}
|
||||
}
|
||||
|
||||
// we replace the whole content in one step so there can't be any race conditions
|
||||
// (previously we saw promoted attributes doubling)
|
||||
this.$container.empty().append($tbody);
|
||||
this.$container.empty().append(...cells);
|
||||
this.toggleInt(true);
|
||||
}
|
||||
else {
|
||||
@ -89,10 +94,9 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
return attributes;
|
||||
}
|
||||
|
||||
async createPromotedAttributeRow(definitionAttr, valueAttr, valueName) {
|
||||
async createPromotedAttributeCell(definitionAttr, valueAttr, valueName) {
|
||||
const definition = definitionAttr.getDefinition();
|
||||
const $tr = $("<tr>");
|
||||
const $labelCell = $("<th>").append(valueName);
|
||||
|
||||
const $input = $("<input>")
|
||||
.prop("tabindex", 200 + definitionAttr.position)
|
||||
.prop("attribute-id", valueAttr.noteId === this.noteId ? valueAttr.attributeId : '') // if not owned, we'll force creation of a new attribute instead of updating the inherited one
|
||||
@ -103,16 +107,14 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
.addClass("promoted-attribute-input")
|
||||
.on('change', event => this.promotedAttributeChanged(event));
|
||||
|
||||
const $inputCell = $("<td>").append($("<div>").addClass("input-group").append($input));
|
||||
|
||||
const $actionCell = $("<td>");
|
||||
const $actionCell = $("<div>");
|
||||
const $multiplicityCell = $("<td>")
|
||||
.addClass("multiplicity")
|
||||
.attr("nowrap", true);
|
||||
|
||||
$tr
|
||||
.append($labelCell)
|
||||
.append($inputCell)
|
||||
const $wrapper = $('<div class="promoted-attribute-cell">')
|
||||
.append($("<strong>").text(valueName))
|
||||
.append($("<div>").addClass("input-group").append($input))
|
||||
.append($actionCell)
|
||||
.append($multiplicityCell);
|
||||
|
||||
@ -210,14 +212,14 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
.addClass("bx bx-plus pointer")
|
||||
.prop("title", "Add new attribute")
|
||||
.on('click', async () => {
|
||||
const $new = await this.createPromotedAttributeRow(definitionAttr, {
|
||||
const $new = await this.createPromotedAttributeCell(definitionAttr, {
|
||||
attributeId: "",
|
||||
type: valueAttr.type,
|
||||
name: definitionAttr.name,
|
||||
value: ""
|
||||
});
|
||||
|
||||
$tr.after($new);
|
||||
$wrapper.after($new);
|
||||
|
||||
$new.find('input').trigger('focus');
|
||||
});
|
||||
@ -230,13 +232,13 @@ export default class PromotedAttributesWidget extends TabAwareWidget {
|
||||
await server.remove("notes/" + this.noteId + "/attributes/" + valueAttr.attributeId, this.componentId);
|
||||
}
|
||||
|
||||
$tr.remove();
|
||||
$wrapper.remove();
|
||||
});
|
||||
|
||||
$multiplicityCell.append(addButton).append(" ").append(removeButton);
|
||||
}
|
||||
|
||||
return $tr;
|
||||
return $wrapper;
|
||||
}
|
||||
|
||||
async promotedAttributeChanged(event) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user