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

Changing edge colors dark mode

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-05-29 23:45:02 -03:00
commit 9f27a3e1cc
6 changed files with 21 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -174,7 +174,7 @@ export default function GenericNode({
validationStatus && validationStatus.valid validationStatus && validationStatus.valid
? "w-4 h-4 rounded-full bg-green-500 opacity-100" ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin", : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200" "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
)} )}
></div> ></div>
<div <div
@ -182,7 +182,7 @@ export default function GenericNode({
validationStatus && !validationStatus.valid validationStatus && !validationStatus.valid
? "w-4 h-4 rounded-full bg-yellow-500 opacity-100" ? "w-4 h-4 rounded-full bg-yellow-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin", : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200" "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
)} )}
></div> ></div>
<div <div
@ -190,13 +190,12 @@ export default function GenericNode({
!validationStatus !validationStatus
? "w-4 h-4 rounded-full bg-red-500 opacity-100" ? "w-4 h-4 rounded-full bg-red-500 opacity-100"
: "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin", : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden animate-spin",
"absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200" "absolute w-4 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
)} )}
></div> ></div>
</div> </div>
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
</div> </div>

6
src/frontend/src/components/floatComponent/index.tsx
View file

@ -15,7 +15,11 @@ export default function FloatComponent({
} }
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div className={"w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")}> <div
className={
"w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")
}
>
<input <input
type="number" type="number"
value={myValue} value={myValue}

7
src/frontend/src/components/intComponent/index.tsx
View file

@ -16,9 +16,10 @@ export default function IntComponent({
}, [disabled, onChange]); }, [disabled, onChange]);
return ( return (
<div <div
className={"w-full " + ( className={
disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full" "w-full " +
)} (disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full")
}
> >
<input <input
onKeyDown={(event) => { onKeyDown={(event) => {

4
src/frontend/src/contexts/tabsContext.tsx
View file

@ -89,7 +89,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
cookieObject.flows.forEach((flow) => { cookieObject.flows.forEach((flow) => {
flow.data.edges.forEach((edge) => { flow.data.edges.forEach((edge) => {
edge.className = ""; edge.className = "";
edge.style = { stroke: "#222222" }; edge.style = { stroke: "#555555" };
}); });
flow.data.nodes.forEach((node) => { flow.data.nodes.forEach((node) => {
if (Object.keys(templates[node.data.type]["template"]).length > 0) { if (Object.keys(templates[node.data.type]["template"]).length > 0) {
@ -295,7 +295,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
if (data) { if (data) {
data.edges.forEach((edge) => { data.edges.forEach((edge) => {
edge.className = ""; edge.className = "";
edge.style = { stroke: "#222222" }; edge.style = { stroke: "#555555" };
}); });
data.nodes.forEach((node) => { data.nodes.forEach((node) => {
if (Object.keys(templates[node.data.type]["template"]).length > 0) { if (Object.keys(templates[node.data.type]["template"]).length > 0) {

8
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -15,7 +15,9 @@ export default function ExtraSidebar() {
) { ) {
//start drag event //start drag event
var crt = event.currentTarget.cloneNode(true); var crt = event.currentTarget.cloneNode(true);
crt.style.position = "absolute"; crt.style.top = "-500px"; crt.style.right = "-500px"; crt.style.position = "absolute";
crt.style.top = "-500px";
crt.style.right = "-500px";
crt.classList.add("cursor-grabbing"); crt.classList.add("cursor-grabbing");
document.body.appendChild(crt); document.body.appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0); event.dataTransfer.setDragImage(crt, 0, 0);
@ -60,7 +62,9 @@ export default function ExtraSidebar() {
} }
onDragEnd={() => { onDragEnd={() => {
document.body.removeChild( document.body.removeChild(
document.getElementsByClassName("cursor-grabbing")[0] document.getElementsByClassName(
"cursor-grabbing"
)[0]
); );
}} }}
> >

2
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -154,7 +154,7 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
style: style:
params.targetHandle.split("|")[0] === "Text" params.targetHandle.split("|")[0] === "Text"
? { stroke: "#333333", strokeWidth: 2 } ? { stroke: "#333333", strokeWidth: 2 }
: { stroke: "#222222" }, : { stroke: "#555555" },
animated: params.targetHandle.split("|")[0] === "Text", animated: params.targetHandle.split("|")[0] === "Text",
}, },
eds eds