Skip to content

GitLab

T
tangled
Commit 09ac01b3 authored by Takumi Fujimoto's avatar Takumi Fujimoto Committed by Commit Bot
Browse files
Options

Update Polymer paper-slider to v2.0.2 

Update from v1.0.15 by running third_party/polymer/v1_0/reproduce.sh.
This includes the fix for a bug in which the slider cannot be LTR on a RTL page.

Bug: 736954
Change-Id: I73f77fb0a053ec7f00b996a125f853848fbc56b6
Reviewed-on: https://chromium-review.googlesource.com/565067Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Takumi Fujimoto <takumif@chromium.org>
Cr-Commit-Position: refs/heads/master@{#485429}
parent a6fb014f
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 55 deletions
third_party/polymer/v1_0/bower.json
View file @ 09ac01b3
......@@ -49,7 +49,7 @@
"paper-radio-button": "PolymerElements/paper-radio-button#1.4.0",
"paper-radio-group": "PolymerElements/paper-radio-group#1.2.0",
"paper-ripple": "PolymerElements/paper-ripple#1.0.9",
"paper-slider": "PolymerElements/paper-slider#1.0.15",
"paper-slider": "PolymerElements/paper-slider#2.0.2",
"paper-spinner": "PolymerElements/paper-spinner#1.2.0",
"paper-styles": "PolymerElements/paper-styles#1.1.4",
"paper-tabs": "PolymerElements/paper-tabs#1.6.2",
......
third_party/polymer/v1_0/components-chromium/paper-slider/bower.json
View file @ 09ac01b3
{
"name": "paper-slider",
"version": "1.0.15",
"version": "2.0.2",
"description": "A material design-style slider",
"license": "http://polymer.github.io/LICENSE.txt",
"authors": "The Polymer Authors",
......@@ -17,22 +17,51 @@
},
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
"polymer": "Polymer/polymer#1.9 - 2",
"paper-input": "PolymerElements/paper-input#1 - 2",
"paper-progress": "PolymerElements/paper-progress#1 - 2",
"iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
"paper-styles": "PolymerElements/paper-styles#1 - 2",
"iron-behaviors": "PolymerElements/iron-behaviors#1 - 2",
"paper-behaviors": "PolymerElements/paper-behaviors#1 - 2",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#1 - 2",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#1 - 2"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"iron-component-page": "PolymerElements/iron-component-page#1 - 2",
"iron-demo-helpers": "polymerelements/iron-demo-helpers#1 - 2",
"iron-test-helpers": "polymerelements/iron-test-helpers#1 - 2",
"test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
"web-component-tester": "^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"variants": {
"1.x": {
"dependencies": {
"polymer": "Polymer/polymer#^1.9",
"paper-input": "PolymerElements/paper-input#^1.0.0",
"paper-progress": "PolymerElements/paper-progress#^1.0.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "polymerelements/iron-demo-helpers#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "Polymer/web-component-tester#^4.0.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}
third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider-extracted.js
View file @ 09ac01b3
......@@ -141,16 +141,16 @@ Polymer({
this.setAttribute('aria-valuemax', max);
this.setAttribute('aria-valuenow', value);
this._positionKnob(this._calcRatio(value));
this._positionKnob(this._calcRatio(value) * 100);
},
_valueChanged: function() {
this.fire('value-change');
this.fire('value-change', {composed: true});
},
_immediateValueChanged: function() {
if (this.dragging) {
this.fire('immediate-value-change');
this.fire('immediate-value-change', {composed: true});
} else {
this.value = this.immediateValue;
}
......@@ -171,17 +171,17 @@ Polymer({
_positionKnob: function(ratio) {
this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
this._setRatio(this._calcRatio(this.immediateValue));
this._setRatio(this._calcRatio(this.immediateValue) * 100);
this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
this.$.sliderKnob.style.left = this.ratio + '%';
if (this.dragging) {
this._knobstartx = this.ratio * this._w;
this._knobstartx = (this.ratio * this._w) / 100;
this.translate3d(0, 0, 0, this.$.sliderKnob);
}
},
_calcKnobPosition: function(ratio) {
return (this.max - this.min) * ratio + this.min;
return (this.max - this.min) * ratio / 100 + this.min;
},
_onTrack: function(event) {
......@@ -200,8 +200,9 @@ Polymer({
},
_trackStart: function(event) {
this._setTransiting(false);
this._w = this.$.sliderBar.offsetWidth;
this._x = this.ratio * this._w;
this._x = this.ratio * this._w / 100;
this._startx = this._x;
this._knobstartx = this._startx;
this._minx = - this._startx;
......@@ -220,7 +221,7 @@ Polymer({
this._maxx, Math.max(this._minx, event.detail.dx * direction));
this._x = this._startx + dx;
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w * 100));
this._setImmediateValue(immediateValue);
// update knob's position
......@@ -238,7 +239,7 @@ Polymer({
s.transform = s.webkitTransform = '';
this.fire('change');
this.fire('change', {composed: true});
},
_knobdown: function(event) {
......@@ -254,9 +255,9 @@ Polymer({
_bardown: function(event) {
this._w = this.$.sliderBar.offsetWidth;
var rect = this.$.sliderBar.getBoundingClientRect();
var ratio = (event.detail.x - rect.left) / this._w;
var ratio = (event.detail.x - rect.left) / this._w * 100;
if (this._isRTL) {
ratio = 1 - ratio;
ratio = 100 - ratio;
}
var prevRatio = this.ratio;
......@@ -275,7 +276,7 @@ Polymer({
}
this.async(function() {
this.fire('change');
this.fire('change', {composed: true});
});
// cancel selection
......@@ -372,7 +373,7 @@ Polymer({
_changeValue: function(event) {
this.value = event.target.value;
this.fire('change');
this.fire('change', {composed: true});
},
_inputKeyDown: function(event) {
......
third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html
View file @ 09ac01b3
......@@ -67,9 +67,9 @@ Custom property | Description | Default
<template strip-whitespace="">
<style>
:host {
@apply(--layout);
@apply(--layout-justified);
@apply(--layout-center);
@apply --layout;
@apply --layout-justified;
@apply --layout-center;
width: 200px;
cursor: default;
-webkit-user-select: none;
......@@ -77,10 +77,10 @@ Custom property | Description | Default
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
--paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
--paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --paper-grey-400);
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --paper-grey-400);
--paper-progress-active-color: var(--paper-slider-active-color, var(--google-blue-700));
--paper-progress-secondary-color: var(--paper-slider-secondary-color, var(--google-blue-300));
--paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, var(--paper-grey-400));
--paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, var(--paper-grey-400));
--calculated-paper-slider-height: var(--paper-slider-height, 2px);
}
......@@ -88,12 +88,35 @@ Custom property | Description | Default
:host(:focus) {
outline: none;
}
/**
* NOTE(keanulee): Though :host-context is not universally supported, some pages
* still rely on paper-slider being flipped when dir="rtl" is set on body. For full
* compatability, dir="rtl" must be explicitly set on paper-slider.
*/
:host-context([dir="rtl"]) #sliderContainer {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
/**
* NOTE(keanulee): This is separate from the rule above because :host-context may
* not be recognized.
*/
:host([dir="rtl"]) #sliderContainer {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
/**
* NOTE(keanulee): Needed to override the :host-context rule (where supported)
* to support LTR sliders in RTL pages.
*/
:host([dir="ltr"]) #sliderContainer {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#sliderContainer {
position: relative;
width: 100%;
......@@ -137,7 +160,7 @@ Custom property | Description | Default
padding: 15px 0;
width: 100%;
background-color: var(--paper-slider-bar-color, transparent);
--paper-progress-container-color: var(--paper-slider-container-color, --paper-grey-400);
--paper-progress-container-color: var(--paper-slider-container-color, var(--paper-grey-400));
--paper-progress-height: var(--calculated-paper-slider-height);
}
......@@ -149,11 +172,11 @@ Custom property | Description | Default
right: -1px;
box-sizing: border-box;
pointer-events: none;
@apply(--layout-horizontal);
@apply --layout-horizontal;
}
.slider-marker {
@apply(--layout-flex);
@apply --layout-flex;
}
.slider-markers::after,
.slider-marker::after {
......@@ -196,8 +219,8 @@ Custom property | Description | Default
margin: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
background-color: var(--paper-slider-knob-color, --google-blue-700);
border: 2px solid var(--paper-slider-knob-color, --google-blue-700);
background-color: var(--paper-slider-knob-color, var(--google-blue-700));
border: 2px solid var(--paper-slider-knob-color, var(--google-blue-700));
border-radius: 50%;
-moz-box-sizing: border-box;
......@@ -216,11 +239,11 @@ Custom property | Description | Default
.ring > .slider-knob > .slider-knob-inner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
}
.slider-knob-inner::before {
background-color: var(--paper-slider-pin-color, --google-blue-700);
background-color: var(--paper-slider-pin-color, var(--google-blue-700));
}
.pin > .slider-knob > .slider-knob-inner::before {
......@@ -244,7 +267,7 @@ Custom property | Description | Default
}
.pin.ring > .slider-knob > .slider-knob-inner::before {
background-color: var(--paper-slider-pin-start-color, --paper-grey-400);
background-color: var(--paper-slider-pin-start-color, var(--paper-grey-400));
}
.pin.expand > .slider-knob > .slider-knob-inner::before {
......@@ -280,7 +303,7 @@ Custom property | Description | Default
--paper-input-container-input: {
text-align: center;
};
@apply(--paper-slider-input);
@apply --paper-slider-input;
}
/* disabled state */
......@@ -289,19 +312,19 @@ Custom property | Description | Default
}
.disabled > .slider-knob > .slider-knob-inner {
background-color: var(--paper-slider-disabled-knob-color, --paper-grey-400);
border: 2px solid var(--paper-slider-disabled-knob-color, --paper-grey-400);
background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
-webkit-transform: scale3d(0.75, 0.75, 1);
transform: scale3d(0.75, 0.75, 1);
}
.disabled.ring > .slider-knob > .slider-knob-inner {
background-color: var(--paper-slider-knob-start-color, transparent);
border: 2px solid var(--paper-slider-knob-start-border-color, --paper-grey-400);
border: 2px solid var(--paper-slider-knob-start-border-color, var(--paper-grey-400));
}
paper-ripple {
color: var(--paper-slider-knob-color, --google-blue-700);
color: var(--paper-slider-knob-color, var(--google-blue-700));
}
</style>
......
third_party/polymer/v1_0/components_summary.txt
View file @ 09ac01b3
......@@ -282,9 +282,9 @@ Tree link: https://github.com/PolymerElements/paper-ripple/tree/v1.0.9
Name: paper-slider
Repository: https://github.com/PolymerElements/paper-slider.git
Tree: v1.0.15
Revision: b678296daa93526adc8bf4b75628a7a5759bdeea
Tree link: https://github.com/PolymerElements/paper-slider/tree/v1.0.15
Tree: v2.0.2
Revision: 2abcf4052ce04ad450b06f6800f11055cb26ce5b
Tree link: https://github.com/PolymerElements/paper-slider/tree/v2.0.2
Name: paper-spinner
Repository: https://github.com/PolymerElements/paper-spinner.git
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment