gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 11:39: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
/>
{ needsSaving && <ActionButton
icon="bx bx-save"
className="save-attributes-button"
text={escapeQuotes(t("attribute_editor.save_attributes"))}
onClick={save}
/> }
<div className="attribute-editor-buttons">
{ needsSaving && <ActionButton
icon="bx bx-save"
className="save-attributes-button tn-tool-button"
text={escapeQuotes(t("attribute_editor.save_attributes"))}
onClick={save}
/> }
<ActionButton
icon="bx bx-plus"
className="add-new-attribute-button"
text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
onClick={(e) => {
// Prevent automatic hiding of the context menu due to the button being clicked.
e.stopPropagation();
<ActionButton
icon="bx bx-plus"
className="add-new-attribute-button tn-tool-button"
text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
onClick={(e) => {
// Prevent automatic hiding of the context menu due to the button being clicked.
e.stopPropagation();
contextMenu.show<AttributeCommandNames>({
x: e.pageX,
y: e.pageY,
orientation: "left",
items: [
{ 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: "----" },
{ 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" }
],
selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
});
}}
/>
contextMenu.show<AttributeCommandNames>({
x: e.pageX,
y: e.pageY,
orientation: "left",
items: [
{ 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: "----" },
{ 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" }
],
selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
});
}}
/>
</div>
{ error && (
<div className="attribute-errors">

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

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