Skip to content

Commit

Permalink
chore(ShortcutModal): clean up shortcut modal (janhq#1614)
Browse files Browse the repository at this point in the history 
Signed-off-by: James <[email protected]>
Co-authored-by: James <[email protected]>
  • Loading branch information
@namchuai
namchuai and James authored Jan 16, 2024
1 parent 9bfcecc commit eb70e13
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 141 deletions.
99 changes: 99 additions & 0 deletions web/containers/ShortcutModal/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React from 'react'

import {
Modal,
ModalTrigger,
Button,
ModalContent,
ModalHeader,
ModalTitle,
} from '@janhq/uikit'

const availableShortcuts = [
{
combination: 'E',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Show list your models',
},
{
combination: 'K',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Show list navigation pages',
},
{
combination: 'B',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Toggle collapsible left panel',
},
{
combination: ',',
modifierKeys: [isMac ? '⌘' : 'Ctrl'],
description: 'Navigate to setting page',
},
{
combination: 'Enter',
description: 'Send a message',
},
{
combination: 'Shift + Enter',
description: 'Insert new line in input box',
},
{
combination: 'Arrow Up',
description: 'Navigate to previous option (within search dialog)',
},
{
combination: 'Arrow Down',
description: 'Navigate to next option (within search dialog)',
},
]

const ShortcutModal: React.FC = () => (
<Modal>
<ModalTrigger asChild>
<Button size="sm" themes="secondary">
Show
</Button>
</ModalTrigger>
<ModalContent className="max-w-2xl">
<ModalHeader>
<ModalTitle>Keyboard Shortcuts</ModalTitle>
</ModalHeader>
<div className="my-2 flex flex-col items-center justify-center gap-2">
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2 py-2">
<h6>Combination</h6>
</div>
<div className="w-full py-2">
<h6>Description</h6>
</div>
</div>
{availableShortcuts.map((shortcut, index) => {
return (
<div
key={shortcut.combination}
className={
index === availableShortcuts.length - 1
? 'flex w-full gap-4 pb-2'
: 'flex w-full gap-4 border-b border-border pb-2'
}
>
<div className="w-1/2 py-2">
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
<p>{`${shortcut.modifierKeys?.[0] ?? ''} ${
shortcut.combination
}`}</p>
</div>
</div>
<div className="w-full py-2">
<p>{shortcut.description}</p>
</div>
</div>
)
})}
</div>
</ModalContent>
</Modal>
)

export default ShortcutModal
145 changes: 4 additions & 141 deletions web/screens/Settings/Advanced/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,16 @@
import { useContext, useEffect, useState } from 'react'

import { fs } from '@janhq/core'
import {
Switch,
Button,
Modal,
ModalContent,
ModalHeader,
ModalTitle,
ModalTrigger,
} from '@janhq/uikit'
import { Switch, Button } from '@janhq/uikit'

import { atom, useAtom } from 'jotai'

import ShortCut from '@/containers/Shortcut'
import ShortcutModal from '@/containers/ShortcutModal'
import { toaster } from '@/containers/Toast'

import { FeatureToggleContext } from '@/context/FeatureToggle'

import { useSettings } from '@/hooks/useSettings'
import { toaster } from '@/containers/Toast'

const serverEnabledAtom = atom<boolean>(false)

Expand Down Expand Up @@ -173,136 +165,7 @@ const Advanced = () => {
Shortcuts that you might find useful in Jan app.
</p>
</div>
<Modal>
<ModalTrigger asChild>
<Button size="sm" themes="secondary">
Show
</Button>
</ModalTrigger>
<ModalContent className="max-w-2xl">
<ModalHeader>
<ModalTitle>Keyboard Shortcuts</ModalTitle>
</ModalHeader>
<div className="my-2 flex flex-col items-center justify-center gap-2">
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<h6>Combination</h6>
</div>
</div>
<div className="w-full">
<div className="py-2">
<h6>Description</h6>
</div>
</div>
</div>
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<ShortCut menu="E" />
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Show list your models</p>
</div>
</div>
</div>
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<ShortCut menu="K" />
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Show list navigation pages</p>
</div>
</div>
</div>
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<ShortCut menu="B" />
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Toggle collapsible left panel</p>
</div>
</div>
</div>
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<ShortCut menu="," />
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Navigate to setting page</p>
</div>
</div>
</div>
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
<p>Enter</p>
</div>
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Send a message</p>
</div>
</div>
</div>
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
<p>Shift + Enter</p>
</div>
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Insert new line in input box</p>
</div>
</div>
</div>
<div className="flex w-full gap-4 border-b border-border pb-2">
<div className="w-1/2">
<div className="py-2">
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
<p>Arrow Up</p>
</div>
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Navigate to previous option (within search dialog)</p>
</div>
</div>
</div>
<div className="flex w-full gap-4 pb-2">
<div className="w-1/2">
<div className="py-2">
<div className="inline-flex items-center justify-center rounded-full bg-secondary px-1 py-0.5 text-xs font-bold text-muted-foreground">
<p>Arrow Down</p>
</div>
</div>
</div>
<div className="w-full">
<div className="py-2">
<p>Navigate to next option (within search dialog)</p>
</div>
</div>
</div>
</div>
</ModalContent>
</Modal>
<ShortcutModal />
</div>
</div>
)
Expand Down

0 comments on commit eb70e13

Please sign in to comment.