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"