thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: now user can navigate using arrow keys (#681)

Browse Source
This commit is contained in:
Saheb Giri 2023-04-03 19:04:11 +05:30 committed by GitHub
parent 35e40a7bec
commit f6f9caf9e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/app/components/command-palette/change-issue-assignee.tsx
View File

@ -98,8 +98,7 @@ export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue }
<Command.Item <Command.Item
key={option.value} key={option.value}
onSelect={() => handleIssueAssignees(option.value)} onSelect={() => handleIssueAssignees(option.value)}
className="focus:bg-slate-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
{option.content} {option.content}
</Command.Item> </Command.Item>

3
apps/app/components/command-palette/change-issue-priority.tsx
View File

@ -60,8 +60,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue }
<Command.Item <Command.Item
key={priority} key={priority}
onSelect={() => handleIssueState(priority)} onSelect={() => handleIssueState(priority)}
className="focus:bg-slate-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
{getPriorityIcon(priority)} {getPriorityIcon(priority)}

3
apps/app/components/command-palette/change-issue-state.tsx
View File

@ -75,8 +75,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue }) =
<Command.Item <Command.Item
key={state.id} key={state.id}
onSelect={() => handleIssueState(state.id)} onSelect={() => handleIssueState(state.id)}
className="focus:bg-slate-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
{getStateGroupIcon(state.group, "16", "16", state.color)} {getStateGroupIcon(state.group, "16", "16", state.color)}

81
apps/app/components/command-palette/command-pallette.tsx
View File

@ -492,8 +492,7 @@ export const CommandPalette: React.FC = () => {
setIsPaletteOpen(false); setIsPaletteOpen(false);
}} }}
value={value} value={value}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 overflow-hidden text-gray-700"> <div className="flex items-center gap-2 overflow-hidden text-gray-700">
<Icon className="h-4 w-4 text-gray-500" color="#6b7280" /> <Icon className="h-4 w-4 text-gray-500" color="#6b7280" />
@ -519,8 +518,7 @@ export const CommandPalette: React.FC = () => {
setSearchTerm(""); setSearchTerm("");
setPages([...pages, "change-issue-state"]); setPages([...pages, "change-issue-state"]);
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<Squares2X2Icon className="h-4 w-4 text-gray-500" /> <Squares2X2Icon className="h-4 w-4 text-gray-500" />
@ -533,8 +531,7 @@ export const CommandPalette: React.FC = () => {
setSearchTerm(""); setSearchTerm("");
setPages([...pages, "change-issue-priority"]); setPages([...pages, "change-issue-priority"]);
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<ChartBarIcon className="h-4 w-4 text-gray-500" /> <ChartBarIcon className="h-4 w-4 text-gray-500" />
@ -547,8 +544,7 @@ export const CommandPalette: React.FC = () => {
setSearchTerm(""); setSearchTerm("");
setPages([...pages, "change-issue-assignee"]); setPages([...pages, "change-issue-assignee"]);
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<UsersIcon className="h-4 w-4 text-gray-500" /> <UsersIcon className="h-4 w-4 text-gray-500" />
@ -560,8 +556,7 @@ export const CommandPalette: React.FC = () => {
handleIssueAssignees(user.id); handleIssueAssignees(user.id);
setSearchTerm(""); setSearchTerm("");
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
{issueDetails?.assignees.includes(user.id) ? ( {issueDetails?.assignees.includes(user.id) ? (
@ -578,11 +573,7 @@ export const CommandPalette: React.FC = () => {
</div> </div>
</Command.Item> </Command.Item>
<Command.Item <Command.Item onSelect={deleteIssue} className="focus:outline-none">
onSelect={deleteIssue}
className="focus:bg-gray-200 focus:outline-none"
tabIndex={0}
>
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<TrashIcon className="h-4 w-4 text-gray-500" /> <TrashIcon className="h-4 w-4 text-gray-500" />
Delete issue Delete issue
@ -593,8 +584,7 @@ export const CommandPalette: React.FC = () => {
setIsPaletteOpen(false); setIsPaletteOpen(false);
copyIssueUrlToClipboard(); copyIssueUrlToClipboard();
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<LinkIcon className="h-4 w-4 text-gray-500" /> <LinkIcon className="h-4 w-4 text-gray-500" />
@ -604,11 +594,7 @@ export const CommandPalette: React.FC = () => {
</> </>
)} )}
<Command.Group heading="Issue"> <Command.Group heading="Issue">
<Command.Item <Command.Item onSelect={createNewIssue} className="focus:bg-gray-200">
onSelect={createNewIssue}
className="focus:bg-gray-200 focus:outline-none"
tabIndex={0}
>
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<LayerDiagonalIcon className="h-4 w-4" color="#6b7280" /> <LayerDiagonalIcon className="h-4 w-4" color="#6b7280" />
Create new issue Create new issue
@ -621,8 +607,7 @@ export const CommandPalette: React.FC = () => {
<Command.Group heading="Project"> <Command.Group heading="Project">
<Command.Item <Command.Item
onSelect={createNewProject} onSelect={createNewProject}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" /> <AssignmentClipboardIcon className="h-4 w-4" color="#6b7280" />
@ -638,8 +623,7 @@ export const CommandPalette: React.FC = () => {
<Command.Group heading="Cycle"> <Command.Group heading="Cycle">
<Command.Item <Command.Item
onSelect={createNewCycle} onSelect={createNewCycle}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<ContrastIcon className="h-4 w-4" color="#6b7280" /> <ContrastIcon className="h-4 w-4" color="#6b7280" />
@ -652,8 +636,7 @@ export const CommandPalette: React.FC = () => {
<Command.Group heading="Module"> <Command.Group heading="Module">
<Command.Item <Command.Item
onSelect={createNewModule} onSelect={createNewModule}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<PeopleGroupIcon className="h-4 w-4" color="#6b7280" /> <PeopleGroupIcon className="h-4 w-4" color="#6b7280" />
@ -664,11 +647,7 @@ export const CommandPalette: React.FC = () => {
</Command.Group> </Command.Group>
<Command.Group heading="View"> <Command.Group heading="View">
<Command.Item <Command.Item onSelect={createNewView} className="focus:outline-none">
onSelect={createNewView}
className="focus:bg-gray-200 focus:outline-none"
tabIndex={0}
>
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<ViewListIcon className="h-4 w-4" color="#6b7280" /> <ViewListIcon className="h-4 w-4" color="#6b7280" />
Create new view Create new view
@ -686,8 +665,7 @@ export const CommandPalette: React.FC = () => {
setSearchTerm(""); setSearchTerm("");
setPages([...pages, "settings"]); setPages([...pages, "settings"]);
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<SettingIcon className="h-4 w-4" color="#6b7280" /> <SettingIcon className="h-4 w-4" color="#6b7280" />
@ -698,8 +676,7 @@ export const CommandPalette: React.FC = () => {
<Command.Group heading="Account"> <Command.Group heading="Account">
<Command.Item <Command.Item
onSelect={createNewWorkspace} onSelect={createNewWorkspace}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<FolderPlusIcon className="h-4 w-4 text-gray-500" /> <FolderPlusIcon className="h-4 w-4 text-gray-500" />
@ -716,8 +693,7 @@ export const CommandPalette: React.FC = () => {
}); });
document.dispatchEvent(e); document.dispatchEvent(e);
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<RocketLaunchIcon className="h-4 w-4 text-gray-500" /> <RocketLaunchIcon className="h-4 w-4 text-gray-500" />
@ -729,8 +705,7 @@ export const CommandPalette: React.FC = () => {
setIsPaletteOpen(false); setIsPaletteOpen(false);
window.open("https://docs.plane.so/", "_blank"); window.open("https://docs.plane.so/", "_blank");
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<DocumentIcon className="h-4 w-4 text-gray-500" /> <DocumentIcon className="h-4 w-4 text-gray-500" />
@ -742,8 +717,7 @@ export const CommandPalette: React.FC = () => {
setIsPaletteOpen(false); setIsPaletteOpen(false);
window.open("https://discord.com/invite/A92xrEGCge", "_blank"); window.open("https://discord.com/invite/A92xrEGCge", "_blank");
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<DiscordIcon className="h-4 w-4" color="#6b7280" /> <DiscordIcon className="h-4 w-4" color="#6b7280" />
@ -758,8 +732,7 @@ export const CommandPalette: React.FC = () => {
"_blank" "_blank"
); );
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<GithubIcon className="h-4 w-4" color="#6b7280" /> <GithubIcon className="h-4 w-4" color="#6b7280" />
@ -771,8 +744,7 @@ export const CommandPalette: React.FC = () => {
setIsPaletteOpen(false); setIsPaletteOpen(false);
(window as any).$crisp.push(["do", "chat:open"]); (window as any).$crisp.push(["do", "chat:open"]);
}} }}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-gray-500" /> <ChatBubbleOvalLeftEllipsisIcon className="h-4 w-4 text-gray-500" />
@ -787,8 +759,7 @@ export const CommandPalette: React.FC = () => {
<> <>
<Command.Item <Command.Item
onSelect={() => goToSettings()} onSelect={() => goToSettings()}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<SettingIcon className="h-4 w-4 text-gray-500" /> <SettingIcon className="h-4 w-4 text-gray-500" />
@ -797,8 +768,7 @@ export const CommandPalette: React.FC = () => {
</Command.Item> </Command.Item>
<Command.Item <Command.Item
onSelect={() => goToSettings("members")} onSelect={() => goToSettings("members")}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<SettingIcon className="h-4 w-4 text-gray-500" /> <SettingIcon className="h-4 w-4 text-gray-500" />
@ -807,8 +777,7 @@ export const CommandPalette: React.FC = () => {
</Command.Item> </Command.Item>
<Command.Item <Command.Item
onSelect={() => goToSettings("billing")} onSelect={() => goToSettings("billing")}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<SettingIcon className="h-4 w-4 text-gray-500" /> <SettingIcon className="h-4 w-4 text-gray-500" />
@ -817,8 +786,7 @@ export const CommandPalette: React.FC = () => {
</Command.Item> </Command.Item>
<Command.Item <Command.Item
onSelect={() => goToSettings("integrations")} onSelect={() => goToSettings("integrations")}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<SettingIcon className="h-4 w-4 text-gray-500" /> <SettingIcon className="h-4 w-4 text-gray-500" />
@ -827,8 +795,7 @@ export const CommandPalette: React.FC = () => {
</Command.Item> </Command.Item>
<Command.Item <Command.Item
onSelect={() => goToSettings("import-export")} onSelect={() => goToSettings("import-export")}
className="focus:bg-gray-200 focus:outline-none" className="focus:outline-none"
tabIndex={0}
> >
<div className="flex items-center gap-2 text-gray-700"> <div className="flex items-center gap-2 text-gray-700">
<SettingIcon className="h-4 w-4 text-gray-500" /> <SettingIcon className="h-4 w-4 text-gray-500" />

7
apps/app/styles/command-pallette.css
View File

@ -31,5 +31,10 @@
} }
[cmdk-item]:hover { [cmdk-item]:hover {
background-color: rgb(243 244 246); background-color: rgb(229 231 235);
}
[aria-selected="true"] {
background-color: rgb(229 231 235);
} }