Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(54)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/settings/device_page/night_light_slider.html

Issue 2950673002: [MD Settings][Night Light] CL8: Add the ripple focus effect to the slider knobs (Closed)
Patch Set: Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « chrome/browser/resources/settings/device_page/compiled_resources2.gyp ('k') | chrome/browser/resources/settings/device_page/night_light_slider.js » ('j') | chrome/browser/resources/settings/device_page/night_light_slider.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html><head> 1 <html><head>
2 <link rel="import" href="chrome://resources/html/polymer.html"> 2 <link rel="import" href="chrome://resources/html/polymer.html">
3 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> 3 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior /iron-a11y-keys-behavior.html"> 4 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior /iron-a11y-keys-behavior.html">
5 <link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-i nky-focus-behavior.html">
5 <link rel="import" href="../prefs/prefs_behavior.html"> 6 <link rel="import" href="../prefs/prefs_behavior.html">
6 </head><body><dom-module id="night-light-slider"> 7 </head><body><dom-module id="night-light-slider">
7 <template> 8 <template>
8 <style> 9 <style>
9 :host { 10 :host {
10 cursor: default; 11 cursor: default;
11 text-align: center; 12 text-align: center;
12 user-select: none; 13 user-select: none;
13 } 14 }
14 15
15 #sliderContainer { 16 #sliderContainer {
16 display: inline-block; 17 display: inline-block;
17 position: relative; 18 position: relative;
18 user-select: none; 19 user-select: none;
19 width: 570px; 20 width: 570px;
20 } 21 }
21 22
22 #sliderBar { 23 #sliderBar {
23 background-color: #ccc; 24 background-color: #ccc;
24 background-size: 100%; 25 background-size: 100%;
25 display: inline-block; 26 display: inline-block;
26 height: 2px; 27 height: 2px;
27 position: relative; 28 position: relative;
28 width: inherit; 29 width: inherit;
29 } 30 }
30 31
31 .knob { 32 .knob {
33 height: 32px;
34 margin-left: -16px;
35 margin-top: -15px;
36 position: absolute;
37 width: 32px;
38 }
39
40 .knob:focus {
41 outline: none;
42 }
43
44 .knob-inner {
32 background: rgb(51, 103, 214); 45 background: rgb(51, 103, 214);
33 border-radius: 6px; 46 border-radius: 6px;
34 height: 12px; 47 height: 12px;
35 left: 0; 48 left: 0;
36 margin-left: -6px; 49 margin-left: 10px;
37 margin-top: -5px; 50 margin-top: 10px;
38 position: absolute; 51 position: absolute;
39 width: 12px; 52 width: 12px;
40 z-index: 3; 53 z-index: 3;
41 } 54 }
42 55
43 .knob:focus {
44 box-shadow: 0 0 5pt 5pt rgb(204, 217, 245);
45 outline: none;
46 }
47
48 .expanded-knob { 56 .expanded-knob {
49 transform: scale(1.5); 57 transform: scale(1.5);
50 z-index: 3; 58 z-index: 3;
51 } 59 }
52 60
53 #progressContainer { 61 #progressContainer {
54 height: 100%; 62 height: 100%;
55 overflow: hidden; 63 overflow: hidden;
56 position: absolute; 64 position: absolute;
57 width: 100%; 65 width: 100%;
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
116 #legendContainer > div { 124 #legendContainer > div {
117 color: rgb(100, 100, 100); 125 color: rgb(100, 100, 100);
118 font-family: Roboto-Regular; 126 font-family: Roboto-Regular;
119 font-size: 12px; 127 font-size: 12px;
120 margin-left: -2em; 128 margin-left: -2em;
121 position: absolute; 129 position: absolute;
122 text-align: center; 130 text-align: center;
123 top: 5px; 131 top: 5px;
124 width: 4em; 132 width: 4em;
125 } 133 }
134
135 paper-ripple {
136 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.
137 }
126 </style> 138 </style>
127 139
128 <div id="sliderContainer"> 140 <div id="sliderContainer">
129 <div id="labelContainer"> 141 <div id="labelContainer">
130 <div id="startLabel" class="label" 142 <div id="startLabel" class="label"
131 aria-label="$i18n{displayNightLightStartTime}"> 143 aria-label="$i18n{displayNightLightStartTime}">
132 [[startTime_]] 144 [[startTime_]]
133 </div> 145 </div>
134 <div id="endLabel" class="label" 146 <div id="endLabel" class="label"
135 aria-label="$i18n{displayNightLightStopTime}"> 147 aria-label="$i18n{displayNightLightStopTime}">
136 [[endTime_]] 148 [[endTime_]]
137 </div> 149 </div>
138 </div> 150 </div>
139 <div id="sliderBar"> 151 <div id="sliderBar">
140 <div id="progressContainer"> 152 <div id="progressContainer">
141 <div id="endProgress" class="progress"></div> 153 <div id="endProgress" class="progress"></div>
142 <div id="startProgress" class="progress"></div> 154 <div id="startProgress" class="progress"></div>
143 </div> 155 </div>
144 <div id="markersContainer"> 156 <div id="markersContainer">
145 </div> 157 </div>
146 <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_" 158 <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_"
147 on-up="endDrag_" on-track="continueDrag_"></div> 159 on-up="endDrag_" on-track="continueDrag_">
160 <div class="knob-inner" tabindex="-1"></div>
161 </div>
148 <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_" 162 <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_"
149 on-up="endDrag_" on-track="continueDrag_"></div> 163 on-up="endDrag_" on-track="continueDrag_">
164 <div class="knob-inner" tabindex="-1"></div>
165 </div>
150 </div> 166 </div>
151 <div id="legendContainer"> 167 <div id="legendContainer">
152 <!-- TODO(afakhry): Check if these values need to be localized. --> 168 <!-- 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
153 <div style="left: 0%;">6 PM</div> 169 <div style="left: 0%;">6 PM</div>
154 <div style="left: 25%;">12 AM</div> 170 <div style="left: 25%;">12 AM</div>
155 <div style="left: 50%;">6 AM</div> 171 <div style="left: 50%;">6 AM</div>
156 <div style="left: 75%;">12 PM</div> 172 <div style="left: 75%;">12 PM</div>
157 <div style="left: 100%;">6 PM</div> 173 <div style="left: 100%;">6 PM</div>
158 </div> 174 </div>
175 <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.
159 </div> 176 </div>
160 177
161 </template> 178 </template>
162 </dom-module> 179 </dom-module>
163 <script src="night_light_slider.js"></script></body></html> 180 <script src="night_light_slider.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/settings/device_page/compiled_resources2.gyp ('k') | chrome/browser/resources/settings/device_page/night_light_slider.js » ('j') | chrome/browser/resources/settings/device_page/night_light_slider.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698