diff --git a/CHANGELOG.md b/CHANGELOG.md
index b011f6d510..cb64dc8bb8 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/ui/package.json b/ui/package.json
index 57af014966..88c6fea61f 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/shared/components/OptIn.js b/ui/src/shared/components/OptIn.js
index 7f1fee1352..aa46aaed7e 100644
--- a/ui/src/shared/components/OptIn.js
+++ b/ui/src/shared/components/OptIn.js
@@ -121,19 +121,21 @@ class OptIn extends Component {
handleClickOutsideInput={this.handleClickOutsideInput}
/>
(this.grooveKnobContainer = el)}
- onClick={this.handleClickToggle}
>
(this.grooveKnob = el)}
- />
-
-
- {fixedPlaceholder}
+ onClick={this.handleClickToggle}
+ >
+
+
+
+ {fixedPlaceholder}
+
)
diff --git a/ui/src/style/components/opt-in.scss b/ui/src/style/components/opt-in.scss
index 6e45ea39f0..1ec10a7895 100644
--- a/ui/src/style/components/opt-in.scss
+++ b/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;
+ }
}
}
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 966c0876e8..a2b777e95e 100644
--- a/ui/yarn.lock
+++ b/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"