From f72e009406bd09f79596f39921d3c2e1943ba173 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Fri, 6 Sep 2024 15:30:48 -0300 Subject: [PATCH] feat: Add x-large size option to baseModal and various modals resizes (#3710) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Add x-large size option to baseModal The code changes introduce a new size option "x-large" to the baseModal component. This size option sets the minimum width to "min-w-[95vw]" and the height to "h-[95vh]". This change allows for a larger modal size when needed. * feat: Add x-large size option to baseModal * chore: Update CodeAreaModal to use x-large size option * feat: Update EditNodeModal to use x-large size option * feat: Update FlowLogsModal to use x-large size option * chore: Update modal components to use x-large size option * 🔧 (applies.css): Rearrange CSS classes properties for better readability and maintainability. Fix the order of properties in CSS classes to follow a consistent pattern. --- src/frontend/src/modals/IOModal/index.tsx | 2 +- src/frontend/src/modals/apiModal/index.tsx | 2 +- .../src/modals/baseModal/helpers/switch-case-size.ts | 6 ++++++ src/frontend/src/modals/baseModal/index.tsx | 3 ++- src/frontend/src/modals/codeAreaModal/index.tsx | 1 + src/frontend/src/modals/editNodeModal/index.tsx | 2 +- src/frontend/src/modals/flowLogsModal/index.tsx | 2 +- src/frontend/src/modals/promptModal/index.tsx | 1 + src/frontend/src/modals/textAreaModal/index.tsx | 1 + src/frontend/src/style/applies.css | 8 ++++---- 10 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx index 3c42231ca..443eefbe2 100644 --- a/src/frontend/src/modals/IOModal/index.tsx +++ b/src/frontend/src/modals/IOModal/index.tsx @@ -185,12 +185,12 @@ export default function IOModal({ return ( sendMessage({ repeat: 1 })} + size="x-large" > {children} {/* TODO ADAPT TO ALL TYPES OF INPUTS AND OUTPUTS */} diff --git a/src/frontend/src/modals/apiModal/index.tsx b/src/frontend/src/modals/apiModal/index.tsx index 1cc050994..44c71bc5f 100644 --- a/src/frontend/src/modals/apiModal/index.tsx +++ b/src/frontend/src/modals/apiModal/index.tsx @@ -43,7 +43,7 @@ export default function ApiModal({ }, [open]); return ( - + {children} API diff --git a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts index e2505a495..7363f16c7 100644 --- a/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts +++ b/src/frontend/src/modals/baseModal/helpers/switch-case-size.ts @@ -61,6 +61,12 @@ export const switchCaseModalSize = (size: string) => { minWidth = "min-w-[80vw]"; height = ""; break; + + case "x-large": + minWidth = "min-w-[95vw]"; + height = "h-[95vh]"; + break; + default: minWidth = "min-w-[80vw]"; height = "h-[90vh]"; diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx index 6502b090b..de80081d9 100644 --- a/src/frontend/src/modals/baseModal/index.tsx +++ b/src/frontend/src/modals/baseModal/index.tsx @@ -155,7 +155,8 @@ interface BaseModalProps { | "md-thin" | "sm-thin" | "smaller-h-full" - | "medium-log"; + | "medium-log" + | "x-large"; disable?: boolean; onChangeOpenModal?: (open?: boolean) => void; diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 64d10ec51..8fec32aa4 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -185,6 +185,7 @@ export default function CodeAreaModal({ }} open={open} setOpen={setOpen} + size="x-large" > {children} diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 4a6ab0675..17dcaaf0b 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -31,7 +31,7 @@ const EditNodeModal = ({ }, [data.node]); return ( - + <> diff --git a/src/frontend/src/modals/flowLogsModal/index.tsx b/src/frontend/src/modals/flowLogsModal/index.tsx index 9094d5ea8..31debbf71 100644 --- a/src/frontend/src/modals/flowLogsModal/index.tsx +++ b/src/frontend/src/modals/flowLogsModal/index.tsx @@ -31,7 +31,7 @@ export default function FlowLogsModal({ }, [data, open, isLoading]); return ( - +
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx index 157bd1597..e364e082a 100644 --- a/src/frontend/src/modals/promptModal/index.tsx +++ b/src/frontend/src/modals/promptModal/index.tsx @@ -177,6 +177,7 @@ export default function PromptModal({ onChangeOpenModal={(open) => {}} open={modalOpen} setOpen={setModalOpen} + size="x-large" > {children} diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx index b825801ec..fade00b87 100644 --- a/src/frontend/src/modals/textAreaModal/index.tsx +++ b/src/frontend/src/modals/textAreaModal/index.tsx @@ -33,6 +33,7 @@ export default function ComponentTextModal({ onChangeOpenModal={(open) => {}} open={modalOpen} setOpen={setModalOpen} + size="x-large" > {children} diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css index 0b8913375..06402fb4a 100644 --- a/src/frontend/src/style/applies.css +++ b/src/frontend/src/style/applies.css @@ -339,7 +339,7 @@ @apply h-8 w-8 rounded; } .generic-node-tooltip-div { - @apply ml-2 w-full truncate flex; + @apply ml-2 flex w-full truncate; } .generic-node-validation-div { @apply max-h-96 overflow-auto; @@ -394,7 +394,7 @@ @apply hover:text-accent-foreground hover:transition-all; } .generic-node-desc { - @apply pb-4 h-full w-full px-5 text-foreground; + @apply h-full w-full px-5 pb-4 text-foreground; } .generic-node-desc-text { @apply w-full text-sm text-muted-foreground; @@ -1081,7 +1081,7 @@ @apply text-base text-muted-foreground; } .langflow-chat-input-div { - @apply flex-max-width flex-col items-center justify-between px-8 pb-6; + @apply flex-max-width flex-col items-center justify-between px-8 pb-3; } .langflow-chat-input { @apply relative w-full rounded-md shadow-sm; @@ -1183,6 +1183,6 @@ @apply relative bottom-3 left-1 ml-2 rounded-full bg-beta-background px-2 py-1 text-center text-xs font-semibold text-beta-foreground; } .color-option-container { - @apply w-fit + @apply w-fit; } }