chore(react/ribbon): fix alignment of help/close buttons

This commit is contained in:
Elian Doran 2025-08-24 19:03:19 +03:00
parent 274e3c1f7f
commit 3218ab971b
No known key found for this signature in database
3 changed files with 21 additions and 54 deletions

View File

@ -123,10 +123,14 @@ function SearchOption({ note, title, titleIcon, children, help, attributeName, a
</td>
<td>{children}</td>
<td className="button-column">
{help && <Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>}
{help && <>
<Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>
{" "}
</>}
<ActionButton
icon="bx bx-x"
className="search-option-del"
text={t("abstract_search_option.remove_this_search_option")}
onClick={() => {
removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
if (additionalAttributesToDelete) {

View File

@ -402,23 +402,32 @@
white-space: nowrap;
}
.search-setting-table .button-column {
/* minimal width so that table remains static sized and most space remains for middle column with settings */
width: 50px;
white-space: nowrap;
text-align: right;
}
.search-setting-table .title-column {
/* minimal width so that table remains static sized and most space remains for middle column with settings */
width: 50px;
white-space: nowrap;
}
.search-setting-table .button-column {
/* minimal width so that table remains static sized and most space remains for middle column with settings */
width: 50px;
white-space: nowrap;
text-align: right;
vertical-align: middle;
}
.search-setting-table .button-column .dropdown {
display: inline-block !important;
}
.search-setting-table .button-column .dropdown-menu {
white-space: normal;
}
.search-setting-table .button-column > * {
vertical-align: middle;
}
.attribute-list hr {
height: 1px;
border-color: var(--main-border-color);

View File

@ -1,46 +0,0 @@
import server from "../../services/server.js";
import ws from "../../services/ws.js";
import Component from "../../components/component.js";
import utils from "../../services/utils.js";
import { t } from "../../services/i18n.js";
import type FAttribute from "../../entities/fattribute.js";
import type FNote from "../../entities/fnote.js";
import type { AttributeType } from "../../entities/fattribute.js";
export default abstract class AbstractSearchOption extends Component {
private attribute: FAttribute;
protected note: FNote;
constructor(attribute: FAttribute, note: FNote) {
super();
this.attribute = attribute;
this.note = note;
}
async setAttribute(type: AttributeType, name: string, value: string = "") {
// TODO: Find a better pattern.
await (this.constructor as any).setAttribute(this.note.noteId, type, name, value);
}
render() {
try {
const $rendered = this.doRender();
$rendered
.find(".search-option-del")
.on("click", () => this.deleteOption())
.attr("title", t("abstract_search_option.remove_this_search_option"));
utils.initHelpDropdown($rendered);
return $rendered;
} catch (e: any) {
logError(t("abstract_search_option.failed_rendering", { dto: JSON.stringify(this.attribute.dto), error: e.message, stack: e.stack }));
return null;
}
}
abstract doRender(): JQuery<HTMLElement>;
}