Merge pull request #2581 from influxdata/fix-optin-cursor

Fix optin cursor

CHANGELOG.md

@@ -1,7 +1,7 @@
-
 ## v1.4.0.0-beta2 [unreleased]
 ### Features
 ### UI Improvements
+1. [#2502](https://github.com/influxdata/chronograf/pull/2502): Fix cursor flashing between default and pointer
 ### Bug Fixes
 1. [#2528](https://github.com/influxdata/chronograf/pull/2528): Fix template rendering to ignore template if not in query 
 1. [#2563](https://github.com/influxdata/chronograf/pull/2563): Fix graph inversion if user input y-axis min greater than max

ui/package.json

@@ -103,7 +103,7 @@
     "bootstrap": "^3.3.7",
     "calculate-size": "^1.1.1",
     "classnames": "^2.2.3",
-    "dygraphs": "influxdata/dygraphs",
+    "dygraphs": "2.1.0",
     "eslint-plugin-babel": "^4.1.2",
     "fast.js": "^0.1.1",
     "fixed-data-table": "^0.6.1",

ui/src/shared/components/OptIn.js

@@ -121,19 +121,21 @@ class OptIn extends Component {
           handleClickOutsideInput={this.handleClickOutsideInput}
         />
         <div
-          className="opt-in--groove-knob-container"
+          className="opt-in--container"
           id={this.id}
           ref={el => (this.grooveKnobContainer = el)}
-          onClick={this.handleClickToggle}
         >
           <div
             className="opt-in--groove-knob"
             id={this.id}
             ref={el => (this.grooveKnob = el)}
-          />
-        </div>
-        <div className="opt-in--left-label" onClick={this.useFixedValue}>
-          {fixedPlaceholder}
+            onClick={this.handleClickToggle}
+          >
+            <div className="opt-in--gradient" />
+          </div>
+          <div className="opt-in--label" onClick={this.useFixedValue}>
+            {fixedPlaceholder}
+          </div>
         </div>
       </div>
     )

ui/src/style/components/opt-in.scss

@@ -8,87 +8,87 @@
   align-items: stretch;
   flex-wrap: nowrap;
 }
-.opt-in--left-label {
+.opt-in--container {
+  display: flex;
+  align-items: stretch;
   border: 2px solid $g5-pepper;
   border-left: 0;
-  background-color: $g2-kevlar;
+  border-radius: 0 4px 4px 0;
+}
+.opt-in--label {
+  user-select: none !important;
+  -moz-user-select: none !important;
+  -webkit-user-select: none !important;
+  -ms-user-select: none !important;
+  -o-user-select: none !important;
   color: $c-pool;
+  background-color: $g2-kevlar;
   font-family: $code-font;
   padding-right: 11px;
-  border-radius: 0 4px 4px 0;
   line-height: 24px;
   font-size: 13px;
   font-weight: 500;
-  cursor: default;
-  @include no-user-select();
   transition: background-color 0.25s ease, color 0.25s ease;
+
   &:hover {
     cursor: pointer;
   }
+  &:hover:active {
+    cursor: pointer;
+    color: $c-laser;
+  }
 }
-.opt-in--groove-knob-container {
-  display: flex;
-  align-items: center;
-  border: 2px solid $g5-pepper;
-  border-left: 0;
-  border-right: 0;
-  position: relative;
 
+.opt-in--groove-knob {
+  width: 48px;
+  position: relative;
+  background-color: $g2-kevlar;
+
+  &, &:hover {
+    cursor: pointer;
+  }
+
+  &:before,
+  &:after {
+    position: absolute;
+    top: 50%;
+    content: '';
+  }
   // Groove
-  > div.opt-in--groove-knob {
-    margin: 0 10px;
-    z-index: 3;
+  &:before {
+    z-index: 2;
     width: 28px;
     height: 8px;
     border-radius: 4px;
     background-color: $g6-smoke;
-    position: relative;
-
-    // Knob
-    &:after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 14px;
-      height: 14px;
-      border-radius: 50%;
-      background-color: $c-pool;
-      transition: background-color 0.25s ease, transform 0.25s ease;
-      transform: translate(0%, -50%);
-    }
+    transform: translate(-50%,-50%);
+    left: 50%;
   }
-
-  // Background Gradients
-  &:before,
+  // Knob
   &:after {
-    content: '';
-    display: block;
+    z-index: 3;
+    left: 50%;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background-color: $c-pool;
+    transition: background-color 0.25s ease, transform 0.25s ease;
+    transform: translate(0%, -50%);
+  }
+  // Gradient
+  .opt-in--gradient {
+    z-index: 1;
     position: absolute;
-    left: 0;
     width: 100%;
     height: 100%;
-    transition: opacity 0.25s ease;
-  }
-  // Left
-  &:before {
-    background-color: $g2-kevlar;
-    z-index: 2;
-    opacity: 1;
-  }
-  // Right
-  &:after {
+    top: 0;
+    left: 0;
     @include gradient-h($g2-kevlar,$g3-castle);
-    z-index: 1;
-  }
-
-  &:hover {
-    cursor: pointer;
-    > div:after {
-      background-color: $c-laser;
-    }
+    transition: opacity 0.25s ease;
+    opacity: 0;
   }
 }
+
 // Customize form input
 .opt-in > input.form-control {
   border-radius: 4px 0 0 4px;
@@ -101,13 +101,21 @@
     transform: translate(-100%, -50%);
   }
   // Fade out left, fade in right
-  .opt-in--groove-knob-container:before {
-    opacity: 0;
+  .opt-in--gradient {
+    opacity: 1;
   }
   // Make left label look disabled
-  .opt-in--left-label {
+  .opt-in--label {
     background-color: $g3-castle;
     color: $g8-storm;
     font-style: italic;
+
+    &:hover {
+      color: $c-pool;
+    }
+    &:hover:active {
+      font-style: normal;
+      color: $c-laser;
+    }
   }
 }

ui/yarn.lock

@@ -2524,9 +2524,9 @@ dot-prop@^3.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dygraphs@influxdata/dygraphs:
-  version "2.0.0"
-  resolved "https://codeload.github.com/influxdata/dygraphs/tar.gz/9cc90443f58c11b45473516a97d4bb3a68a620c2"
+dygraphs@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/dygraphs/-/dygraphs-2.1.0.tgz#2fbfd2c803ead02307df3faf8d4dd3ef55cb2075"
 
 ecc-jsbn@~0.1.1:
   version "0.1.1"