1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update tabs

This commit is contained in:
Luke Pulverenti 2016-04-13 01:28:45 -04:00
parent d808aced1d
commit 9ceaf21b80
37 changed files with 565 additions and 345 deletions

View file

@ -1,6 +1,6 @@
{
"name": "paper-item",
"version": "1.1.4",
"version": "1.2.0",
"description": "A material-design styled list item",
"authors": [
"The Polymer Authors"
@ -40,11 +40,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"_release": "1.1.4",
"_release": "1.2.0",
"_resolution": {
"type": "version",
"tag": "v1.1.4",
"commit": "5dcf21d5f7c13bafa24122c73aac28bd86213191"
"tag": "v1.2.0",
"commit": "04568bc89c181222d53d8d166aef07708640484f"
},
"_source": "git://github.com/PolymerElements/paper-item.git",
"_target": "^1.0.0",

View file

@ -0,0 +1,33 @@
<!-- Instructions: https://github.com/PolymerElements/paper-item/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

View file

@ -1,6 +1,6 @@
{
"name": "paper-item",
"version": "1.1.4",
"version": "1.2.0",
"description": "A material-design styled list item",
"authors": [
"The Polymer Authors"

View file

@ -9,43 +9,53 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../paper-styles/default-theme.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/default-theme.html">
<llink rel="import" href="../paper-styles/typography.html">
<dom-module id="paper-item-shared-styles">
<template>
<style>
:host {
:host, .paper-item {
display: block;
position: relative;
min-height: var(--paper-item-min-height, 48px);
padding: 0px 16px;
}
:host([hidden]) {
.paper-item {
@apply(--paper-font-subhead);
border:none;
outline: none;
background: white;
width: 100%;
text-align: left;
}
:host([hidden]), .paper-item[hidden] {
display: none !important;
}
:host(.iron-selected) {
:host(.iron-selected), .paper-item.iron-selected {
font-weight: var(--paper-item-selected-weight, bold);
@apply(--paper-item-selected);
}
:host([disabled]) {
:host([disabled]), .paper-item[disabled] {
color: var(--paper-item-disabled-color, --disabled-text-color);
@apply(--paper-item-disabled);
}
:host(:focus) {
:host(:focus), .paper-item:focus {
position: relative;
outline: 0;
@apply(--paper-item-focused);
}
:host(:focus):before {
:host(:focus):before, .paper-item:focus:before {
@apply(--layout-fit);
background: currentColor;

View file

@ -39,6 +39,18 @@ focus as well by setting its tabindex to -1.
<paper-item raised>Polymer Project</paper-item>
</a>
If you are concerned about performance and want to use `paper-item` in a `paper-listbox`
with many items, you can just use a native `button` with the `paper-item` class
applied (provided you have correctly included the shared styles):
<style is="custom-style" include="paper-item-shared-styles"></style>
<paper-listbox>
<button class="paper-item" role="option">Inbox</button>
<button class="paper-item" role="option">Starred</button>
<button class="paper-item" role="option">Sent mail</button>
</paper-listbox>
### Styling
The following custom properties and mixins are available for styling:

View file

@ -37,6 +37,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</template>
</test-fixture>
<test-fixture id="button">
<template>
<div role="listbox">
<button class="paper-item" role="option">item</button>
</div>
</template>
</test-fixture>
<test-fixture id="iconItem">
<template>
<div role="listbox">
@ -91,11 +99,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}, 1);
});
test('click triggers a click event', function(done) {
MockInteractions.tap(item);
test('enter triggers a click event', function(done) {
MockInteractions.pressEnter(item);
Polymer.Base.async(function(){
expect(clickHandler.callCount).to.be.equal(1);
done();
// You need two ticks, one for the MockInteractions event, and one
// for the button event.
Polymer.Base.async(function(){
expect(clickHandler.callCount).to.be.equal(1);
done();
}, 1);
}, 1);
});
});
@ -196,6 +208,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
a11ySuite('item');
a11ySuite('button');
a11ySuite('iconItem');
});