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

feat: add round buttons constants classes

Browse source
This commit is contained in:
Igor Carvalho 2023-07-04 20:04:01 -03:00
commit f545b9cf9b
3 changed files with 30 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/src/components/chatComponent/buildTrigger/index.tsx
View file

@ -156,9 +156,9 @@ export default function BuildTrigger({
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<div className={`fixed right-4` + (isBuilt ? " bottom-20" : " bottom-4")}>
<div className={'round-buttons-position' + (isBuilt ? " bottom-20" : " bottom-4")}>
<div
className={`${eventClick} align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md`}
className={`${eventClick} round-button-form`}
onClick={() => {
handleBuild(flow);
}}
@ -166,7 +166,7 @@ export default function BuildTrigger({
onMouseLeave={handleMouseLeave}
>
<button>
<div className="flex items-center gap-3">
<div className="round-button-div">
{isBuilding && progress < 1 ? (
// Render your loading animation here when isBuilding is true
<RadialProgressComponent
@ -175,9 +175,9 @@ export default function BuildTrigger({
value={progress}
></RadialProgressComponent>
) : isBuilding ? (
<Loading strokeWidth={1.5} className="stroke-build-trigger" />
<Loading strokeWidth={1.5} className="build-trigger-loading-icon" />
) : (
<Zap strokeWidth={1.5} className="sh-6 w-6 fill-build-trigger stroke-1 stroke-build-trigger" />
<Zap strokeWidth={1.5} className="build-trigger-icon" />
)}
</div>
</button>

9
src/frontend/src/components/chatComponent/chatTrigger/index.tsx
View file

@ -30,16 +30,15 @@ export default function ChatTrigger({ open, setOpen, isBuilt }) {
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<div className="absolute bottom-4 right-3">
<div className="message-button-position">
<div
className="align-center shadow-round-btn-shadow hover:shadow-round-btn-shadow flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3
py-1 shadow-md"
className="round-button-form"
onClick={handleClick}
>
<button>
<div className="flex gap-3">
<div className="round-button-div">
<MessagesSquare
className="pth-6 w-6 fill-chat-trigger stroke-chat-trigger stroke-1"
className="message-button-icon"
style={{ color: "white" }}
strokeWidth={1.5}
/>

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

@ -143,6 +143,9 @@ The cursor: default; property value restores the browser's default cursor style
@layer components {
.round-buttons-position {
@apply fixed right-4
}
.side-bar-arrangement {
@apply flex h-full w-52 flex-col overflow-hidden border-r scrollbar-hide
}
@ -206,5 +209,22 @@ The cursor: default; property value restores the browser's default cursor style
.input-dialog{
@apply text-ring cursor-pointer bg-transparent
}
.round-button-form {
@apply flex h-12 w-12 cursor-pointer justify-center rounded-full bg-border px-3 py-1 shadow-md
}
.round-button-div {
@apply flex items-center gap-3
}
.build-trigger-loading-icon {
@apply stroke-build-trigger
}
.build-trigger-icon {
@apply w-6 fill-build-trigger stroke-1 stroke-build-trigger
}
.message-button-position {
@apply absolute bottom-4 right-3
}
.message-button-icon {
@apply w-6 fill-chat-trigger stroke-chat-trigger stroke-1
}
}