gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-13 02:44:24 +01:00
Code Issues Actions 21 Packages Projects Releases Wiki Activity

feat(note_actions): reintroduce help pages

Browse Source
This commit is contained in:
Elian Doran 2025-12-10 22:18:53 +02:00
parent 6f85b7cc09
commit 8d8ff25bae
No known key found for this signature in database
9 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -423,16 +423,16 @@ body.desktop .tabulator-popup-container,
pointer-events: none;
}
.dropdown-menu .disabled .disabled-tooltip {
.dropdown-menu .disabled .contextual-help {
pointer-events: all;
margin-inline-start: 8px;
font-size: 0.75rem;
color: var(--disabled-tooltip-icon-color);
color: var(--contextual-help-icon-color);
cursor: help;
opacity: 0.75;
}
.dropdown-menu .disabled .disabled-tooltip:hover {
.dropdown-menu .disabled .contextual-help:hover {
opacity: 1;
}

2
apps/client/src/stylesheets/theme-dark.css
View File

@ -19,7 +19,7 @@
--dropdown-border-color: #555;
--dropdown-shadow-opacity: 0.4;
--dropdown-item-icon-destructive-color: #de6e5b;
--disabled-tooltip-icon-color: #7fd2ef;
--contextual-help-icon-color: #7fd2ef;
--accented-background-color: #555;
--more-accented-background-color: #777;

2
apps/client/src/stylesheets/theme-light.css
View File

@ -23,7 +23,7 @@ html {
--dropdown-border-color: #ccc;
--dropdown-shadow-opacity: 0.2;
--dropdown-item-icon-destructive-color: #ec5138;
--disabled-tooltip-icon-color: #004382;
--contextual-help-icon-color: #004382;
--accented-background-color: #f5f5f5;
--more-accented-background-color: #ddd;

2
apps/client/src/stylesheets/theme-next-dark.css
View File

@ -22,7 +22,7 @@
--dropdown-border-color: #404040;
--dropdown-shadow-opacity: 0.6;
--dropdown-item-icon-destructive-color: #de6e5b;
--disabled-tooltip-icon-color: #7fd2ef;
--contextual-help-icon-color: #7fd2ef;
--accented-background-color: #555;

2
apps/client/src/stylesheets/theme-next-light.css
View File

@ -22,7 +22,7 @@
--dropdown-border-color: #ccc;
--dropdown-shadow-opacity: 0.2;
--dropdown-item-icon-destructive-color: #ec5138;
--disabled-tooltip-icon-color: #004382;
--contextual-help-icon-color: #004382;
--accented-background-color: #f5f5f5;

7
apps/client/src/widgets/react/FormList.css
View File

@ -17,7 +17,12 @@
--switch-thumb-width: 12px;
--switch-thumb-height: var(--switch-thumb-width);
.switch-name {
.contextual-help {
margin-inline-start: 0.25em;
cursor: pointer;
}
.switch-spacer {
flex-grow: 1;
}
}

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

@ -5,7 +5,7 @@ import { useEffect, useMemo, useRef, useState, type CSSProperties } from "preact
import "./FormList.css";
import { CommandNames } from "../../components/app_context";
import { useStaticTooltip } from "./hooks";
import { handleRightToLeftPlacement, isMobile } from "../../services/utils";
import { handleRightToLeftPlacement, isMobile, openInAppHelpFromUrl } from "../../services/utils";
import clsx from "clsx";
import FormToggle from "./FormToggle";
@ -95,12 +95,13 @@ interface FormListItemOpts {
description?: string;
className?: string;
rtl?: boolean;
postContent?: ComponentChildren;
}
const TOOLTIP_CONFIG: Partial<Tooltip.Options> = {
placement: handleRightToLeftPlacement("right"),
fallbackPlacements: [ handleRightToLeftPlacement("right") ]
}
};
export function FormListItem({ className, icon, value, title, active, disabled, checked, container, onClick, selected, rtl, triggerCommand, description, ...contentProps }: FormListItemOpts) {
const itemRef = useRef<HTMLLIElement>(null);
@ -133,9 +134,10 @@ export function FormListItem({ className, icon, value, title, active, disabled,
);
}
export function FormListToggleableItem({ title, currentValue, onChange, disabled, ...props }: Omit<FormListItemOpts, "onClick" | "children"> & {
export function FormListToggleableItem({ title, currentValue, onChange, disabled, helpPage, ...props }: Omit<FormListItemOpts, "onClick" | "children"> & {
title: string;
currentValue: boolean;
helpPage?: string;
onChange(newValue: boolean): void | Promise<void>;
}) {
const isWaiting = useRef(false);
@ -145,6 +147,10 @@ export function FormListToggleableItem({ title, currentValue, onChange, disabled
{...props}
disabled={disabled}
onClick={async (e) => {
if ((e.target as HTMLElement | null)?.classList.contains("contextual-help")) {
return;
}
e.stopPropagation();
if (!disabled && !isWaiting.current) {
isWaiting.current = true;
@ -157,6 +163,15 @@ export function FormListToggleableItem({ title, currentValue, onChange, disabled
switchOffName={title}
currentValue={currentValue}
onChange={() => {}}
afterName={<>
{helpPage && (
<span
class="bx bx-help-circle contextual-help"
onClick={() => openInAppHelpFromUrl(helpPage)}
/>
)}
<span class="switch-spacer" />
</>}
/>
</FormListItem>
);
@ -169,7 +184,7 @@ function FormListContent({ children, badges, description, disabled, disabledTool
<span className={`badge ${className ?? ""}`}>{text}</span>
))}
{disabled && disabledTooltip && (
<span class="bx bx-info-circle disabled-tooltip" title={disabledTooltip} />
<span class="bx bx-info-circle contextual-help" title={disabledTooltip} />
)}
{description && <div className="description">{description}</div>}
</>;

5
apps/client/src/widgets/react/FormToggle.tsx
View File

@ -2,6 +2,7 @@ import clsx from "clsx";
import "./FormToggle.css";
import HelpButton from "./HelpButton";
import { useEffect, useState } from "preact/hooks";
import { ComponentChildren } from "preact";
interface FormToggleProps {
currentValue: boolean | null;
@ -12,9 +13,10 @@ interface FormToggleProps {
switchOffTooltip?: string;
helpPage?: string;
disabled?: boolean;
afterName?: ComponentChildren;
}
export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled }: FormToggleProps) {
export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled, afterName }: FormToggleProps) {
const [ disableTransition, setDisableTransition ] = useState(true);
useEffect(() => {
@ -27,6 +29,7 @@ export default function FormToggle({ currentValue, helpPage, switchOnName, switc
return (
<div className="switch-widget">
<span className="switch-name">{ currentValue ? switchOffName : switchOnName }</span>
{ afterName }
<label>
<div

2
apps/client/src/widgets/ribbon/NoteActions.tsx
View File

@ -134,12 +134,14 @@ function NoteBasicProperties({ note }: { note: FNote }) {
icon="bx bx-copy-alt"
title={t("template_switch.template")}
currentValue={isTemplate} onChange={setIsTemplate}
helpPage="KC1HB96bqqHX"
disabled={note?.noteId.startsWith("_options")}
/>
<FormListToggleableItem
icon="bx bx-share-alt"
title={t("shared_switch.shared")}
currentValue={isShared} onChange={switchShareState}
helpPage="R9pX4DGra2Vt"
disabled={["root", "_share", "_hidden"].includes(note?.noteId ?? "") || note?.noteId.startsWith("_options")}
/>
<EditabilityDropdown note={note} />