gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-19 12:14:23 +01:00
Code Issues Actions 16 Packages Projects Releases Wiki Activity

feat(options/shortcuts): make header and footer sticky (closes #8675)

Browse Source
This commit is contained in:
Elian Doran 2026-02-11 20:02:37 +02:00
parent 43be0a1a3f
commit 656f5e0a7f
No known key found for this signature in database
2 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/client/src/widgets/type_widgets/options/shortcuts.css Normal file
View File

@ -0,0 +1,23 @@
.shortcuts-options-section {
> header {
position: sticky;
top: 0;
left: 0;
right: 0;
background: var(--main-background-color);
padding-block: 0.5em;
border-bottom: 1px solid var(--main-border-color);
}
> footer {
position: sticky;
bottom: 0;
left: 0;
right: 0;
background: var(--main-background-color);
padding-block: 0.5em;
border-top: 1px solid var(--main-border-color);
display: flex;
justify-content: space-between;
}
}

17
apps/client/src/widgets/type_widgets/options/shortcuts.tsx
View File

@ -2,7 +2,6 @@ import { ActionKeyboardShortcut, KeyboardShortcut, OptionNames } from "@triliumn
import { t } from "../../../services/i18n";
import { arrayEqual, reloadFrontendApp } from "../../../services/utils";
import Button from "../../react/Button";
import FormGroup from "../../react/FormGroup";
import FormText from "../../react/FormText";
import FormTextBox from "../../react/FormTextBox";
import RawHtml from "../../react/RawHtml";
@ -12,6 +11,7 @@ import server from "../../../services/server";
import options from "../../../services/options";
import dialog from "../../../services/dialog";
import { useTriliumEvent } from "../../react/hooks";
import "./shortcuts.css";
export default function ShortcutSettings() {
const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]);
@ -73,26 +73,23 @@ export default function ShortcutSettings() {
return (
<OptionsSection
className="shortcuts-options-section"
style={{ display: "flex", flexDirection: "column", height: "100%" }}
noCard
>
<FormText>
{t("shortcuts.multiple_shortcuts")}
{t("shortcuts.multiple_shortcuts")}{" "}
<RawHtml html={t("shortcuts.electron_documentation")} />
</FormText>
<FormGroup name="keyboard-shortcut-filter">
<header>
<FormTextBox
placeholder={t("shortcuts.type_text_to_filter")}
currentValue={filter} onChange={(value) => setFilter(value.toLowerCase())}
/>
</FormGroup>
</header>
<div style={{overflow: "auto", flexGrow: 1, flexShrink: 1}}>
<KeyboardShortcutTable keyboardShortcuts={keyboardShortcuts} filter={filter} />
</div>
<KeyboardShortcutTable keyboardShortcuts={keyboardShortcuts} filter={filter} />
<div style={{ display: "flex", justifyContent: "space-between", margin: "15px 15px 0 15px"}}>
<footer>
<Button
text={t("shortcuts.reload_app")}
onClick={reloadFrontendApp}
@ -102,7 +99,7 @@ export default function ShortcutSettings() {
text={t("shortcuts.set_all_to_default")}
onClick={resetShortcuts}
/>
</div>
</footer>
</OptionsSection>
)
}