Frontend changes

* Made arrow more pointy
* Improved line theme
* Button hover effects

browser/vue-flow/src/assets/default-theme.css

@@ -19,8 +19,8 @@
   --link-hover: #f00;
   --selector-background: rgba(0, 0, 200, 0.1);
   --selector-color: var(--primary);
-  --transition-speed: 0.1s;
-  --transition-speed-slow: 0.3s;
+  --transition-speed: 0.4s;
+  --transition-speed-slow: 0.8s;
   --node-selection: darkblue;
   --border-color: rgba(150, 150, 150, 0.3);
 
@@ -88,12 +88,24 @@ button.active {
 
 button::after,
 .hover::after {
-  background: var(--primary);
+  background: var(--normal);
   opacity: 0;
+  transition: all var(--transition-speed);
 }
 
 button:hover::after,
 .hover:hover::after {
+  opacity: 0.1;
+}
+
+button:active,
+.hover:active {
+  text-shadow: 0 1px 1px var(--background);
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+}
+
+button:active::after,
+.hover:active::after {
   opacity: 0.2;
 }
 
@@ -104,12 +116,16 @@ input {
   transition: all var(--transition-speed);
 }
 
+input::placeholder {
+  opacity: 0.4;
+}
+
 .flow-main h1,
 .flow-main h2,
 .flow-main h3,
 .flow-main h4 {
   font-weight: bold;
-  color: var(--primary);
+  color: var(--normal);
 }
 
 .app-header {
@@ -155,6 +171,7 @@ input {
 
 .flow-funcs__search input {
   color: var(--normal);
+  border: none;
   border-bottom: solid 1px var(--border-color);
 }
 

browser/vue-flow/src/assets/lines-theme.css

@@ -19,9 +19,6 @@
   --link-hover: #f00;
   --selector-background: rgba(0, 0, 200, 0.1);
   --selector-color: var(--primary);
-  --transition-speed: 0.1s;
-  --transition-speed-slow: 0.3s;
-  --node-selection: darkblue;
 
   /*--transition-speed: 0.3s;*/
 
@@ -42,7 +39,9 @@
 }
 
 .lines input {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  border: solid 1px var(--border-color);
+  box-shadow: none; /*0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
+  color: #777;
 }
 
 /* chat */
@@ -71,6 +70,10 @@
   border-bottom: solid 1px var(--border-color);
 }
 
+.lines .hx-collapsible__header {
+  height: 50px;
+}
+
 .lines .flow-node__body {
   fill: transparent;
   stroke-width: 3px;
@@ -83,3 +86,31 @@
 .lines .flow-node--selected .flow-node__label {
   fill: white !important;
 }
+
+.lines .flow-panel__selector {
+  flex-basis: 51px;
+  border-bottom: 1px solid var(--border-color) !important;
+}
+
+.lines .flow-panel__selector .active {
+  color: var(--normal);
+  background: transparent;
+  position: relative;
+}
+
+.lines .flow-panel__selector .active::before {
+  content: " ";
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  left: 0;
+  right: 0;
+  background: var(--primary);
+}
+
+.lines .flow-main h1,
+.lines .flow-main h2,
+.lines .flow-main h3,
+.lines .flow-main h4 {
+  color: #222 !important;
+}

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

@@ -107,7 +107,7 @@ export default {
       funcsResizeable: false,
 
       themes: ['light', 'dark', 'lines'],
-      theme: 0
+      theme: 2
     }
   },
   computed: {

browser/vue-flow/src/components/flow/editor.js

@@ -552,10 +552,8 @@ export default {
         this.createPortal(nodefromId, x, y)
         return
       }
-
       x = x || node.x + 10
       y = y || node.y + 10
-      console.log('X,Y:', x, y, 'nodexy', node.x, node.y)
       // Special node
       const portalNode = {
         id: utils.guid(),

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

@@ -116,6 +116,7 @@
   align-items: center;
   color: #fff;
   background: var(--background-transparent);
+  transition: all var(--transition-speed);
 }
 
 .flow-container__control button {
@@ -141,6 +142,10 @@
   fill:transparent;
 }
 
+.flow-view.activity {
+  cursor:crosshair;
+}
+
 .flow-selector {
   pointer-events:none;
   opacity:0;

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

@@ -21,7 +21,7 @@ export default {
     path () {
       const x1 = this.x1 + 7
       const y1 = this.y1
-      const x2 = this.x2 - (this.pointer ? 4 : 15.5)
+      const x2 = this.x2 - (this.pointer ? 4 : 19.5)
       const y2 = this.y2
 
       const dx = x2 - x1

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

@@ -408,6 +408,7 @@ export default {
   font-size:15px;
   opacity:0;
   fill: var(--normal);
+  transition: all var(--transition-speed);
 }
 
 .flow-linking .flow-node__src-detail {

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

@@ -15,7 +15,7 @@
     <div class="flow-funcs__search">
       <input
         type="text"
-        placeholder="search"
+        placeholder="search ... "
         v-model="search">
     </div>
 

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

@@ -205,9 +205,8 @@ export default {
 .flow-inspector__area label{
   display:block;
   font-weight:bold;
-  padding:5px 0;
+  padding:12px 0 5px 0;
   margin:0;
-  color: var(--primary-darker);
 }
 
 .flow-inspector__area small {

browser/vue-flow/src/components/flow/svgdefs.svg

@@ -1,6 +1,6 @@
 <defs>
-    <marker id="head" class="flow-link__head" orient="auto" markerWidth="6" markerHeight="8" refX="2" refY="4">
-      <path d="M0,0 V8 L6,4 Z"/>
+    <marker id="head" class="flow-link__head" orient="auto" markerWidth="6" markerHeight="8" refX="0.1" refY="3">
+      <path stroke="context-stroke" d="M0,0 V6 L6,3 Z"/>
     </marker>
 
 		<filter x="-.1" y="-.2" width="1.2" height="1.4" id="solid-white" class="flow-socket__detail-solid">