progress

flydelabs · Dec 19, 2023 · 5619886 · 5619886
1 parent 175b4ec
commit 5619886
Show file tree

Hide file tree

Showing 12 changed files with 174 additions and 139 deletions.
diff --git a/editor/src/integrated-flow-manager/IntegratedFlowManager.tsx b/editor/src/integrated-flow-manager/IntegratedFlowManager.tsx
@@ -47,6 +47,7 @@ import { useEffect } from "react";
 import _ from "lodash";
 import { useBootstrapData } from "./use-bootstrap-data";
 import type { ImportablesResult } from "@flyde/dev-server";
+import { useDarkMode } from "usehooks-ts";
 
 export const PIECE_HEIGHT = 28;
 
@@ -353,6 +354,8 @@ export const IntegratedFlowManager: React.FC<IntegratedFlowManagerProps> = (
     [currentResolvedDeps, onImportNode, queryImportables]
   );
 
+  const darkMode = useDarkMode();
+
   return (
     <div className={classNames("app", { embedded: isEmbedded })}>
       <DependenciesContextProvider value={dependenciesContextValue}>
@@ -374,6 +377,7 @@ export const IntegratedFlowManager: React.FC<IntegratedFlowManagerProps> = (
           <div className={classNames("stage-wrapper", { running: false })}>
             <DebuggerContextProvider value={debuggerContextValue}>
               <FlowEditor
+                darkMode={darkMode.isDarkMode}
                 key={props.integratedSource}
                 state={editorState}
                 onChangeEditorState={setEditorState}

diff --git a/flow-editor/src/lib/common.scss b/flow-editor/src/lib/common.scss
@@ -23,6 +23,9 @@ $tea-green: #dff2baff;
 
 $output-color: #ffd5c9;
 
+$black: #000000;
+$white: #ffffff;
+
 @mixin base-node($bg-color: white) {
   font-family: $font-family;
   border: 2px solid;

diff --git a/flow-editor/src/visual-node-editor/ActionsMenu/ActionsMenu.scss b/flow-editor/src/visual-node-editor/ActionsMenu/ActionsMenu.scss
@@ -4,19 +4,22 @@
 .actions-menu {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  // gap: 10px;
   align-items: center;
 
   position: absolute;
-  right: 2.5%;
+  right: 0;
   transform: translateY(-50%);
   top: 50%;
   z-index: 1;
+  border-radius: 5px 0 0 5px;
+  border: 1px solid $neutral-400;
+  overflow: clip;
 
   transition: opacity 0.05s ease-in-out, transform 0.05s ease-in-out;
 
   &:not(:hover) {
-    opacity: 0.6;
+    // opacity: 0.95;
     // transform: translateX(-50%) translateY(40px);
     transform-origin: center;
   }
@@ -30,20 +33,19 @@
   }
 
   .action-button {
-    border-radius: 50%;
     background: white;
     width: 40px;
     height: 40px;
-    color: #015c8f;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+    color: $neutral-600;
+
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 
     &:hover {
-      background: #015c8f;
-      color: white;
+      background: $neutral-100;
+      // color: white;
     }
 
     &:active {

diff --git a/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx b/flow-editor/src/visual-node-editor/VisualNodeEditor.tsx
@@ -2489,7 +2489,7 @@ export const VisualNodeEditor: React.FC<VisualNodeEditorProps & { ref?: any }> =
         return (
           <ContextMenu
             className={classNames("visual-node-editor", props.className, {
-              dark: 8,
+              dark: darkMode,
             })}
             data-id={node.id}
             content={getContextMenu()}

diff --git a/flow-editor/src/visual-node-editor/base-node-view/index.tsx b/flow-editor/src/visual-node-editor/base-node-view/index.tsx
@@ -6,7 +6,6 @@ import Draggable from "react-draggable";
 // ;
 import { Pos } from "@flyde/core";
 
-import { MenuItemProps } from "@blueprintjs/core";
 import { useDarkMode } from "../../flow-editor/DarkModeContext";
 
 export interface BaseNodeViewContextItem {
@@ -96,6 +95,8 @@ export const BaseNodeView: React.FC<BaseNodeViewProps> =
       "display-mode": displayMode,
     });
 
+    console.log({ dark });
+
     const draggableContent = (
       <span className="base-node-view-wrapper">
         <div className={cm} style={zoomFixStyle} id={props.domId}>

diff --git a/flow-editor/src/visual-node-editor/connection-view/style.scss b/flow-editor/src/visual-node-editor/connection-view/style.scss
@@ -88,7 +88,7 @@ path.connection {
   path {
     stroke-width: 1.5;
     stroke-linecap: round;
-    stroke: url(#gradient);
+    stroke: $neutral-400;
 
     &.future-add {
       stroke: #007dc6a5;
@@ -99,16 +99,6 @@ path.connection {
     }
   }
 
-  linearGradient#gradient {
-    stop:nth-child(2) {
-      stop-color: #999999;
-    }
-
-    stop:nth-child(1) {
-      stop-color: #6c6c6c;
-    }
-  }
-
   text.label {
     // transform: translateX(-50%);
     // transform-origin: center;

diff --git a/flow-editor/src/visual-node-editor/node-io-view/style.scss b/flow-editor/src/visual-node-editor/node-io-view/style.scss
@@ -3,21 +3,22 @@
 .node-io-view {
   .node-io-view-inner {
     @include base-node;
-    font-size: 20px;
-    font-weight: 600;
-    padding: 3px 8px;
-    border-radius: 5px;
+    line-height: 1;
+    font-size: 18px;
+    padding: 6px 8px;
+    border-radius: 2px;
+    font-weight: 500;
   }
 
   &.input {
     .node-io-view-inner {
-      @include custom-node-color(#e7f8ff);
+      border: 2px solid $tblue-300;
     }
   }
 
   &.output {
     .node-io-view-inner {
-      @include custom-node-color($output-color);
+      border: 2px solid $green-300;
     }
   }
 

diff --git a/flow-editor/src/visual-node-editor/pin-view/PinView.tsx b/flow-editor/src/visual-node-editor/pin-view/PinView.tsx
@@ -16,6 +16,7 @@ import {
 import { getPinDomId } from "../dom-ids";
 import { valuePreview } from "@flyde/remote-debugger";
 import { calcHistoryContent, useHistoryHelpers } from "./helpers";
+import { useDarkMode } from "../../flow-editor/DarkModeContext";
 export const PIN_HEIGHT = 23;
 
 export type InputPinViewProps = {
@@ -85,6 +86,8 @@ export const PinView: React.FC<PinViewProps> = React.memo(function PinView(
     type
   );
 
+  const dark = useDarkMode();
+
   const getContextMenu = () => {
     const inspectMenuItem = (
       <MenuItem
@@ -179,6 +182,7 @@ export const PinView: React.FC<PinViewProps> = React.memo(function PinView(
           // "is-logged": logged,
           // "is-breakpoint": breakpoint,
           minimized: props.minimized,
+          dark,
         },
         type
       );
@@ -194,6 +198,7 @@ export const PinView: React.FC<PinViewProps> = React.memo(function PinView(
           // "has-value": isDefined(runtimeData.lastValues.length)
           minimized: props.minimized,
           "error-pin": id === ERROR_PIN_ID,
+          dark,
         },
         type
       );
@@ -293,7 +298,7 @@ export const PinView: React.FC<PinViewProps> = React.memo(function PinView(
           onDoubleClick={(e) =>
             props.onDoubleClick && props.onDoubleClick(id, e)
           }
-          className={`pin-inner`}
+          className={classNames(`pin-inner`, { dark })}
           onClick={onClick}
           content={getContextMenu()}
         >

diff --git a/flow-editor/src/visual-node-editor/pin-view/pin-view.scss b/flow-editor/src/visual-node-editor/pin-view/pin-view.scss
@@ -6,9 +6,15 @@ $NODE_PIN_HEIGHT: 12px;
 $MINIMIZED_PIN_SIZE: 14px;
 $MINIMIZED_WIRE_LENGTH: 6px;
 
-@mixin colored-pin($default, $hover, $selected) {
+@mixin colored-pin($default, $hover, $selected, $dark-default) {
   .pin-inner {
-    border-color: $default;
+    &:not(.dark) {
+      border-color: $default;
+    }
+
+    &.dark {
+      border-color: $dark-default;
+    }
   }
 
   &.closest:not(.selected),
@@ -21,8 +27,15 @@ $MINIMIZED_WIRE_LENGTH: 6px;
 
   &.selected {
     .pin-inner {
-      border-color: $selected;
-      background: $gray-50;
+      &:not(.dark) {
+        border-color: $selected;
+        background: $gray-50;
+      }
+
+      &.dark {
+        border-color: $default;
+        background: $black;
+      }
     }
   }
 }
@@ -62,8 +75,19 @@ $MINIMIZED_WIRE_LENGTH: 6px;
     padding: 2px 4px 2px 4px;
     line-height: 1;
 
-    background: white;
-    border: 2px solid $gray-300;
+    border-width: 2px;
+    border-style: solid;
+
+    &:not(.dark) {
+      background: white;
+      border-color: $gray-300;
+    }
+
+    &.dark {
+      color: $neutral-50;
+      background: $neutral-800;
+      border-color: $gray-700;
+    }
 
     white-space: nowrap;
 
@@ -75,20 +99,20 @@ $MINIMIZED_WIRE_LENGTH: 6px;
   }
 
   &.input {
-    @include colored-pin($tblue-300, $tblue-500, $tblue-600);
+    @include colored-pin($tblue-300, $tblue-500, $tblue-600, $tblue-700);
   }
 
   &.output {
-    @include colored-pin($green-300, $green-500, $green-600);
+    @include colored-pin($green-300, $green-500, $green-600, $green-700);
     flex-direction: column-reverse;
   }
 
   &[data-pin-id="__trigger"].input {
-    @include colored-pin($purple-300, $purple-500, $purple-600);
+    @include colored-pin($purple-300, $purple-500, $purple-600, $purple-700);
   }
 
   &[data-pin-id="__error"] {
-    @include colored-pin($red-300, $red-500, $red-600);
+    @include colored-pin($red-300, $red-500, $red-600, $red-700);
   }
 
   &.has-value {
@@ -104,7 +128,12 @@ $MINIMIZED_WIRE_LENGTH: 6px;
   &.const-value {
     &.input {
       .pin-inner {
-        background: #ddffe4;
+        &:not(.dark) {
+          background: $green-200;
+        }
+        &.dark {
+          background: $green-800;
+        }
         white-space: nowrap;
         // transition: all ease-out 1.5s;
         max-width: 150px;
@@ -117,19 +146,6 @@ $MINIMIZED_WIRE_LENGTH: 6px;
         }
       }
     }
-
-    &.env-value {
-      .pin-inner {
-        background: #f9ffaa;
-      }
-    }
-  }
-
-  &.is-logged {
-    .pin-inner {
-      border: 3px #4ccfec;
-      box-shadow: 0px 0px 4px 0px #4ccfec;
-    }
   }
 
   &.optional:not(.connected) .pin-inner {