better colors, more reactive suggestion

Leo-Nicolle · Jan 15, 2024 · f2a4a2c · f2a4a2c
1 parent addee82
commit f2a4a2c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 26 deletions.
diff --git a/client/src/components/Editor.vue b/client/src/components/Editor.vue
@@ -345,22 +345,6 @@ const isLoadingSuggestions = computed(() => {
   gap: 5px;
 }
 
-.unknown {
-  fill: rgba(252, 226, 42, 0.8);
-}
-
-.incomplete {
-  fill: rgba(214, 19, 85, 0.8);
-}
-
-.nodef {
-  fill: rgba(249, 74, 41, 0.8);
-}
-
-.noarrow {
-  fill: rgba(237, 43, 42, 0.8);
-}
-
 text.highlighted {
   fill: #000;
 }

diff --git a/client/src/components/sidebars/Suggestion.vue b/client/src/components/sidebars/Suggestion.vue
@@ -8,7 +8,7 @@
     ]" :data="results" :pagination="{
   pageSize: 8,
   simple: true,
-}" @mousemove="onMouseEvt($event, false)" @click="onMouseEvt($event, true)" />
+}" @mousemove="onMouseEvt($event, false)" @click="onMouseEvt($event, true)" @mouseout="onMouseOut" />
     <n-button class="loading" v-else :loading="true"></n-button>
   </div>
 </template>
@@ -105,6 +105,11 @@ function onMouseEvt(evt: MouseEvent, click = false) {
   hovered = text;
   return click ? emit("click", text) : emit("hover", text);
 }
+function onMouseOut() {
+  hovered = "";
+  return emit("hover", '');
+
+}
 </script>
 
 <style>

diff --git a/client/src/components/svg-renderer/GridHighlight.vue b/client/src/components/svg-renderer/GridHighlight.vue
@@ -222,7 +222,7 @@ function add() {
 }
 </script>
 
-<style scoped>
+<style>
 .gridhighlightcontainer {
   pointer-events: none;
   display: grid;
@@ -232,7 +232,7 @@ function add() {
   grid-area: 1 / 1 / 1 / 1;
 }
 
-.gridhighlight {
+.gridhighlightcontainer>.gridhighlight {
   top: 0;
   left: 0;
   padding: 0;
@@ -247,13 +247,13 @@ function add() {
   pointer-events: none;
 }
 
-.highlight {
+.gridhighlightcontainer>.gridhighlight>.highlight {
   width: v-bind(width);
   height: v-bind(height);
   box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
 }
 
-.gridhighlight>.tooltip {
+.gridhighlightcontainer>.gridhighlight>.tooltip {
   pointer-events: visible;
   padding: 4px;
   background-color: white;
@@ -267,35 +267,47 @@ function add() {
   gap: 4px;
 }
 
-.heatmap {
+.gridhighlightcontainer>.heatmap {
   position: relative;
   top: 0;
   left: 0;
   transform: v-bind(heatmapTransform);
   pointer-events: none;
 }
 
-.lines {
+.gridhighlightcontainer>.lines {
   position: relative;
 }
 
-.lines>span {
+.gridhighlightcontainer>.lines>span {
   width: 1500px;
   height: 1px;
   background-color: red;
   position: absolute;
 }
 
-.v-lines {
+.gridhighlightcontainer>.v-lines {
   position: relative;
 }
 
-.v-lines>span {
+.gridhighlightcontainer>.v-lines>span {
   left: 204px;
   width: 102px;
   height: 29px;
   background-color: red;
   position: absolute;
   opacity: 0.5;
 }
+
+.incomplete {
+  fill: rgba(255, 107, 107, 0.8);
+}
+
+.nodef {
+  fill: rgba(17, 138, 178, 0.8);
+}
+
+.noarrow {
+  fill: rgba(255, 209, 102, 0.8);
+}
 </style>