gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 19:49:01 +01:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

style/ribbon/attribute editor: improve layout

Browse Source
This commit is contained in:
Adorian Doran 2025-08-25 21:48:52 +03:00 committed by Elian Doran
parent b9101c9fb2
commit 8405d960be
No known key found for this signature in database
2 changed files with 38 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
View File

@ -359,36 +359,38 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
disableNewlines disableSpellcheck disableNewlines disableSpellcheck
/> />
{ needsSaving && <ActionButton <div className="attribute-editor-buttons">
icon="bx bx-save" { needsSaving && <ActionButton
className="save-attributes-button" icon="bx bx-save"
text={escapeQuotes(t("attribute_editor.save_attributes"))} className="save-attributes-button tn-tool-button"
onClick={save} text={escapeQuotes(t("attribute_editor.save_attributes"))}
/> } onClick={save}
/> }
<ActionButton <ActionButton
icon="bx bx-plus" icon="bx bx-plus"
className="add-new-attribute-button" className="add-new-attribute-button tn-tool-button"
text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))} text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
onClick={(e) => { onClick={(e) => {
// Prevent automatic hiding of the context menu due to the button being clicked. // Prevent automatic hiding of the context menu due to the button being clicked.
e.stopPropagation(); e.stopPropagation();
contextMenu.show<AttributeCommandNames>({ contextMenu.show<AttributeCommandNames>({
x: e.pageX, x: e.pageX,
y: e.pageY, y: e.pageY,
orientation: "left", orientation: "left",
items: [ items: [
{ title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" }, { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
{ title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" }, { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
{ title: "----" }, { title: "----" },
{ title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" }, { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
{ title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" } { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" }
], ],
selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command) selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
}); });
}} }}
/> />
</div>
{ error && ( { error && (
<div className="attribute-errors"> <div className="attribute-errors">

33
apps/client/src/widgets/ribbon/style.css
View File

@ -271,7 +271,7 @@
border: 0 !important; border: 0 !important;
outline: 0 !important; outline: 0 !important;
box-shadow: none !important; box-shadow: none !important;
padding: 0 0 0 5px !important; padding: 0 100px 0 5px !important;
margin: 0 !important; margin: 0 !important;
max-height: 100px; max-height: 100px;
overflow: auto; overflow: auto;
@ -283,36 +283,19 @@
background: transparent !important; background: transparent !important;
} }
.save-attributes-button { .attribute-editor-buttons {
color: var(--muted-text-color); display: flex;
position: absolute; position: absolute;
bottom: 14px; top: 0;
right: 25px;
cursor: pointer;
border: 1px solid transparent;
font-size: 130%;
}
.add-new-attribute-button {
color: var(--muted-text-color);
position: absolute;
bottom: 13px;
right: 0; right: 0;
cursor: pointer; bottom: 0;
border: 1px solid transparent; align-items: center;
font-size: 130%; gap: 10px;
}
.add-new-attribute-button:hover, .save-attributes-button:hover {
border: 1px solid var(--button-border-color);
border-radius: var(--button-border-radius);
background: var(--button-background-color);
color: var(--button-text-color);
} }
.attribute-errors { .attribute-errors {
color: red; color: red;
padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */ padding: 5px 100px 0px 5px; /* large right padding to avoid buttons */
} }
/* #endregion */ /* #endregion */