blob: d6dfdfadcd53c4f819664e577de32122f37ba4ce [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<dom-module id="night-light-slider">
<template>
<style>
:host {
cursor: default;
font-weight: 500;
text-align: center;
user-select: none;
}
#sliderContainer {
display: inline-block;
position: relative;
user-select: none;
width: 100%;
}
#sliderBar {
background-color: #ccc;
background-size: 100%;
display: inline-block;
height: 2px;
position: relative;
width: inherit;
}
.knob {
height: 32px;
margin-left: -16px;
margin-top: -15px;
position: absolute;
width: 32px;
z-index: 3;
}
.knob:focus {
outline: none;
}
.knob-inner {
background: var(--google-blue-700);
border-radius: 6px;
height: 12px;
left: 0;
margin: 10px;
position: absolute;
width: 12px;
z-index: 3;
}
.knob-inner:focus {
outline: none;
}
.expanded-knob {
transform: scale(1.25);
z-index: 3;
}
#progressContainer {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.progress {
background: var(--google-blue-700);
height: 100%;
position: absolute;
z-index: 1;
}
#labelContainer {
height: 1.75em;
}
.label {
background: var(--google-blue-700);
border-radius: 14px;
color: white;
font-size: 12px;
left: 0;
line-height: 1.5em;
margin-left: -2.5em;
position: absolute;
text-align: center;
transition: margin-top 200ms cubic-bezier(0, 0, 0.2, 1);
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;
}
#legendContainer > div {
color: rgb(100, 100, 100);
font-size: 12px;
margin-left: -2.5em;
position: absolute;
text-align: center;
top: 5px;
width: 5em;
}
paper-ripple {
color: var(--google-blue-700);
}
</style>
<div id="sliderContainer">
<div id="labelContainer">
<div id="startLabel" class="label"
aria-label="$i18n{displayNightLightStartTime}">
[[getTimeString_(prefs.ash.night_light.custom_start_time.value,
shouldUse24Hours_)]]
</div>
<div id="endLabel" class="label"
aria-label="$i18n{displayNightLightStopTime}">
[[getTimeString_(prefs.ash.night_light.custom_end_time.value,
shouldUse24Hours_)]]
</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" tabindex="1" on-down="startDrag_"
on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
on-blur="onBlur_">
<div class="knob-inner" tabindex="-1"></div>
</div>
<div id="endKnob" class="knob" tabindex="2" on-down="startDrag_"
on-up="endDrag_" on-track="continueDrag_" on-focus="onFocus_"
on-blur="onBlur_">
<div class="knob-inner" tabindex="-1"></div>
</div>
</div>
<div id="legendContainer">
<div style="[[getLegendStyle_(0, isRTL_)]]">
[[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
</div>
<div style="[[getLegendStyle_(25, isRTL_)]]">
[[getLocaleTimeString_(0, 0, shouldUse24Hours_)]]
</div>
<div style="[[getLegendStyle_(50, isRTL_)]]">
[[getLocaleTimeString_(6, 0, shouldUse24Hours_)]]
</div>
<div style="[[getLegendStyle_(75, isRTL_)]]">
[[getLocaleTimeString_(12, 0, shouldUse24Hours_)]]
</div>
<div style="[[getLegendStyle_(100, isRTL_)]]">
[[getLocaleTimeString_(18, 0, shouldUse24Hours_)]]
</div>
</div>
<div id="dummyRippleContainer" hidden></div>
</div>
</template>
<script src="night_light_slider.js"></script>
</dom-module>