feat: Added examples common styles

Foblex · Aug 15, 2024 · 5e96e98 · 5e96e98
1 parent 737dd1f
commit 5e96e98
Show file tree

Hide file tree

Showing 35 changed files with 283 additions and 611 deletions.
diff --git a/projects/f-examples/_flow-common.scss b/projects/f-examples/_flow-common.scss
@@ -0,0 +1,135 @@
+::ng-deep :root {
+  --node-background-color: #ffffff;
+  --node-border-radius: 2px;
+  --node-border-color: rgba(60, 60, 67, 0.36);
+  --node-color: rgba(60, 60, 67, 0.78);
+  --node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+
+  --connection-color: rgba(60, 60, 67, 0.78);
+  --connection-gradient-1: #915930;
+  --connection-gradient-2: #18794e;
+
+  --outlet-color: #3451b2;
+  --input-output-color: rgba(60, 60, 67, 0.78);
+
+  --minimap-background-color: #ffffff;
+  --minimap-node-color: rgba(60, 60, 67);
+  --minimap-node-selected-color: #3451b2;
+  --minimap-view-color: rgba(100, 108, 255, 0.14);
+
+  &.dark {
+    --node-background-color: #000000;
+    --node-border-radius: 2px;
+    --node-border-color: rgba(235, 235, 245, 0.38);
+    --node-color: rgba(235, 235, 245, 0.6);
+    --node-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+
+    --connection-color: rgba(235, 235, 245, 0.6);
+    --connection-gradient-1: #f9b44e;
+    --connection-gradient-2: #3dd68c;
+
+    --outlet-color: #a8b1ff;
+    --input-output-color: rgba(235, 235, 245, 0.6);
+
+    --minimap-background-color: #1b1b1f;
+    --minimap-node-color: rgba(255, 255, 245, 0.86);
+    --minimap-node-selected-color: #a8b1ff;
+    --minimap-view-color: rgba(100, 108, 255, 0.16);
+  }
+}
+
+@mixin connection {
+  .f-connection {
+    .f-connection-drag-handle {
+      fill: transparent;
+    }
+
+    .f-connection-selection {
+      fill: none;
+    }
+
+    .f-connection-path {
+      fill: none;
+      stroke: var(--connection-color);
+      stroke-width: 2;
+    }
+
+    .f-connection-text, .f-connection-center {
+      fill: var(--connection-color);
+      color: var(--connection-color);
+    }
+  }
+}
+
+@mixin background {
+  .f-background {
+    line {
+      stroke: rgba(0, 0, 0, 0.6);
+    }
+  }
+}
+
+@mixin line-alignment {
+  .f-line-alignment {
+    .f-line {
+      background-color: var(--connection-color);
+    }
+  }
+}
+
+@mixin minimap {
+  .f-minimap {
+    background-color: var(--minimap-background-color);
+    bottom: 16px;
+    right: 16px;
+    width: 120px;
+    height: 120px;
+
+    .f-minimap-node {
+      fill: var(--minimap-node-color);
+
+      &.f-selected {
+        fill: var(--minimap-node-selected-color);
+      }
+    }
+
+    .f-minimap-view {
+      fill: var(--minimap-view-color)
+    }
+  }
+}
+
+@mixin node {
+  width: 100px;
+  padding: 4px;
+  color: var(--node-color);
+  text-align: center;
+  background: var(--node-background-color);
+  border-radius: var(--node-border-radius);
+  border: 0.2px solid var(--node-border-color);
+  cursor: move;
+
+  &:active {
+    box-shadow: var(--node-shadow);
+  }
+}
+
+
+@mixin toolbar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+
+  button {
+    font-weight: 500;
+    border: none;
+    border-radius: 2px;
+    padding: 4px 8px;
+    line-height: normal;
+  }
+}
diff --git a/projects/f-examples/background-example/background-example.component.scss b/projects/f-examples/background-example/background-example.component.scss
@@ -1,6 +1,5 @@
-::ng-deep .f-background {
+@use "../flow-common";
 
-  line {
-    stroke: rgba(0, 0, 0, 0.6);
-  }
+::ng-deep background-example {
+  @include flow-common.background;
 }
diff --git a/projects/f-examples/connectable-side/connectable-side.component.scss b/projects/f-examples/connectable-side/connectable-side.component.scss
@@ -1,37 +1,10 @@
-:host ::ng-deep {
+@use "../flow-common";
 
-  .f-connection {
-    .f-connection-drag-handle {
-      fill: transparent;
-    }
-
-    .f-connection-selection {
-      fill: none;
-    }
-
-    .f-connection-path {
-      fill: none;
-      stroke: #585858;
-      stroke-width: 2;
-    }
-  }
+::ng-deep connectable-side {
+  @include flow-common.connection;
 }
 
 .f-node {
-  width: 100px;
-  padding: 12px;
-  color: #585858;
-  cursor: move;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background: #FCFDFE;
-  border-radius: 4px;
-  box-shadow: 0 0 1px 1px #E4E3E6;
-
-  &:active {
-    box-shadow: 0 0 2px 2px #E4E3E6;
-  }
+  @include flow-common.node;
 }
 
diff --git a/projects/f-examples/connection-behaviour/connection-behaviour.component.scss b/projects/f-examples/connection-behaviour/connection-behaviour.component.scss
@@ -1,43 +1,11 @@
+@use "../flow-common";
 
-:host ::ng-deep {
-
-  .f-connection {
-    .f-connection-drag-handle {
-      fill: transparent;
-    }
-
-    .f-connection-selection {
-      fill: none;
-    }
-
-    .f-connection-path {
-      fill: none;
-      stroke: #585858;
-      stroke-width: 2;
-    }
-
-    .f-connection-text {
-      fill: #585858;
-    }
-  }
+::ng-deep connection-behaviour {
+  @include flow-common.connection;
 }
 
 .f-node {
+  @include flow-common.node;
   opacity: 0.5;
-  width: 100px;
-  padding: 12px;
-  color: #585858;
-  cursor: move;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background: #FCFDFE;
-  border-radius: 4px;
-  box-shadow: 0 0 1px 1px #E4E3E6;
-
-  &:active {
-    box-shadow: 0 0 2px 2px #E4E3E6;
-  }
 }
 
diff --git a/projects/f-examples/connection-from-outlet/connection-from-outlet.component.html b/projects/f-examples/connection-from-outlet/connection-from-outlet.component.html
@@ -7,23 +7,23 @@
       </f-connection>
     }
     <div class="node-with-outlet" fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }">
-      <div class="output-container">
+      <div class="node-line">
         <div>Output 1</div><div fNodeOutput fOutputConnectableSide="right"></div>
       </div>
-      <div class="output-container">
+      <div class="node-line">
         <div>Output 2</div><div fNodeOutput fOutputConnectableSide="right"></div>
       </div>
-      <div class="output-container">
+      <div class="node-line">
         <div>Output 3</div><div fNodeOutput fOutputConnectableSide="right"></div>
       </div>
 
-      <div class="outlet-container">
+      <div class="node-line">
         <div>Outlet. Drag me</div>
         <div fNodeOutlet [isConnectionFromOutlet]="true"></div>
       </div>
     </div>
-    <div class="node-with-input" fNode fDragHandle [fNodePosition]="{ x: 300, y: 40 }" fNodeInput fInputConnectableSide="left">to Me</div>
-    <div class="node-with-input" fNode fDragHandle [fNodePosition]="{ x: 300, y: 100 }" fNodeInput fInputConnectableSide="left">to Me</div>
-    <div class="node-with-input" fNode fDragHandle [fNodePosition]="{ x: 300, y: 160 }" fNodeInput fInputConnectableSide="left">to Me</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 40 }" fNodeInput fInputConnectableSide="left">to Me</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 100 }" fNodeInput fInputConnectableSide="left">to Me</div>
+    <div fNode fDragHandle [fNodePosition]="{ x: 300, y: 160 }" fNodeInput fInputConnectableSide="left">to Me</div>
   </f-canvas>
 </f-flow>
diff --git a/projects/f-examples/connection-from-outlet/connection-from-outlet.component.scss b/projects/f-examples/connection-from-outlet/connection-from-outlet.component.scss
@@ -1,38 +1,23 @@
+@use "../flow-common";
 
-:host ::ng-deep {
-
-  .f-connection {
-    .f-connection-drag-handle {
-      fill: transparent;
-    }
-
-    .f-connection-selection {
-      fill: none;
-    }
+::ng-deep connection-from-outlet {
+  @include flow-common.connection;
+}
 
-    .f-connection-path {
-      fill: none;
-      stroke: #585858;
-      stroke-width: 2;
-    }
-  }
+.f-node {
+  @include flow-common.node;
 }
 
 .node-with-outlet {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  gap: 16px;
+  padding: 8px;
+  gap: 8px;
+  width: unset;
 
-  padding: 12px;
-  color: #585858;
-  cursor: move;
-  background: #FCFDFE;
-  border-radius: 4px;
-  box-shadow: 0 0 1px 1px #E4E3E6;
-
-  .output-container, .outlet-container {
+  .node-line {
     width: 100%;
     display: flex;
     justify-content: space-between;
@@ -41,35 +26,13 @@
   }
 
   .f-node-output, .f-node-outlet {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
-    background: #DEDEDE;
+    background: var(--input-output-color);
   }
 
   .f-node-outlet {
-    background: #585858;
-  }
-
-  &:active {
-    box-shadow: 0 0 2px 2px #E4E3E6;
+    background: var(--outlet-color);
   }
 }
-
-.node-with-input {
-  padding: 12px;
-  color: #585858;
-  cursor: move;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  background: #FCFDFE;
-  border-radius: 4px;
-  box-shadow: 0 0 1px 1px #E4E3E6;
-
-  &:active {
-    box-shadow: 0 0 2px 2px #E4E3E6;
-  }
-}
-
diff --git a/projects/f-examples/connection-markers/connection-markers.component.html b/projects/f-examples/connection-markers/connection-markers.component.html
@@ -2,10 +2,10 @@
   <f-canvas>
     <f-connection [fSelectionDisabled]="true" [fBehavior]="eConnectionBehaviour.FIXED" fType="bezier" fOutputId="output1" fInputId="input1">
       <svg viewBox="0 0 10 10" fMarker [type]="eMarkerType.START" [height]="10" [width]="10" [refX]="5" [refY]="5">
-        <circle cx="5" cy="5" r="2" stroke="none" fill="red"></circle>
+        <circle cx="5" cy="5" r="2" stroke="none" fill="var(--connection-gradient-1)"></circle>
       </svg>
       <svg viewBox="0 0 700 700" fMarker [type]="eMarkerType.END" [height]="5" [width]="5" [refX]="4" [refY]="2.5">
-        <path fill="green" d="M0,0L700,350L0,700L150,350z"/>
+        <path fill="var(--connection-gradient-2)" d="M0,0L700,350L0,700L150,350z"/>
       </svg>
     </f-connection>
     <div fNode fDragHandle [fNodePosition]="{ x: 24, y: 24 }" fNodeOutput fOutputId="output1" fOutputConnectableSide="right">drag me</div>