chore(react/type_widgets): introduce disabled tooltip

apps/client/src/stylesheets/style.css

@@ -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;

apps/client/src/widgets/buttons/attachments_actions.ts

@@ -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() {

apps/client/src/widgets/react/FormList.tsx

@@ -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>
     )
-}
+}

apps/client/src/widgets/type_widgets/Attachment.tsx

@@ -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>
     )