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

🎨 style(nodeToolbarComponent): update button colors and icons for better visibility and consistency

Browse source 
🐛 fix(nodeToolbarComponent): fix documentation link not working when no documentation is provided
The button colors and icons have been updated to improve visibility and consistency. The delete and copy buttons now have a darker background color when hovered over. The edit button now has a rounded right corner and a lighter background color when there are no nodes present. The documentation button now shows a "Coming Soon" tooltip when no documentation is provided and has a muted color. The documentation link now works correctly even when no documentation is provided.
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-06-27 15:39:31 -03:00
commit 2ec01afd8b
1 changed files with 56 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Settings2, Copy, Trash2 } from "lucide-react"; import { Settings2, Copy, Trash2, FileText } from "lucide-react";
import { classNames } from "../../../../utils"; import { classNames } from "../../../../utils";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { useReactFlow } from "reactflow"; import { useReactFlow } from "reactflow";
@ -29,23 +29,21 @@ const NodeToolbarComponent = (props) => {
<> <>
<div className="h-10 w-26"> <div className="h-10 w-26">
<span className="isolate inline-flex rounded-md shadow-sm"> <span className="isolate inline-flex rounded-md shadow-sm">
<ShadTooltip delayDuration={1000} content="Delete" side="top"> <ShadTooltip content="Delete" side="top">
<button <button
className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" className="hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
onClick={() => { onClick={() => {
props.deleteNode(props.data.id); props.deleteNode(props.data.id);
}} }}
> >
<Trash2 className="w-4 h-4 dark:text-gray-300"></Trash2> <Trash2 className="w-4 h-4 dark:text-muted-foreground"></Trash2>
</button> </button>
</ShadTooltip> </ShadTooltip>
<ShadTooltip delayDuration={1000} content="Duplicate" side="top"> <ShadTooltip content="Duplicate" side="top">
<button <button
className={classNames( className={classNames(
nodeLength > 0 "hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
: "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
)} )}
onClick={(event) => { onClick={(event) => {
event.preventDefault(); event.preventDefault();
@ -64,31 +62,64 @@ const NodeToolbarComponent = (props) => {
); );
}} }}
> >
<Copy className="w-4 h-4 dark:text-gray-300"></Copy> <Copy className="w-4 h-4 dark:text-muted-foreground"></Copy>
</button> </button>
</ShadTooltip> </ShadTooltip>
{nodeLength > 0 && ( <ShadTooltip
<ShadTooltip delayDuration={1000} content="Edit" side="top"> content={
<button props.data.node.documentation === ""
className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md" ? "Coming Soon"
: "Documentation"
}
side="top"
>
<a
className={classNames(
"hover:dark:hover:bg-[#242f47] transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10" +
(props.data.node.documentation === ""
? " text-muted-foreground"
: " text-foreground")
)}
href={props.data.node.documentation}
// deactivate link if no documentation is provided
onClick={(event) => { onClick={(event) => {
if (props.data.node.documentation === "") {
event.preventDefault();
}
}}
>
<FileText className="w-4 h-4 dark:text-muted-foreground"></FileText>
</a>
</ShadTooltip>
<ShadTooltip content="Edit" side="top">
<button
className={classNames(
"hover:dark:hover:bg-[#242f47] transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md" +
(nodeLength == 0
? " text-muted-foreground"
: " text-foreground")
)}
onClick={(event) => {
if (nodeLength == 0) {
event.preventDefault();
}
event.preventDefault(); event.preventDefault();
props.openPopUp(<EditNodeModal data={props.data} />); props.openPopUp(<EditNodeModal data={props.data} />);
}} }}
> >
<Settings2 className="w-4 h-4 dark:text-gray-300"></Settings2> <Settings2 className="w-4 h-4 dark:text-muted-foreground"></Settings2>
</button> </button>
</ShadTooltip> </ShadTooltip>
)}
{/* {/*
<Menu as="div" className="relative inline-block text-left z-100"> <Menu as="div" className="relative inline-block text-left z-100">
<button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"> <button className="hover:dark:hover:bg-[#242f47] text-foreground transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-muted-foreground shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
<div> <div>
<Menu.Button className="flex items-center"> <Menu.Button className="flex items-center">
<EllipsisVerticalIcon <EllipsisVerticalIcon
className="w-5 h-5 dark:text-gray-300" className="w-5 h-5 dark:text-muted-foreground"
aria-hidden="true" aria-hidden="true"
/> />
</Menu.Button> </Menu.Button>
@ -117,7 +148,7 @@ const NodeToolbarComponent = (props) => {
className={classNames( className={classNames(
active active
? "bg-muted text-gray-900" ? "bg-muted text-gray-900"
: "text-gray-700", : "text-foreground",
"w-full group flex items-center px-4 py-2 text-sm" "w-full group flex items-center px-4 py-2 text-sm"
)} )}
> >
@ -157,7 +188,7 @@ const NodeToolbarComponent = (props) => {
className={classNames( className={classNames(
active active
? "bg-muted text-gray-900" ? "bg-muted text-gray-900"
: "text-gray-700", : "text-foreground",
"w-full group flex items-center px-4 py-2 text-sm" "w-full group flex items-center px-4 py-2 text-sm"
)} )}
> >