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

feat: add header and input component tailwind constant classes

Browse source
This commit is contained in:
Igor Carvalho 2023-07-05 19:54:10 -03:00
commit 9d6d2fd88a
5 changed files with 100 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -47,19 +47,19 @@ export const MenuBar = ({ flows, tabId }) => {
let current_flow = flows.find((flow) => flow.id === tabId);
return (
<div className="flex items-center gap-2">
<div className="round-button-div">
<Link to="/">
<ChevronLeft className="w-4" />
</Link>
<div className="flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium">
<div className="header-menu-bar">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
className="flex max-w-[200px] items-center gap-2"
className="header-menu-bar-display"
variant="primary"
size="sm"
>
<div className="flex-1 truncate">{current_flow.name}</div>
<div className="header-menu-flow-name">{current_flow.name}</div>
<ChevronDown className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
@ -71,7 +71,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Plus className="mr-2 h-4 w-4" />
<Plus className="header-menu-options" />
New
</DropdownMenuItem>
<DropdownMenuItem
@ -80,7 +80,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Settings2 className="mr-2 h-4 w-4 " />
<Settings2 className="header-menu-options " />
Settings
</DropdownMenuItem>
<DropdownMenuItem
@ -89,7 +89,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Undo className="mr-2 h-4 w-4 " />
<Undo className="header-menu-options " />
Undo
</DropdownMenuItem>
<DropdownMenuItem
@ -98,7 +98,7 @@ export const MenuBar = ({ flows, tabId }) => {
}}
className="cursor-pointer"
>
<Redo className="mr-2 h-4 w-4 " />
<Redo className="header-menu-options " />
Redo
</DropdownMenuItem>
<DropdownMenuSeparator />

32
src/frontend/src/components/headerComponent/index.tsx
View file

@ -36,8 +36,8 @@ export default function Header() {
fetchStars();
}, []);
return (
<div className="flex h-12 w-full items-center justify-between border-b bg-muted">
<div className="flex w-96 items-center justify-start gap-2">
<div className="header-arrangement">
<div className="header-start-display">
<Link to="/">
<span className="ml-4 text-2xl">⛓️</span>
</Link>
@ -45,7 +45,7 @@ export default function Header() {
<MenuBar flows={flows} tabId={tabId} />
)}
</div>
<div className="flex items-center gap-2">
<div className="round-button-div">
<Link to="/">
<Button
className="gap-2"
@ -69,17 +69,17 @@ export default function Header() {
</Button>
</Link>
</div>
<div className="flex w-96 justify-end px-2">
<div className="ml-auto mr-2 flex items-center gap-5">
<div className="header-end-division">
<div className="header-end-display">
<a
href="https://github.com/logspace-ai/langflow"
target="_blank"
rel="noreferrer"
className="inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md"
className="header-github-link"
>
<FaGithub className="mr-2 h-5 w-5" />
Star
<div className="-mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm">
<div className="header-github-display">
{stars}
</div>
</a>
@ -89,7 +89,7 @@ export default function Header() {
rel="noreferrer"
className="text-muted-foreground"
>
<FaTwitter className="h-5 w-5 hover:text-accent-foreground" />
<FaTwitter className="side-bar-button-size" />
</a>
<a
href="https://discord.gg/EqksyE2EX9"
@ -97,24 +97,24 @@ export default function Header() {
rel="noreferrer"
className="text-muted-foreground"
>
<FaDiscord className="h-5 w-5 hover:text-accent-foreground" />
<FaDiscord className="side-bar-button-size" />
</a>
<Separator orientation="vertical" />
<button
className="text-muted-foreground hover:text-accent-foreground "
className="extra-side-bar-save-disable"
onClick={() => {
setDark(!dark);
}}
>
{dark ? (
<SunIcon className="h-5 w-5" />
<SunIcon className="side-bar-button-size" />
) : (
<MoonIcon className="h-5 w-5" />
<MoonIcon className="side-bar-button-size" />
)}
</button>
<button
className="text-muted-foreground hover:text-accent-foreground relative"
className="extra-side-bar-save-disable relative"
onClick={(event: React.MouseEvent<HTMLElement>) => {
setNotificationCenter(false);
const { top, left } = (
@ -128,15 +128,15 @@ export default function Header() {
>
<AlertDropdown />
</div>
<div className="fixed left-0 top-0 h-screen w-screen"></div>
<div className="header-notifications-box"></div>
</>
);
}}
>
{notificationCenter && (
<div className="absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive"></div>
<div className="header-notifications"></div>
)}
<Bell className="h-5 w-5" aria-hidden="true" />
<Bell className="side-bar-button-size" aria-hidden="true" />
</button>
</div>
</div>

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

@ -32,7 +32,7 @@ export default function InputComponent({
<div
className={
disabled
? "pointer-events-none relative cursor-not-allowed"
? "input-component-div"
: "relative"
}
>
@ -61,8 +61,8 @@ export default function InputComponent({
<button
className={classNames(
editNode
? "absolute inset-y-0 right-0 items-center pr-2 text-muted-foreground"
: "absolute inset-y-0 right-0 items-center px-4 text-muted-foreground"
? "input-component-true-button"
: "input-component-false-button"
)}
onClick={() => {
setPwdVisible(!pwdVisible);
@ -78,8 +78,8 @@ export default function InputComponent({
stroke="currentColor"
className={classNames(
editNode
? "absolute bottom-0.5 right-2 h-5 w-5"
: "absolute bottom-2 right-3 h-5 w-5"
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path
@ -97,8 +97,8 @@ export default function InputComponent({
stroke="currentColor"
className={classNames(
editNode
? "absolute bottom-0.5 right-2 h-5 w-5"
: "absolute bottom-2 right-3 h-5 w-5"
? "input-component-true-svg"
: "input-component-false-svg"
)}
>
<path

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

@ -94,10 +94,10 @@ export default function InputFileComponent({
return (
<div
className={
disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
disabled ? "input-component-div" : "w-full"
}
>
<div className="flex w-full items-center">
<div className="input-file-component">
<span
onClick={handleButtonClick}
className={

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

@ -176,9 +176,15 @@ The cursor: default; property value restores the browser's default cursor style
.extra-side-bar-save-disable {
@apply text-muted-foreground
}
.extra-side-bar-save-disable:hover {
@apply hover:text-accent-foreground
}
.side-bar-button-size {
@apply h-5 w-5
}
.side-bar-button-size:hover {
@apply hover:text-accent-foreground
}
.side-bar-buttons-arrangement {
@apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2
}
@ -525,4 +531,65 @@ The cursor: default; property value restores the browser's default cursor style
.float-component-pointer {
@apply pointer-events-none cursor-not-allowed
}
.header-menu-bar {
@apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium
}
.header-menu-bar-display {
@apply flex max-w-[200px] items-center gap-2
}
.header-menu-flow-name {
@apply flex-1 truncate
}
.header-menu-options {
@apply mr-2 h-4 w-4
}
.header-arrangement {
@apply flex-max-width h-12 items-center justify-between border-b bg-muted
}
.header-start-display {
@apply flex w-96 items-center justify-start gap-2
}
.header-end-division {
@apply flex w-96 justify-end px-2
}
.header-end-display {
@apply ml-auto mr-2 flex items-center gap-5
}
.header-github-link {
@apply inline-flex shadow-sm items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground border border-input hover:bg-accent hover:text-accent-foreground h-9 px-3 pr-0 rounded-md
}
.header-github-display {
@apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm
}
.header-notifications-box {
@apply fixed left-0 top-0 h-screen w-screen
}
.header-notifications {
@apply absolute right-[3px] h-1.5 w-1.5 rounded-full bg-destructive
}
.input-component-div {
@apply pointer-events-none relative cursor-not-allowed
}
.input-component-button {
@apply absolute inset-y-0 right-0 items-center text-muted-foreground
}
.input-component-true-button {
@apply input-component-button pr-2
}
.input-component-false-button {
@apply input-component-button px-4
}
.input-component-true-svg {
@apply absolute bottom-0.5 right-2 side-bar-button-size
}
.input-component-false-svg {
@apply absolute bottom-2 right-3 side-bar-button-size
}
.input-file-component {
@apply flex-max-width items-center
}
}