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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/settings/controls/night_light_slider.html

Issue 2915753003: [Night Light] CL5: Schedule Settings (Closed)
Patch Set: Ready for review 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 side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/browser/resources/settings/controls/compiled_resources2.gyp ('k') | chrome/browser/resources/settings/controls/night_light_slider.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/settings/controls/night_light_slider.html
diff --git a/chrome/browser/resources/settings/controls/night_light_slider.html b/chrome/browser/resources/settings/controls/night_light_slider.html
new file mode 100644
index 0000000000000000000000000000000000000000..381ff74b2399b0219105f13bfa3cfb09be06a701
--- /dev/null
+++ b/chrome/browser/resources/settings/controls/night_light_slider.html
@@ -0,0 +1,173 @@
+<html><head>
+<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="../prefs/prefs_behavior.html">
+</head><body><dom-module id="night-light-slider">
+ <template>
+ <style>
+ :host {
+ color: black;
+ cursor: default;
+ font-family: Sniglet;
stevenjb 2017/06/09 00:56:59 Sniglet? Ideally we shouldn't be defining a font-f
afakhry 2017/06/09 17:21:55 Done.
+ margin-top: 20px;
stevenjb 2017/06/09 00:56:59 We should probably avoid building margin into an e
afakhry 2017/06/09 17:21:54 Done.
+ padding: 0;
stevenjb 2017/06/09 00:56:59 Not needed?
afakhry 2017/06/09 17:21:54 Done.
+ text-align: center;
+ user-select: none;
+ }
+
+ #sliderContainer {
+ display: inline-block;
+ position: relative;
+ user-select: none;
+ width: 570px;
+ }
+
+ #sliderBar {
+ background-color: #ccc;
+ background-size: 100%;
+ display: inline-block;
+ height: 2px;
+ position: relative;
+ width: inherit;
+ }
+
+ .knob {
+ border-radius: 6px;
+ height: 12px;
+ left: 0;
+ margin-left: -6px;
+ margin-top: -5px;
+ 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;
+ }
+
+ .start {
+ background: rgb(51, 103, 214);
+ }
+
+ .end {
+ background: rgb(51, 103, 214);
+ }
stevenjb 2017/06/09 00:56:59 combine these?
afakhry 2017/06/09 17:21:54 Yes, sure. I had them while I was experimenting wi
+
+ #progressContainer {
+ height: 100%;
+ overflow: hidden;
+ position: absolute;
+ width: 100%;
+ }
+
+ .progress {
+ background: rgb(51, 103, 214);
+ height: 100%;
+ position: absolute;
+ z-index: 1;
+ }
+
+ #labelContainer {
+ height: 2em;
+ }
+
+ .label {
+ border-radius: 14px;
+ color: white;
+ font-family: Roboto-Bold;
+ font-size: 12px;
+ left: 0;
+ line-height: 1.5em;
+ margin-left: -2.5em;
+ position: absolute;
+ text-align: center;
+ vertical-align: middle;
+ width: 5em;
+ }
+
+ .end-label-overlap {
+ margin-top: -2em;
+ }
+
+ #markersContainer {
+ display: flex;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ width: 100%;
+ }
+
+ .markers {
+ background-color: black;
+ border-radius: 50%;
+ display: block;
+ height: 100%;
+ margin-left: -1px;
+ padding: 0;
+ position: absolute;
+ width: 2PX;
+ z-index: 2;
+ }
+
+ #legendContainer {
+ height: 10px;
+ position: relative;
+ width: inherit;
+ }
+
+ .legend {
stevenjb 2017/06/09 00:56:59 #legendContainer > div
afakhry 2017/06/09 17:21:54 Done.
+ color: rgb(100, 100, 100);
+ font-family: Roboto-Regular;
+ font-size: 12px;
+ margin-left: -2em;
+ position: absolute;
+ text-align: center;
+ top: 5px;
+ width: 4em;
+ }
+
stevenjb 2017/06/09 00:56:59 elim empty line
afakhry 2017/06/09 17:21:54 Done.
+ </style>
+
+ <div id="sliderContainer">
+ <div id="labelContainer">
+ <div id="startLabel" class="label start"
+ aria-label="$i18n{displayNightLightStartTime}">
+ [[startTime_]]
+ </div>
+ <div id="endLabel" class="label end"
+ aria-label="$i18n{displayNightLightStopTime}">
+ [[endTime_]]
+ </div>
+ </div>
+ <div id="sliderBar">
+ <div id="progressContainer">
+ <div id="endProgress" class="progress"></div>
+ <div id="startProgress" class="progress"></div>
+ </div>
+ <div id="markersContainer">
+ </div>
+ <div id="startKnob" class="knob start" tabindex="1" on-down="drag_"
+ on-up="drop_" on-track="continueDrag_"></div>
+ <div id="endKnob" class="knob end" tabindex="2" on-down="drag_"
+ on-up="drop_" on-track="continueDrag_"></div>
+ </div>
+ <div id="legendContainer">
+ <div class="legend" style="left: 0%;">6 PM</div>
+ <div class="legend" style="left: 25%;">12 AM</div>
+ <div class="legend" style="left: 50%;">6 AM</div>
+ <div class="legend" style="left: 75%;">12 PM</div>
+ <div class="legend" style="left: 100%;">6 PM</div>
+ </div>
+ </div>
+
+ </template>
+</dom-module>
+<script src="night_light_slider.js"></script></body></html>
« no previous file with comments | « chrome/browser/resources/settings/controls/compiled_resources2.gyp ('k') | chrome/browser/resources/settings/controls/night_light_slider.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698