| 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="startDrag_" |
| 147 on-up="endDrag_" on-track="continueDrag_"></div> |
| 148 <div id="endKnob" class="knob" tabindex="2" on-down="startDrag_" |
| 149 on-up="endDrag_" on-track="continueDrag_"></div> |
| 150 </div> |
| 151 <div id="legendContainer"> |
| 152 <!-- TODO(afakhry): Check if these values need to be localized. --> |
| 153 <div style="left: 0%;">6 PM</div> |
| 154 <div style="left: 25%;">12 AM</div> |
| 155 <div style="left: 50%;">6 AM</div> |
| 156 <div style="left: 75%;">12 PM</div> |
| 157 <div style="left: 100%;">6 PM</div> |
| 158 </div> |
| 159 </div> |
| 160 |
| 161 </template> |
| 162 </dom-module> |
| 163 <script src="night_light_slider.js"></script></body></html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2915753003:
[Night Light] CL5: Schedule Settings (Closed)
