blob: cdfd00ea678db3e50ad267fd65460970285910db [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-behaviors/paper-inky-focus-behavior.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-range-behavior/iron-range-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-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<dom-module id="display-size-slider">
<template>
<style>
:host {
/* Counteract the margin on #sliderContainer and match the margin from
settings-slider.html */
-webkit-margin-end: -16px;
cursor: default;
display: inline-flex;
font-weight: 500;
min-width: 200px;
text-align: center;
user-select: none;
}
/* focus shows the ripple */
:host(:focus) {
outline: none;
}
:host-context([dir='rtl']) #sliderContainer {
transform: scaleX(-1);
}
/* We dont want the text to be flipped in rtl */
:host-context([dir='rtl']) #labelText,
:host-context([dir='rtl']) #subLabelContainer {
transform: scaleX(-1);
}
#sliderContainer {
display: inline-table;
height: 32px;
margin-left: 16px;
margin-right: 16px;
position: relative;
width: 100%;
}
#sliderContainer:focus {
outline: 0;
}
#labelContainer {
bottom: 36px;
display: none;
height: 1.75em;
position: absolute;
width: inherit;
z-index: 10;
}
/* Show the label on keyboard focus and mouse hover */
.dragging #labelContainer,
:host(:focus) #labelContainer,
#sliderContainer:hover #labelContainer,
.hover #labelContainer {
display: block;
}
.label {
background: var(--google-blue-700);
border-radius: 14px;
color: white;
font-size: 12px;
left: 0;
line-height: 1.5em;
padding: 0 8px;
position: absolute;
text-align: center;
transform: translateX(-50%);
transition: margin-top 200ms cubic-bezier(0, 0, 0.2, 1);
vertical-align: middle;
white-space: nowrap;
width: auto;
}
.bar-container {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
.slider-markers {
box-sizing: border-box;
height: 2px;
left: 0;
pointer-events: none;
position: absolute;
right: -1px;
top: 15px;
@apply --layout-horizontal;
}
.slider-marker {
@apply --layout-flex;
}
.slider-markers::after,
.slider-marker::after {
background-color: #000;
border-radius: 50%;
content: '';
display: block;
height: 2px;
margin-left: -1px;
width: 2px;
}
#sliderBar {
--paper-progress-container-color: var(--paper-grey-400);
--paper-progress-height: 2px;
background-color: transparent;
padding: 15px 0;
width: 100%;
}
.slider-knob {
height: 32px;
left: 0;
margin-left: -16px;
position: absolute;
top: 0;
width: 32px;
}
.slider-knob:focus {
outline: none;
}
.slider-knob-inner {
background-color: var(--google-blue-700);
border: 2px solid var(--google-blue-700);
border-radius: 50%;
box-sizing: border-box;
height: calc(100% - 20px);
margin: 10px;
transition-duration: 180ms;
transition-property: transform, background-color, border;
transition-timing-function: ease;
width: calc(100% - 20px);
}
.expand > .slider-knob > .slider-knob-inner {
transform: scale(1.5);
}
paper-ripple {
color: var(--google-blue-700);
}
#subLabelContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 24px;
pointer-events: none;
}
#subLabelContainer > div {
font-size: 12px;
font-weight: normal;
}
paper-progress {
--paper-progress-active-color: var(--google-blue-700);
--paper-progress-disabled-active-color: var(--paper-grey-400);
}
/* Styles for disabled state */
#sliderContainer.disabled {
pointer-events: none;
}
.disabled > .slider-knob > .slider-knob-inner {
transform: scale3d(0.75, 0.75, 1);
}
#subLabelContainer[disabled] {
color: var(--paper-grey-400);
}
</style>
<div id="sliderContainer"
class$="[[getClassNames_(expand, disabled, dragging)]]"
on-mouseout="onMouseOut_">
<div id="labelContainer" hidden$="[[shouldShowLabel_(ticks, index)]]"
aria-label="[[getLabelForIndex_(ticks, index)]]">
<div id="label" class="label">
<div id="labelText">
[[getLabelForIndex_(ticks, index)]]
</div>
</div>
</div>
<div class="bar-container" aria-hidden="true">
<paper-progress id="sliderBar" disabled$="[[disabled]]"
on-down="onBarDown_" on-up="onBarUp_" on-track="knobTrack_"
value="[[index]]" min="[[min]]" max="[[max]]">
</paper-progress>
</div>
<template is="dom-if" if="[[!disabled]]">
<div class="slider-markers">
<template is="dom-repeat" items="[[markers]]">
<div class="slider-marker"></div>
</template>
</div>
</template>
<div id="sliderKnob" class="slider-knob" on-down="knobDown_"
on-up="resetKnob_" on-track="knobTrack_">
<div class="slider-knob-inner"></div>
</div>
<div id="subLabelContainer" disabled$="[[disabled]]">
<div id="subLabelMin">[[minLabel]]</div>
<div id="subLabelMax">[[maxLabel]]</div>
</div>
</div>
</template>
<script src="display_size_slider.js"></script>
</dom-module>