mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
0b450116a5
commit
1a84e71a95
31 changed files with 646 additions and 495 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.0.7",
|
||||
"version": "1.0.8",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -40,13 +40,15 @@
|
|||
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.7",
|
||||
"_release": "1.0.8",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.7",
|
||||
"commit": "b3150c105a4599d50a2da0789789fa50fa73e644"
|
||||
"tag": "v1.0.8",
|
||||
"commit": "558a5637b544cca69a272a3dd1eb99e03284c396"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-input.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-input",
|
||||
"version": "1.0.7",
|
||||
"version": "1.0.8",
|
||||
"description": "Material design text fields",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -40,6 +40,8 @@
|
|||
"iron-validator-behavior": "PolymerElements/iron-validator-behavior#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -25,15 +25,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<link rel="import" href="../paper-input-char-counter.html">
|
||||
<link rel="import" href="../paper-textarea.html">
|
||||
<link rel="import" href="../../iron-input/iron-input.html">
|
||||
<link rel="import" href="../../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="ssn-input.html">
|
||||
|
||||
<link rel="stylesheet" href="../../paper-styles/paper-styles.html">
|
||||
<link rel="stylesheet" href="../../paper-styles/color.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
|
||||
<style>
|
||||
<style is="custom-style">
|
||||
body {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
paper-input.short {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
paper-icon-button {
|
||||
color: var(--paper-red-300);
|
||||
--paper-icon-button-ink-color: var(--paper-red-a100);
|
||||
--iron-icon-width: 15px;
|
||||
--iron-icon-height: 15px;
|
||||
padding: 0px 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
@ -78,6 +93,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<paper-textarea label="text area with rows and max-rows" rows="3" max-rows="4"><paper-textarea>
|
||||
</div>
|
||||
|
||||
<h4>Prefixes and Suffixes</h4>
|
||||
<div class="vertical-section">
|
||||
<paper-input class="short" label="total" type="number">
|
||||
<div prefix>$</div>
|
||||
</paper-input>
|
||||
|
||||
<paper-input class="short" label="username">
|
||||
<div suffix>@email.com</div>
|
||||
</paper-input>
|
||||
|
||||
<paper-input class="short" label="icons and buttons" id="inputWithButton">
|
||||
<iron-icon icon="search" prefix></iron-icon>
|
||||
<paper-icon-button suffix onclick="clearInput()"
|
||||
icon="clear" alt="clear" title="clear" tabindex="0">
|
||||
</paper-icon-button>
|
||||
</paper-input>
|
||||
</div>
|
||||
|
||||
<h4>Complex inputs</h4>
|
||||
<div class="vertical-section">
|
||||
<template is="dom-bind">
|
||||
|
@ -93,6 +126,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
function validate() {
|
||||
document.getElementById('inputForValidation').validate();
|
||||
}
|
||||
|
||||
function clearInput() {
|
||||
document.getElementById('inputWithButton').value = '';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -34,7 +34,7 @@ the attribute it listens to with the `attr-for-value` attribute.
|
|||
You can use a custom input element in a `<paper-input-container>`, for example to implement a
|
||||
compound input field like a social security number input. The custom input element should have the
|
||||
`paper-input-input` class, have a `notify:true` value property and optionally implements
|
||||
`Polymer.IronValidatableBehavior` if it is validatble.
|
||||
`Polymer.IronValidatableBehavior` if it is validatable.
|
||||
|
||||
<paper-input-container attr-for-value="ssn-value">
|
||||
<label>Social security number</label>
|
||||
|
@ -53,6 +53,17 @@ implements the `Polymer.PaperInputAddonBehavior` behavior. They are notified whe
|
|||
or validity changes, and may implement functionality such as error messages or character counters.
|
||||
They appear at the bottom of the input.
|
||||
|
||||
### Prefixes and suffixes
|
||||
These are child elements of a `<paper-input-container>` with the `prefix`
|
||||
or `suffix` attribute, and are displayed inline with the input, before or after.
|
||||
|
||||
<paper-input-container>
|
||||
<div prefix>$</div>
|
||||
<label>Total</label>
|
||||
<input is="iron-input">
|
||||
<paper-icon-button suffix icon="clear"></paper-icon-button>
|
||||
</paper-input-container>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
@ -150,8 +161,15 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
@apply(--paper-input-container-underline-disabled);
|
||||
}
|
||||
|
||||
.label-and-input-container {
|
||||
@apply(--layout-flex);
|
||||
@apply(--layout-relative);
|
||||
}
|
||||
|
||||
.input-content {
|
||||
position: relative;
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-end);
|
||||
}
|
||||
|
||||
.input-content ::content label,
|
||||
|
@ -213,6 +231,12 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
@apply(--paper-input-container-input);
|
||||
}
|
||||
|
||||
::content [prefix],
|
||||
::content [suffix] {
|
||||
@apply(--paper-font-subhead);
|
||||
@apply(--paper-input-container-input);
|
||||
}
|
||||
|
||||
/* Firefox sets a min-width on the input, which can cause layout issues */
|
||||
.input-content ::content input {
|
||||
min-width: 0;
|
||||
|
@ -239,7 +263,11 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
</template>
|
||||
|
||||
<div class$="[[_computeInputContentClass(noLabelFloat,alwaysFloatLabel,focused,invalid,_inputHasContent)]]">
|
||||
<content select=":not([add-on])"></content>
|
||||
<content select="[prefix]" id="prefix"></content>
|
||||
<div class="label-and-input-container">
|
||||
<content select=":not([add-on]):not([prefix]):not([suffix])"></content>
|
||||
</div>
|
||||
<content select="[suffix]"></content>
|
||||
</div>
|
||||
|
||||
<div class$="[[_computeUnderlineClass(focused,invalid)]]">
|
||||
|
@ -476,6 +504,8 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
_computeInputContentClass: function(noLabelFloat, alwaysFloatLabel, focused, invalid, _inputHasContent) {
|
||||
var cls = 'input-content';
|
||||
if (!noLabelFloat) {
|
||||
var label = this.querySelector('label');
|
||||
|
||||
if (alwaysFloatLabel || _inputHasContent) {
|
||||
cls += ' label-is-floating';
|
||||
if (invalid) {
|
||||
|
@ -483,6 +513,16 @@ This element is `display:block` by default, but you can set the `inline` attribu
|
|||
} else if (focused) {
|
||||
cls += " label-is-highlighted";
|
||||
}
|
||||
// The label might have a horizontal offset if a prefix element exists
|
||||
// which needs to be undone when displayed as a floating label.
|
||||
if (this.$.prefix && label && label.offsetParent) {
|
||||
label.style.left = -label.offsetParent.offsetLeft + 'px';
|
||||
}
|
||||
} else {
|
||||
// When the label is not floating, it should overlap the input element.
|
||||
if (label) {
|
||||
label.style.left = 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (_inputHasContent) {
|
||||
|
|
|
@ -25,6 +25,16 @@ It may include an optional error message or character counter.
|
|||
<paper-input error-message="Invalid input!" label="Input label"></paper-input>
|
||||
<paper-input char-counter label="Input label"></paper-input>
|
||||
|
||||
It can also include custom prefix or suffix elements, which are displayed
|
||||
before or after the text input itself. In order for an element to be
|
||||
considered as a prefix, it must have the `prefix` attribute (and similarly
|
||||
for `suffix`).
|
||||
|
||||
<paper-input label="total">
|
||||
<div prefix>$</div>
|
||||
<paper-icon-button suffix icon="clear"></paper-icon-button>
|
||||
</paper-input>
|
||||
|
||||
See `Polymer.PaperInputBehavior` for more API docs.
|
||||
|
||||
### Styling
|
||||
|
@ -68,6 +78,8 @@ style this element.
|
|||
|
||||
<paper-input-container no-label-float="[[noLabelFloat]]" always-float-label="[[_computeAlwaysFloatLabel(alwaysFloatLabel,placeholder)]]" auto-validate$="[[autoValidate]]" disabled$="[[disabled]]" invalid="[[invalid]]">
|
||||
|
||||
<content select="[prefix]"></content>
|
||||
|
||||
<label hidden$="[[!label]]">[[label]]</label>
|
||||
|
||||
<input is="iron-input" id="input"
|
||||
|
@ -95,6 +107,8 @@ style this element.
|
|||
autocapitalize$="[[autocapitalize]]"
|
||||
autocorrect$="[[autocorrect]]">
|
||||
|
||||
<content select="[suffix]"></content>
|
||||
|
||||
<template is="dom-if" if="[[errorMessage]]">
|
||||
<paper-input-error>[[errorMessage]]</paper-input-error>
|
||||
</template>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue