@saltcorn/workflow-editor 1.6.0-alpha.6 → 1.6.0-alpha.8

package/src/workflow.css

@@ -1,15 +1,21 @@
 .wf-shell {
   padding: 0;
+  padding-right: var(--wf-shell-padding-right, 0px);
   height: 100%;
   min-height: 0;
   display: flex;
   flex-direction: column;
+  position: relative;
+  transition: padding-right 0.25s ease;
   --wf-edge: #6c757d;
   --wf-edge-adder: #0d6efd;
   --wf-edge-loop: #f59f00;
   --wf-edge-label: #495057;
   --wf-handle-border: #3f3f3f;
   --wf-handle-bg: #fff;
+  --wf-handle-source-bg: #5a5a5a;
+  --wf-drawer-width: 50vw;
+  --wf-drawer-offset: -4px;
 }
 
 .wf-toolbar {
@@ -33,6 +39,19 @@
   background: #fafbfc;
 }
 
+/* Ensure nodes visually sit above edge labels/buttons */
+.wf-shell .react-flow__node {
+  z-index: 5;
+}
+
+.wf-shell .react-flow__edge-labels {
+  z-index: 2;
+}
+.react-flow .react-flow__edges svg {
+  overflow: visible !important;
+  z-index: 1040;
+}
+
 .wf-empty {
   padding: 12px;
   color: #6c757d;
@@ -156,6 +175,61 @@
   outline-offset: 2px;
 }
 
+.wf-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: min(95vw, max(var(--wf-drawer-width), 600px));
+  background: var(--bs-body-bg, #fff);
+  color: var(--bs-body-color, #212529);
+  border-left: 1px solid var(--bs-card-border-color, #e2e6ea);
+  display: flex;
+  flex-direction: column;
+  z-index: 1050;
+  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  overflow: visible;
+}
+
+.wf-drawer--open {
+  transform: translateX(0);
+}
+
+.wf-drawer__resize {
+  position: absolute;
+  left: -6px;
+  top: 0;
+  width: 10px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 1;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+
+.wf-drawer__header {
+  padding: 16px 18px 12px;
+  border-bottom: 1px solid var(--bs-card-border-color, #e2e6ea);
+}
+
+.wf-drawer__body {
+  padding: 16px 18px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.wf-drawer__footer {
+  padding: 12px 18px;
+  border-top: 1px solid var(--bs-card-border-color, #e2e6ea);
+}
+
 .wf-modal-backdrop {
   position: fixed;
   top: 0;
@@ -170,7 +244,7 @@
 }
 
 .wf-modal {
-  /* background: var(--bs-card-bg, #fff); */
+  /* background: var(--bs-body-bg, #fff); */
   /* color: var(--bs-body-color, #212529); */
   border-radius: 10px;
   /* border: 1px solid var(--bs-card-border-color, #e2e6ea); */
@@ -182,9 +256,30 @@
   /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); */
 }
 
+@media (max-width: 768px) {
+  .wf-shell--drawer-open {
+    padding-right: var(--wf-shell-padding-right, 0px);
+  }
+
+  .wf-drawer {
+    width: min(480px, 100vw);
+  }
+}
+
 .wf-shell .react-flow__edge-path {
   stroke: var(--wf-edge);
   fill: none;
+  stroke-width: 1.5px;
+}
+
+.wf-shell .wf-edge-selected .react-flow__edge-path {
+  stroke: var(--wf-edge-selected, #0d6efd) !important;
+  stroke-width: 2.4px;
+  filter: drop-shadow(0 0 4px rgba(13, 110, 253, 0.35));
+}
+
+.wf-shell .react-flow__connection-path {
+  stroke-width: 1.5px;
 }
 
 .wf-shell .react-flow__edge-text {
@@ -196,6 +291,20 @@
   border-color: var(--wf-handle-border);
 }
 
+.wf-shell .react-flow__handle.wf-handle-source {
+  background: var(--wf-handle-source-bg) !important;
+  border-color: var(--wf-handle-source-bg) !important;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+.wf-shell .react-flow__handle.wf-handle-source-loop {
+  background: var(--wf-edge-loop) !important;
+  border-color: var(--wf-edge-loop) !important;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+.wf-shell .react-flow__handle.wf-handle-target-loop {
+  border-color: var(--wf-edge-loop) !important;
+}
+
 .wf-edge-add-button {
   width: 18px;
   height: 18px;
@@ -230,4 +339,17 @@
   --wf-edge-label: #c0c4cf;
   --wf-handle-border: #c0c4cf;
   --wf-handle-bg: #2f3139;
+  --wf-handle-source-bg: #8a8a8a;
+}
+
+/* Temporary vars fallbacks */
+.wf-drawer {
+  --bs-body-bg: #fff;
+  --bs-body-color: #212529;
+  --bs-card-border-color: #e2e6ea;
+}
+[data-bs-theme="dark"] .wf-drawer {
+  --bs-body-bg: #303030;
+  --bs-body-color: #fff;
+  --bs-card-border-color: #44484e;
 }