gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 08:58:58 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

chore(react/type_widgets): introduce disabled tooltip

Browse Source
This commit is contained in:
Elian Doran 2025-09-21 12:01:27 +03:00
parent b7574b3ca7
commit 376ef0c679
No known key found for this signature in database
4 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/stylesheets/style.css
View File

@ -408,7 +408,7 @@ body.desktop .tabulator-popup-container {
.dropdown-menu .disabled .disabled-tooltip {
pointer-events: all;
margin-left: 8px;
font-size: 0.5em;
font-size: 0.75rem;
color: var(--disabled-tooltip-icon-color);
cursor: help;
opacity: 0.75;

21
apps/client/src/widgets/buttons/attachments_actions.ts
View File

@ -15,9 +15,6 @@ import type { NoteRow } from "@triliumnext/commons";
const TPL = /*html*/`
<div class="dropdown">
<div class="dropdown-menu dropdown-menu-right">
<li data-trigger-command="openAttachmentCustom" class="dropdown-item"
title="${t("attachments_actions.open_custom_title")}"><span class="bx bx-customize"></span> ${t("attachments_actions.open_custom")}</li>
<li data-trigger-command="downloadAttachment" class="dropdown-item">
<span class="bx bx-download"></span> ${t("attachments_actions.download")}</li>
@ -84,24 +81,6 @@ export default class AttachmentActionsWidget extends BasicWidget {
}
}
});
const isElectron = utils.isElectron();
if (!this.isFullDetail) {
const $openAttachmentButton = this.$widget.find("[data-trigger-command='openAttachment']");
$openAttachmentButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_externally_detail_page")));
if (isElectron) {
const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
$openAttachmentCustomButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_externally_detail_page")));
}
}
if (!isElectron) {
const $openAttachmentCustomButton = this.$widget.find("[data-trigger-command='openAttachmentCustom']");
$openAttachmentCustomButton.addClass("disabled").append($('<span class="bx bx-info-circle disabled-tooltip" />').attr("title", t("attachments_actions.open_custom_client_only")));
}
}
async openAttachmentCustomCommand() {
await openService.openAttachmentCustom(this.attachmentId, this.attachment.mime);
}
async downloadAttachmentCommand() {

15
apps/client/src/widgets/react/FormList.tsx
View File

@ -22,7 +22,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
if (!triggerRef.current || !wrapperRef.current) {
return;
}
const $wrapperRef = $(wrapperRef.current);
const dropdown = BootstrapDropdown.getOrCreateInstance(triggerRef.current);
$wrapperRef.on("hide.bs.dropdown", (e) => e.preventDefault());
@ -82,6 +82,8 @@ interface FormListItemOpts {
active?: boolean;
badges?: FormListBadge[];
disabled?: boolean;
/** Will indicate the reason why the item is disabled via an icon, when hovered over it. */
disabledTooltip?: string;
checked?: boolean | null;
selected?: boolean;
onClick?: (e: MouseEvent) => void;
@ -118,21 +120,24 @@ export function FormListItem({ className, icon, value, title, active, disabled,
<Icon icon={icon} />&nbsp;
{description ? (
<div>
<FormListContent description={description} {...contentProps} />
<FormListContent description={description} disabled={disabled} {...contentProps} />
</div>
) : (
<FormListContent description={description} {...contentProps} />
<FormListContent description={description} disabled={disabled} {...contentProps} />
)}
</li>
);
}
function FormListContent({ children, badges, description }: Pick<FormListItemOpts, "children" | "badges" | "description">) {
function FormListContent({ children, badges, description, disabled, disabledTooltip }: Pick<FormListItemOpts, "children" | "badges" | "description" | "disabled" | "disabledTooltip">) {
return <>
{children}
{badges && badges.map(({ className, text }) => (
<span className={`badge ${className ?? ""}`}>{text}</span>
))}
{disabled && disabledTooltip && (
<span class="bx bx-info-circle disabled-tooltip" title={disabledTooltip} />
)}
{description && <div className="description">{description}</div>}
</>;
}
@ -177,4 +182,4 @@ export function FormDropdownSubmenu({ icon, title, children }: { icon: string, t
</ul>
</li>
)
}
}

10
apps/client/src/widgets/type_widgets/Attachment.tsx
View File

@ -156,6 +156,8 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
}
function AttachmentActions({ attachment }: { attachment: FAttachment }) {
const isElectron = utils.isElectron();
return (
<div className="attachment-actions-container">
<Dropdown
@ -169,6 +171,14 @@ function AttachmentActions({ attachment }: { attachment: FAttachment }) {
title={t("attachments_actions.open_externally_title")}
onClick={(e) => open.openAttachmentExternally(attachment.attachmentId, attachment.mime)}
>{t("attachments_actions.open_externally")}</FormListItem>
<FormListItem
icon="bx bx-customize"
title={t("attachments_actions.open_custom_title")}
onClick={(e) => open.openAttachmentCustom(attachment.attachmentId, attachment.mime)}
disabled={!isElectron}
disabledTooltip={!isElectron ? t("attachments_actions.open_custom_client_only") : t("attachments_actions.open_externally_detail_page")}
>{t("attachments_actions.open_custom")}</FormListItem>
</Dropdown>
</div>
)