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

adding background muted and subtitle texts changes

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-13 21:03:25 -03:00
commit 9ccd7e4fb3
15 changed files with 66 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -45,7 +45,7 @@ export default function CodeAreaComponent({
(disabled ? " bg-gray-200" : "")
}
>
{myValue !== "" ? myValue : "Text empty"}
{myValue !== "" ? myValue : "Type something..."}
</span>
<button
onClick={() => {

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

@ -12,6 +12,10 @@ export default function FloatComponent({
const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext);
const step = 0.1;
const min = 0;
const max = 1;
useEffect(() => {
if (disabled) {
setMyValue("");
@ -32,11 +36,22 @@ export default function FloatComponent({
if (disableCopyPaste) setDisableCopyPaste(false);
}}
type="number"
step={step}
min={min}
onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value < min.toString()) {
e.target.value = min.toString();
}
if (e.target.value > max.toString()) {
e.target.value = max.toString();
}
}}
max={max}
value={myValue}
className={
editNode
? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
}
placeholder={

16
src/frontend/src/components/inputComponent/index.tsx
View file

@ -45,11 +45,11 @@ export default function InputComponent({
if (disableCopyPaste) setDisableCopyPaste(false);
}}
className={classNames(
"block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm",
"block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
disabled ? " bg-gray-200 dark:bg-gray-700" : "",
password && !pwdVisible && myValue !== "" ? "password" : "",
editNode
? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
? "border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
: "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
password && editNode ? "pr-8" : "pr-3"
)}
@ -78,7 +78,11 @@ export default function InputComponent({
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
className={classNames(
editNode
? "w-5 h-5 absolute bottom-0.5 right-2"
: "w-5 h-5 absolute bottom-2 right-3"
)}
>
<path
strokeLinecap="round"
@ -93,7 +97,11 @@ export default function InputComponent({
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
className={classNames(
editNode
? "w-5 h-5 absolute bottom-0.5 right-2"
: "w-5 h-5 absolute bottom-2 right-3"
)}
>
<path
strokeLinecap="round"

3
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -34,7 +34,8 @@ export default function InputListComponent({
editNode
? "h-7 truncate cursor-pointer text-center placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
(disabled ? " bg-gray-200" : "") +
"focus:placeholder-transparent"
}
placeholder="Type something..."
onChange={(e) => {

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

@ -12,6 +12,7 @@ export default function IntComponent({
}: FloatComponentType) {
const [myValue, setMyValue] = useState(value ?? "");
const { setDisableCopyPaste } = useContext(TabsContext);
const min = 0;
useEffect(() => {
if (disabled) {
@ -53,11 +54,18 @@ export default function IntComponent({
}
}}
type="number"
step="1"
min={min}
onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value < min.toString()) {
e.target.value = min.toString();
}
}}
value={myValue}
className={
editNode
? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
}
placeholder={editNode ? "Integer number" : "Type a integer number"}

2
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -50,7 +50,7 @@ export default function TextAreaComponent({
(disabled ? " bg-gray-200" : "")
}
>
{myValue !== "" ? myValue : "Text empty"}
{myValue !== "" ? myValue : "Type something..."}
</span>
<button
onClick={() => {

17
src/frontend/src/constants.tsx
View file

@ -4,42 +4,45 @@
* The base text for subtitle of Export Dialog (Toolbar)
* @constant
*/
export const EXPORT_DIALOG_SUBTITLE = "Export your models.";
export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
/**
* The base text for subtitle of Code Dialog (Toolbar)
* @constant
*/
export const CODE_DIALOG_SUBTITLE =
"Export your flow to use it with this code.";
"Generate the code to integrate your flow into an external application.";
/**
* The base text for subtitle of Edit Node Dialog
* @constant
*/
export const EDIT_DIALOG_SUBTITLE =
"Make configurations changes to your nodes. Click save when you're done.";
"Adjust the configurations of your component. Define parameter visibility for the canvas view. Remember to save once you’re finished.";
/**
* The base text for subtitle of Code Dialog
* @constant
*/
export const CODE_PROMPT_DIALOG_SUBTITLE = "Edit you python code.";
export const CODE_PROMPT_DIALOG_SUBTITLE =
"Edit your Python code. This code snippet accepts module import and a single function definition. Make sure that your function returns a string.";
/**
* The base text for subtitle of Prompt Dialog
* @constant
*/
export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
export const PROMPT_DIALOG_SUBTITLE =
"Create your prompt. Prompts can help guide the behavior of a Language Model.";
/**
* The base text for subtitle of Text Dialog
* @constant
*/
export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
/**
* The base text for subtitle of Import Dialog
* @constant
*/
export const IMPORT_DIALOG_SUBTITLE = "Import your models or pick one example.";
export const IMPORT_DIALOG_SUBTITLE =
"Upload a JSON file or select from the available community examples.";

2
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -90,7 +90,7 @@ flow("Hey, have you heard of LangFlow?")`;
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px]">
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px] bg-muted">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>

6
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -92,7 +92,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px]">
<DialogContent className="lg:max-w-[700px] bg-muted ">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Node</span>
@ -114,7 +114,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogDescription>
</DialogHeader>
<div className="flex w-full h-fit max-h-[415px]">
<div className="flex w-full max-h-[350px] h-fit">
<div
className={classNames(
"w-full rounded-lg bg-white dark:bg-gray-800 shadow",
@ -151,7 +151,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
)
.map((n, i) => (
<TableRow key={i} className="h-8">
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300 text-sm">
{data.node.template[n].name
? data.node.template[n].name
: data.node.template[n].display_name}

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -47,7 +47,7 @@ export default function CodeAreaModal({
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px] h-[500px]">
<DialogContent className="lg:max-w-[700px] h-[500px] bg-muted">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span>

2
src/frontend/src/modals/exportModal/index.tsx
View file

@ -44,7 +44,7 @@ export default function ExportModal() {
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[600px] h-[420px]">
<DialogContent className="lg:max-w-[600px] h-[420px] bg-muted">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>

2
src/frontend/src/modals/genericModal/index.tsx
View file

@ -50,7 +50,7 @@ export default function GenericModal({
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px]">
<DialogContent className="lg:max-w-[700px] bg-muted">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>

8
src/frontend/src/modals/importModal/index.tsx
View file

@ -68,8 +68,8 @@ export default function ImportModal() {
<DialogContent
className={classNames(
showExamples
? "lg:max-w-[650px] h-[600px]"
: "lg:max-w-[650px] h-[450px]"
? "lg:max-w-[650px] h-[600px] bg-muted"
: "lg:max-w-[650px] h-[450px] bg-muted"
)}
>
<DialogHeader>
@ -86,7 +86,7 @@ export default function ImportModal() {
>
<span className="sr-only">Close</span>
<ArrowLeftIcon
className="h-6 w-6 text-gray-800 ml-1"
className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
aria-hidden="true"
/>
</button>
@ -176,7 +176,7 @@ export default function ImportModal() {
</div>
<DialogFooter>
<div className="bg-white dark:bg-gray-800 w-full flex items-center justify-center">
<div className="bg-muted w-full flex items-center justify-center mt-2">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"

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

@ -50,7 +50,7 @@ export default function ExtraSidebar() {
return (
<>
<div className="relative mt-2 flex items-center mb-2 mx-2">
<div className="relative mt-2 flex items-center mb-2 mx-auto">
<input
type="text"
name="search"

2
src/frontend/src/utils.ts
View file

@ -59,7 +59,7 @@ export function classNames(...classes: Array<string>) {
return classes.filter(Boolean).join(" ");
}
export const limitScrollFieldsModal = 7;
export const limitScrollFieldsModal = 10;
export enum TypeModal {
TEXT = 1,