From 320f20087d828af2e83fca3517b5ebcab1d1b362 Mon Sep 17 00:00:00 2001
From: Tony Huang <tony@slamtec.com>
Date: Mon, 24 Feb 2020 19:26:23 +0800
Subject: [PATCH] tune visual effects for better look

---
 src/App.vue                           | 12 +++++++-
 src/components/VueBlock.vue           | 43 ++++++++++++++++-----------
 src/components/VueBlocksContainer.vue |  9 +++---
 3 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e0b018f3..dbe2c449 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -702,6 +702,13 @@
   body {
     width: 100%;
     height: 100%;
+    background-color: rgb(39, 39, 39);
+    color: #fff;
+  }
+
+  * {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 12px;
   }
 
   #app {
@@ -719,8 +726,9 @@
   #contextMenu {
     position: absolute;
     z-index: 1000;
-    background: white;
+    background: rgb(16,16,16);
     border: 1px solid black;
+    border-radius: 5px;
     padding: 5px;
     margin: 0;
 
@@ -728,7 +736,9 @@
       &.label {
         color: gray;
         font-size: 90%;
+        cursor: default;
       }
+      cursor: pointer;
       list-style: none;
     }
 
diff --git a/src/components/VueBlock.vue b/src/components/VueBlock.vue
index a074c7ec..7527a8d9 100644
--- a/src/components/VueBlock.vue
+++ b/src/components/VueBlock.vue
@@ -149,8 +149,8 @@
         this.$emit('delete')
       },
       moveWithDiff (diffX, diffY) {
-        let left = this.x + diffX / this.options.scale
-        let top = this.y + diffY / this.options.scale
+        let left = Math.round(this.x + diffX / this.options.scale)
+        let top = Math.round(this.y + diffY / this.options.scale)
 
         this.$emit('update:x', left)
         this.$emit('update:y', top)
@@ -177,39 +177,45 @@
 
 <style lang="less" scoped>
   @blockBorder: 1px;
+  @borderRadius: 5px;
 
   @ioPaddingInner: 2px 0;
   @ioHeight: 16px;
-  @ioFontSize: 14px;
+  @ioFontSize: 12px;
 
   @circleBorder: 1px;
-  @circleSize: 10px;
-  @circleMargin: 2px; // left/right
+  @circleSize: 8px;
+  @circleMargin: 4px; // left/right
 
-  @circleNewColor: #00FF00;
-  @circleRemoveColor: #FF0000;
-  @circleConnectedColor: #FFFF00;
+  @circleNewColor: #eee;
+  @circleRemoveColor: #555;
+  @circleConnectedColor: #fff;
 
   .vue-block {
     position: absolute;
     box-sizing: border-box;
+    border-radius: @borderRadius;
     border: @blockBorder solid black;
-    background: white;
+    background: rgb(16, 16, 16);
     z-index: 1;
-    opacity: 0.9;
+    // opacity: 0.9;
     cursor: move;
 
     &.selected {
-      border: @blockBorder solid red;
+      box-shadow: 0px 0px 2px 2px rgb(234,152,7);
       z-index: 2;
     }
 
     > header {
-      background: #bfbfbf;
-      text-align: center;
+      background: rgb(52,52,52);
+      text-align: left;
+      color: white;
+      padding: 2px 8px;
+      border-top-left-radius: @borderRadius;
+      border-top-right-radius: @borderRadius;
 
       > .delete {
-        color: red;
+        color: #fff;
         cursor: pointer;
         float: right;
         position: absolute;
@@ -219,6 +225,7 @@
 
     .inputs, .outputs {
       padding: @ioPaddingInner;
+      box-sizing: border-box;
 
       display: block;
       width: 50%;
@@ -235,7 +242,7 @@
       width: @circleSize;
       height: @circleSize;
 
-      border: @circleBorder solid rgba(0, 0, 0, 0.5);
+      border: @circleBorder solid #fff;
       border-radius: 100%;
 
       cursor: crosshair;
@@ -248,13 +255,13 @@
       float: left;
       text-align: left;
 
-      margin-left: -(@circleSize/2 + @blockBorder);
+      padding-left: @circleMargin;
     }
 
     .input, .output {
       height: @ioHeight;
       overflow: hidden;
-      font-size: @ioFontSize;
+      // font-size: @ioFontSize;
 
       &:last-child {
       }
@@ -281,7 +288,7 @@
       float: right;
       text-align: right;
 
-      margin-right: -(@circleSize/2 + @blockBorder);
+      padding-right: @circleMargin;
     }
 
     .output {
diff --git a/src/components/VueBlocksContainer.vue b/src/components/VueBlocksContainer.vue
index feb76f37..b6248271 100644
--- a/src/components/VueBlocksContainer.vue
+++ b/src/components/VueBlocksContainer.vue
@@ -103,7 +103,7 @@
       optionsForChild () {
         return {
           width: 200,
-          titleHeight: 20,
+          titleHeight: 18,
           scale: this.scale,
           inputSlotClassName: this.inputSlotClassName,
           center: {
@@ -165,8 +165,8 @@
             x2: x2,
             y2: y2,
             style: {
-              stroke: '#F85',
-              strokeWidth: 4 * this.scale,
+              stroke: '#ccc',
+              strokeWidth: 2 * this.scale,
               fill: 'none'
             },
             outlineStyle: {
@@ -180,7 +180,7 @@
 
         if (this.tempLink) {
           this.tempLink.style = {
-            stroke: '#8f8f8f',
+            stroke: '#ccc',
             strokeWidth: 4 * this.scale,
             fill: 'none'
           }
@@ -299,6 +299,7 @@
         y += block.y
 
         y += this.optionsForChild.titleHeight
+        y += 4 // padding
 
         if (isInput && block.inputs.length > slotNumber) {
         } else if (!isInput && block.outputs.length > slotNumber) {