increase readability

Author: peilingjiang

client/modules/IDE/components/show-hint.js

@@ -228,7 +228,7 @@
   }
 
   function displayHint(name, type) {
-    return `<p>\
+    return `<p class="${type}-item">\
 <span class="${type}-name hint-name">${name}</span>\
 <span class="hint-hidden">, </span>\
 <span class="hint-type">${type}</span>\
@@ -275,7 +275,7 @@
           cur.displayText = displayHint(name, cur.item.type);
         }
         elt.appendChild(e);
-        e.outerHTML = cur.displayText || getText(cur);
+        e.outerHTML = cur.displayText || `<span class="plain-hint-item">${getText(cur)}<span>`;
       }
       elt.hintId = i;
     }

client/styles/abstracts/_variables.scss

@@ -120,17 +120,19 @@ $themes: (
 
     hint-background-color: $white,
     hint-text-color: $dark,
-    hint-item-border-bottom: 1px solid $lighter,
+    hint-item-border-bottom-color: $white,
     hint-fun-text-color: #0B7CA9,
     hint-var-text-color: #D52889,
-    hint-type-text-color: $middle-dark,
+    hint-type-text-color: $medium-dark,
     hint-arrow-color: $lightest,
-    hint-arrow-background-color: #ed225dcc,
-    hint-arrow-background-active-color: $p5js-pink,
-    hint-arrow-focus-outline-color: #cfcfcf,
+    hint-arrow-background-color: #ed225ddd,
+    hint-arrow-background-active-color: $p5js-active-pink,
+    hint-arrow-focus-outline-color: $middle-gray,
     hint-item-hover-background-color: #f4f4f4,
-    hint-item-active-text-color: unset,
-    hint-item-active-background-color: #cfcfcf,
+    hint-item-active-text-color: $white,
+    hint-item-active-background-color: $middle-gray,
+    hint-fun-active-border-bottom-color: #0B7CA9,
+    hint-var-active-border-bottom-color: #D52889,
     hint-item-active-type-text-color: $white,
     hint-item-active-outline: none,
     hint-item-active-outline-offset: 0
@@ -216,18 +218,20 @@ $themes: (
     form-navigation-options-color: $middle-light,
 
     hint-background-color: $darker,
-    hint-text-color: #E0D7D1,
-    hint-item-border-bottom: 1px solid $middle-dark,
+    hint-text-color: $light,
+    hint-item-border-bottom-color: $darker,
     hint-fun-text-color: #0F9DD7,
     hint-var-text-color: #DE4A9B,
-    hint-type-text-color: #E0D7D1,
-    hint-arrow-color: #FDFDFD,
-    hint-arrow-background-color: #ed225dcc,
-    hint-arrow-background-active-color: $p5js-pink,
+    hint-type-text-color: $light,
+    hint-arrow-color: $lightest,
+    hint-arrow-background-color: #ed225ddd,
+    hint-arrow-background-active-color: $p5js-active-pink,
     hint-arrow-focus-outline-color: #cfcfcf,
-    hint-item-hover-background-color: $middle-dark,
+    hint-item-hover-background-color: $medium-dark,
     hint-item-active-text-color: $darker,
     hint-item-active-background-color: #cfcfcf,
+    hint-fun-active-border-bottom-color: #0F9DD7,
+    hint-var-active-border-bottom-color: #DE4A9B,
     hint-item-active-type-text-color: $darker,
     hint-item-active-outline: none,
     hint-item-active-outline-offset: 0
@@ -312,21 +316,23 @@ $themes: (
     form-secondary-title-color: $medium-light,
     form-navigation-options-color: $middle-light,
 
-    hint-background-color: $darker,
-    hint-text-color: #c1c1c1,
-    hint-item-border-bottom: 1px solid #333,
+    hint-background-color: $darkest,
+    hint-text-color: $medium-light,
+    hint-item-border-bottom-color: $medium-dark,
     hint-fun-text-color: #00FFFF,
     hint-var-text-color: #FFA9D9,
-    hint-type-text-color: #c1c1c1,
-    hint-arrow-color: #333,
-    hint-arrow-background-color: #F5DC23CC,
+    hint-type-text-color: $middle-light,
+    hint-arrow-color: $darker,
+    hint-arrow-background-color: #F5DC23DD,
     hint-arrow-background-active-color: #F5DC23,
-    hint-arrow-focus-outline-color: #FDFDFD,
-    hint-item-hover-background-color: #454545,
-    hint-item-active-text-color: #FDFDFD,
+    hint-arrow-focus-outline-color: $lighter,
+    hint-item-hover-background-color: $dark,
+    hint-item-active-text-color: $lighter,
     hint-item-active-background-color: unset,
-    hint-item-active-type-text-color: #FDFDFD,
-    hint-item-active-outline: 2px solid #FDFDFD,
+    hint-fun-active-border-bottom-color: none,
+    hint-var-active-border-bottom-color: none,
+    hint-item-active-type-text-color: $lighter,
+    hint-item-active-outline: 2px solid $lighter,
     hint-item-active-outline-offset: -2px
   )
 );

client/styles/components/_hints.scss

@@ -24,7 +24,7 @@
 
     .CodeMirror-hint {
       color: getThemifyVariable('hint-text-color');
-      border-bottom: getThemifyVariable('hint-item-border-bottom');
+      border-bottom: #{1 / $base-font-size}rem solid getThemifyVariable('hint-item-border-bottom-color');
     }
 
     .fun-name {
@@ -43,33 +43,35 @@
       color: getThemifyVariable('hint-arrow-color');
       background: getThemifyVariable('hint-arrow-background-color');
 
-      &:hover, &:active {
+      &:hover, &:active, &.focused-hint-link {
         background: getThemifyVariable('hint-arrow-background-active-color');
       }
 
       &.focused-hint-link {
-        outline: 2px solid getThemifyVariable('hint-arrow-focus-outline-color');
-        outline-offset: -2px;
+        outline: #{4 / $base-font-size}rem solid getThemifyVariable('hint-arrow-focus-outline-color');
+        outline-offset: #{-2 / $base-font-size}rem;
       }
     }
 
-    li.CodeMirror-hint-active {
-      color: getThemifyVariable('hint-item-active-text-color');
+    li.CodeMirror-hint-active:not(.unfocused) {
       background: getThemifyVariable('hint-item-active-background-color');
       outline: getThemifyVariable('hint-item-active-outline');
       outline-offset: getThemifyVariable('hint-item-active-outline-offset');
-  
-      .hint-type {
-        color: getThemifyVariable('hint-item-active-type-text-color');
+
+      .fun-item {
+        border-bottom: #{2 / $base-font-size}rem solid getThemifyVariable('hint-fun-active-border-bottom-color');
       }
 
-      &.unfocused {
-        background: getThemifyVariable('hint-background-color') !important;
-        outline: unset !important;
+      .var-item {
+        border-bottom: #{2 / $base-font-size}rem solid getThemifyVariable('hint-var-active-border-bottom-color');
+      }
 
-        .hint-type {
-          color: getThemifyVariable('hint-type-text-color') !important;
-        }
+      .hint-name {
+        color: getThemifyVariable('hint-item-active-text-color');
+      }
+  
+      .hint-type, .plain-hint-item {
+        color: getThemifyVariable('hint-item-active-type-text-color');
       }
     }
 
@@ -81,20 +83,34 @@
   .CodeMirror-hint {
     position: relative;
     margin: 0;
-    padding: 0.5rem 0 0.5rem #{5 / $base-font-size}rem;
+    padding: 0;
     height: 2rem;
-    font-size: inherit;
     white-space: pre;
     cursor: pointer;
-    border-bottom: #{1 / $base-font-size}rem solid;
+
+    &:only-child, &:last-child {
+      border-bottom: none !important;
+    }
+
+    p {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
 
-    .hint-name{
-      font-weight: bold;
+    .hint-name, .plain-hint-item {
+      display: inline-block;
+      margin: 0.4rem auto 0.4rem 0.4rem;
+      font-size: 1.2rem;
+      line-height: 100%;
+      font-weight: 700;
     }
 
     .hint-type {
       float: right;
-      margin: 0 calc(2rem + #{5 / $base-font-size}rem) 0 0;
+      margin: 0.5rem 2.4rem 0.5rem auto;
+      font-size: 1rem;
+      line-height: 100%;
     }
 
     .hint-hidden {
@@ -109,6 +125,8 @@
       width: calc(2rem - #{1 / $base-font-size}rem);
       margin: 0;
       padding-top: 0.4rem;
+      font-size: 1.2rem;
+      line-height: 100%;
       text-align: center;
       outline: none;
       z-index: 1;