gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

fix(react/global_menu): styling and layout of keyboard shortcuts

Browse Source
This commit is contained in:
Elian Doran 2025-08-29 13:01:54 +03:00
parent f0ac301417
commit e49e2d5093
No known key found for this signature in database
4 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/stylesheets/style.css
View File

@ -437,14 +437,18 @@ body #context-menu-container .dropdown-item > span {
align-items: center; align-items: center;
} }
.dropdown-menu kbd { .dropdown-item span.keyboard-shortcut {
flex-grow: 1; flex-grow: 1;
text-align: right; text-align: right;
}
.dropdown-menu kbd {
color: var(--muted-text-color); color: var(--muted-text-color);
border: none; border: none;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
padding-bottom: 0; padding-bottom: 0;
padding: 0;
} }
.dropdown-item, .dropdown-item,

6
apps/client/src/stylesheets/theme-next/base.css
View File

@ -197,13 +197,17 @@ html body .dropdown-item[disabled] {
/* Menu item keyboard shortcut */ /* Menu item keyboard shortcut */
.dropdown-item kbd { .dropdown-item kbd {
margin-left: 16px;
font-family: unset !important; font-family: unset !important;
font-size: unset !important; font-size: unset !important;
color: var(--menu-item-keyboard-shortcut-color) !important; color: var(--menu-item-keyboard-shortcut-color) !important;
padding-top: 0; padding-top: 0;
} }
.dropdown-item span.keyboard-shortcut {
color: var(--menu-item-keyboard-shortcut-color) !important;
margin-left: 16px;
}
.dropdown-divider { .dropdown-divider {
position: relative; position: relative;
border-color: transparent !important; border-color: transparent !important;

22
apps/client/src/widgets/react/KeyboardShortcut.tsx
View File

@ -2,11 +2,14 @@ import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/common
import { useEffect, useState } from "preact/hooks"; import { useEffect, useState } from "preact/hooks";
import keyboard_actions from "../../services/keyboard_actions"; import keyboard_actions from "../../services/keyboard_actions";
import { joinElements } from "./react_utils"; import { joinElements } from "./react_utils";
import utils from "../../services/utils";
interface KeyboardShortcutProps { interface KeyboardShortcutProps {
actionName: KeyboardActionNames; actionName: KeyboardActionNames;
} }
const isMobile = utils.isMobile();
export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) { export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) {
const [ action, setAction ] = useState<ActionKeyboardShortcut>(); const [ action, setAction ] = useState<ActionKeyboardShortcut>();
@ -18,17 +21,14 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps)
return <></>; return <></>;
} }
return ( return (!isMobile &&
<> <span className="keyboard-shortcut">
{action.effectiveShortcuts?.map((shortcut) => { {joinElements(action.effectiveShortcuts?.map((shortcut) => {
const keys = shortcut.split("+"); const keys = shortcut.split("+");
return joinElements(keys return joinElements(
.map((key, i) => ( keys.map((key, i) => <kbd>{key}</kbd>)
<> , "+");
<kbd>{key}</kbd> {i + 1 < keys.length && "+ "} }))}
</> </span>
)))
})}
</>
); );
} }

6
apps/client/src/widgets/react/react_utils.tsx
View File

@ -41,7 +41,9 @@ export function disposeReactWidget(container: Element) {
render(null, container); render(null, container);
} }
export function joinElements(components: ComponentChild[], separator = ", ") { export function joinElements(components: ComponentChild[] | undefined, separator = ", ") {
if (!components) return <></>;
const joinedComponents: ComponentChild[] = []; const joinedComponents: ComponentChild[] = [];
for (let i=0; i<components.length; i++) { for (let i=0; i<components.length; i++) {
joinedComponents.push(components[i]); joinedComponents.push(components[i]);
@ -50,5 +52,5 @@ export function joinElements(components: ComponentChild[], separator = ", ") {
} }
} }
return joinedComponents; return <>{joinedComponents}</>;
} }