Browse Source

Added border lighter to lines theme

luis 7 years ago
parent
commit
9f73589259

+ 11 - 7
browser/vue-flow/src/assets/default-theme.css

@@ -22,7 +22,8 @@
   --transition-speed: 0.4s;
   --transition-speed-slow: 0.8s;
   --node-selection: darkblue;
-  --border-color: rgba(150, 150, 150, 0.3);
+  --border-color: rgba(50, 50, 50, 0.3);
+  --border-color-lighter: rgba(150, 150, 150, 0.17);
 
   /*--transition-speed: 0.3s;*/
 
@@ -162,9 +163,6 @@ input::placeholder {
   border-bottom: solid 1px var(--primary);
 }
 
-.flow-funcs__container {
-}
-
 .flow-funcs__group {
   background: var(--background-tertiary);
 }
@@ -172,7 +170,7 @@ input::placeholder {
 .flow-funcs__search input {
   color: var(--normal);
   border: none;
-  border-bottom: solid 1px var(--border-color);
+  border-bottom: solid 1px var(--border-color-lighter);
 }
 
 .flow-funcs__src {
@@ -205,9 +203,15 @@ input::placeholder {
 }
 
 .flow-funcs__inner .hx-collapsible {
+  transition: all var(--transition-speed);
+
   /*border: none !important;*/
 }
 
+.hx-collapsible__header {
+  transition: all var(--transition-speed);
+}
+
 .flow-funcs__container .item {
   color: var(--normal) !important;
   border: none !important;
@@ -387,7 +391,7 @@ input::placeholder {
 }
 
 .flow-chat__users {
-  border-left: solid 1px var(--border-color);
+  border-left: solid 1px var(--border-color-lighter);
 }
 
 .flow-chat__toggle {
@@ -399,7 +403,7 @@ input::placeholder {
 }
 
 .flow-chat__messages .message {
-  border-bottom: solid 1px var(--border-color);
+  border-bottom: solid 1px var(--border-color-lighter);
 }
 
 .flow-chat__messages .handle .name {

+ 4 - 3
browser/vue-flow/src/assets/lines-theme.css

@@ -27,11 +27,12 @@
 
 .lines .app-header {
   box-shadow: none;
-  border-bottom: solid 1px var(--border-color);
+  border-bottom: solid 1px var(--border-color-lighter);
 }
 
 .lines .split .splitter {
   flex-basis: 1px !important;
+  color: var(--border-color);
 }
 
 .lines .split.resizeable.horizontal .splitter::after {
@@ -54,7 +55,7 @@
 
 .lines .flow-funcs__src {
   background: transparent !important;
-  border: solid 1px var(--border-color);
+  border: solid 1px var(--border-color-lighter);
   text-shadow: none;
   color: var(--normal);
 }
@@ -67,7 +68,7 @@
 
 /* left panel */
 .lines .hx-collapsible {
-  border-bottom: solid 1px var(--border-color);
+  border-bottom: solid 1px var(--border-color-lighter);
 }
 
 .lines .hx-collapsible__header {

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

@@ -5,7 +5,7 @@
         Flow
         <div>
           <button @click="helpModal=true">?</button>
-          <button @click="theme++">{{ themes[theme%themes.length] }}</button>
+          <button @click="theme++">{{ themes[(theme+1)%themes.length] }}</button>
         </div>
       </div>
       <div class="app-horizontal">

+ 4 - 2
browser/vue-flow/src/components/flow/editor.js

@@ -451,8 +451,10 @@ export default {
             // create new nodes
             nodeUpdate.push({
               ...n,
-              x: Math.round((n.x + dragP.x - curP.x) / 10) * 10,
-              y: Math.round((n.y + dragP.y - curP.y) / 10) * 10
+              x: n.x + dragP.x - curP.x,
+              y: n.y + dragP.y - curP.y
+              // x: Math.round((n.x + dragP.x - curP.x) / 10) * 10, // snapping
+              // y: Math.round((n.y + dragP.y - curP.y) / 10) * 10 // snapping
             })
           }
           // Updating nodes

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

@@ -50,7 +50,7 @@
               v-model="nodeInspect.prop[k]" @input="localChange">
           </div>
         </div>
-        <div class="flow-inspector__area flow-inspector--inputs">
+        <div v-if="registry[nodeInspect.src].inputs" class="flow-inspector__area flow-inspector--inputs">
           <h3>Inputs constants</h3>
           <div
             class="flow-inspector__param"