Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-11 02:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #538 from TriliumNext/feature/improved_promoted_attributes

Browse Source 
Change layout of promoted attributes
This commit is contained in:
Elian Doran 2024-11-27 21:33:32 +02:00 committed by GitHub
commit 11c48988e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/public/app/layouts/desktop_layout.js
View File

@ -149,8 +149,7 @@ export default class DesktopLayout {
// the order of the widgets matter. Some of these want to "activate" themselves // the order of the widgets matter. Some of these want to "activate" themselves
// when visible. When this happens to multiple of them, the first one "wins". // when visible. When this happens to multiple of them, the first one "wins".
// promoted attributes should always win. // promoted attributes should always win.
.ribbon(new ClassicEditorToolbar()) .ribbon(new ClassicEditorToolbar())
.ribbon(new PromotedAttributesWidget())
.ribbon(new ScriptExecutorWidget()) .ribbon(new ScriptExecutorWidget())
.ribbon(new SearchDefinitionWidget()) .ribbon(new SearchDefinitionWidget())
.ribbon(new EditedNotesWidget()) .ribbon(new EditedNotesWidget())
@ -185,6 +184,7 @@ export default class DesktopLayout {
.child( .child(
new ScrollingContainer() new ScrollingContainer()
.filling() .filling()
.child(new PromotedAttributesWidget())
.child(new SqlTableSchemasWidget()) .child(new SqlTableSchemasWidget())
.child(new NoteDetailWidget()) .child(new NoteDetailWidget())
.child(new NoteListWidget()) .child(new NoteListWidget())

32
src/public/app/widgets/ribbon_widgets/promoted_attributes.js
View File

@ -18,32 +18,41 @@ const TPL = `
} }
.promoted-attributes-container { .promoted-attributes-container {
margin: auto; margin: 0 1.5em;
display: flex;
flex-direction: row;
flex-shrink: 0;
flex-grow: 0;
justify-content: space-evenly;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
flex-wrap: wrap; flex-wrap: wrap;
display: table;
} }
.promoted-attribute-cell { .promoted-attribute-cell {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px; margin: 10px;
display: table-row;
}
.promoted-attribute-cell > label {
user-select: none;
font-weight: bold;
vertical-align: middle;
}
.promoted-attribute-cell > * {
display: table-cell;
padding: 1px 0;
} }
.promoted-attribute-cell div.input-group { .promoted-attribute-cell div.input-group {
margin-left: 10px; margin-left: 10px;
display: flex;
min-height: 40px;
} }
.promoted-attribute-cell strong { .promoted-attribute-cell strong {
word-break:keep-all; word-break:keep-all;
white-space: nowrap; white-space: nowrap;
} }
.promoted-attribute-cell input[type="checkbox"] { .promoted-attribute-cell input[type="checkbox"] {
height: 1.5em; width: 22px !important;
flex-grow: 0;
width: unset;
} }
</style> </style>
@ -137,9 +146,11 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
async createPromotedAttributeCell(definitionAttr, valueAttr, valueName) { async createPromotedAttributeCell(definitionAttr, valueAttr, valueName) {
const definition = definitionAttr.getDefinition(); const definition = definitionAttr.getDefinition();
const id = `value-${this.noteId}-${definitionAttr.position}`;
const $input = $("<input>") const $input = $("<input>")
.prop("tabindex", 200 + definitionAttr.position) .prop("tabindex", 200 + definitionAttr.position)
.prop("id", id)
.attr("data-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 .attr("data-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
.attr("data-attribute-type", valueAttr.type) .attr("data-attribute-type", valueAttr.type)
.attr("data-attribute-name", valueAttr.name) .attr("data-attribute-name", valueAttr.name)
@ -154,7 +165,7 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
.attr("nowrap", true); .attr("nowrap", true);
const $wrapper = $('<div class="promoted-attribute-cell">') const $wrapper = $('<div class="promoted-attribute-cell">')
.append($("<strong>").text(definition.promotedAlias ?? valueName)) .append($("<label>").prop("for", id).text(definition.promotedAlias ?? valueName))
.append($("<div>").addClass("input-group").append($input)) .append($("<div>").addClass("input-group").append($input))
.append($actionCell) .append($actionCell)
.append($multiplicityCell); .append($multiplicityCell);
@ -211,9 +222,6 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
} }
else if (definition.labelType === 'boolean') { else if (definition.labelType === 'boolean') {
$input.prop("type", "checkbox"); $input.prop("type", "checkbox");
// hack, without this the checkbox is invisible
// we should be using a different bootstrap structure for checkboxes
$input.css('width', '80px');
if (valueAttr.value === "true") { if (valueAttr.value === "true") {
$input.prop("checked", "checked"); $input.prop("checked", "checked");