jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): move shortcuts to modal (#1996)

Browse source
This commit is contained in:
Delirium 2024-03-26 14:29:29 +01:00 • committed by GitHub
parent d0ec589ecb
commit ebd77ea793
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import { Icon } from 'UI';
import { Popover, Button } from 'antd';
import { useModal } from "../../../../Modal";
const Key = ({ label }: { label: string }) => <div style={{ minWidth: 52 }} className="whitespace-nowrap font-bold bg-gray-lightest rounded shadow px-2 py-1 text-figmaColors-text-primary text-center">{label}</div>;
function Cell({ shortcut, text }: any) {
return (
<div className="flex items-center gap-2 justify-center text-center rounded">
<div className="flex items-center gap-2 justify-start rounded">
<Key label={shortcut} />
<span>{text}</span>
</div>
@ -32,41 +33,43 @@ export const PlaybackSpeedShortcut = () => <Key label={"↑ / ↓"} />
function ShortcutGrid() {
return (
<div className="grid grid-cols-1 sm:grid-flow-row-dense sm:auto-cols-max md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 justify-items-start">
<Cell shortcut="⇧ + C" text="Launch Console" />
<Cell shortcut="⇧ + N" text="Launch Network" />
<Cell shortcut="⇧ + P" text="Launch Performance" />
<Cell shortcut="⇧ + R" text="Launch State" />
<Cell shortcut="⇧ + E" text="Launch Events" />
<Cell shortcut="⇧ + F" text="Play Session in Fullscreen" />
<Cell shortcut="Space" text="Play/Pause Session" />
<Cell shortcut="⇧ + X" text="Launch X-Ray" />
<Cell shortcut="⇧ + A" text="Launch User Actions" />
<Cell shortcut="⇧ + I" text="Launch More User Info" />
<Cell shortcut="⇧ + M" text="Launch Options Menu" />
<Cell shortcut="⇧ + >" text="Play Next Session" />
<Cell shortcut="⇧ + <" text="Play Previous Session" />
<Cell shortcut="→" text="Skip Forward" />
<Cell shortcut="←" text="Skip Backward" />
<Cell shortcut="↑" text="Playback Speed Up" />
<Cell shortcut="↓" text="Playback Speed Down" />
<div className={'p-4 overflow-y-auto h-screen'}>
<div className={'mb-4 font-semibold text-xl'}>Keyboard Shortcuts</div>
<div className=" grid grid-cols-2 grid-flow-row-dense auto-cols-max gap-4 justify-items-start">
<Cell shortcut="⇧ + C" text="Launch Console" />
<Cell shortcut="⇧ + N" text="Launch Network" />
<Cell shortcut="⇧ + P" text="Launch Performance" />
<Cell shortcut="⇧ + R" text="Launch State" />
<Cell shortcut="⇧ + E" text="Launch Events" />
<Cell shortcut="⇧ + F" text="Play Session in Fullscreen" />
<Cell shortcut="Space" text="Play/Pause Session" />
<Cell shortcut="⇧ + X" text="Launch X-Ray" />
<Cell shortcut="⇧ + A" text="Launch User Actions" />
<Cell shortcut="⇧ + I" text="Launch More User Info" />
<Cell shortcut="⇧ + M" text="Launch Options Menu" />
<Cell shortcut="⇧ + >" text="Play Next Session" />
<Cell shortcut="⇧ + <" text="Play Previous Session" />
<Cell shortcut="→" text="Skip Forward" />
<Cell shortcut="←" text="Skip Backward" />
<Cell shortcut="↑" text="Playback Speed Up" />
<Cell shortcut="↓" text="Playback Speed Down" />
</div>
</div>
);
}
function KeyboardHelp() {
const { showModal } = useModal();
return (
<Popover
title={<div className={'w-full text-center font-semibold'}>Keyboard Shortcuts</div>}
content={<ShortcutGrid />}
<Button
size={'small'}
className={'flex items-center justify-center'}
onClick={() => {
showModal(<ShortcutGrid />, { right: true, width: 420 })
}}
>
<Button
size={'small'}
className={'flex items-center justify-center'}
>
<Icon name={'keyboard'} size={21} color={'black'} />
</Button>
</Popover>
<Icon name={'keyboard'} size={21} color={'black'} />
</Button>
);
}