diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 55398be8c..0a1971f11 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -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; } diff --git a/apps/client/src/stylesheets/theme-dark.css b/apps/client/src/stylesheets/theme-dark.css index 690d49ecd..d4702d6c5 100644 --- a/apps/client/src/stylesheets/theme-dark.css +++ b/apps/client/src/stylesheets/theme-dark.css @@ -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; @@ -114,4 +114,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before { .use-note-color { --custom-color: var(--dark-theme-custom-color); -} \ No newline at end of file +} diff --git a/apps/client/src/stylesheets/theme-light.css b/apps/client/src/stylesheets/theme-light.css index 0c14a2d92..777ccbd61 100644 --- a/apps/client/src/stylesheets/theme-light.css +++ b/apps/client/src/stylesheets/theme-light.css @@ -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; @@ -98,4 +98,4 @@ html { .use-note-color { --custom-color: var(--light-theme-custom-color); -} \ No newline at end of file +} diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 8358de09b..b4c3def74 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -6,7 +6,7 @@ */ :root { - /* + /* * ⚠️ NOTICE: This theme is currently in the beta stage of development. * The names and purposes of these CSS variables are subject to frequent changes. */ @@ -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; @@ -182,7 +182,7 @@ --tab-close-button-hover-background: #a45353; --tab-close-button-hover-color: white; - + --active-tab-background-color: #ffffff1c; --active-tab-hover-background-color: var(--active-tab-background-color); --active-tab-icon-color: #a9a9a9; @@ -201,7 +201,7 @@ --promoted-attribute-card-background-color: #ffffff21; --promoted-attribute-card-shadow: none; - + --floating-button-shadow-color: #00000080; --floating-button-background-color: #494949d2; --floating-button-color: var(--button-text-color); @@ -226,7 +226,7 @@ --scrollbar-border-color: unset; /* Deprecated */ --selection-background-color: #3399FF70; - + --link-color: lightskyblue; --mermaid-theme: dark; @@ -320,4 +320,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before { .use-note-color { --custom-color: var(--dark-theme-custom-color); -} \ No newline at end of file +} diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 60e7d55b2..620672499 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -6,7 +6,7 @@ */ :root { - /* + /* * ⚠️ NOTICE: This theme is currently in the beta stage of development. * The names and purposes of these CSS variables are subject to frequent changes. */ @@ -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; @@ -138,7 +138,7 @@ /* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */ --launcher-pane-background-color: unset; --launcher-pane-text-color: unset; - + --launcher-pane-vert-background-color: #e8e8e8; --launcher-pane-vert-text-color: #000000bd; --launcher-pane-vert-button-hover-color: black; @@ -174,7 +174,7 @@ --tab-close-button-hover-background: #c95a5a; --tab-close-button-hover-color: white; - + --active-tab-background-color: white; --active-tab-hover-background-color: var(--active-tab-background-color); --active-tab-icon-color: gray; @@ -291,4 +291,4 @@ --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%); --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); -} \ No newline at end of file +} diff --git a/apps/client/src/widgets/react/FormList.css b/apps/client/src/widgets/react/FormList.css index 33922e7c6..643b5132a 100644 --- a/apps/client/src/widgets/react/FormList.css +++ b/apps/client/src/widgets/react/FormList.css @@ -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; } } diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index fac69efde..dd5948cb3 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -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 = { 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(null); @@ -133,9 +134,10 @@ export function FormListItem({ className, icon, value, title, active, disabled, ); } -export function FormListToggleableItem({ title, currentValue, onChange, disabled, ...props }: Omit & { +export function FormListToggleableItem({ title, currentValue, onChange, disabled, helpPage, ...props }: Omit & { title: string; currentValue: boolean; + helpPage?: string; onChange(newValue: boolean): void | Promise; }) { 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 && ( + openInAppHelpFromUrl(helpPage)} + /> + )} + + } /> ); @@ -169,7 +184,7 @@ function FormListContent({ children, badges, description, disabled, disabledTool {text} ))} {disabled && disabledTooltip && ( - + )} {description &&
{description}
} ; diff --git a/apps/client/src/widgets/react/FormToggle.tsx b/apps/client/src/widgets/react/FormToggle.tsx index 39be5cd70..e08c1e3c2 100644 --- a/apps/client/src/widgets/react/FormToggle.tsx +++ b/apps/client/src/widgets/react/FormToggle.tsx @@ -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 (
{ currentValue ? switchOffName : switchOnName } + { afterName }