Added dark theme normalized styles in default vue

browser/vue-flow/package.json

@@ -40,7 +40,7 @@
     "flow": "^0.2.3",
     "flow-bin": "^0.62.0",
     "html-webpack-plugin": "^2.30.1",
-    "node-sass": "^4.5.3",
+    "node-sass": "^4.7.2",
     "reset-css": "^2.2.1",
     "sass-loader": "^6.0.6",
     "vue-loader": "^13.0.5",

browser/vue-flow/src/assets/dark-theme.scss

@@ -0,0 +1,144 @@
+:root {
+  --background: #303030;
+  --background-secondary: #424242;
+  --normal: #eee;
+  --primary: #f57c00;
+}
+
+.dark {
+  .app-header {
+    display: flex;
+    align-items: center;
+    color: var(--normal) !important;
+    background: #212121 !important;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) !important;
+    overflow: visible;
+    z-index: 10;
+  }
+
+  .app-info {
+    color: var(--normal);
+  }
+
+  .app-watermark {
+    color: black !important;
+    opacity: 0.02;
+  }
+
+  .app-flow-container {
+    background: var(--background);
+  }
+
+  .flow-funcs__control {
+    border-bottom: solid 1px var(--primary);
+  }
+
+  .flow-funcs__container {
+    background: var(--background-secondary) !important;
+  }
+
+  .flow-funcs__container .flow-funcs__header {
+    color: var(--normal);
+  }
+
+  .hx-toggle-arrow.active {
+    color: var(--primary) !important;
+  }
+
+  .flow-funcs__inner {
+    display: flex;
+    flex: 1;
+    flex-flow: column;
+    justify-content: center;
+  }
+
+  .flow-funcs__inner .hx-collapsible {
+    border: none !important;
+  }
+
+  .flow-funcs__container .item {
+    color: var(--normal) !important;
+    border: none !important;
+  }
+
+  .flow-funcs__group {
+    padding: 10px;
+    background: #323232;
+  }
+
+  .flow-funcs__control .item {
+    color: var(--normal) !important;
+  }
+
+  .flow-container__control button {
+    color: var(--normal) !important;
+  }
+
+  .flow-container__info {
+    color: var(--normal);
+  }
+
+  .flow-node__body:hover {
+    stroke: var(--primary) !important;
+  }
+
+  /*
+ * LINKS
+ */
+  .flow-link__visible {
+    stroke: var(--normal) !important;
+    stroke-width: 2;
+  }
+
+  .flow-link:not(.flow-link--pointer):hover .flow-link__visible {
+    stroke: var(--primary) !important;
+  }
+
+  .flow-link__head {
+    fill: var(--normal) !important;
+  }
+
+  /*
+ * NODES
+ */
+  .flow-container .flow-node {
+    filter: none;
+  }
+
+  .flow-container .flow-node:hover {
+    filter: url(#highlight-border);
+  }
+
+  .flow-container .flow-node__body {
+    fill: transparent;
+    stroke: attr(fill);
+  }
+
+  .flow-linking .flow-node__socket:not(.flow-node__socket--match) {
+    fill: var(--primary) !important;
+    stroke: var(--primary) !important;
+  }
+
+  /*
+ * CHAT
+ */
+  .flow-chat {
+    background: var(--background-secondary) !important;
+    color: var(--normal);
+  }
+
+  .flow-chat__toggle {
+    border: none;
+    background: var(--background-secondary) !important;
+  }
+
+  .flow-chat .message .text {
+    color: #999;
+  }
+
+  .flow-chat input.message {
+    box-shadow: none !important;
+    background: var(--background) !important;
+    color: var(--normal);
+  }
+}

browser/vue-flow/src/components/flow/link.vue

@@ -1,6 +1,7 @@
 <template>
   <g
     class="flow-link"
+    :class="{'flow-link--pointer':pointer}"
     @click="$emit('click',$event)">
     <path
       class="flow-link__area"
@@ -21,7 +22,8 @@ export default {
     x1: {type: Number, default: 0},
     y1: {type: Number, default: 0},
     x2: {type: Number, default: 0},
-    y2: {type: Number, default: 0}
+    y2: {type: Number, default: 0},
+    pointer: {type: Boolean, default: false}
   },
   computed: {
     path () {
@@ -34,8 +36,8 @@ export default {
         s = Math.max(curve - (lineDist - Math.sqrt(dx * dx + dy * dy)), 0)
       }
       s = Math.max(s, 2)
-      const x2 = this.x2 - 16
-      const x1 = this.x1 + 8
+      const x2 = this.x2 - (this.pointer ? 0 : 16)
+      const x1 = this.x1 + (this.pointer ? 0 : 8)
       return `M${x1},${this.y1} C${x1 + s},${this.y1} ${x2 - s},${this.y2} ${x2},${this.y2}`
     }
   }
@@ -49,16 +51,22 @@ export default {
   stroke-width:20;
   stroke: transparent;
   fill: transparent;
+}
+ .flow-link__head{
+  fill: rgba(0,0,0,0.5);
 }
 .flow-link .flow-link__visible{
   stroke: rgba(0,0,0,0.5);
-  stroke-width:4;
+  stroke-width:2;
   fill: transparent;
   marker-end:url(#head);
 }
-svg:not(.activity) .flow-link:hover .flow-link__visible {
+svg:not(.activity) .flow-link:not(.flow-link--pointer):hover .flow-link__visible {
   stroke: #F00;
   filter: url(#highlight-border);
 }
+.flow-link--pointer {
+  pointer-events:none;
+}
 
 </style>

browser/vue-flow/src/components/flow/manager.vue

@@ -11,9 +11,9 @@
       :width="width"
       :height="height">
       <defs>
-        <marker id="head" orient="auto" markerWidth="2" markerHeight="4"
-                refX="0.1" refY="2">
-          <path d="M0,0 V4 L2,2 Z" fill="rgba(0,0,0,0.5)"/>
+        <marker id="head" class="flow-link__head" orient="auto" markerWidth="4" markerHeight="8"
+                refX="0.1" refY="4">
+          <path d="M0,0 V8 L4,4 Z"/>
         </marker>
         <filter
           id="highlight-border"
@@ -26,12 +26,12 @@
           <feMorphology in="SourceGraphic" result="MORPH" operator="dilate" radius="1" />
           <feColorMatrix
             in="MORPH" result="BORDER" type="matrix"
-            values=".4 0 0 0 0, 0 .4 0 0 0, 0 0 .4 0 0, 0 0 0 .7 0"/>
+            values=".2 0 0 0 0, 0 .2 0 0 0, 0 0 .2 0 0, 0 0 0 .7 0"/>
           <feColorMatrix
             result = "matrixOut"
             in = "SourceGraphic"
             type = "matrix"
-            values = ".7 0 0 0 0,  0 .7 0 0 0,  0 0 .7 0 0,  0 0 0 1 0"/>
+            values = ".5 0 0 0 0,  0 .5 0 0 0,  0 0 .5 0 0,  0 0 0 1 0"/>
           <feGaussianBlur
             result="blurOut"
             in="matrixOut"
@@ -75,6 +75,13 @@
       <flow-pan-zoom
         ref="panzoom"
         v-model="panzoom">
+        <flow-link
+          v-for="(link,i) in nodeData.links"
+          :key="i"
+          v-bind="linkProps(link)"
+          @click="linkRemove(link)"
+        />
+
         <!-- mouse link-->
         <flow-node
           ref="nodes"
@@ -86,12 +93,7 @@
           @socketPointerDown="socketPointerDown(n.id,...arguments)"
         />
         <flow-link
-          v-for="(link,i) in nodeData.links"
-          :key="i"
-          v-bind="linkProps(link)"
-          @click="linkRemove(link)"
-        />
-        <flow-link
+          :pointer="true"
           v-if="pointerLink.active"
           v-bind="pointerLink.props"
         />
@@ -240,6 +242,7 @@ export default {
     // XXX: Shrink this function
     // and create some LinkAdd method
     socketPointerDown (nodeId, ev, socket) {
+      if (ev.button !== 0) return
       const nodeRef = this.$refs.nodes.find(n => n.id === nodeId)
       const node = this.nodeData.nodes.find(n => n.id === nodeId)
 
@@ -479,24 +482,20 @@ function guid () {
 
 /* Override flow-node */
 .flow-node__socket {
+  pointer-events: none;
   fill:transparent !important;
   stroke:transparent !important;
 }
 .flow-linking .flow-node__socket {
+  pointer-events: initial;
   fill: #444 !important;
   stroke: #444 !important;
 }
-.flow-linking .flow-node__socket:hover {
-}
 .flow-linking .flow-node__socket--match,
 .flow-node__socket--match {
   stroke:#2f2 !important;
   fill:#2f2 !important;
   filter: url(#highlight-border);
 }
-.flow-linking .flow-node__socket--match:hover {
-  stroke:#0F0 !important;
-  fill:#0F0 !important;
-}
 
 </style>

browser/vue-flow/src/components/flow/node.vue

@@ -3,7 +3,9 @@
     class="flow-node"
     :class="{'flow-node--dragging':dragging}"
     @mousedown="$emit('nodePointerDown',$event)"
+    view-box="0 0 100 100"
   >
+
     <rect
       ref="body"
       class="flow-node__body"
@@ -81,6 +83,7 @@ export default {
         y: -50,
         width: width,
         height: 100,
+        stroke: this.color,
         fill: this.color
       }
       if (this.type === 'circle') {
@@ -130,14 +133,14 @@ export default {
       if (ilen === 0) return {}
       const d = this.bodyProps.height / (ilen * 2)
       return {
-        x: this.bodyProps.x + 8,
+        x: this.bodyProps.x + 7,
         y: this.bodyProps.y + d + (i * 2 * d)
       }
     },
     outputPos (i) {
       const rect = this.bodyProps
       return {
-        x: rect.x + rect.width - 8,
+        x: rect.x + rect.width - 7,
         y: 0
       }
     },
@@ -152,23 +155,29 @@ export default {
 .flow-node {
   filter: url(#highlight-border);
 }
+svg:not(.activity) .flow-node:hover,
+.flow-node--dragging {
+  cursor:move;
+}
+
+.flow-node--dragging .flow-node__body,
 svg:not(.activity) .flow-node:hover .flow-node__body{
-  stroke-width:1;
+  stroke-width:0.7;
   stroke:black;
-  cursor:move;
 
 }
 .flow-node__socket {
   stroke-width:1;
-  cursor:pointer;
   fill: #AFAFAF;
   stroke: #AFAFAF;
 }
 
-.flow-node__socket:not(.flow-node__socket--match):hover {
+svg:not(.activity) .flow-node__socket:hover {
   stroke-width:10;
+  cursor:pointer;
 }
 .flow-node__socket--match {
+  cursor:pointer;
   stroke-width:10;
   stroke:#2a2;
   fill:#2a2;

browser/vue-flow/src/components/main.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="flow-main">
+  <div class="flow-main" :class="{dark:dark}">
     <div class="app-header">
       Flow
+      <button @click="dark=!dark">{{ dark?'light':'dark' }}</button>
     </div>
     <div class="app-horizontal">
       <div class="app-flow-container">
@@ -81,6 +82,8 @@ import FlowManager from '@/components/flow/manager'
 import FlowPanel from './panel'
 import HxSplit from '@/components/shared/hx-split'
 import 'reset-css/reset.css'
+
+import '@/assets/dark-theme.scss'
 import '@/assets/style.css'
 // import nodeData from './nodedata'
 
@@ -107,7 +110,9 @@ export default {
       nodeData: {nodes: [], links: []},
       funcsSize: '250px',
       funcsActive: true,
-      funcsResizeable: false
+      funcsResizeable: false,
+
+      dark: false
 
     }
   },
@@ -182,8 +187,15 @@ export default {
 .flow-main .app-header {
   background:#113244;
   color:#EEE;
-  padding:14px;
+  padding:0px 14px;
   font-weight:bold;
+  height: 50px;
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flow-main .app-header button{
+  color: #fff;
 }
 .flow-main  .app-info {
   color: #aaa;

browser/vue-flow/src/components/panel.vue

@@ -94,10 +94,10 @@ export default {
 .flow-funcs__control {
   display:flex;
   flex-flow:row;
+  border-bottom: solid 1px rgba(208,208,208,0.9);
 
 }
 .flow-funcs__control .item{
-  border-right: solid 1px rgba(208,208,208,0.9);
   font-size:14px;
   padding:13px;
   flex:1;
@@ -106,21 +106,23 @@ export default {
   color:black;
   text-overflow: ellipsis;
   min-width:50px;
+  height:50px;
+
   overflow:hidden;
 }
+.flow-funcs__control .item:not(:last-child){
+  border-right: solid 1px rgba(208,208,208,0.9);
+}
 
 .flow-funcs__inner {
   overflow:hidden;
+  margin-top:20px;
 }
 .flow-funcs__inner .hx-toggle-arrow {
   color: rgba(150,150,150,0.9);
 }
 
-.flow-funcs__inner .hx-collapsible:first-child {
-  border-top: solid 1px rgba(150,150,150,0.2);
-}
 .flow-funcs__inner .hx-collapsible {
-  border-bottom: solid 1px rgba(150,150,150,0.2);
 }
 .flow-funcs__inner .hx-collapsible__header {
   font-size:14px;
@@ -134,6 +136,8 @@ export default {
 .flow-funcs__group{
   display:flex;
   flex-flow:column;
+  padding:10px;
+  background: rgba(108,108,108,0.1);
 }
 .flow-funcs__src {
   font-size:12px;

browser/vue-flow/webpack.config.js

@@ -21,11 +21,38 @@ module.exports = {
           'css-loader'
         ]
       },
+      {
+        test: /\.scss$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader'
+        ]
+      },
+      {
+        test: /\.sass$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+          'sass-loader?indentedSyntax'
+        ]
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
           loaders: {
+            'scss': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader'
+            ],
+            'sass': [
+              'vue-style-loader',
+              'css-loader',
+              'sass-loader?indentedSyntax'
+            ]
+
           }
           // other vue-loader options go here
         }
@@ -36,7 +63,7 @@ module.exports = {
         exclude: /node_modules/
       },
       {
-        test: /\.(png|jpg|gif|svg)$/,
+        test: /\.(pg|jpg|gif|svg)$/,
         loader: 'file-loader',
         options: {
           name: '[name]-[hash].[ext]'

browser/vue-flow/yarn.lock

@@ -3624,7 +3624,7 @@ node-pre-gyp@^0.6.39:
     tar "^2.2.1"
     tar-pack "^3.4.0"
 
-node-sass@^4.5.3:
+node-sass@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.7.2.tgz#9366778ba1469eb01438a9e8592f4262bcb6794e"
   dependencies: