Refactor: Make visual shortcut adapt to user OS

This commit is contained in:
igorrCarvalho 2024-03-04 16:43:26 -03:00
commit b48fe2cb5c
2 changed files with 67 additions and 26 deletions

View file

@ -109,10 +109,14 @@ export const MenuBar = ({
>
<IconComponent name="Undo" className="header-menu-options " />
Undo
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.4em]">Z</span>
</DropdownMenuItem>
<DropdownMenuItem
@ -123,10 +127,14 @@ export const MenuBar = ({
>
<IconComponent name="Redo" className="header-menu-options " />
Redo
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.4em]">Y</span>
</DropdownMenuItem>
</DropdownMenuContent>

View file

@ -420,10 +420,14 @@ export default function NodeToolbarComponent({
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
<span className="">Edit</span>{" "}
<IconComponent
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.46em]">E</span>
</div>
</SelectItem>
@ -437,10 +441,14 @@ export default function NodeToolbarComponent({
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
<span className="">Save</span>{" "}
<IconComponent
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.45em]">S</span>
</div>
</SelectItem>
@ -453,10 +461,14 @@ export default function NodeToolbarComponent({
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
<span className="">Save</span>{" "}
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.46em]">S</span>
</div>
</SelectItem>
@ -469,10 +481,14 @@ export default function NodeToolbarComponent({
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
<span className="">Copy</span>{" "}
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.5em]">C</span>
</div>
</SelectItem>
@ -487,10 +503,15 @@ export default function NodeToolbarComponent({
className="relative top-0.5 -m-1 mr-1 h-6 w-6"
/>{" "}
Share{" "}
<IconComponent
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">Ctrl</span>
)}
<IconComponent
name="ArrowBigUp"
className="absolute right-[1.09rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
@ -520,10 +541,14 @@ export default function NodeToolbarComponent({
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
<span className="">Docs</span>{" "}
<IconComponent
name="Command"
className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[2.10rem] top-[0.43em] stroke-2">Ctrl</span>
)}
<IconComponent
name="ArrowBigUp"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
@ -539,10 +564,14 @@ export default function NodeToolbarComponent({
className="relative top-0.5 mr-2 h-4 w-4"
/>
{showNode ? "Minimize" : "Expand"}
<IconComponent
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.25rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.30rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.46em]">Q</span>
</div>
</SelectItem>
@ -555,10 +584,14 @@ export default function NodeToolbarComponent({
className="relative top-0.5 mr-2 h-4 w-4 "
/>{" "}
<span className="">Ungroup</span>{" "}
<IconComponent
{navigator.userAgent.toUpperCase().includes("MAC") ? (
<IconComponent
name="Command"
className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent>
) : (
<span className="absolute right-[1.15rem] top-[0.40em] stroke-2">Ctrl + </span>
)}
<span className="absolute right-2 top-[0.43em]">U</span>
</div>
</SelectItem>