Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-12 08:15:52 +01:00
Code Issues Packages Projects Releases 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
2 changed files with 38 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -359,16 +359,17 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
disableNewlines disableSpellcheck disableNewlines disableSpellcheck
/> />
<div className="attribute-editor-buttons">
{ needsSaving && <ActionButton { needsSaving && <ActionButton
icon="bx bx-save" icon="bx bx-save"
className="save-attributes-button" className="save-attributes-button tn-tool-button"
text={escapeQuotes(t("attribute_editor.save_attributes"))} text={escapeQuotes(t("attribute_editor.save_attributes"))}
onClick={save} 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.
@@ -389,6 +390,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
}); });
}} }}
/> />
</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 */