1
0
Fork 0
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 2015-08-04 10:26:36 -04:00
parent 0b450116a5
commit 1a84e71a95
31 changed files with 646 additions and 495 deletions

View file

@ -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",

View file

@ -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"
}
}

View file

@ -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>

View file

@ -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) {

View file

@ -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>