Chromium Code Reviews Chromium Code Reviews
Issue 2951483003:
[Night Light] CL9: Add localization for time's AM and PM (Closed)
| OLD | NEW |
|---|---|
| 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="../prefs/prefs_behavior.html"> | 5 <link rel="import" href="../prefs/prefs_behavior.html"> |
| 6 </head><body><dom-module id="night-light-slider"> | 6 </head><body><dom-module id="night-light-slider"> |
| 7 <template> | 7 <template> |
| 8 <style> | 8 <style> |
| 9 :host { | 9 :host { |
| 10 cursor: default; | 10 cursor: default; |
| (...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 110 #legendContainer { | 110 #legendContainer { |
| 111 height: 10px; | 111 height: 10px; |
| 112 position: relative; | 112 position: relative; |
| 113 width: inherit; | 113 width: inherit; |
| 114 } | 114 } |
| 115 | 115 |
| 116 #legendContainer > div { | 116 #legendContainer > div { |
| 117 color: rgb(100, 100, 100); | 117 color: rgb(100, 100, 100); |
| 118 font-family: Roboto-Regular; | 118 font-family: Roboto-Regular; |
| 119 font-size: 12px; | 119 font-size: 12px; |
| 120 margin-left: -2em; | 120 margin-left: -2.5em; |
| 121 position: absolute; | 121 position: absolute; |
| 122 text-align: center; | 122 text-align: center; |
| 123 top: 5px; | 123 top: 5px; |
| 124 width: 4em; | 124 width: 5em; |
| 125 } | 125 } |
| 126 </style> | 126 </style> |
| 127 | 127 |
| 128 <div id="sliderContainer"> | 128 <div id="sliderContainer"> |
| 129 <div id="labelContainer"> | 129 <div id="labelContainer"> |
| 130 <div id="startLabel" class="label" | 130 <div id="startLabel" class="label" |
| 131 aria-label="$i18n{displayNightLightStartTime}"> | 131 aria-label="$i18n{displayNightLightStartTime}"> |
| 132 [[startTime_]] | 132 [[startTime_]] |
| 133 </div> | 133 </div> |
| 134 <div id="endLabel" class="label" | 134 <div id="endLabel" class="label" |
| 135 aria-label="$i18n{displayNightLightStopTime}"> | 135 aria-label="$i18n{displayNightLightStopTime}"> |
| 136 [[endTime_]] | 136 [[endTime_]] |
| 137 </div> | 137 </div> |
| 138 </div> | 138 </div> |
| 139 <div id="sliderBar"> | 139 <div id="sliderBar"> |
| 140 <div id="progressContainer"> | 140 <div id="progressContainer"> |
| 141 <div id="endProgress" class="progress"></div> | 141 <div id="endProgress" class="progress"></div> |
| 142 <div id="startProgress" class="progress"></div> | 142 <div id="startProgress" class="progress"></div> |
| 143 </div> | 143 </div> |
| 144 <div id="markersContainer"> | 144 <div id="markersContainer"> |
| 145 </div> | 145 </div> |
| 146 <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_" | 146 <div id="startKnob" class="knob" tabindex="1" on-down="startDrag_" |
| 147 on-up="endDrag_" on-track="continueDrag_"></div> | 147 on-up="endDrag_" on-track="continueDrag_"></div> |
| 148 <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_" | 148 <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_" |
| 149 on-up="endDrag_" on-track="continueDrag_"></div> | 149 on-up="endDrag_" on-track="continueDrag_"></div> |
| 150 </div> | 150 </div> |
| 151 <div id="legendContainer"> | 151 <div id="legendContainer"> |
| 152 <!-- TODO(afakhry): Check if these values need to be localized. --> | 152 <!-- 6:00 PM == 18 * 60 = 1080 minutes from 00:00. --> |
|
stevenjb
2017/06/20 18:16:06
nit: We could avoid these comments with a well nam
afakhry
2017/06/20 18:31:23
Sounds good. I added a documented helper function.
| |
| 153 <div style="left: 0%;">6 PM</div> | 153 <div style="left: 0%;">[[offsetMinutesToTimeString_(1080)]]</div> |
| 154 <div style="left: 25%;">12 AM</div> | 154 <!-- 12:00 AM == 0 minutes from 00:00. --> |
| 155 <div style="left: 50%;">6 AM</div> | 155 <div style="left: 25%;">[[offsetMinutesToTimeString_(0)]]</div> |
| 156 <div style="left: 75%;">12 PM</div> | 156 <!-- 6:00 AM == 6 * 60 = 360 minutes from 00:00. --> |
| 157 <div style="left: 100%;">6 PM</div> | 157 <div style="left: 50%;">[[offsetMinutesToTimeString_(360)]]</div> |
| 158 <!-- 12:00 PM == 12 * 60 = 720 minutes from 00:00. --> | |
| 159 <div style="left: 75%;">[[offsetMinutesToTimeString_(720)]]</div> | |
| 160 <!-- 6:00 PM == 18 * 60 = 1080 minutes from 00:00. --> | |
| 161 <div style="left: 100%;">[[offsetMinutesToTimeString_(1080)]]</div> | |
| 158 </div> | 162 </div> |
| 159 </div> | 163 </div> |
| 160 | 164 |
| 161 </template> | 165 </template> |
| 162 </dom-module> | 166 </dom-module> |
| 163 <script src="night_light_slider.js"></script></body></html> | 167 <script src="night_light_slider.js"></script></body></html> |
| OLD | NEW |
