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

feat: Add CodeArea and Dropdown component tailwind constant classes

Browse source
This commit is contained in:
Igor Carvalho 2023-07-05 19:08:33 -03:00
commit dccb9c27db
5 changed files with 78 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/frontend/src/components/EditFlowSettingsComponent/index.tsx
View file

@ -44,10 +44,10 @@ export const EditFlowSettings: React.FC<InputProps> = ({
return (
<>
<Label>
<div className="flex justify-between">
<div className="edit-flow-arrangement">
<span className="font-medium">Name</span>{" "}
{isMaxLength && (
<span className="ml-10 animate-pulse text-status-red">
<span className="edit-flow-span">
Character limit reached
</span>
)}

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

@ -30,10 +30,10 @@ export default function CodeAreaComponent({
return (
<div
className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
disabled ? "code-area-component" : "w-full"
}
>
<div className="flex w-full items-center">
<div className="code-area-input-positioning">
<span
onClick={() => {
openPopUp(
@ -68,7 +68,7 @@ export default function CodeAreaComponent({
}}
>
{!editNode && (
<ExternalLink strokeWidth={1.5} className="w-6 h-6 hover:text-accent-foreground ml-3" />
<ExternalLink strokeWidth={1.5} className="code-area-external-link" />
)}
</button>
</div>

24
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -39,20 +39,20 @@ export default function Dropdown({
<Listbox.Button
className={
editNode
? "border-1 relative pr-8 input-edit-node"
: "py-2 pl-3 pr-10 text-left input-primary"
? "dropdown-component-outline"
: "dropdown-component-false-outline"
}
>
<span className="block w-full truncate bg-background">
<span className="dropdown-component-display">
{internalValue}
</span>
<span
className={
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
"dropdown-component-arrow"
}
>
<ChevronsUpDown
className="h-5 w-5 text-muted-foreground"
className="dropdown-component-arrow-color"
aria-hidden="true"
/>
</span>
@ -68,8 +68,8 @@ export default function Dropdown({
<Listbox.Options
className={classNames(
editNode
? "z-10 mt-1 max-h-60 w-[215px] overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
: "nowheel overflow-y z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm ",
? "dropdown-component-true-options "
: "dropdown-component-false-options ",
apiModal ? "mb-2 w-[250px]" : "absolute"
)}
>
@ -80,8 +80,8 @@ export default function Dropdown({
classNames(
active ? " bg-accent" : "",
editNode
? "relative cursor-default select-none py-0.5 pl-3 pr-12"
: "relative cursor-default select-none py-2 pl-3 pr-9"
? "dropdown-component-false-option"
: "dropdown-component-true-option"
)
}
value={option}
@ -101,14 +101,14 @@ export default function Dropdown({
<span
className={classNames(
active ? "text-background " : "",
"absolute inset-y-0 right-0 flex items-center pr-4"
"dropdown-component-choosal"
)}
>
<Check
className={
active
? "h-5 w-5 text-black"
: "h-5 w-5 text-black"
? "dropdown-component-check-icon"
: "dropdown-component-check-icon"
}
aria-hidden="true"
/>

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

@ -32,7 +32,7 @@ export default function FloatComponent({
return (
<div
className={
"w-full " + (disabled ? "pointer-events-none cursor-not-allowed" : "")
"w-full " + (disabled ? "float-component-pointer" : "")
}
>
<input

60
src/frontend/src/index.css
View file

@ -461,4 +461,64 @@ The cursor: default; property value restores the browser's default cursor style
.unused-side-bar-disclosure-panel {
@apply flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium
}
.code-area-component {
@apply pointer-events-none w-full cursor-not-allowed
}
.code-area-input-positioning {
@apply flex-max-width items-center
}
.code-area-external-link {
@apply w-6 h-6 ml-3
}
.code-area-external-link:hover {
@apply hover:text-accent-foreground
}
.dropdown-component-outline {
@apply relative pr-8 input-edit-node
}
.dropdown-component-false-outline {
@apply py-2 pl-3 pr-10 text-left input-primary
}
.dropdown-component-display {
@apply block w-full truncate bg-background
}
.dropdown-component-arrow {
@apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2
}
.dropdown-component-arrow-color {
@apply h-5 w-5 extra-side-bar-save-disable
}
.dropdown-component-options {
@apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
}
.dropdown-component-true-options {
@apply dropdown-component-options w-[215px]
}
.dropdown-component-false-options {
@apply dropdown-component-options w-full
}
.dropdown-component-option {
@apply relative cursor-default select-none
}
.dropdown-component-false-option {
@apply dropdown-component-option py-0.5 pl-3 pr-12
}
.dropdown-component-true-option {
@apply dropdown-component-option py-2 pl-3 pr-9
}
.dropdown-component-choosal {
@apply absolute inset-y-0 right-0 flex items-center pr-4
}
.dropdown-component-check-icon {
@apply h-5 w-5 text-black
}
.edit-flow-arrangement {
@apply flex justify-between
}
.edit-flow-span {
@apply ml-10 animate-pulse text-status-red
}
}