Chromium Code Reviews Chromium Code Reviews
Issue 2915753003:
[Night Light] CL5: Schedule Settings (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <html><head> | |
| 2 <link rel="import" href="chrome://resources/html/polymer.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"> | |
| 5 <link rel="import" href="../prefs/prefs_behavior.html"> | |
| 6 </head><body><dom-module id="night-light-slider"> | |
| 7 <template> | |
| 8 <style> | |
| 9 :host { | |
| 10 cursor: default; | |
| 11 text-align: center; | |
| 12 user-select: none; | |
| 13 } | |
| 14 | |
| 15 #sliderContainer { | |
| 16 display: inline-block; | |
| 17 position: relative; | |
| 18 user-select: none; | |
| 19 width: 570px; | |
| 20 } | |
| 21 | |
| 22 #sliderBar { | |
| 23 background-color: #ccc; | |
| 24 background-size: 100%; | |
| 25 display: inline-block; | |
| 26 height: 2px; | |
| 27 position: relative; | |
| 28 width: inherit; | |
| 29 } | |
| 30 | |
| 31 .knob { | |
| 32 background: rgb(51, 103, 214); | |
| 33 border-radius: 6px; | |
| 34 height: 12px; | |
| 35 left: 0; | |
| 36 margin-left: -6px; | |
| 37 margin-top: -5px; | |
| 38 position: absolute; | |
| 39 width: 12px; | |
| 40 z-index: 3; | |
| 41 } | |
| 42 | |
| 43 .knob:focus { | |
| 44 box-shadow: 0 0 5pt 5pt rgb(204, 217, 245); | |
| 45 outline: none; | |
| 46 } | |
| 47 | |
| 48 .expanded-knob { | |
| 49 transform: scale(1.5); | |
| 50 z-index: 3; | |
| 51 } | |
| 52 | |
| 53 #progressContainer { | |
| 54 height: 100%; | |
| 55 overflow: hidden; | |
| 56 position: absolute; | |
| 57 width: 100%; | |
| 58 } | |
| 59 | |
| 60 .progress { | |
| 61 background: rgb(51, 103, 214); | |
| 62 height: 100%; | |
| 63 position: absolute; | |
| 64 z-index: 1; | |
| 65 } | |
| 66 | |
| 67 #labelContainer { | |
| 68 height: 2em; | |
| 69 } | |
| 70 | |
| 71 .label { | |
| 72 background: rgb(51, 103, 214); | |
| 73 border-radius: 14px; | |
| 74 color: white; | |
| 75 font-family: Roboto-Bold; | |
| 76 font-size: 12px; | |
| 77 left: 0; | |
| 78 line-height: 1.5em; | |
| 79 margin-left: -2.5em; | |
| 80 position: absolute; | |
| 81 text-align: center; | |
| 82 vertical-align: middle; | |
| 83 width: 5em; | |
| 84 } | |
| 85 | |
| 86 .end-label-overlap { | |
| 87 margin-top: -2em; | |
| 88 } | |
| 89 | |
| 90 #markersContainer { | |
| 91 display: flex; | |
| 92 height: 100%; | |
| 93 left: 0; | |
| 94 position: absolute; | |
| 95 width: 100%; | |
| 96 } | |
| 97 | |
| 98 .markers { | |
| 99 background-color: black; | |
| 100 border-radius: 50%; | |
| 101 display: block; | |
| 102 height: 100%; | |
| 103 margin-left: -1px; | |
| 104 padding: 0; | |
| 105 position: absolute; | |
| 106 width: 2PX; | |
| 107 z-index: 2; | |
| 108 } | |
| 109 | |
| 110 #legendContainer { | |
| 111 height: 10px; | |
| 112 position: relative; | |
| 113 width: inherit; | |
| 114 } | |
| 115 | |
| 116 #legendContainer > div { | |
| 117 color: rgb(100, 100, 100); | |
| 118 font-family: Roboto-Regular; | |
| 119 font-size: 12px; | |
| 120 margin-left: -2em; | |
| 121 position: absolute; | |
| 122 text-align: center; | |
| 123 top: 5px; | |
| 124 width: 4em; | |
| 125 } | |
| 126 </style> | |
| 127 | |
| 128 <div id="sliderContainer"> | |
| 129 <div id="labelContainer"> | |
| 130 <div id="startLabel" class="label" | |
| 131 aria-label="$i18n{displayNightLightStartTime}"> | |
| 132 [[startTime_]] | |
| 133 </div> | |
| 134 <div id="endLabel" class="label" | |
| 135 aria-label="$i18n{displayNightLightStopTime}"> | |
| 136 [[endTime_]] | |
| 137 </div> | |
| 138 </div> | |
| 139 <div id="sliderBar"> | |
| 140 <div id="progressContainer"> | |
| 141 <div id="endProgress" class="progress"></div> | |
| 142 <div id="startProgress" class="progress"></div> | |
| 143 </div> | |
| 144 <div id="markersContainer"> | |
| 145 </div> | |
| 146 <div id="startKnob" class="knob" tabindex="1" on-down="drag_" | |
| 147 on-up="drop_" on-track="continueDrag_"></div> | |
| 148 <div id="endKnob" class="knob" tabindex="2" on-down="drag_" | |
| 149 on-up="drop_" on-track="continueDrag_"></div> | |
| 150 </div> | |
| 151 <div id="legendContainer"> | |
| 152 <div style="left: 0%;">6 PM</div> | |
|
stevenjb
2017/06/09 22:51:45
Check to see whether these might need to be locali
afakhry
2017/06/12 18:07:08
Done.
| |
| 153 <div style="left: 25%;">12 AM</div> | |
| 154 <div style="left: 50%;">6 AM</div> | |
| 155 <div style="left: 75%;">12 PM</div> | |
| 156 <div style="left: 100%;">6 PM</div> | |
| 157 </div> | |
| 158 </div> | |
| 159 | |
| 160 </template> | |
| 161 </dom-module> | |
| 162 <script src="night_light_slider.js"></script></body></html> | |
| OLD | NEW |
