Chromium Code Reviews Chromium Code Reviews
Issue 2950673002:
[MD Settings][Night Light] CL8: Add the ripple focus effect to the slider knobs (Closed)
| Index: chrome/browser/resources/settings/device_page/night_light_slider.html |
| diff --git a/chrome/browser/resources/settings/device_page/night_light_slider.html b/chrome/browser/resources/settings/device_page/night_light_slider.html |
| index 317a1c35b700719999cdbdacb2c88146a35976f8..02683de0f34f67f0d02c1dc0dd6a2b7dbbe2af43 100644 |
| --- a/chrome/browser/resources/settings/device_page/night_light_slider.html |
| +++ b/chrome/browser/resources/settings/device_page/night_light_slider.html |
| @@ -2,6 +2,7 @@ |
| <link rel="import" href="chrome://resources/html/polymer.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"> |
| +<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-inky-focus-behavior.html"> |
| <link rel="import" href="../prefs/prefs_behavior.html"> |
| </head><body><dom-module id="night-light-slider"> |
| <template> |
| @@ -29,22 +30,29 @@ |
| } |
| .knob { |
| + height: 32px; |
| + margin-left: -16px; |
| + margin-top: -15px; |
| + position: absolute; |
| + width: 32px; |
| + } |
| + |
| + .knob:focus { |
| + outline: none; |
| + } |
| + |
| + .knob-inner { |
| background: rgb(51, 103, 214); |
| border-radius: 6px; |
| height: 12px; |
| left: 0; |
| - margin-left: -6px; |
| - margin-top: -5px; |
| + margin-left: 10px; |
| + margin-top: 10px; |
| position: absolute; |
| width: 12px; |
| z-index: 3; |
| } |
| - .knob:focus { |
| - box-shadow: 0 0 5pt 5pt rgb(204, 217, 245); |
| - outline: none; |
| - } |
| - |
| .expanded-knob { |
| transform: scale(1.5); |
| z-index: 3; |
| @@ -123,6 +131,10 @@ |
| top: 5px; |
| width: 4em; |
| } |
| + |
| + paper-ripple { |
| + color: rgb(51, 103, 214); |
|
stevenjb
2017/06/20 00:31:44
Use var(--google-blue-700) throughout this file
afakhry
2017/06/20 19:59:54
Done.
|
| + } |
| </style> |
| <div id="sliderContainer"> |
| @@ -144,9 +156,13 @@ |
| <div id="markersContainer"> |
| </div> |
| <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_" |
| - on-up="endDrag_" on-track="continueDrag_"></div> |
| + on-up="endDrag_" on-track="continueDrag_"> |
| + <div class="knob-inner" tabindex="-1"></div> |
| + </div> |
| <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_" |
| - on-up="endDrag_" on-track="continueDrag_"></div> |
| + on-up="endDrag_" on-track="continueDrag_"> |
| + <div class="knob-inner" tabindex="-1"></div> |
| + </div> |
| </div> |
| <div id="legendContainer"> |
| <!-- TODO(afakhry): Check if these values need to be localized. --> |
|
dpapad
2017/06/20 17:35:19
Yes, they do.
afakhry
2017/06/20 19:59:53
Already in CQ: https://codereview.chromium.org/295
|
| @@ -156,6 +172,7 @@ |
| <div style="left: 75%;">12 PM</div> |
| <div style="left: 100%;">6 PM</div> |
| </div> |
| + <div id="hidden" hidden></div> |
|
stevenjb
2017/06/20 00:31:44
This is a very non descriptive id; what is it for?
afakhry
2017/06/20 19:59:54
I changed the ID to dummyRippleContainer.
|
| </div> |
| </template> |
