jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Refactor: Make visual shortcut adapt to user OS

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

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

39
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

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