Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 13:56:28 +02:00
Code Issues Packages Projects Releases Activity

feat(code): status bar indentation selector

Browse Source
This commit is contained in:
Elian Doran
2026-04-15 09:01:23 +03:00
parent 6a05288be4
commit 692a31772d
2 changed files with 56 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/client/src/translations/en/translation.json
View File

@@ -2297,7 +2297,12 @@
"note_paths_one": "{{count}} path",
"note_paths_other": "{{count}} paths",
"note_paths_title": "Note paths",
"code_note_switcher": "Change language mode"
"code_note_switcher": "Change language mode",
"tab_width": "Tab Width: {{width}}",
"tab_width_title": "Change tab width",
"tab_width_spaces": "{{count}} spaces",
"tab_width_per_note": "Set for this note",
"tab_width_use_default": "Use default ({{width}})"
},
"attributes_panel": {
"title": "Note Attributes"

51
apps/client/src/widgets/layout/StatusBar.tsx
View File

@@ -20,7 +20,7 @@ import { formatDateTime } from "../../utils/formatters";
import { BacklinksList, useBacklinkCount } from "../FloatingButtonsDefinitions";
import Dropdown, { DropdownProps } from "../react/Dropdown";
import { FormDropdownDivider, FormListItem } from "../react/FormList";
import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteLabel, useNoteLabelInt, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents, useTriliumOption } from "../react/hooks";
import Icon from "../react/Icon";
import LinkButton from "../react/LinkButton";
import { ParentComponent } from "../react/react_utils";
@@ -69,6 +69,7 @@ export default function StatusBar() {
<div className="actions-row">
<CodeNoteSwitcher {...context} />
<TabWidthSwitcher {...context} />
<LanguageSwitcher {...context} />
{!isHiddenNote && <NotePaths {...context} />}
<AttributesButton {...attributesContext} />
@@ -436,6 +437,54 @@ function NotePaths({ note, hoistedNoteId, notePath }: StatusBarContext) {
}
//#endregion
//#region Tab width switcher
const TAB_WIDTH_OPTIONS = [1, 2, 3, 4, 6, 8] as const;
function TabWidthSwitcher({ note }: StatusBarContext) {
const [ codeNoteTabWidth ] = useTriliumOption("codeNoteTabWidth");
const [ noteTabWidth, setNoteTabWidth ] = useNoteLabelInt(note, "tabWidth");
const globalTabWidth = parseInt(codeNoteTabWidth) || 4;
const effectiveTabWidth = noteTabWidth ?? globalTabWidth;
const hasPerNoteOverride = noteTabWidth != null;
return (note.type === "code" &&
<StatusBarDropdown
icon="bx bx-right-indent"
text={t("status_bar.tab_width", { width: effectiveTabWidth })}
title={t("status_bar.tab_width_title")}
>
{TAB_WIDTH_OPTIONS.map(size => (
<FormListItem
key={size}
checked={effectiveTabWidth === size}
onClick={() => {
if (hasPerNoteOverride) {
setNoteTabWidth(size);
} else {
attributes.setLabel(note.noteId, "tabWidth", String(size));
}
}}
>
{t("status_bar.tab_width_spaces", { count: size })}
</FormListItem>
))}
<FormDropdownDivider />
{hasPerNoteOverride
? <FormListItem
icon="bx bx-x"
onClick={() => attributes.removeOwnedLabelByName(note, "tabWidth")}
>
{t("status_bar.tab_width_use_default", { width: globalTabWidth })}
</FormListItem>
: <FormListItem icon="bx bx-pin" onClick={() => attributes.setLabel(note.noteId, "tabWidth", String(effectiveTabWidth))}>
{t("status_bar.tab_width_per_note")}
</FormListItem>
}
</StatusBarDropdown>
);
}
//#endregion
//#region Code note switcher
function CodeNoteSwitcher({ note }: StatusBarContext) {
const [ modalShown, setModalShown ] = useState(false);