diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index ae6e2109a..d22d633b7 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -437,14 +437,18 @@ body #context-menu-container .dropdown-item > span { align-items: center; } -.dropdown-menu kbd { +.dropdown-item span.keyboard-shortcut { flex-grow: 1; text-align: right; +} + +.dropdown-menu kbd { color: var(--muted-text-color); border: none; background-color: transparent; box-shadow: none; padding-bottom: 0; + padding: 0; } .dropdown-item, diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css index bee48c023..524bb8140 100644 --- a/apps/client/src/stylesheets/theme-next/base.css +++ b/apps/client/src/stylesheets/theme-next/base.css @@ -197,13 +197,17 @@ html body .dropdown-item[disabled] { /* Menu item keyboard shortcut */ .dropdown-item kbd { - margin-left: 16px; font-family: unset !important; font-size: unset !important; color: var(--menu-item-keyboard-shortcut-color) !important; padding-top: 0; } +.dropdown-item span.keyboard-shortcut { + color: var(--menu-item-keyboard-shortcut-color) !important; + margin-left: 16px; +} + .dropdown-divider { position: relative; border-color: transparent !important; diff --git a/apps/client/src/widgets/react/KeyboardShortcut.tsx b/apps/client/src/widgets/react/KeyboardShortcut.tsx index ca8f6a852..0a76b8093 100644 --- a/apps/client/src/widgets/react/KeyboardShortcut.tsx +++ b/apps/client/src/widgets/react/KeyboardShortcut.tsx @@ -2,11 +2,14 @@ import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/common import { useEffect, useState } from "preact/hooks"; import keyboard_actions from "../../services/keyboard_actions"; import { joinElements } from "./react_utils"; +import utils from "../../services/utils"; interface KeyboardShortcutProps { actionName: KeyboardActionNames; } +const isMobile = utils.isMobile(); + export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) { const [ action, setAction ] = useState(); @@ -18,17 +21,14 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) return <>; } - return ( - <> - {action.effectiveShortcuts?.map((shortcut) => { + return (!isMobile && + + {joinElements(action.effectiveShortcuts?.map((shortcut) => { const keys = shortcut.split("+"); - return joinElements(keys - .map((key, i) => ( - <> - {key} {i + 1 < keys.length && "+ "} - - ))) - })} - + return joinElements( + keys.map((key, i) => {key}) + , "+"); + }))} + ); } \ No newline at end of file diff --git a/apps/client/src/widgets/react/react_utils.tsx b/apps/client/src/widgets/react/react_utils.tsx index 40bb1b9cb..5e436bf14 100644 --- a/apps/client/src/widgets/react/react_utils.tsx +++ b/apps/client/src/widgets/react/react_utils.tsx @@ -41,7 +41,9 @@ export function disposeReactWidget(container: Element) { render(null, container); } -export function joinElements(components: ComponentChild[], separator = ", ") { +export function joinElements(components: ComponentChild[] | undefined, separator = ", ") { + if (!components) return <>; + const joinedComponents: ComponentChild[] = []; for (let i=0; i{joinedComponents}; }