Skip to content

Commit

Permalink
various ux tweaks (#159)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GabiGrin
GabiGrin authored Sep 17, 2024
1 parent 38210a0 commit c14ba28
Show file tree
Hide file tree
Showing 13 changed files with 152 additions and 136 deletions.
18 changes: 7 additions & 11 deletions flow-editor/src/lib/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,12 @@ $white: #ffffff;
position: relative;
z-index: 1; // added so that it is above pin view when it is retracted when minimized

svg {
margin-right: 2px;
}

&:not(.selected) {
&:hover,
&.closest {
border-style: dashed;
}
}
// &:not(.selected) {
// &:hover,
// &.closest {
// // border-style: dashed;
// }
// }

&:not(.dark) {
svg {
Expand All @@ -71,7 +67,7 @@ $white: #ffffff;

&.dark {
svg {
color: $tblue-400;
color: $tblue-500;
}
}

Expand Down
9 changes: 6 additions & 3 deletions flow-editor/src/lib/react-utils/use-shadow-scroll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,18 @@ export function useScrollWithShadow(darkMode: boolean) {
const isBottom = clientHeight === scrollHeight - scrollTop;
const isTop = scrollTop === 0;
const isBetween = scrollTop > 0 && clientHeight < scrollHeight - scrollTop;
const isScrollable = scrollHeight > clientHeight;

let boxShadow = "none";
const top = `inset 0 8px 5px -5px ${color}`;
const bottom = `inset 0 -8px 5px -5px ${color}`;

if (!isScrollable) {
return boxShadow;
}

if (isTop) {
if (scrollHeight > clientHeight) {
boxShadow = bottom;
}
boxShadow = bottom;
} else if (isBetween) {
boxShadow = `${top}, ${bottom}`;
} else if (isBottom) {
Expand Down
25 changes: 17 additions & 8 deletions flow-editor/src/vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,23 @@ $trigg-800: #92371a;
$trigg-900: #762f18;
$trigg-950: #3f160b;

$tblue-200: #cce4f8;
$tblue-300: #83cff6;
$tblue-400: #41b6ef;
$tblue-500: #189bdc;
$tblue-600: #0b7dbe;
$tblue-700: #0a649a;
$tblue-800: #0d557f;
$tblue-900: #114769;
// $tblue-200: #cce4f8;
// $tblue-300: #83cff6;
// $tblue-400: #41b6ef;
// $tblue-500: #189bdc;
// $tblue-600: #0b7dbe;
// $tblue-700: #0a649a;
// $tblue-800: #0d557f;
// $tblue-900: #114769;

$tblue-200: #bbd9fc;
$tblue-300: #94c4fa;
$tblue-400: #64a8f7;
$tblue-500: #2887f4;
$tblue-600: #0c75ee;
$tblue-700: #0b69d6;
$tblue-800: #0956af;
$tblue-900: #063e7e;

$red-50: #fef2f2;
$red-100: #fee2e2;
Expand Down
55 changes: 15 additions & 40 deletions flow-editor/src/visual-node-editor/NodesLibrary/NodesLibrary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
.nodes-library {
background: white;
display: flex;
width: 220px;
width: 280px;
padding: 6px;
flex-direction: column;
align-items: center;
Expand All @@ -17,14 +17,6 @@
max-height: 70%;
z-index: 1;

.minimize-btn-container {
position: absolute;
top: 2px;
right: 2px;
// padding: 2px;
cursor: pointer;
}

&.dark {
background: $neutral-800;

Expand All @@ -49,7 +41,7 @@
}

svg {
color: $tblue-400;
color: $tblue-500;
}

&:hover,
Expand All @@ -69,27 +61,6 @@
user-select: none;
}

&.open {
&.animate {
animation: rotateReverse 0.15s ease-out forwards;
}
}

&.closed {
&.animate {
animation: rotate 0.15s ease-in forwards;
}
.header {
color: $gray-700;
}

&.dark {
.header {
color: $gray-300;
}
}
}

.list {
// border-radius: 5px;
// border: 1px solid $gray-300;
Expand Down Expand Up @@ -129,10 +100,9 @@
}

.group-items {
display: flex;
flex-direction: row;
display: grid;
grid-template-columns: 50% 50%;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 12px;
padding: 0px 4px;
}
Expand All @@ -146,6 +116,11 @@
border: 1px solid $neutral-200;
padding: 5px 8px 3px;
margin-bottom: 2px;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

&.ai {
font-weight: 600;
Expand All @@ -158,22 +133,22 @@
}

svg.svg-inline--fa {
color: $tblue-700;
color: $tblue-500;
}

.svg-icon-container {
svg {
width: 18px;
height: 18px;
width: 22px;
height: 22px;
}
}

.group-item-inner {
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
gap: 4px;
justify-content: flex-start;
gap: 5px;
width: 100%;
}

&.selected,
Expand Down
53 changes: 6 additions & 47 deletions flow-editor/src/visual-node-editor/NodesLibrary/NodesLibrary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import React, { memo, useCallback, useEffect, useState } from "react";
import { useDependenciesContext } from "../../flow-editor/DependenciesContext";
import { AddNodeMenu } from "./AddNodeMenu";
import { useDarkMode } from "../../flow-editor/DarkModeContext";
import { useIsFirstRender } from "usehooks-ts";
import { Maximize, Minimize } from "@blueprintjs/icons";

import { useScrollWithShadow } from "../../lib/react-utils/use-shadow-scroll";
import { InstanceIcon } from "../instance-view";
import { usePorts } from "../../flow-editor/ports";
Expand All @@ -19,10 +18,6 @@ export interface NodesLibraryProps extends NodeLibraryData {

export const NodesLibrary: React.FC<NodesLibraryProps> = memo((props) => {
const { groups, onAddNode } = props;
const [isClosed, setIsClosed] = React.useState(false);

const [shouldAnimate, setShouldAnimate] = React.useState(false);
const isFirstRender = useIsFirstRender();

const [showAddNodeMenu, setShowAddNodeMenu] = React.useState(false);

Expand Down Expand Up @@ -51,13 +46,6 @@ export const NodesLibrary: React.FC<NodesLibraryProps> = memo((props) => {
}
}, [generateNodeFromPrompt, onAddNode, prompt]);

useEffect(() => {
if (!isFirstRender) {
setShouldAnimate(true);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isClosed]);

useEffect(() => {
if (groups.length) {
setOpenGroup(groups[0].title);
Expand All @@ -76,27 +64,9 @@ export const NodesLibrary: React.FC<NodesLibraryProps> = memo((props) => {
return (
<div
className={classNames("nodes-library", {
closed: isClosed,
open: !isClosed,
animate: shouldAnimate,
dark: darkMode,
})}
>
{isClosed ? (
<div className="header" onClick={() => setIsClosed(!isClosed)}>
<strong>Nodes Library</strong>
</div>
) : null}
<div className="minimize-btn-container">
<Button
minimal
small
onClick={() => setIsClosed(!isClosed)}
// intent="primary"
>
{isClosed ? <Maximize size={12} /> : <Minimize size={12} />}
</Button>
</div>
<div className="list" style={{ boxShadow }} onScroll={onScrollHandler}>
{groups.map((group) => (
<div key={group.title}>
Expand Down Expand Up @@ -130,27 +100,16 @@ export const NodesLibrary: React.FC<NodesLibraryProps> = memo((props) => {
minimal
>
<div className="group-item-inner">
<InstanceIcon icon={node.defaultStyle?.icon as string} />
{node.defaultStyle?.icon && (
<InstanceIcon
icon={node.defaultStyle?.icon as string}
/>
)}
{node.displayName ?? node.id}
</div>
</Tooltip>
</div>
))}
{group.title === "Values & Custom Code" ? (
<div className="group-item ai" onClick={_onGenerateWithAI}>
<Tooltip
content="Generate a custom node using AI"
portalClassName="menu-tooltip"
compact
minimal
>
<div className="group-item-inner">
<InstanceIcon icon="fa-solid fa-wand-magic-sparkles" />
Generate Node using AI
</div>
</Tooltip>
</div>
) : null}
</div>
</div>
))}
Expand Down
16 changes: 14 additions & 2 deletions flow-editor/src/visual-node-editor/VisualNodeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,10 +560,22 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
setIsPanning(true);
panStartPos.current = { x: e.clientX, y: e.clientY };
} else {
startSelectionBox(e);
if (e.target) {
const el = e.target as HTMLElement;
// hacky way to say "only when the actual board is clicked"
if (el.classList.contains("connections-view")) {
onChangeBoardData({
selectedInstances: [],
selectedConnections: [],
from: undefined,
to: undefined,
});
startSelectionBox(e);
}
}
}
},
[node.id, startSelectionBox, isSpacePressed]
[node.id, isSpacePressed, onChangeBoardData, startSelectionBox]
);

const onMouseUp: React.MouseEventHandler = React.useCallback(
Expand Down
4 changes: 2 additions & 2 deletions flow-editor/src/visual-node-editor/instance-view/InstanceView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -716,12 +716,12 @@ export const InstanceView: React.FC<InstanceViewProps> =
style={styleVarProp}
>
<Tooltip content={node.description}>
<React.Fragment>
<span className="content-and-icon">
{style.icon ? (
<InstanceIcon icon={style.icon as string} />
) : null}
<span dangerouslySetInnerHTML={{ __html: content }} />
</React.Fragment>
</span>
</Tooltip>
</ContextMenu>
);
Expand Down
15 changes: 6 additions & 9 deletions flow-editor/src/visual-node-editor/instance-view/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,6 @@ $half-of-pin-height: 16px;
.ins-view-inner {
@include base-node;

.svg-inline--fa {
// color: hsl(var(--node-color), 10%);
// color: $tblue-800;
// color: var(--node-color);
// filter: brightness(
// 0.75
// ); // might be possible using css vars but it's conflicting with scss in a way (https://blog.jim-nielsen.com/2019/dynamically-darken-a-color-in-css/)
}

.svg-icon-container {
display: inline-flex;
align-items: center;
Expand Down Expand Up @@ -110,6 +101,12 @@ $half-of-pin-height: 16px;
// border: 3px solid var(--node-color, transparent);
// }
}

.content-and-icon {
display: flex;
align-items: center;
gap: 5px;
}
}

&.inline-node-edited {
Expand Down
2 changes: 1 addition & 1 deletion flow-editor/src/visual-node-editor/pin-view/PinView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export const PinView: React.FC<PinViewProps> = React.memo(function PinView(
);

return (
<div>
<div className="pin-info-tooltip">
<div>
<strong>{displayName}</strong> ({type}){" "}
</div>
Expand Down
4 changes: 2 additions & 2 deletions flow-editor/src/visual-node-editor/pin-view/helpers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ export const calcHistoryContent = (
""
);
return (
<React.Fragment>
<div className="history-tooltip">
{timesActivated}
{lastValueData}
{queuedValuesData}
</React.Fragment>
</div>
);
} else {
return "Loading session data..";
Expand Down
Loading

0 comments on commit c14ba28

Please sign in to comment.