mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
Luke Pulverenti
parent
02e924e3c5
commit
05b25af69f
55 changed files with 1554 additions and 907 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.1.5",
|
||||
"version": "1.1.6",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-input": "PolymerElements/iron-input#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -47,11 +47,11 @@
|
|||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.1.5",
|
||||
"_release": "1.1.6",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.5",
|
||||
"commit": "0aa8318b5e026688f94c78c7673acabf5bad0f17"
|
||||
"tag": "v1.1.6",
|
||||
"commit": "d918956322b733ee7673aec6e1ce9939aadb4c63"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||
"_target": "^1.0.9",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
|
|||
|
||||
If you edit that file, it will get updated everywhere else.
|
||||
If you edit this file, your changes will get overridden :)
|
||||
|
||||
You can however override the jsbin link with one that's customized to this
|
||||
specific element:
|
||||
|
||||
jsbin=https://jsbin.com/cagaye/edit?html,output
|
||||
-->
|
||||
# Polymer Elements
|
||||
## Guide for Contributors
|
||||
|
|
@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
|||
3. Click the `paper-foo` element.
|
||||
```
|
||||
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
|
||||
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
|
||||
|
||||
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
|
||||
|
||||
|
|
@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
|
|||
|
||||
When submitting pull requests, please provide:
|
||||
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
|
||||
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, #40
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.1.5",
|
||||
"version": "1.1.6",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
|
||||
"iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
|
||||
"iron-input": "PolymerElements/iron-input#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
||||
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -365,13 +365,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
listeners: {
|
||||
'addon-attached': '_onAddonAttached',
|
||||
'focus': '_onFocus'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_focusedControlStateChanged(focused)'
|
||||
],
|
||||
|
||||
keyBindings: {
|
||||
'shift+tab:keydown': '_onShiftTabDown'
|
||||
},
|
||||
|
|
@ -440,12 +435,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
},
|
||||
|
||||
/**
|
||||
* Forward focus to inputElement
|
||||
* Forward focus to inputElement. Overriden from IronControlState.
|
||||
*/
|
||||
_onFocus: function() {
|
||||
if (!this._shiftTabPressed) {
|
||||
_focusBlurHandler: function(event) {
|
||||
if (this._shiftTabPressed)
|
||||
return;
|
||||
|
||||
Polymer.IronControlState._focusBlurHandler.call(this, event);
|
||||
|
||||
// Forward the focus to the nested input.
|
||||
if (this.focused)
|
||||
this._focusableElement.focus();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -497,24 +497,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
return placeholder || alwaysFloatLabel;
|
||||
},
|
||||
|
||||
_focusedControlStateChanged: function(focused) {
|
||||
// IronControlState stops the focus and blur events in order to redispatch them on the host
|
||||
// element, but paper-input-container listens to those events. Since there are more
|
||||
// pending work on focus/blur in IronControlState, I'm putting in this hack to get the
|
||||
// input focus state working for now.
|
||||
if (!this.$.container) {
|
||||
this.$.container = Polymer.dom(this.root).querySelector('paper-input-container');
|
||||
if (!this.$.container) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (focused) {
|
||||
this.$.container._onFocus();
|
||||
} else {
|
||||
this.$.container._onBlur();
|
||||
}
|
||||
},
|
||||
|
||||
_updateAriaLabelledBy: function() {
|
||||
var label = Polymer.dom(this.root).querySelector('label');
|
||||
if (!label) {
|
||||
|
|
|
|||
|
|
@ -72,13 +72,13 @@ Custom property | Description | Default
|
|||
|
||||
state.value = state.value || '';
|
||||
|
||||
// Account for the textarea's new lines.
|
||||
var str = state.value.replace(/(\r\n|\n|\r)/g, '--').length;
|
||||
var counter = state.value.length;
|
||||
|
||||
if (state.inputElement.hasAttribute('maxlength')) {
|
||||
str += '/' + state.inputElement.getAttribute('maxlength');
|
||||
counter += '/' + state.inputElement.getAttribute('maxlength');
|
||||
}
|
||||
this._charCounterStr = str;
|
||||
|
||||
this._charCounterStr = counter;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
|
||||
|
|
@ -74,8 +73,8 @@ The following custom properties and mixins are available for styling:
|
|||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-input-container-color` | Label and underline color when the input is not focused | `--secondary-text-color`
|
||||
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--default-primary-color`
|
||||
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--google-red-500`
|
||||
`--paper-input-container-focus-color` | Label and underline color when the input is focused | `--primary-color`
|
||||
`--paper-input-container-invalid-color` | Label and underline color when the input is is invalid | `--error-color`
|
||||
`--paper-input-container-input-color` | Input foreground color | `--primary-text-color`
|
||||
`--paper-input-container` | Mixin applied to the container | `{}`
|
||||
`--paper-input-container-disabled` | Mixin applied to the container when it's disabled | `{}`
|
||||
|
|
@ -125,8 +124,9 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
.focused-line {
|
||||
@apply(--layout-fit);
|
||||
|
||||
background: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
background: var(--paper-input-container-focus-color, --primary-color);
|
||||
height: 2px;
|
||||
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-transform: scale3d(0,1,1);
|
||||
|
|
@ -145,7 +145,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
}
|
||||
|
||||
.underline.is-invalid .focused-line {
|
||||
background: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
background: var(--paper-input-container-invalid-color, --error-color);
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
-webkit-transition: -webkit-transform 0.25s;
|
||||
|
|
@ -157,8 +157,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
.unfocused-line {
|
||||
@apply(--layout-fit);
|
||||
|
||||
height: 1px;
|
||||
background: var(--paper-input-container-color, --secondary-text-color);
|
||||
height: 1px;
|
||||
|
||||
@apply(--paper-input-container-underline);
|
||||
}
|
||||
|
|
@ -174,6 +174,7 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
.label-and-input-container {
|
||||
@apply(--layout-flex-auto);
|
||||
@apply(--layout-relative);
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -194,26 +195,26 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
width: 100%;
|
||||
font: inherit;
|
||||
color: var(--paper-input-container-color, --secondary-text-color);
|
||||
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
||||
transition: transform 0.25s, width 0.25s;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
|
||||
@apply(--paper-font-common-nowrap);
|
||||
@apply(--paper-font-subhead);
|
||||
@apply(--paper-input-container-label);
|
||||
@apply(--paper-transition-easing);
|
||||
}
|
||||
|
||||
.input-content.label-is-floating ::content label,
|
||||
.input-content.label-is-floating ::content .paper-input-label {
|
||||
-webkit-transform: translateY(-75%) scale(0.75);
|
||||
transform: translateY(-75%) scale(0.75);
|
||||
-webkit-transition: -webkit-transform 0.25s, width 0.25s;
|
||||
transition: transform 0.25s, width 0.25s;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
|
||||
/* Since we scale to 75/100 of the size, we actually have 100/75 of the
|
||||
original space now available */
|
||||
width: 133%;
|
||||
|
||||
@apply(--paper-transition-easing);
|
||||
@apply(--paper-input-container-label-floating);
|
||||
}
|
||||
|
||||
|
|
@ -229,14 +230,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
|
||||
.input-content.label-is-highlighted ::content label,
|
||||
.input-content.label-is-highlighted ::content .paper-input-label {
|
||||
color: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
color: var(--paper-input-container-focus-color, --primary-color);
|
||||
|
||||
@apply(--paper-input-container-label-focus);
|
||||
}
|
||||
|
||||
.input-content.is-invalid ::content label,
|
||||
.input-content.is-invalid ::content .paper-input-label {
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
}
|
||||
|
||||
.input-content.label-is-hidden ::content label,
|
||||
|
|
@ -266,12 +267,14 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
|
||||
::content [prefix] {
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-input-prefix);
|
||||
@apply(--layout-flex-none);
|
||||
}
|
||||
|
||||
::content [suffix] {
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-input-suffix);
|
||||
@apply(--layout-flex-none);
|
||||
}
|
||||
|
|
@ -290,11 +293,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
}
|
||||
|
||||
.add-on-content.is-invalid ::content * {
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
}
|
||||
|
||||
.add-on-content.is-highlighted ::content * {
|
||||
color: var(--paper-input-container-focus-color, --default-primary-color);
|
||||
color: var(--paper-input-container-focus-color, --primary-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../paper-styles/color.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="paper-input-addon-behavior.html">
|
||||
|
||||
|
|
@ -28,7 +27,7 @@ The following custom properties and mixins are available for styling:
|
|||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-input-container-invalid-color` | The foreground color of the error | `--google-red-500`
|
||||
`--paper-input-container-invalid-color` | The foreground color of the error | `--error-color`
|
||||
`--paper-input-error` | Mixin applied to the error | `{}`
|
||||
-->
|
||||
|
||||
|
|
@ -39,7 +38,7 @@ Custom property | Description | Default
|
|||
display: inline-block;
|
||||
visibility: hidden;
|
||||
|
||||
color: var(--paper-input-container-invalid-color, --google-red-500);
|
||||
color: var(--paper-input-container-invalid-color, --error-color);
|
||||
|
||||
@apply(--paper-font-caption);
|
||||
@apply(--paper-input-error);
|
||||
|
|
|
|||
|
|
@ -97,8 +97,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
var counter = Polymer.dom(input.root).querySelector('paper-input-char-counter')
|
||||
assert.ok(counter, 'paper-input-char-counter exists');
|
||||
|
||||
// A new line counts as two characters.
|
||||
assert.equal(counter._charCounterStr, input.value.length + 1, 'character counter shows the value length');
|
||||
assert.equal(counter._charCounterStr, input.value.length, 'character counter shows the value length');
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -196,23 +196,51 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
input = fixture('basic');
|
||||
});
|
||||
|
||||
test('focus/blur events fired on host element', function() {
|
||||
var nFocusEvents = 0;
|
||||
var nBlurEvents = 0;
|
||||
// At the moment, it is very hard to correctly fire exactly
|
||||
// one focus/blur events on a paper-input. This is because
|
||||
// when a paper-input is focused, it needs to focus
|
||||
// its underlying native input, which will also fire a `blur`
|
||||
// event.
|
||||
test('focus events fired on host element', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
nFocusEvents += 1;
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement);
|
||||
});
|
||||
input.addEventListener('blur', function() {
|
||||
nBlurEvents += 1;
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement);
|
||||
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
|
||||
assert.isTrue(nBlurEvents >= 1, 'blur event fired');
|
||||
MockInteractions.focus(input);
|
||||
});
|
||||
|
||||
test('focus events fired on host element if nested element is focused', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
assert(input.focused, 'input is focused');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement);
|
||||
});
|
||||
|
||||
test('blur events fired on host element', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input);
|
||||
});
|
||||
|
||||
test('blur events fired on host element nested element is blurred', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input.inputElement);
|
||||
});
|
||||
|
||||
test('focusing then bluring sets the focused attribute correctly', function() {
|
||||
MockInteractions.focus(input);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
MockInteractions.focus(input.inputElement);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
});
|
||||
|
||||
suite('focused styling (integration test)', function() {
|
||||
|
|
|
|||
|
|
@ -32,12 +32,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="has-tabindex">
|
||||
<template>
|
||||
<paper-textarea tabindex="0"></paper-textarea>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="label">
|
||||
<template>
|
||||
<paper-textarea label="foo"></paper-textarea>
|
||||
|
|
@ -139,33 +133,50 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
input = fixture('basic');
|
||||
});
|
||||
|
||||
test('focus/blur events fired on host element', function() {
|
||||
var nFocusEvents = 0;
|
||||
var nBlurEvents = 0;
|
||||
// At the moment, it is very hard to correctly fire exactly
|
||||
// one focus/blur events on a paper-textarea. This is because
|
||||
// when a paper-textarea is focused, it needs to focus
|
||||
// its underlying native textarea, which will also fire a `blur`
|
||||
// event.
|
||||
test('focus events fired on host element', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
nFocusEvents += 1;
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement.textarea);
|
||||
});
|
||||
input.addEventListener('blur', function() {
|
||||
nBlurEvents += 1;
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement.textarea);
|
||||
assert.isTrue(nFocusEvents >= 1, 'focus event fired');
|
||||
assert.isTrue(nBlurEvents >= 1, 'blur event fired')
|
||||
MockInteractions.focus(input);
|
||||
});
|
||||
|
||||
test('focus a textarea with tabindex', function(done) {
|
||||
var input = fixture('has-tabindex');
|
||||
flush(function() {
|
||||
assert.notEqual(document.activeElement, input._focusableElement);
|
||||
MockInteractions.focus(input);
|
||||
setTimeout(function() {
|
||||
assert.equal(document.activeElement, input.shadowRoot ? input : input._focusableElement);
|
||||
done();
|
||||
}, 1);
|
||||
})
|
||||
test('focus events fired on host element if nested element is focused', function() {
|
||||
input.addEventListener('focus', function(event) {
|
||||
assert(input.focused, 'input is focused');
|
||||
});
|
||||
MockInteractions.focus(input.inputElement.textarea);
|
||||
});
|
||||
|
||||
test('blur events fired on host element', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input);
|
||||
});
|
||||
|
||||
test('blur events fired on host element nested element is blurred', function() {
|
||||
MockInteractions.focus(input);
|
||||
input.addEventListener('blur', function(event) {
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
MockInteractions.blur(input.inputElement.textarea);
|
||||
});
|
||||
|
||||
test('focusing then bluring sets the focused attribute correctly', function() {
|
||||
MockInteractions.focus(input);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
MockInteractions.focus(input.inputElement.textarea);
|
||||
assert(input.focused, 'input is focused');
|
||||
MockInteractions.blur(input.inputElement.textarea);
|
||||
assert(!input.focused, 'input is blurred');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue