add integrated query view with syntax highlighting

7 files changed, 132 insertions, 3 deletions

diff --git a/app/assets/sass/_buttons.scss b/app/assets/sass/_buttons.scss
index 760d5ec..082372d 100644
--- a/app/assets/sass/_buttons.scss
+++ b/app/assets/sass/_buttons.scss
@@ -5,6 +5,8 @@
   line-height: 1.2;
   text-decoration: none;
   text-transform: uppercase;
+  cursor: pointer;
+  margin-left: $padding-base;
 
   &-default {
     border: 1px solid $blue;
@@ -13,6 +15,7 @@
 
     &:hover {
       background-color: $light-blue;
+      color: #fff;
     }
   }
 
@@ -21,6 +24,15 @@
     font-size: round($font-size-base * 1.2);
   }
 
+  &-sm {
+     padding: $padding-base $padding-base;
+    font-size: round($font-size-base * 0.9);
+ }
+
+ &-slim {
+    .fa { margin: 0};
+}
+
   &-danger {
     border: 1px solid $red;
     color: $red;
@@ -44,4 +56,12 @@
       // background-image: linear-gradient(to bottom, $dark-blue, $blue);
     }
   }
+
+  &-close {
+     @extend .btn-slim;
+     border-radius: 50%;
+     box-shadow: 0;
+     border: 1px solid $line-color;
+     background-color: #fff;
+ }
 }
diff --git a/app/assets/sass/_highlight.scss b/app/assets/sass/_highlight.scss
new file mode 100644
index 0000000..1ade2d7
--- /dev/null
+++ b/app/assets/sass/_highlight.scss
@@ -0,0 +1,101 @@
+.plan-query-container {
+   border: 1px solid $line-color;
+   padding: $padding-xl;
+   background-color: #fff;
+   position: absolute;
+   box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
+   border-radius: $border-radius-base;
+   margin-bottom: $padding-xl;
+   z-index: 4;
+   left: 0;
+
+   .plan-query-text {
+      background-color: #fff;
+      font-family: $font-family-mono;
+      text-align: left;
+
+      .code-key-item {
+         background-color: $yellow;
+         font-weight: 600;
+         padding: 1px;
+      }
+   }
+
+   h3 {
+      font-size: $font-size-lg;
+      width: 93%;
+      text-align: left;
+      border-bottom: 1px solid $line-color;
+      padding-bottom: $padding-base;
+      margin-bottom: $padding-lg;
+   }
+}
+
+.hljs, .hljs-subst {
+  color: $text-color;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+   color: $dark-blue;
+   font-weight: bold;
+}
+
+.hljs-built_in,
+.hljs-literal,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+   color: $dark-blue;
+   font-weight: bold;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+   color: $dark-blue;
+   font-weight: bold;
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: $green;
+  font-weight: 600;
+}
+
+.hljs-title,
+.hljs-section {
+  color: $dark-blue;
+  font-weight: bold;
+}
+
+.hljs-comment {
+  color: $text-color-light;
+  font-style: italic;
+}
+
+.hljs-meta {
+  color: $text-color-light;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: 600;
+}
diff --git a/app/assets/sass/_menu.scss b/app/assets/sass/_menu.scss
index d294686..f70c74d 100644
--- a/app/assets/sass/_menu.scss
+++ b/app/assets/sass/_menu.scss
@@ -14,7 +14,7 @@ $menu-toggle-height: 45px;
    border-top-right-radius: $border-radius-base;
    border-bottom-right-radius: $border-radius-base;
    z-index: 1;
-   transition: all 0.3s;
+   // transition: all 0.3s;
 
    header {
       h3 {
diff --git a/app/assets/sass/_plan-node.scss b/app/assets/sass/_plan-node.scss
index 25b3a05..e1ebaa9 100644
--- a/app/assets/sass/_plan-node.scss
+++ b/app/assets/sass/_plan-node.scss
@@ -7,13 +7,14 @@
    padding: $padding-base $padding-lg;
 	background-color: #fff;
 	font-size: $font-size-sm;
-	border: 2px solid $line-color;
+	border: 1px solid $line-color;
+   margin-bottom: 4px;
 	border-radius: $border-radius-base;
-   overflow: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    min-width: 220px;
+   box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1);
 
    header {
       margin-bottom: $padding-base;
diff --git a/app/assets/sass/_plan.scss b/app/assets/sass/_plan.scss
index 7b8808d..74ac4b7 100644
--- a/app/assets/sass/_plan.scss
+++ b/app/assets/sass/_plan.scss
@@ -5,6 +5,7 @@ $connector-line: 2px solid darken($line-color, 10%);
 	padding-bottom: $padding-lg * 3;
 	overflow: auto;
 	height: 100%;
+   min-height: 550px;
 	width: 100%;
 
 	ul {
diff --git a/app/assets/sass/_variables.scss b/app/assets/sass/_variables.scss
index cfdb166..aa17332 100644
--- a/app/assets/sass/_variables.scss
+++ b/app/assets/sass/_variables.scss
@@ -4,6 +4,7 @@ $page-width: 1000px;
 $padding-base: 6px;
 $padding-sm: 3px;
 $padding-lg: 10px;
+$padding-xl: 18px;
 
 $font-size-base: 13px;
 $font-size-xs: round($font-size-base * 0.7);
@@ -12,6 +13,7 @@ $font-size-lg: round($font-size-base * 1.3);
 $font-size-xl: round($font-size-base * 1.7);
 
 $font-family-sans-serif: 'noto sans';
+$font-family-mono: 'source code pro';
 
 $line-height-base: 1.3;
 
@@ -29,6 +31,9 @@ $red: #AF2F11;
 $dark-red: #7C210C;
 $light-red: #FB8165;
 
+$green: #279404;
+$yellow: #F8E400;
+
 $bg-color: $gray-lightest;
 
 $text-color: #4d525a;
diff --git a/app/assets/sass/styles.scss b/app/assets/sass/styles.scss
index 4dec9e5..cd58edf 100644
--- a/app/assets/sass/styles.scss
+++ b/app/assets/sass/styles.scss
@@ -14,3 +14,4 @@
 @import "table";
 @import "modal";
 @import "footer";
+@import "highlight";