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

Fixed Share icon and disposition

Browse source
This commit is contained in:
Lucas Oliveira 2023-12-11 18:45:20 -03:00
commit 6ca00b35d1
10 changed files with 94 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/frontend/src/icons/Share/Share.jsx Normal file
View file

@ -0,0 +1,9 @@
const SvgShare = (props) => (
<svg width="1em" height="1em" {...props} xmlns="http://www.w3.org/2000/svg">
<path
d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z"
fill="currentColor"
></path>
</svg>
);
export default SvgShare;

8
src/frontend/src/icons/Share/index.tsx Normal file
View file

@ -0,0 +1,8 @@
import React, { forwardRef } from "react";
import SvgShare from "./Share";
export const ShareIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
(props, ref) => {
return <SvgShare ref={ref} {...props} />;
}
);

3
src/frontend/src/icons/Share/share.svg Normal file
View file

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z" fill="#000"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

17
src/frontend/src/icons/Share2/Share2.jsx Normal file
View file

@ -0,0 +1,17 @@
const SvgShare2 = (props) => (
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="1em"
height="1em"
viewBox="0 0 485.213 485.212"
fill="currentColor"
{...props}
>
<g>
<path d="M394.236,212.282L272.934,333.584V272.93c0,0-121.304-30.324-181.955,60.654c0-100.483,81.469-181.956,181.955-181.956 V90.978L394.236,212.282z M485.212,242.606c0,133.976-108.627,242.606-242.604,242.606c-133.994,0-242.606-108.631-242.606-242.606 C0.001,108.628,108.613,0,242.607,0C376.585,0,485.212,108.628,485.212,242.606z M454.89,242.606 c0-117.038-95.241-212.279-212.282-212.279c-117.055,0-212.28,95.241-212.28,212.279c0,117.039,95.225,212.28,212.28,212.28 C359.648,454.886,454.89,359.645,454.89,242.606z" />
</g>
</svg>
);
export default SvgShare2;

9
src/frontend/src/icons/Share2/index.tsx Normal file
View file

@ -0,0 +1,9 @@
import React, { forwardRef } from "react";
import SvgShare2 from "./Share2";
export const Share2Icon = forwardRef<
SVGSVGElement,
React.PropsWithChildren<{}>
>((props, ref) => {
return <SvgShare2 ref={ref} {...props} />;
});

3
src/frontend/src/icons/Share2/share2.svg Normal file
View file

@ -0,0 +1,3 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.995 19.5a7.232 7.232 0 0 0 2.898-.585 7.582 7.582 0 0 0 2.392-1.627 7.748 7.748 0 0 0 1.625-2.398c.393-.904.59-1.868.59-2.89a7.172 7.172 0 0 0-.59-2.89 7.708 7.708 0 0 0-4.026-4.024 7.231 7.231 0 0 0-2.898-.586 7.209 7.209 0 0 0-2.888.586c-.905.39-1.7.932-2.387 1.626A7.788 7.788 0 0 0 5.09 9.11 7.172 7.172 0 0 0 4.5 12c0 1.022.197 1.986.59 2.89a7.748 7.748 0 0 0 1.625 2.398 7.582 7.582 0 0 0 2.392 1.627c.904.39 1.867.585 2.888.585Zm-3.687-4.238a.423.423 0 0 1-.316-.149c-.093-.099-.14-.247-.14-.446 0-.966.14-1.812.419-2.537.279-.725.721-1.29 1.328-1.696.607-.406 1.406-.609 2.396-.609h.093V8.366c0-.142.051-.266.154-.372a.514.514 0 0 1 .385-.158c.105 0 .198.024.279.07.08.047.182.129.306.246l3.167 2.956c.068.068.118.14.149.214.03.074.046.148.046.223a.578.578 0 0 1-.046.223.668.668 0 0 1-.149.213l-3.167 2.984c-.21.198-.409.297-.594.297a.52.52 0 0 1-.53-.511v-1.487h-.093c-.736 0-1.354.115-1.853.344-.498.229-.93.675-1.295 1.338-.075.136-.16.223-.256.26a.78.78 0 0 1-.283.056Z" fill="#000"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
src/frontend/src/modals/shareModal/index.tsx
View file

@ -209,8 +209,8 @@ export default function ShareModal({
>
<span className="pr-2">Share</span>
<IconComponent
name="Forward"
className="h-6 w-6 pl-1 text-foreground"
name="Share3"
className="-m-0.5 h-6 w-6 text-foreground"
aria-hidden="true"
/>
</BaseModal.Header>

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

@ -193,17 +193,16 @@ export default function ExtraSidebar(): JSX.Element {
<button
disabled={!hasApiKey || !validApiKey || !hasStore}
className={classNames(
"extra-side-bar-buttons gap-1.5 text-sm font-semibold",
"extra-side-bar-buttons gap-[4px] text-sm font-semibold",
!hasApiKey || !validApiKey || !hasStore
? "button-disable cursor-default text-muted-foreground"
: ""
)}
>
<IconComponent
name="Forward"
strokeWidth={2.5}
name="Share3"
className={classNames(
"side-bar-button-size",
"-m-0.5 -ml-1 h-6 w-6",
!hasApiKey || !validApiKey || !hasStore
? "extra-side-bar-save-disable"
: ""

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

@ -75,6 +75,10 @@ export default function NodeToolbarComponent({
const [flowComponent, setFlowComponent] = useState<FlowType>();
const openInNewTab = (url) => {
window.open(url, "_blank", "noreferrer");
};
useEffect(() => {
setFlowComponent(createFlowComponent(cloneDeep(data), version));
}, [
@ -100,12 +104,12 @@ export default function NodeToolbarComponent({
case "Download":
downloadNode(createFlowComponent(cloneDeep(data), version));
break;
case "Share":
if (hasApiKey || hasStore) setShowconfirmShare(true);
break;
case "SaveAll":
saveComponent(cloneDeep(data), false);
break;
case "documentation":
if (data.node?.documentation) openInNewTab(data.node?.documentation);
break;
case "disabled":
break;
case "ungroup":
@ -162,33 +166,22 @@ export default function NodeToolbarComponent({
<IconComponent name="Copy" className="h-4 w-4" />
</button>
</ShadTooltip>
<ShadTooltip
content={
data.node?.documentation === "" ? "Coming Soon" : "Documentation"
}
side="top"
>
<a
className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(data.node?.documentation === ""
? " text-muted-foreground"
: " text-foreground")
)}
target="_blank"
rel="noopener noreferrer"
href={data.node?.documentation}
// deactivate link if no documentation is provided
onClick={(event) => {
if (data.node?.documentation === "") {
{hasStore && (
<ShadTooltip content="Share" side="top">
<button
className={classNames(
"relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
!hasApiKey || !validApiKey ? " text-muted-foreground" : ""
)}
onClick={(event) => {
event.preventDefault();
}
}}
>
<IconComponent name="FileText" className="h-4 w-4 " />
</a>
</ShadTooltip>
if (hasApiKey || hasStore) setShowconfirmShare(true);
}}
>
<IconComponent name="Share4" className="h-4 w-4" />
</button>
</ShadTooltip>
)}
<Select onValueChange={handleSelectChange} value={selectedValue}>
<ShadTooltip content="More" side="top">
@ -242,21 +235,6 @@ export default function NodeToolbarComponent({
</div>{" "}
</SelectItem>
)}
{hasStore && (
<SelectItem
disabled={!hasApiKey || !validApiKey}
value={"Share"}
>
<div className="flex">
<IconComponent
name="Forward"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Share{" "}
</div>{" "}
</SelectItem>
)}
{!hasStore && (
<SelectItem value={"Download"}>
<div className="flex">
@ -268,6 +246,20 @@ export default function NodeToolbarComponent({
</div>{" "}
</SelectItem>
)}
<SelectItem
value={"documentation"}
disabled={data.node?.documentation === ""}
>
<div className="flex">
<IconComponent
name="FileText"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
{data.node?.documentation === ""
? "Coming Soon"
: "Documentation"}
</div>{" "}
</SelectItem>
{isMinimal && (
<SelectItem value={"show"}>
<div className="flex">

4
src/frontend/src/utils/styleUtils.ts
View file

@ -130,6 +130,8 @@ import { OpenAiIcon } from "../icons/OpenAi";
import { PineconeIcon } from "../icons/Pinecone";
import { QDrantIcon } from "../icons/QDrant";
import { SearxIcon } from "../icons/Searx";
import { ShareIcon } from "../icons/Share";
import { Share2Icon } from "../icons/Share2";
import SvgSlackIcon from "../icons/Slack/SlackIcon";
import { VertexAIIcon } from "../icons/VertexAI";
import SvgWikipedia from "../icons/Wikipedia/Wikipedia";
@ -258,6 +260,8 @@ export const nodeIconsLucide: iconsType = {
VertexAI: VertexAIIcon,
ChatVertexAI: VertexAIIcon,
VertexAIEmbeddings: VertexAIIcon,
Share3: ShareIcon,
Share4: Share2Icon,
agents: Rocket,
Workflow,
User,