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

fix: improve notes functionality, update theme colors definition and resolve ui and ux small bugs (#4414)

Browse source 
* Fixed background blur overlay color on dialogs

* Try to fix f5 error

* Fix text color of notes

* Fix bg color of nodenode to first one available if not existent

* Removed unused imports

* Added new node colors

* Updated color of placeholder note node

* Fixed notes to appear as soon as when the add button is clicked

* Added transparent option to notes

* Fixed editor design

* Fix design of notes editor

* Update text color on the note node description

* Added canvas dot variable

* Added size and gap definition to background dots

* Updated emerald colors and badge

* used correct badges on tableAutoCellRender

* Used correct colors on the component global variable badge

* Fix color on light mode

* Fixed emerald color on the status of component

* Applied static pink to active icons on navs

* Make sidebar narrower

* Updated size of /

* Fixed Beta and Legacy badges

* Fixed position of chevron

* Fixed node name input

* Updated clear search button

* Updated color for grid dots

* Updated sidebar filter color

* Added chat input check

* Fixed sorting of flow sidebar component

* Fix canvas color

* Updated sticky notes test

* Fixed tests

* Fixed test
This commit is contained in:
Lucas Oliveira 2024-11-06 11:54:43 -03:00 • committed by GitHub
commit de7b23ea93
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 518 additions and 406 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/frontend/src/CustomNodes/NoteNode/index.tsx
View file

@ -19,7 +19,9 @@ function NoteNode({
selected: boolean;
}) {
const bgColor =
data.node?.template.backgroundColor ?? Object.keys(COLOR_OPTIONS)[0];
Object.keys(COLOR_OPTIONS).find(
(key) => key === data.node?.template.backgroundColor,
) ?? Object.keys(COLOR_OPTIONS)[0];
const nodeDiv = useRef<HTMLDivElement>(null);
const [size, setSize] = useState({ width: 0, height: 0 });
//tricky to start the description with the right size
@ -61,12 +63,13 @@ function NoteNode({
maxWidth: NOTE_NODE_MAX_WIDTH,
minWidth: NOTE_NODE_MIN_WIDTH,
minHeight: NOTE_NODE_MIN_HEIGHT,
backgroundColor: COLOR_OPTIONS[bgColor],
backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000",
}}
ref={nodeDiv}
className={cn(
"flex h-full w-full flex-col gap-3 border border-b p-3 transition-all",
selected ? "" : "-z-50 shadow-sm",
"flex h-full w-full flex-col gap-3 rounded-xl p-3 transition-all",
COLOR_OPTIONS[bgColor] !== null &&
`border ${!selected && "-z-50 shadow-sm"}`,
)}
>
<div
@ -77,13 +80,26 @@ function NoteNode({
}}
>
<NodeDescription
inputClassName="border-0 ring-transparent resize-none rounded-none shadow-none h-full w-full"
style={{ backgroundColor: COLOR_OPTIONS[bgColor] }}
inputClassName={cn(
"border-0 ring-transparent resize-none shadow-none rounded-sm h-full w-full",
COLOR_OPTIONS[bgColor] === null
? ""
: "dark:!ring-background dark:text-background",
)}
mdClassName={
COLOR_OPTIONS[bgColor] === null
? "dark:prose-invert"
: "dark:!text-background"
}
style={{ backgroundColor: COLOR_OPTIONS[bgColor] ?? "#00000000" }}
charLimit={2500}
nodeId={data.id}
selected={selected}
description={data.node?.description}
emptyPlaceholder="Double-click to start typing or enter Markdown..."
placeholderClassName={
COLOR_OPTIONS[bgColor] === null ? "" : "dark:!text-background"
}
/>
</div>
</div>