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

Fix toolbar UI - Icons views (#1525)

Browse source 
♻️ (index.tsx): remove unused import of useEffect to improve code
cleanliness and readability
📝 (index.tsx): refactor toolbarSelectItem component to improve code
formatting and readability
This commit is contained in:
anovazzi1 2024-03-15 15:45:19 -03:00 • committed by GitHub
commit 97f1e82cb0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 28 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -495,7 +495,9 @@ export default function NodeToolbarComponent({
shift={true} shift={true}
value={"Share"} value={"Share"}
icon={"Share3"} icon={"Share3"}
styleObj={{iconClasses: "relative top-0.5 -m-1 mr-1 h-6 w-6"}} styleObj={{
iconClasses: "relative top-0.5 -m-1 mr-1 h-6 w-6",
}}
/> />
</SelectItem> </SelectItem>
)} )}
@ -515,12 +517,12 @@ export default function NodeToolbarComponent({
disabled={data.node?.documentation === ""} disabled={data.node?.documentation === ""}
> >
<ToolbarSelectItem <ToolbarSelectItem
keyboardKey="D" keyboardKey="D"
isMac={navigator.userAgent.toUpperCase().includes("MAC")} isMac={navigator.userAgent.toUpperCase().includes("MAC")}
shift={true} shift={true}
value={"Docs"} value={"Docs"}
icon={"FileText"} icon={"FileText"}
/> />
</SelectItem> </SelectItem>
{isMinimal && ( {isMinimal && (
<SelectItem value={"show"}> <SelectItem value={"show"}>
@ -533,7 +535,7 @@ export default function NodeToolbarComponent({
{navigator.userAgent.toUpperCase().includes("MAC") ? ( {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.25rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
></IconComponent> ></IconComponent>
) : ( ) : (
<span className="absolute right-[1.30rem] top-[0.40em] stroke-2"> <span className="absolute right-[1.30rem] top-[0.40em] stroke-2">

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

@ -1,4 +1,3 @@
import { useEffect } from "react";
import ForwardedIconComponent from "../../../../../components/genericIconComponent"; import ForwardedIconComponent from "../../../../../components/genericIconComponent";
import { toolbarSelectItemProps } from "../../../../../types/components"; import { toolbarSelectItemProps } from "../../../../../types/components";
@ -10,7 +9,6 @@ export default function ToolbarSelectItem({
icon, icon,
styleObj, styleObj,
}: toolbarSelectItemProps) { }: toolbarSelectItemProps) {
return ( return (
<div className="flex"> <div className="flex">
<ForwardedIconComponent <ForwardedIconComponent
@ -21,24 +19,28 @@ export default function ToolbarSelectItem({
{isMac ? ( {isMac ? (
<ForwardedIconComponent <ForwardedIconComponent
name="Command" name="Command"
className={`absolute right-[${shift ? "2rem" : "1.15rem"}] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`} className={`absolute
${shift ? " right-[2rem] " : "right-[1.15rem]"}
top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
></ForwardedIconComponent> ></ForwardedIconComponent>
) : ( ) : (
<span className={`absolute right-[${shift ? "2.10rem" : "1.15rem"}] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}> <span
{shift ? ( className={`absolute ${
"Ctrl" shift ? " right-[2.15rem] " : "right-[1.15rem]"
) : ( } top-[0.43em] stroke-2 `}
"Ctrl +" >
)} {shift ? "Ctrl" : "Ctrl +"}
</span> </span>
)} )}
{shift && ( {shift && (
<ForwardedIconComponent <ForwardedIconComponent
name="ArrowBigUp" name="ArrowBigUp"
className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`} className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
/> />
)} )}
<span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>{keyboardKey}</span> <span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>
{keyboardKey}
</span>
</div> </div>
); );
} }