mirror of
https://github.com/zadam/trilium.git
synced 2025-12-12 18:34:24 +01:00
feat(note_bars/collection): add a help button
This commit is contained in:
parent
8ab9e30404
commit
c76ff2d371
@ -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")}
|
||||||
|
|||||||
@ -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")}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user