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
556b64e92c
commit
a8a609a04d
39 changed files with 121 additions and 1198 deletions
|
@ -14,12 +14,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.154",
|
||||
"_release": "1.4.154",
|
||||
"version": "1.4.156",
|
||||
"_release": "1.4.156",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.154",
|
||||
"commit": "fc470b13dc1fc1a5d859d3b3da905adba007459a"
|
||||
"tag": "1.4.156",
|
||||
"commit": "b9f97570c0090a85efe1017b589c1f3261de5966"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.1",
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
function enableAnimation(elem) {
|
||||
|
||||
if (browser.mobile) {
|
||||
if (browser.slow) {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
|
@ -28,6 +28,31 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
function isMobile(userAgent) {
|
||||
|
||||
var terms = [
|
||||
'mobi',
|
||||
'ipad',
|
||||
'iphone',
|
||||
'ipod',
|
||||
'silk',
|
||||
'gt-p1000',
|
||||
'nexus 7',
|
||||
'kindle fire',
|
||||
'opera mini'
|
||||
];
|
||||
|
||||
var lower = userAgent.toLowerCase();
|
||||
|
||||
for (var i = 0, length = terms.length; i < length; i++) {
|
||||
if (lower.indexOf(terms[i]) != -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function isStyleSupported(prop, value) {
|
||||
// If no value is supplied, use "inherit"
|
||||
value = arguments.length === 2 ? value : 'inherit';
|
||||
|
@ -128,7 +153,7 @@
|
|||
browser.tv = true;
|
||||
}
|
||||
|
||||
if (userAgent.toLowerCase().indexOf("mobi") != -1) {
|
||||
if (isMobile(userAgent)) {
|
||||
browser.mobile = true;
|
||||
}
|
||||
|
||||
|
@ -144,7 +169,13 @@
|
|||
browser.noFlex = true;
|
||||
}
|
||||
|
||||
//browser.noFlex = (browser.tv && !browser.chrome && !browser.operaTv) || browser.ps4;
|
||||
if (browser.mobile || browser.tv) {
|
||||
browser.slow = true;
|
||||
}
|
||||
|
||||
if (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
|
||||
browser.touch = true;
|
||||
}
|
||||
|
||||
return browser;
|
||||
});
|
|
@ -1,5 +1,5 @@
|
|||
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'browser', 'layoutManager', 'apphost', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
|
||||
function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, browser, layoutManager, appHost) {
|
||||
define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo', 'focusManager', 'indicators', 'globalize', 'layoutManager', 'apphost', 'emby-button', 'css!./card', 'paper-icon-button-light', 'clearButtonStyle'],
|
||||
function (datetime, imageLoader, connectionManager, itemHelper, mediaInfo, focusManager, indicators, globalize, layoutManager, appHost) {
|
||||
|
||||
// Regular Expressions for parsing tags and attributes
|
||||
var SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
|
||||
|
@ -102,15 +102,33 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
}
|
||||
}
|
||||
|
||||
function isResizable(windowWidth) {
|
||||
|
||||
var screen = window.screen;
|
||||
if (screen) {
|
||||
var screenWidth = screen.availWidth;
|
||||
|
||||
if ((screenWidth - windowWidth) > 20) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getImageWidth(shape) {
|
||||
|
||||
var screenWidth = window.innerWidth;
|
||||
|
||||
if (!browser.mobile && !browser.tv) {
|
||||
if (isResizable(screenWidth)) {
|
||||
var roundScreenTo = 100;
|
||||
screenWidth = Math.ceil(screenWidth / roundScreenTo) * roundScreenTo;
|
||||
}
|
||||
|
||||
if (window.screen) {
|
||||
screenWidth = Math.min(screenWidth, screen.availWidth || screenWidth);
|
||||
}
|
||||
|
||||
var imagesPerRow = getPostersPerRow(shape, screenWidth);
|
||||
|
||||
var shapeWidth = screenWidth / imagesPerRow;
|
||||
|
@ -1094,7 +1112,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
|||
|
||||
if (forceName && !options.cardLayout) {
|
||||
showTitle = imgUrl;
|
||||
|
||||
|
||||
if (overlayText == null) {
|
||||
overlayText = true;
|
||||
}
|
||||
|
|
|
@ -347,7 +347,7 @@
|
|||
return true;
|
||||
}
|
||||
|
||||
return browser.mobile;
|
||||
return true;
|
||||
}
|
||||
|
||||
function centerDialog(dlg) {
|
||||
|
|
|
@ -179,7 +179,7 @@
|
|||
|
||||
this.addEventListener('click', onClick);
|
||||
|
||||
if (browser.mobile) {
|
||||
if (browser.touch) {
|
||||
this.addEventListener('contextmenu', disableEvent);
|
||||
} else {
|
||||
this.addEventListener('contextmenu', onContextMenu);
|
||||
|
|
|
@ -119,7 +119,7 @@
|
|||
|
||||
return registrationServices.validateFeature('livetv').then(function () {
|
||||
|
||||
var limit = browser.mobile ? 100 : 400;
|
||||
var limit = browser.slow ? 100 : 400;
|
||||
|
||||
context.querySelector('.guideRequiresUnlock').classList.add('hide');
|
||||
|
||||
|
|
|
@ -56,7 +56,7 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
|
|||
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
|
||||
var self = {};
|
||||
|
||||
var enableFade = browser.animate && !browser.mobile && !browser.operaTv;
|
||||
var enableFade = browser.animate && !browser.slow;
|
||||
|
||||
function fillImage(elem, source, enableEffects) {
|
||||
|
||||
|
|
|
@ -140,26 +140,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function shake(elem, iterations) {
|
||||
var keyframes = [
|
||||
{ transform: 'translate3d(0, 0, 0)', offset: 0 },
|
||||
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.1 },
|
||||
{ transform: 'translate3d(10px, 0, 0)', offset: 0.2 },
|
||||
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.3 },
|
||||
{ transform: 'translate3d(10px, 0, 0)', offset: 0.4 },
|
||||
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.5 },
|
||||
{ transform: 'translate3d(10px, 0, 0)', offset: 0.6 },
|
||||
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.7 },
|
||||
{ transform: 'translate3d(10px, 0, 0)', offset: 0.8 },
|
||||
{ transform: 'translate3d(-10px, 0, 0)', offset: 0.9 },
|
||||
{ transform: 'translate3d(0, 0, 0)', offset: 1 }];
|
||||
var timing = { duration: 900, iterations: iterations };
|
||||
|
||||
if (elem.animate) {
|
||||
elem.animate(keyframes, timing);
|
||||
}
|
||||
}
|
||||
|
||||
function showSelectionCommands() {
|
||||
|
||||
var selectionCommandsPanel = currentSelectionCommandsPanel;
|
||||
|
@ -189,10 +169,6 @@
|
|||
var btnSelectionPanelOptions = selectionCommandsPanel.querySelector('.btnSelectionPanelOptions');
|
||||
|
||||
btnSelectionPanelOptions.addEventListener('click', showMenuForSelectedItems);
|
||||
|
||||
if (!browser.mobile) {
|
||||
shake(btnSelectionPanelOptions, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -488,7 +464,7 @@
|
|||
function initTapHold(element) {
|
||||
|
||||
// mobile safari doesn't allow contextmenu override
|
||||
if (browser.mobile && !browser.safari) {
|
||||
if (browser.touch && !browser.safari) {
|
||||
container.addEventListener('contextmenu', onTapHold);
|
||||
} else {
|
||||
require(['hammer'], function (Hammer) {
|
||||
|
|
|
@ -170,11 +170,7 @@ define(['browser', 'layoutManager', 'scrollStyles'], function (browser, layoutMa
|
|||
// transform is the only way to guarantee animation
|
||||
options.enableNativeScroll = false;
|
||||
}
|
||||
else if (layoutManager.mobile) {
|
||||
|
||||
options.enableNativeScroll = true;
|
||||
}
|
||||
else if (browser.edge && !browser.xboxOne) {
|
||||
else if (browser.edge && (!browser.xboxOne && !browser.touch)) {
|
||||
// no scrolling supported
|
||||
options.enableNativeScroll = false;
|
||||
}
|
||||
|
|
|
@ -29,14 +29,14 @@
|
|||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-behaviors",
|
||||
"homepage": "https://github.com/PolymerElements/iron-behaviors",
|
||||
"_release": "1.0.17",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.17",
|
||||
"commit": "ef8e89b5f0aa4e8a6b51ca6491ea453bf395f94f"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-behaviors.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-behaviors.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-behaviors"
|
||||
"_originalSource": "PolymerElements/iron-behaviors"
|
||||
}
|
|
@ -32,14 +32,14 @@
|
|||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-icon",
|
||||
"homepage": "https://github.com/polymerelements/iron-icon",
|
||||
"_release": "1.0.9",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.9",
|
||||
"commit": "f6fb241901377e30e2c9c6cd47e3e8e8beb6574d"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-icon.git",
|
||||
"_source": "git://github.com/polymerelements/iron-icon.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-icon"
|
||||
"_originalSource": "polymerelements/iron-icon"
|
||||
}
|
|
@ -1,52 +0,0 @@
|
|||
{
|
||||
"name": "paper-item",
|
||||
"version": "1.2.1",
|
||||
"description": "A material-design styled list item",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"item"
|
||||
],
|
||||
"main": [
|
||||
"paper-item.html",
|
||||
"paper-icon-item.html",
|
||||
"paper-item-body.html"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-item"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-item",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
||||
},
|
||||
"_release": "1.2.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.2.1",
|
||||
"commit": "1eab91333b318ae19e315866575b2dddd38e6abc"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-item.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-item"
|
||||
}
|
|
@ -1,33 +0,0 @@
|
|||
<!-- 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
|
|
@ -1 +0,0 @@
|
|||
bower_components/
|
|
@ -1,23 +0,0 @@
|
|||
language: node_js
|
||||
sudo: required
|
||||
before_script:
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: NCk3KK+wbaXMzp8XAY6FeL+TSdI0AlPI3/tl0OpsUIaU2EiCjQuzf/UpyzCW5XZMEVFF4q/eDjrPkqJodHfpngj36mpkfmfqj9DrgDmYsV9BDvsTd8KmLsA6H8D6p7Qer+r1JMMB8PvX44vdhQ6GhZD1HFNYK1Ekpt0TkYwWKNw=
|
||||
- secure: TGgUEQe6FJS+GuYk94d//8YQmDLUu0ekMvPSIs8TQ2QkdBK4SL+2bSXZt44BbDEOwc9P4NCPSUx/RMiCAqsc5OGRJImzb/zqPNIDTeKG6q72HPBBBD3Sk0CrEpTQbOK/Flaa/B7RYR0U1kuljSmRS7lPG19nnY8gOHnIAgwIyk0=
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
dist: trusty
|
|
@ -1,77 +0,0 @@
|
|||
|
||||
<!--
|
||||
This file is autogenerated based on
|
||||
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
|
||||
|
||||
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
|
||||
|
||||
### Filing Issues
|
||||
|
||||
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
|
||||
|
||||
1. **Who will use the feature?** _“As someone filling out a form…”_
|
||||
2. **When will they use the feature?** _“When I enter an invalid value…”_
|
||||
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
|
||||
|
||||
**If you are filing an issue to report a bug**, please provide:
|
||||
|
||||
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
|
||||
|
||||
```markdown
|
||||
The `paper-foo` element causes the page to turn pink when clicked.
|
||||
|
||||
## Expected outcome
|
||||
|
||||
The page stays the same color.
|
||||
|
||||
## Actual outcome
|
||||
|
||||
The page turns pink.
|
||||
|
||||
## Steps to reproduce
|
||||
|
||||
1. Put a `paper-foo` element in the page.
|
||||
2. Open the page in a web browser.
|
||||
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: [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.
|
||||
|
||||
### Submitting Pull Requests
|
||||
|
||||
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
|
||||
|
||||
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 in the pull request description using the following syntax:
|
||||
|
||||
```markdown
|
||||
(For a single issue)
|
||||
Fixes #20
|
||||
|
||||
(For multiple issues)
|
||||
Fixes #32, fixes #40
|
||||
```
|
||||
|
||||
2. **A succinct description of the design** used to fix any related issues. For example:
|
||||
|
||||
```markdown
|
||||
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
|
||||
```
|
||||
|
||||
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
|
||||
|
||||
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
|
|
@ -1,13 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="paper-item.html">
|
||||
<link rel="import" href="paper-item-body.html">
|
||||
<link rel="import" href="paper-icon-item.html">
|
|
@ -1,43 +0,0 @@
|
|||
{
|
||||
"name": "paper-item",
|
||||
"version": "1.2.1",
|
||||
"description": "A material-design styled list item",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"item"
|
||||
],
|
||||
"main": [
|
||||
"paper-item.html",
|
||||
"paper-icon-item.html",
|
||||
"paper-item-body.html"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-item"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-item",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.1.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
|
||||
}
|
||||
}
|
|
@ -1,191 +0,0 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<title>paper-item demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../iron-icons/communication-icons.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
|
||||
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../paper-icon-item.html">
|
||||
<link rel="import" href="../paper-item.html">
|
||||
<link rel="import" href="../paper-item-body.html">
|
||||
<link rel="import" href="../../paper-styles/color.html">
|
||||
|
||||
<style is="custom-style" include="demo-pages-shared-styles">
|
||||
div[role="listbox"] {
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--paper-amber-500);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: var(--paper-light-blue-300);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
<div class="vertical-section-container centered">
|
||||
<h3>Paper-items are simple list elements, ideally used in a paper-listbox or
|
||||
an element with <i>role="listbox"</i></h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<div role="listbox">
|
||||
<paper-item>Inbox</paper-item>
|
||||
<paper-item>Starred</paper-item>
|
||||
<paper-item>Sent mail</paper-item>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>They can be styled using custom properties</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
paper-item.fancy {
|
||||
--paper-item-focused: {
|
||||
background: var(--paper-amber-500);
|
||||
font-weight: bold;
|
||||
};
|
||||
--paper-item-focused-before: {
|
||||
opacity: 0;
|
||||
};
|
||||
}
|
||||
</style>
|
||||
<div role="listbox">
|
||||
<paper-item class="fancy">Inbox</paper-item>
|
||||
<paper-item class="fancy">Starred</paper-item>
|
||||
<paper-item class="fancy">Sent mail</paper-item>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>To add a leading element, use a paper-icon-item with an <i>item-icon</i> attribute. This
|
||||
leading image can be an iron-icon, or any other regular element.</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<div role="listbox">
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="inbox" item-icon></iron-icon>
|
||||
Inbox
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="star" item-icon></iron-icon>
|
||||
Starred
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar blue" item-icon></div>
|
||||
Alphonso Engelking
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar" item-icon></div>
|
||||
Angela Decker
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>For two-line items, use a paper-icon-body inside a paper-item or paper-icon-item</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<div role="listbox">
|
||||
<paper-item>
|
||||
<paper-item-body two-line>
|
||||
<div>Profile Photo</div>
|
||||
<div secondary>Change your Google+ profile photo</div>
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="communication:phone" item-icon>
|
||||
</iron-icon>
|
||||
<paper-item-body two-line>
|
||||
<div>(650) 555-1234</div>
|
||||
<div secondary>Mobile</div>
|
||||
</paper-item-body>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar blue" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>Alphonso Engelking</div>
|
||||
<div secondary>Change photo</div>
|
||||
</paper-item-body>
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Complex layouts are usually a combination of all these elements</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<div role="listbox">
|
||||
<paper-icon-item>
|
||||
<div class="avatar blue" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>Photos</div>
|
||||
<div secondary>Jan 9, 2014</div>
|
||||
</paper-item-body>
|
||||
<paper-icon-button icon="star" alt="favourite this!">
|
||||
</paper-icon-button>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>Recipes</div>
|
||||
<div secondary>Jan 17, 2014</div>
|
||||
</paper-item-body>
|
||||
<paper-icon-button icon="star" alt="favourite this!">
|
||||
</paper-icon-button>
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
|
||||
<h3>Paper-items can be used as links</h3>
|
||||
<demo-snippet>
|
||||
<template>
|
||||
<style is="custom-style">
|
||||
.paper-item-link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<div role="listbox">
|
||||
<a class="paper-item-link" href="#inbox" tabindex="-1">
|
||||
<paper-item>Inbox</paper-item>
|
||||
</a>
|
||||
<a class="paper-item-link" href="#starred" tabindex="-1">
|
||||
<paper-item>Starred</paper-item>
|
||||
</a>
|
||||
<a class="paper-item-link" href="#sent" tabindex="-1">
|
||||
<paper-item>Sent mail</paper-item>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</demo-snippet>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -1,30 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<title>paper-item</title>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page src="all-imports.html"></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -1,86 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/typography.html">
|
||||
<link rel="import" href="paper-item-behavior.html">
|
||||
<link rel="import" href="paper-item-shared-styles.html">
|
||||
|
||||
<!--
|
||||
`<paper-icon-item>` is a convenience element to make an item with icon. It is an interactive list
|
||||
item with a fixed-width icon area, according to Material Design. This is useful if the icons are of
|
||||
varying widths, but you want the item bodies to line up. Use this like a `<paper-item>`. The child
|
||||
node with the attribute `item-icon` is placed in the icon area.
|
||||
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="favorite" item-icon></iron-icon>
|
||||
Favorite
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar" item-icon></div>
|
||||
Avatar
|
||||
</paper-icon-item>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
------------------------------|------------------------------------------------|----------
|
||||
`--paper-item-icon-width` | Width of the icon area | `56px`
|
||||
`--paper-item-icon` | Mixin applied to the icon area | `{}`
|
||||
`--paper-icon-item` | Mixin applied to the item | `{}`
|
||||
`--paper-item-selected-weight`| The font weight of a selected item | `bold`
|
||||
`--paper-item-selected` | Mixin applied to selected paper-items | `{}`
|
||||
`--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color`
|
||||
`--paper-item-disabled` | Mixin applied to disabled paper-items | `{}`
|
||||
`--paper-item-focused` | Mixin applied to focused paper-items | `{}`
|
||||
`--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}`
|
||||
-->
|
||||
|
||||
<dom-module id="paper-icon-item">
|
||||
<template>
|
||||
<style include="paper-item-shared-styles"></style>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-item);
|
||||
@apply(--paper-icon-item);
|
||||
}
|
||||
|
||||
.content-icon {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
|
||||
width: var(--paper-item-icon-width, 56px);
|
||||
@apply(--paper-item-icon);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="contentIcon" class="content-icon">
|
||||
<content select="[item-icon]"></content>
|
||||
</div>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-icon-item',
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperItemBehavior
|
||||
]
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
|
@ -1,36 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-button-state.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
||||
|
||||
<!--
|
||||
`PaperItemBehavior` is a convenience behavior shared by <paper-item> and
|
||||
<paper-icon-item> that manages the shared control states and attributes of
|
||||
the items.
|
||||
-->
|
||||
|
||||
<script>
|
||||
/** @polymerBehavior Polymer.PaperItemBehavior */
|
||||
Polymer.PaperItemBehaviorImpl = {
|
||||
hostAttributes: {
|
||||
role: 'option',
|
||||
tabindex: '0'
|
||||
}
|
||||
};
|
||||
|
||||
/** @polymerBehavior */
|
||||
Polymer.PaperItemBehavior = [
|
||||
Polymer.IronButtonState,
|
||||
Polymer.IronControlState,
|
||||
Polymer.PaperItemBehaviorImpl
|
||||
];
|
||||
</script>
|
|
@ -1,83 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<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/typography.html">
|
||||
|
||||
<!--
|
||||
Use `<paper-item-body>` in a `<paper-item>` or `<paper-icon-item>` to make two- or
|
||||
three- line items. It is a flex item that is a vertical flexbox.
|
||||
|
||||
<paper-item>
|
||||
<paper-item-body two-line>
|
||||
<div>Show your status</div>
|
||||
<div secondary>Your status is visible to everyone</div>
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
|
||||
The child elements with the `secondary` attribute is given secondary text styling.
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-item-body-two-line-min-height` | Minimum height of a two-line item | `72px`
|
||||
`--paper-item-body-three-line-min-height` | Minimum height of a three-line item | `88px`
|
||||
`--paper-item-body-secondary-color` | Foreground color for the `secondary` area | `--secondary-text-color`
|
||||
`--paper-item-body-secondary` | Mixin applied to the `secondary` area | `{}`
|
||||
|
||||
-->
|
||||
|
||||
<dom-module id="paper-item-body">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
overflow: hidden; /* needed for text-overflow: ellipsis to work on ff */
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center-justified);
|
||||
@apply(--layout-flex);
|
||||
}
|
||||
|
||||
:host([two-line]) {
|
||||
min-height: var(--paper-item-body-two-line-min-height, 72px);
|
||||
}
|
||||
|
||||
:host([three-line]) {
|
||||
min-height: var(--paper-item-body-three-line-min-height, 88px);
|
||||
}
|
||||
|
||||
:host > ::content > * {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:host > ::content [secondary] {
|
||||
@apply(--paper-font-body1);
|
||||
|
||||
color: var(--paper-item-body-secondary-color, --secondary-text-color);
|
||||
|
||||
@apply(--paper-item-body-secondary);
|
||||
}
|
||||
</style>
|
||||
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-item-body'
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
|
@ -1,70 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<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">
|
||||
|
||||
<dom-module id="paper-item-shared-styles">
|
||||
<template>
|
||||
<style>
|
||||
:host, .paper-item {
|
||||
display: block;
|
||||
position: relative;
|
||||
min-height: var(--paper-item-min-height, 48px);
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
.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), .paper-item.iron-selected {
|
||||
font-weight: var(--paper-item-selected-weight, bold);
|
||||
|
||||
@apply(--paper-item-selected);
|
||||
}
|
||||
|
||||
:host([disabled]), .paper-item[disabled] {
|
||||
color: var(--paper-item-disabled-color, --disabled-text-color);
|
||||
|
||||
@apply(--paper-item-disabled);
|
||||
}
|
||||
|
||||
:host(:focus), .paper-item:focus {
|
||||
position: relative;
|
||||
outline: 0;
|
||||
|
||||
@apply(--paper-item-focused);
|
||||
}
|
||||
|
||||
:host(:focus):before, .paper-item:focus:before {
|
||||
@apply(--layout-fit);
|
||||
|
||||
background: currentColor;
|
||||
content: '';
|
||||
opacity: var(--dark-divider-opacity);
|
||||
pointer-events: none;
|
||||
|
||||
@apply(--paper-item-focused-before);
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
|
@ -1,111 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="paper-item-behavior.html">
|
||||
<link rel="import" href="paper-item-shared-styles.html">
|
||||
|
||||
<!--
|
||||
Material design: [Lists](https://www.google.com/design/spec/components/lists.html)
|
||||
|
||||
`<paper-item>` is an interactive list item. By default, it is a horizontal flexbox.
|
||||
|
||||
<paper-item>Item</paper-item>
|
||||
|
||||
Use this element with `<paper-item-body>` to make Material Design styled two-line and three-line
|
||||
items.
|
||||
|
||||
<paper-item>
|
||||
<paper-item-body two-line>
|
||||
<div>Show your status</div>
|
||||
<div secondary>Your status is visible to everyone</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="warning"></iron-icon>
|
||||
</paper-item>
|
||||
|
||||
To use `paper-item` as a link, wrap it in an anchor tag. Since `paper-item` will
|
||||
already receive focus, you may want to prevent the anchor tag from receiving
|
||||
focus as well by setting its tabindex to -1.
|
||||
|
||||
<a href="https://www.polymer-project.org/" tabindex="-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:
|
||||
|
||||
Custom property | Description | Default
|
||||
------------------------------|----------------------------------------------|----------
|
||||
`--paper-item-min-height` | Minimum height of the item | `48px`
|
||||
`--paper-item` | Mixin applied to the item | `{}`
|
||||
`--paper-item-selected-weight`| The font weight of a selected item | `bold`
|
||||
`--paper-item-selected` | Mixin applied to selected paper-items | `{}`
|
||||
`--paper-item-disabled-color` | The color for disabled paper-items | `--disabled-text-color`
|
||||
`--paper-item-disabled` | Mixin applied to disabled paper-items | `{}`
|
||||
`--paper-item-focused` | Mixin applied to focused paper-items | `{}`
|
||||
`--paper-item-focused-before` | Mixin applied to :before focused paper-items | `{}`
|
||||
|
||||
### Accessibility
|
||||
|
||||
This element has `role="listitem"` by default. Depending on usage, it may be more appropriate to set
|
||||
`role="menuitem"`, `role="menuitemcheckbox"` or `role="menuitemradio"`.
|
||||
|
||||
<paper-item role="menuitemcheckbox">
|
||||
<paper-item-body>
|
||||
Show your status
|
||||
</paper-item-body>
|
||||
<paper-checkbox></paper-checkbox>
|
||||
</paper-item>
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-item
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-item">
|
||||
<template>
|
||||
<style include="paper-item-shared-styles"></style>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-item);
|
||||
}
|
||||
</style>
|
||||
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-item',
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperItemBehavior
|
||||
]
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
|
@ -1,31 +0,0 @@
|
|||
<!DOCTYPE html><!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
--><html><head>
|
||||
|
||||
<title>paper-item tests</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'paper-item.html',
|
||||
'paper-item.html?dom=shadow'
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
|
@ -1,218 +0,0 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>paper-item tests</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-input/paper-input.html">
|
||||
<link rel="import" href="../paper-item.html">
|
||||
<link rel="import" href="../paper-icon-item.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="item">
|
||||
<template>
|
||||
<div role="listbox">
|
||||
<paper-item>item</paper-item>
|
||||
</div>
|
||||
</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">
|
||||
<paper-icon-item>item</paper-icon-item>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="item-with-input">
|
||||
<template>
|
||||
<div role="list">
|
||||
<paper-item><input></paper-item>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="item-with-paper-input">
|
||||
<template>
|
||||
<div role="list">
|
||||
<paper-item><paper-input></paper-input></paper-item>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="iconItem-with-input">
|
||||
<template>
|
||||
<div role="list">
|
||||
<paper-icon-item><input></paper-icon-item>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('paper-item basic', function() {
|
||||
var item, clickHandler;
|
||||
|
||||
setup(function() {
|
||||
item = fixture('item').querySelector('paper-item');
|
||||
clickHandler = sinon.spy();
|
||||
item.addEventListener('click', clickHandler);
|
||||
});
|
||||
|
||||
test('space triggers a click event', function(done) {
|
||||
MockInteractions.pressSpace(item);
|
||||
Polymer.Base.async(function(){
|
||||
// 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);
|
||||
});
|
||||
|
||||
test('enter triggers a click event', function(done) {
|
||||
MockInteractions.pressEnter(item);
|
||||
Polymer.Base.async(function(){
|
||||
// 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);
|
||||
});
|
||||
});
|
||||
|
||||
suite('paper-icon-item basic', function() {
|
||||
var item, clickHandler;
|
||||
|
||||
setup(function() {
|
||||
item = fixture('iconItem').querySelector('paper-icon-item');
|
||||
clickHandler = sinon.spy();
|
||||
item.addEventListener('click', clickHandler);
|
||||
});
|
||||
|
||||
test('space triggers a click event', function(done) {
|
||||
MockInteractions.pressSpace(item);
|
||||
Polymer.Base.async(function(){
|
||||
// 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);
|
||||
});
|
||||
|
||||
test('click triggers a click event', function(done) {
|
||||
MockInteractions.tap(item);
|
||||
Polymer.Base.async(function(){
|
||||
expect(clickHandler.callCount).to.be.equal(1);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
suite('clickable element inside item', function() {
|
||||
test('paper-item: space in child native input does not trigger a click event', function(done) {
|
||||
var f = fixture('item-with-input');
|
||||
var outerItem = f.querySelector('paper-item');
|
||||
var innerInput = f.querySelector('input');
|
||||
|
||||
var itemClickHandler = sinon.spy();
|
||||
outerItem.addEventListener('click', itemClickHandler);
|
||||
|
||||
innerInput.focus();
|
||||
MockInteractions.pressSpace(innerInput);
|
||||
Polymer.Base.async(function(){
|
||||
expect(itemClickHandler.callCount).to.be.equal(0);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
test('paper-item: space in child paper-input does not trigger a click event', function(done) {
|
||||
var f = fixture('item-with-paper-input');
|
||||
var outerItem = f.querySelector('paper-item');
|
||||
var innerInput = f.querySelector('paper-input');
|
||||
|
||||
var itemClickHandler = sinon.spy();
|
||||
outerItem.addEventListener('click', itemClickHandler);
|
||||
|
||||
innerInput.focus();
|
||||
MockInteractions.pressSpace(innerInput);
|
||||
Polymer.Base.async(function(){
|
||||
expect(itemClickHandler.callCount).to.be.equal(0);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
test('paper-icon-item: space in child input does not trigger a click event', function(done) {
|
||||
var f = fixture('iconItem-with-input');
|
||||
var outerItem = f.querySelector('paper-icon-item');
|
||||
var innerInput = f.querySelector('input');
|
||||
|
||||
var itemClickHandler = sinon.spy();
|
||||
outerItem.addEventListener('click', itemClickHandler);
|
||||
|
||||
MockInteractions.pressSpace(innerInput);
|
||||
Polymer.Base.async(function(){
|
||||
expect(itemClickHandler.callCount).to.be.equal(0);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
suite('item a11y tests', function() {
|
||||
var item, iconItem;
|
||||
|
||||
setup(function() {
|
||||
item = fixture('item').querySelector('paper-item');
|
||||
iconItem = fixture('iconItem').querySelector('paper-icon-item');
|
||||
});
|
||||
|
||||
test('item has role="listitem"', function() {
|
||||
assert.equal(item.getAttribute('role'), 'option', 'has role="option"');
|
||||
});
|
||||
|
||||
test('icon item has role="listitem"', function() {
|
||||
assert.equal(iconItem.getAttribute('role'), 'option', 'has role="option"');
|
||||
});
|
||||
|
||||
a11ySuite('item');
|
||||
a11ySuite('button');
|
||||
a11ySuite('iconItem');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -32,14 +32,14 @@
|
|||
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
||||
},
|
||||
"private": true,
|
||||
"homepage": "https://github.com/Polymer/polymer",
|
||||
"homepage": "https://github.com/polymer/polymer",
|
||||
"_release": "1.6.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.6.1",
|
||||
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/polymer.git",
|
||||
"_source": "git://github.com/polymer/polymer.git",
|
||||
"_target": "^1.1.0",
|
||||
"_originalSource": "Polymer/polymer"
|
||||
"_originalSource": "polymer/polymer"
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
define(['dialogHelper', 'jQuery', 'paper-item', 'emby-input', 'emby-button', 'paper-item-body', 'paper-icon-button-light', 'css!./directorybrowser'], function (dialogHelper, $) {
|
||||
define(['dialogHelper', 'jQuery', 'listViewStyle', 'emby-input', 'emby-button', 'paper-icon-button-light', 'css!./directorybrowser'], function (dialogHelper, $) {
|
||||
|
||||
var systemInfo;
|
||||
function getSystemInfo() {
|
||||
|
@ -91,12 +91,14 @@
|
|||
function getItem(cssClass, type, path, name) {
|
||||
|
||||
var html = '';
|
||||
html += '<paper-item role="menuitem" class="' + cssClass + '" data-type="' + type + '" data-path="' + path + '">';
|
||||
html += '<paper-item-body>';
|
||||
html += '<div class="listItem ' + cssClass + '" data-type="' + type + '" data-path="' + path + '" style="border-bottom:1px solid #e0e0e0;">';
|
||||
html += '<div class="listItemBody" style="min-height:2em;padding-left:0;">';
|
||||
html += '<div class="listItemBodyText">';
|
||||
html += name;
|
||||
html += '</paper-item-body>';
|
||||
html += '<iron-icon icon="arrow-forward"></iron-icon>';
|
||||
html += '</paper-item>';
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
html += '<i class="md-icon" style="font-size:inherit;">arrow_forward</i>';
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
@ -137,7 +139,7 @@
|
|||
html += '<div style="flex-grow:1;">';
|
||||
html += '<input is="emby-input" id="txtDirectoryPickerPath" type="text" required="required" label="' + Globalize.translate('LabelCurrentPath') + '"/>';
|
||||
html += '</div>';
|
||||
html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories" title="' + Globalize.translate('ButtonRefresh') + '"><iron-icon icon="refresh"></iron-icon></button>';
|
||||
html += '<button type="button" is="paper-icon-button-light" class="btnRefreshDirectories" title="' + Globalize.translate('ButtonRefresh') + '"><i class="md-icon">search</i></button>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="results paperList" style="height: 180px; overflow-y: auto;"></div>';
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
var hasChanges = false;
|
||||
|
||||
// These images can be large and we're seeing memory problems in safari
|
||||
var browsableImagePageSize = browserInfo.safari ? 6 : (browserInfo.mobile ? 10 : 40);
|
||||
var browsableImagePageSize = browserInfo.slow ? 6 : 30;
|
||||
|
||||
var browsableImageStartIndex = 0;
|
||||
var browsableImageType = 'Primary';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
define(['dialogHelper', 'jQuery', 'emby-button', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light'], function (dialogHelper, $) {
|
||||
define(['dialogHelper', 'jQuery', 'emby-button', 'listViewStyle', 'paper-icon-button-light'], function (dialogHelper, $) {
|
||||
|
||||
var currentDeferred;
|
||||
var hasChanges;
|
||||
|
@ -57,17 +57,19 @@
|
|||
|
||||
var html = '';
|
||||
|
||||
html += '<paper-icon-item role="menuitem" class="lnkPath">';
|
||||
html += '<div class="listItem lnkPath">';
|
||||
|
||||
html += '<button type="button" is="emby-button" style="background:#52B54B;" class="fab mini" item-icon><iron-icon icon="folder"></iron-icon></button>';
|
||||
html += '<i class="listItemIcon md-icon">folder</i>';
|
||||
|
||||
html += '<paper-item-body>';
|
||||
html += '<div class="listItemBody">';
|
||||
html += '<h3 class="listItemBodyText">';
|
||||
html += path;
|
||||
html += '</paper-item-body>';
|
||||
html += '</h3>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<button is="paper-icon-button-light" class="btnRemovePath" data-index="' + index + '"><iron-icon icon="remove-circle"></iron-icon></button>';
|
||||
html += '<button is="paper-icon-button-light" class="btnRemovePath" data-index="' + index + '"><i class="md-icon">remove_circle</i></button>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
|
@ -194,7 +194,7 @@
|
|||
|
||||
// This should be outside of the IF
|
||||
// But for now, if you change songs but keep the same artist, the backdrop will flicker because in-between songs it clears out the image
|
||||
if (!browser.mobile) {
|
||||
if (!browser.slow) {
|
||||
// Exclude from mobile because it just doesn't perform well
|
||||
require(['backdrop'], function (backdrop) {
|
||||
backdrop.setBackdrop(backdropUrl);
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
define(['jQuery','paper-checkbox', 'paper-input', 'paper-item-body', 'paper-icon-item'], function ($) {
|
||||
define(['jQuery','paper-checkbox', 'listViewStyle'], function ($) {
|
||||
|
||||
return function (page, providerId, options) {
|
||||
|
||||
|
@ -257,24 +257,24 @@
|
|||
|
||||
var device = devices[i];
|
||||
|
||||
html += '<paper-icon-item>';
|
||||
html += '<div class="listItem">';
|
||||
|
||||
var enabledTuners = providerInfo.EnableAllTuners || [];
|
||||
var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) != -1;
|
||||
var checkedAttribute = isChecked ? ' checked' : '';
|
||||
html += '<paper-checkbox data-id="' + device.Id + '" class="chkTuner" item-icon ' + checkedAttribute + '></paper-checkbox>';
|
||||
|
||||
html += '<paper-item-body two-line>';
|
||||
html += '<div>';
|
||||
html += '<div class="listItemBody two-line">';
|
||||
html += '<div class="listItemBodyText">';
|
||||
html += device.FriendlyName || getTunerName(device.Type);
|
||||
html += '</div>';
|
||||
|
||||
html += '<div secondary>';
|
||||
html += '<div class="listItemBodyText secondary">';
|
||||
html += device.Url;
|
||||
html += '</div>';
|
||||
html += '</paper-item-body>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
page.querySelector('.tunerList').innerHTML = html;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
define(['jQuery', 'registrationservices', 'paper-checkbox', 'emby-input', 'paper-item-body', 'paper-icon-item', 'paper-icon-button-light'], function ($, registrationServices) {
|
||||
define(['jQuery', 'registrationservices', 'paper-checkbox', 'emby-input', 'listViewStyle', 'paper-icon-button-light'], function ($, registrationServices) {
|
||||
|
||||
return function (page, providerId, options) {
|
||||
|
||||
|
@ -135,24 +135,24 @@
|
|||
|
||||
var device = devices[i];
|
||||
|
||||
html += '<paper-icon-item>';
|
||||
html += '<div class="listItem">';
|
||||
|
||||
var enabledTuners = providerInfo.EnableAllTuners || [];
|
||||
var isChecked = providerInfo.EnableAllTuners || enabledTuners.indexOf(device.Id) != -1;
|
||||
var checkedAttribute = isChecked ? ' checked' : '';
|
||||
html += '<paper-checkbox data-id="' + device.Id + '" class="chkTuner" item-icon ' + checkedAttribute + '></paper-checkbox>';
|
||||
|
||||
html += '<paper-item-body two-line>';
|
||||
html += '<div>';
|
||||
html += '<div class="listItemBody two-line">';
|
||||
html += '<div class="listItemBodyText">';
|
||||
html += device.FriendlyName || getTunerName(device.Type);
|
||||
html += '</div>';
|
||||
|
||||
html += '<div secondary>';
|
||||
html += '<div class="listItemBodyText secondary">';
|
||||
html += device.Url;
|
||||
html += '</div>';
|
||||
html += '</paper-item-body>';
|
||||
html += '</div>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
page.querySelector('.tunerList').innerHTML = html;
|
||||
|
|
|
@ -997,9 +997,9 @@
|
|||
|
||||
self.playVideo = function (item, mediaSource, startPosition, callback) {
|
||||
|
||||
if (browserInfo.msie && !browserInfo.mobile) {
|
||||
if (browserInfo.msie) {
|
||||
|
||||
if (navigator.userAgent.indexOf('Windows NT 6.1;') != -1 || !mediaSource.RunTimeTicks) {
|
||||
if (!window.MediaSource || !mediaSource.RunTimeTicks) {
|
||||
alert('Playback of this content is not supported in Internet Explorer. For a better experience, please try a modern browser such as Google Chrome, Firefox, Opera, or Microsoft Edge.');
|
||||
}
|
||||
}
|
||||
|
@ -1077,7 +1077,7 @@
|
|||
|
||||
elem.classList.remove('hide');
|
||||
|
||||
if (!browserInfo.animate || browserInfo.mobile) {
|
||||
if (!browserInfo.animate || browserInfo.slow) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
|
@ -86,7 +86,7 @@
|
|||
elem.classList.add('hide');
|
||||
};
|
||||
|
||||
if (!browser.animate || browser.mobile) {
|
||||
if (!browser.animate || browser.slow) {
|
||||
onfinish();
|
||||
return;
|
||||
}
|
||||
|
@ -108,7 +108,7 @@
|
|||
|
||||
elem.classList.remove('hide');
|
||||
|
||||
if (!browser.animate || browser.mobile) {
|
||||
if (!browser.animate || browser.slow) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -130,7 +130,7 @@
|
|||
|
||||
elem.classList.remove('hide');
|
||||
|
||||
if (!browser.animate || browser.mobile) {
|
||||
if (!browser.animate || browser.slow) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -320,7 +320,7 @@
|
|||
document.body.insertAdjacentHTML('beforeend', getNowPlayingBarHtml());
|
||||
nowPlayingBarElement = document.querySelector('.nowPlayingBar');
|
||||
|
||||
if (browser.safari && browser.mobile) {
|
||||
if (browser.safari && browser.slow) {
|
||||
// Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
|
||||
nowPlayingBarElement.classList.add('noMediaProgress');
|
||||
}
|
||||
|
|
|
@ -834,7 +834,7 @@ var Dashboard = {
|
|||
quality -= 10;
|
||||
}
|
||||
|
||||
if (browserInfo.mobile || browserInfo.tv) {
|
||||
if (browserInfo.slow) {
|
||||
quality -= 40;
|
||||
}
|
||||
|
||||
|
@ -1092,14 +1092,13 @@ var AppInfo = {};
|
|||
AppInfo.enableHomeFavorites = true;
|
||||
AppInfo.enableHomeTabs = true;
|
||||
AppInfo.enableNowPlayingPageBottomTabs = true;
|
||||
AppInfo.enableAutoSave = browserInfo.mobile;
|
||||
AppInfo.enableAutoSave = browserInfo.touch;
|
||||
AppInfo.enableHashBang = Dashboard.isRunningInCordova();
|
||||
|
||||
AppInfo.enableAppStorePolicy = isCordova;
|
||||
|
||||
var isIOS = browserInfo.ipad || browserInfo.iphone;
|
||||
var isAndroid = browserInfo.android;
|
||||
var isMobile = browserInfo.mobile;
|
||||
|
||||
if (isIOS) {
|
||||
|
||||
|
@ -1135,7 +1134,7 @@ var AppInfo = {};
|
|||
// This currently isn't working on android, unfortunately
|
||||
AppInfo.supportsFileInput = !(AppInfo.isNativeApp && isAndroid);
|
||||
|
||||
AppInfo.hasPhysicalVolumeButtons = isCordova || isMobile;
|
||||
AppInfo.hasPhysicalVolumeButtons = isCordova || browserInfo.mobile;
|
||||
|
||||
AppInfo.enableBackButton = isIOS && (window.navigator.standalone || AppInfo.isNativeApp);
|
||||
|
||||
|
@ -1511,12 +1510,9 @@ var AppInfo = {};
|
|||
define("paper-icon-button", ["html!" + bowerPath + "/paper-icon-button/paper-icon-button.html"]);
|
||||
|
||||
define("paper-textarea", ['webcomponentsjs', "html!" + bowerPath + "/paper-input/paper-textarea.html"]);
|
||||
define("paper-item", ["html!" + bowerPath + "/paper-item/paper-item.html"]);
|
||||
define("paper-checkbox", ["html!" + bowerPath + "/paper-checkbox/paper-checkbox.html"]);
|
||||
define("paper-progress", ["html!" + bowerPath + "/paper-progress/paper-progress.html"]);
|
||||
define("paper-input", ['webcomponentsjs', "html!" + bowerPath + "/paper-input/paper-input.html"]);
|
||||
define("paper-icon-item", ['webcomponentsjs', "html!" + bowerPath + "/paper-item/paper-icon-item.html"]);
|
||||
define("paper-item-body", ["html!" + bowerPath + "/paper-item/paper-item-body.html"]);
|
||||
|
||||
define("paper-collapse-item", ["html!" + bowerPath + "/paper-collapse-item/paper-collapse-item.html"]);
|
||||
|
||||
|
|
|
@ -156,7 +156,7 @@
|
|||
|
||||
if (dialogOptions.Options.indexOf('UnwatchedOnly') != -1) {
|
||||
html += '<br/>';
|
||||
html += '<div class="checkboxContainer">';
|
||||
html += '<div class="checkboxContainer checkboxContainer-withDescription">';
|
||||
html += '<label>';
|
||||
html += '<input is="emby-checkbox" type="checkbox" id="chkUnwatchedOnly"/>';
|
||||
html += '<span>' + Globalize.translate('OptionSyncUnwatchedVideosOnly') + '</span>';
|
||||
|
@ -172,7 +172,7 @@
|
|||
html += '<div class="collapseContent">';
|
||||
if (dialogOptions.Options.indexOf('SyncNewContent') != -1) {
|
||||
html += '<br/>';
|
||||
html += '<div class="checkboxContainer">';
|
||||
html += '<div class="checkboxContainer checkboxContainer-withDescription">';
|
||||
html += '<label>';
|
||||
html += '<input is="emby-checkbox" type="checkbox" id="chkSyncNewContent"/>';
|
||||
html += '<span>' + Globalize.translate('OptionAutomaticallySyncNewContent') + '</span>';
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue