feat(note_bars/collection): add a help button

This commit is contained in:
Elian Doran 2025-12-11 20:19:06 +02:00
parent 8ab9e30404
commit c76ff2d371
No known key found for this signature in database
3 changed files with 27 additions and 4 deletions

View File

@ -300,8 +300,9 @@ function ExportImageButtons({ note, triggerEvent, isDefaultViewMode }: FloatingB
function InAppHelpButton({ note }: FloatingButtonContext) { function InAppHelpButton({ note }: FloatingButtonContext) {
const helpUrl = getHelpUrlForNote(note); const helpUrl = getHelpUrlForNote(note);
const isEnabled = !!helpUrl && (!isNewLayout || (note?.type !== "book"));
return !!helpUrl && ( return isEnabled && (
<FloatingButton <FloatingButton
icon="bx bx-help-circle" icon="bx bx-help-circle"
text={t("help-button.title")} text={t("help-button.title")}

View File

@ -12,6 +12,9 @@ import Icon from "../react/Icon";
import { ParentComponent } from "../react/react_utils"; import { ParentComponent } from "../react/react_utils";
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config"; import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab"; import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
import ActionButton from "../react/ActionButton";
import { getHelpUrlForNote } from "../../services/in_app_help";
import { openInAppHelpFromUrl } from "../../services/utils";
const ICON_MAPPINGS: Record<ViewTypeOptions, string> = { const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
grid: "bx bxs-grid", grid: "bx bxs-grid",
@ -28,13 +31,15 @@ export default function CollectionProperties({ note }: { note: FNote }) {
return ( return (
<> <>
<ViewTypeSwitcher note={note} viewType={viewType} setViewType={setViewType} /> <ViewTypeSwitcher viewType={viewType} setViewType={setViewType} />
<ViewOptions note={note} viewType={viewType} /> <ViewOptions note={note} viewType={viewType} />
<div className="spacer" />
<HelpButton note={note} />
</> </>
); );
} }
function ViewTypeSwitcher({ note, viewType, setViewType }: { note: FNote, viewType: ViewTypeOptions, setViewType: (newValue: ViewTypeOptions) => void }) { function ViewTypeSwitcher({ viewType, setViewType }: { viewType: ViewTypeOptions, setViewType: (newValue: ViewTypeOptions) => void }) {
return ( return (
<Dropdown <Dropdown
text={<> text={<>
@ -187,7 +192,7 @@ function ComboBoxPropertyView({ note, property }: { note: FNote, property: Combo
} }
})} })}
</FormDropdownSubmenu> </FormDropdownSubmenu>
) );
} }
function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) { function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
@ -202,3 +207,14 @@ function CheckBoxPropertyView({ note, property }: { note: FNote, property: Check
); );
} }
function HelpButton({ note }: { note: FNote }) {
const helpUrl = getHelpUrlForNote(note);
return (helpUrl && (
<ActionButton
icon="bx bx-help-circle"
onClick={(() => openInAppHelpFromUrl(helpUrl))}
text={t("help-button.title")}
/>
));
}

View File

@ -38,12 +38,18 @@ body.experimental-feature-new-layout {
} }
.title-details { .title-details {
padding-inline-end: 16px;
.dropdown-menu { .dropdown-menu {
input.form-control { input.form-control {
padding: 2px 8px; padding: 2px 8px;
margin-left: 1em; margin-left: 1em;
} }
} }
.spacer {
flex-grow: 1;
}
} }
.title-row { .title-row {