github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-1311] fix: Issue link copy shortcut macOS (#4455)

Browse Source 
* chore: issue link copy shortcut in macos

* chore: dynamic shortcut key render in shortcut pop up

* chore: changing button depending on the os
This commit is contained in:
Ramesh Kumar Chandra 2024-05-15 15:55:44 +05:30 committed by GitHub
parent a2fbd6132b
commit 751a4a3b21
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 52 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/command-palette/command-palette.tsx
View File

@ -22,6 +22,7 @@ import { EUserWorkspaceRoles } from "@/constants/workspace";
import { copyTextToClipboard } from "@/helpers/string.helper";
// hooks
import { useEventTracker, useIssues, useUser, useAppTheme, useCommandPalette } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// services
import { IssueService } from "@/services/issue";
@ -35,6 +36,7 @@ export const CommandPalette: FC = observer(() => {
// store hooks
const { toggleSidebar } = useAppTheme();
const { setTrackElement } = useEventTracker();
const { platform } = usePlatformOS();
const {
membership: { currentWorkspaceRole, currentProjectRole },
data: currentUser,
@ -210,7 +212,7 @@ export const CommandPalette: FC = observer(() => {
return;
if (cmdClicked) {
if (keyPressed === "c" && altKey) {
if (keyPressed === "c" && ((platform === "MacOS" && ctrlKey) || altKey)) {
e.preventDefault();
copyIssueUrlToClipboard();
} else if (keyPressed === "b") {

17
web/components/command-palette/shortcuts-modal/commands-list.tsx
View File

@ -1,11 +1,17 @@
import { Command } from "lucide-react";
// helpers
import { substringMatch } from "@/helpers/string.helper";
// hooks
import { usePlatformOS } from "@/hooks/use-platform-os";
type Props = {
searchQuery: string;
};
export const ShortcutCommandsList: React.FC<Props> = (props) => {
const { searchQuery } = props;
const { platform } = usePlatformOS();
const KEYBOARD_SHORTCUTS = [
{
key: "navigation",
@ -25,16 +31,13 @@ const KEYBOARD_SHORTCUTS = [
{ keys: "Delete", description: "Bulk delete issues" },
{ keys: "H", description: "Open shortcuts guide" },
{
keys: "Ctrl,Alt,C",
keys: platform === "MacOS" ? "Ctrl,control,C" : "Ctrl,Alt,C",
description: "Copy issue URL from the issue details page",
},
],
},
];
export const ShortcutCommandsList: React.FC<Props> = (props) => {
const { searchQuery } = props;
const filteredShortcuts = KEYBOARD_SHORTCUTS.map((category) => {
const newCategory = { ...category };
@ -60,13 +63,13 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
{category.shortcuts.map((shortcut) => (
<div key={shortcut.keys} className="mt-1">
<div className="flex items-center justify-between">
<h4 className="text-xs text-custom-text-200">{shortcut.description}</h4>
<h4 className="text-xs text-custom-text-200 text-left">{shortcut.description}</h4>
<div className="flex items-center gap-x-1.5">
{shortcut.keys.split(",").map((key) => (
<div key={key} className="flex items-center gap-1">
{key === "Ctrl" ? (
<div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5">
<Command className="h-2.5 w-2.5 text-custom-text-200" />
<div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
{ platform === "MacOS" ? <Command className="h-2.5 w-2.5 text-custom-text-200" /> : 'Ctrl'}
</div>
) : (
<kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">

21
web/hooks/use-platform-os.tsx
View File

@ -2,11 +2,26 @@ import { useEffect, useState } from "react";
export const usePlatformOS = () => {
const [isMobile, setIsMobile] = useState(false);
const [platform, setPlatform] = useState("");
useEffect(() => {
const userAgent = window.navigator.userAgent;
const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
let detectedPlatform = "";
if (isMobile) setIsMobile(isMobile);
}, []);
return { isMobile };
if (isMobile) {
setIsMobile(isMobile)
} else {
if (userAgent.indexOf("Win") !== -1) {
detectedPlatform = "Windows";
} else if (userAgent.indexOf("Mac") !== -1) {
detectedPlatform = "MacOS";
} else if (userAgent.indexOf("Linux") !== -1) {
detectedPlatform = "Linux";
} else {
detectedPlatform = "Unknown";
}
};
setPlatform(detectedPlatform);
}, []);
return { isMobile, platform };
};