mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
remove paper-fab
This commit is contained in:
Luke Pulverenti
parent
fad66be11a
commit
e00fbec2a8
30 changed files with 89 additions and 1179 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="libraryFileOrganizerSmartMatchPage" data-role="page" class="page type-interior organizePage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="scripts/autoorganizesmart,paper-icon-item,paper-fab,paper-item-body">
|
<div id="libraryFileOrganizerSmartMatchPage" data-role="page" class="page type-interior organizePage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Auto-Organize" data-require="scripts/autoorganizesmart">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
|
|
|
||||||
|
|
@ -109,7 +109,7 @@ button.listItem {
|
||||||
.listItemIcon {
|
.listItemIcon {
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
font-size: 130%;
|
font-size: 143%;
|
||||||
border-radius: 500px;
|
border-radius: 500px;
|
||||||
background-color: #52B54B;
|
background-color: #52B54B;
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
|
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
{
|
|
||||||
"name": "paper-fab",
|
|
||||||
"version": "1.0.6",
|
|
||||||
"description": "A material design floating action button",
|
|
||||||
"authors": [
|
|
||||||
"The Polymer Authors"
|
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"web-components",
|
|
||||||
"polymer",
|
|
||||||
"button"
|
|
||||||
],
|
|
||||||
"main": "paper-fab.html",
|
|
||||||
"ignore": [],
|
|
||||||
"private": true,
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git://github.com/PolymerElements/paper-fab.git"
|
|
||||||
},
|
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
|
||||||
"homepage": "https://github.com/PolymerElements/paper-fab",
|
|
||||||
"dependencies": {
|
|
||||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
|
||||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
|
||||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
|
||||||
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
|
||||||
"paper-material": "PolymerElements/paper-material#^1.0.0",
|
|
||||||
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"polymer": "Polymer/polymer#^1.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
|
||||||
"web-component-tester": "*",
|
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
|
||||||
},
|
|
||||||
"_release": "1.0.6",
|
|
||||||
"_resolution": {
|
|
||||||
"type": "version",
|
|
||||||
"tag": "v1.0.6",
|
|
||||||
"commit": "d9d70a86af8464f880d3022bedc08845c3bf2d1d"
|
|
||||||
},
|
|
||||||
"_source": "git://github.com/PolymerElements/paper-fab.git",
|
|
||||||
"_target": "~1.0.2",
|
|
||||||
"_originalSource": "PolymerElements/paper-fab"
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
bower_components
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
{
|
|
||||||
"name": "paper-fab",
|
|
||||||
"version": "1.0.6",
|
|
||||||
"description": "A material design floating action button",
|
|
||||||
"authors": [
|
|
||||||
"The Polymer Authors"
|
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"web-components",
|
|
||||||
"polymer",
|
|
||||||
"button"
|
|
||||||
],
|
|
||||||
"main": "paper-fab.html",
|
|
||||||
"ignore": [],
|
|
||||||
"private": true,
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git://github.com/PolymerElements/paper-fab.git"
|
|
||||||
},
|
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
|
||||||
"homepage": "https://github.com/PolymerElements/paper-fab",
|
|
||||||
"dependencies": {
|
|
||||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
|
||||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
|
||||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
|
||||||
"paper-behaviors": "PolymerElements/paper-behaviors#^1.0.0",
|
|
||||||
"paper-material": "PolymerElements/paper-material#^1.0.0",
|
|
||||||
"paper-ripple": "PolymerElements/paper-ripple#^1.0.0",
|
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"polymer": "Polymer/polymer#^1.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
|
||||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
|
||||||
"web-component-tester": "*",
|
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,108 +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
|
|
||||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
|
||||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
|
||||||
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
|
|
||||||
-->
|
|
||||||
<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-fab demo</title>
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<link rel="import" href="../../paper-styles/color.html">
|
|
||||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
|
||||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
|
||||||
<link rel="import" href="../paper-fab.html">
|
|
||||||
|
|
||||||
<style is="custom-style">
|
|
||||||
.horizontal-section {
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-fab {
|
|
||||||
display: block;
|
|
||||||
margin-bottom:24px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-fab.blue {
|
|
||||||
--paper-fab-background: var(--paper-light-blue-500);
|
|
||||||
--paper-fab-keyboard-focus-background: var(--paper-light-blue-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-fab.red {
|
|
||||||
--paper-fab-background: var(--paper-red-500);
|
|
||||||
--paper-fab-keyboard-focus-background: var(--paper-red-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-fab.green {
|
|
||||||
--paper-fab-background: var(--paper-green-500);
|
|
||||||
--paper-fab-keyboard-focus-background: var(--paper-green-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
paper-fab.orange {
|
|
||||||
--paper-fab-background: var(--paper-orange-500);
|
|
||||||
--paper-fab-keyboard-focus-background: var(--paper-orange-900);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body unresolved>
|
|
||||||
<div class="horizontal-section-container">
|
|
||||||
<div>
|
|
||||||
<h4>Enabled</h4>
|
|
||||||
<div class="horizontal-section">
|
|
||||||
<paper-fab icon="arrow-forward" title="arrow-forward"></paper-fab>
|
|
||||||
<paper-fab icon="create" title="create"></paper-fab>
|
|
||||||
<paper-fab icon="favorite" title="heart"></paper-fab>
|
|
||||||
<paper-fab mini icon="done" title="done"></paper-fab>
|
|
||||||
<paper-fab mini icon="reply" title="reply"></paper-fab>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4>Disabled</h4>
|
|
||||||
<div class="horizontal-section">
|
|
||||||
<paper-fab disabled icon="arrow-forward" title="arrow-forward"></paper-fab>
|
|
||||||
<paper-fab disabled icon="create" title="create"></paper-fab>
|
|
||||||
<paper-fab disabled icon="favorite" title="heart"></paper-fab>
|
|
||||||
<paper-fab disabled mini icon="done" title="done"></paper-fab>
|
|
||||||
<paper-fab disabled mini icon="reply" title="reply"></paper-fab>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4>Colors</h4>
|
|
||||||
<div class="horizontal-section">
|
|
||||||
<paper-fab icon="arrow-forward" title="arrow-forward" class="blue"></paper-fab>
|
|
||||||
<paper-fab icon="create" title="create" class="red"></paper-fab>
|
|
||||||
<paper-fab icon="favorite" title="heart" class="orange"></paper-fab>
|
|
||||||
<paper-fab mini icon="done" title="done" class="green"></paper-fab>
|
|
||||||
<paper-fab mini icon="reply" title="reply" class="blue"></paper-fab>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h4>Noink</h4>
|
|
||||||
<div class="horizontal-section">
|
|
||||||
<paper-fab noink icon="arrow-forward" title="arrow-forward"></paper-fab>
|
|
||||||
<paper-fab noink icon="create" title="create"></paper-fab>
|
|
||||||
<paper-fab noink icon="favorite" title="heart"></paper-fab>
|
|
||||||
<paper-fab noink mini icon="done" title="done"></paper-fab>
|
|
||||||
<paper-fab noink mini icon="reply" title="reply"></paper-fab>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,24 +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
|
|
||||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
|
||||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
|
||||||
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
|
|
||||||
-->
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<title>paper-fab</title>
|
|
||||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<iron-component-page></iron-component-page>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,166 +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/classes/iron-flex-layout.html">
|
|
||||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
|
||||||
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
|
|
||||||
<link rel="import" href="../paper-material/paper-material.html">
|
|
||||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
|
||||||
<link rel="import" href="../paper-styles/color.html">
|
|
||||||
<link rel="import" href="../paper-styles/default-theme.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Material design: [Floating Action Button](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
|
|
||||||
|
|
||||||
`paper-fab` is a floating action button. It contains an image placed in the center and
|
|
||||||
comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
|
|
||||||
the user touches the button, a ripple effect emanates from the center of the button.
|
|
||||||
|
|
||||||
You may import `iron-icons` to use with this element, or provide a URL to a custom icon.
|
|
||||||
See `iron-iconset` for more information about how to use a custom icon set.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
<link href="path/to/iron-icons/iron-icons.html" rel="import">
|
|
||||||
|
|
||||||
<paper-fab icon="add"></paper-fab>
|
|
||||||
<paper-fab mini icon="favorite"></paper-fab>
|
|
||||||
<paper-fab src="star.png"></paper-fab>
|
|
||||||
|
|
||||||
|
|
||||||
### Styling
|
|
||||||
|
|
||||||
The following custom properties and mixins are available for styling:
|
|
||||||
|
|
||||||
Custom property | Description | Default
|
|
||||||
----------------|-------------|----------
|
|
||||||
`--paper-fab-background` | The background color of the button | `--accent-color`
|
|
||||||
`--paper-fab-keyboard-focus-background` | The background color of the button when focused | `--paper-pink-900`
|
|
||||||
`--paper-fab-disabled-background` | The background color of the button when it's disabled | `--paper-grey-300`
|
|
||||||
`--paper-fab-disabled-text` | The text color of the button when it's disabled | `--paper-grey-500`
|
|
||||||
`--paper-fab` | Mixin applied to the button | `{}`
|
|
||||||
`--paper-fab-mini` | Mixin applied to a mini button | `{}`
|
|
||||||
`--paper-fab-disabled` | Mixin applied to a disabled button | `{}`
|
|
||||||
`--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{}`
|
|
||||||
|
|
||||||
@group Paper Elements
|
|
||||||
@demo demo/index.html
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
<dom-module id="paper-fab">
|
|
||||||
<template strip-whitespace>
|
|
||||||
<style include="paper-material">
|
|
||||||
:host {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
outline: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-width: 0;
|
|
||||||
width: 56px;
|
|
||||||
height: 56px;
|
|
||||||
background: var(--paper-fab-background, --accent-color);
|
|
||||||
color: var(--text-primary-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 16px;
|
|
||||||
|
|
||||||
z-index: 0;
|
|
||||||
|
|
||||||
@apply(--layout-vertical);
|
|
||||||
@apply(--layout-center-center);
|
|
||||||
@apply(--paper-fab);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([mini]) {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
@apply(--paper-fab-mini);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([disabled]) {
|
|
||||||
color: var(--paper-fab-disabled-text, --paper-grey-500);
|
|
||||||
background: var(--paper-fab-disabled-background, --paper-grey-300);
|
|
||||||
@apply(--paper-fab-disabled);
|
|
||||||
}
|
|
||||||
|
|
||||||
iron-icon {
|
|
||||||
@apply(--paper-fab-iron-icon);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host(.keyboard-focus) {
|
|
||||||
background: var(--paper-fab-keyboard-focus-background, --paper-pink-900);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<iron-icon id="icon" src="[[src]]" icon="[[icon]]"></iron-icon>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'paper-fab',
|
|
||||||
|
|
||||||
behaviors: [
|
|
||||||
Polymer.PaperButtonBehavior
|
|
||||||
],
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
/**
|
|
||||||
* The URL of an image for the icon. If the src property is specified,
|
|
||||||
* the icon property should not be.
|
|
||||||
*
|
|
||||||
* @attribute src
|
|
||||||
* @type string
|
|
||||||
* @default ''
|
|
||||||
*/
|
|
||||||
src: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Specifies the icon name or index in the set of icons available in
|
|
||||||
* the icon's icon set. If the icon property is specified,
|
|
||||||
* the src property should not be.
|
|
||||||
*
|
|
||||||
* @attribute icon
|
|
||||||
* @type string
|
|
||||||
* @default ''
|
|
||||||
*/
|
|
||||||
icon: {
|
|
||||||
type: String,
|
|
||||||
value: ''
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set this to true to style this is a "mini" FAB.
|
|
||||||
*
|
|
||||||
* @attribute mini
|
|
||||||
* @type boolean
|
|
||||||
* @default false
|
|
||||||
*/
|
|
||||||
mini: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
reflectToAttribute: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,71 +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">
|
|
||||||
<title>paper-fab a11y tests</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
|
||||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
|
||||||
<link rel="import" href="../paper-fab.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<test-fixture id="A11yFabs">
|
|
||||||
<template>
|
|
||||||
<paper-fab id="fab1" icon="add"></paper-fab>
|
|
||||||
<paper-fab id="fab2" icon="add" disabled></paper-fab>
|
|
||||||
<paper-fab id="fab3" icon="add" aria-label="custom"></paper-fab>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var f1;
|
|
||||||
var f2;
|
|
||||||
var f3;
|
|
||||||
|
|
||||||
setup(function() {
|
|
||||||
var fabs = fixture('A11yFabs');
|
|
||||||
|
|
||||||
f1 = fabs[0];
|
|
||||||
f2 = fabs[1];
|
|
||||||
f3 = fabs[2];
|
|
||||||
});
|
|
||||||
|
|
||||||
test('aria role is a button', function() {
|
|
||||||
assert.strictEqual(f1.getAttribute('role'), 'button');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('aria-disabled is set', function() {
|
|
||||||
assert.ok(f2.hasAttribute('aria-disabled'));
|
|
||||||
f2.removeAttribute('disabled');
|
|
||||||
assert.strictEqual(f2.getAttribute('aria-disabled'), 'false');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('aria-label is set');
|
|
||||||
|
|
||||||
test('user-defined aria-label is preserved', function() {
|
|
||||||
assert.strictEqual(f3.getAttribute('aria-label'), 'custom');
|
|
||||||
f3.icon = 'arrow-forward';
|
|
||||||
assert.strictEqual(f3.getAttribute('aria-label'), 'custom');
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,76 +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">
|
|
||||||
<title>paper-fab basic tests</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
|
||||||
|
|
||||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
|
||||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
|
||||||
<link rel="import" href="../paper-fab.html">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<test-fixture id="TrivialFab">
|
|
||||||
<template>
|
|
||||||
<div style="line-height:30px;">
|
|
||||||
<paper-fab id="fab1" icon="add"></paper-fab>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<test-fixture id="SrcFab">
|
|
||||||
<template>
|
|
||||||
<paper-fab src="add.png"></paper-fab>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var f1;
|
|
||||||
var f2;
|
|
||||||
|
|
||||||
function centerOf(element) {
|
|
||||||
var rect = element.getBoundingClientRect();
|
|
||||||
return {left: rect.left + rect.width / 2, top: rect.top + rect.height / 2};
|
|
||||||
}
|
|
||||||
|
|
||||||
function approxEqual(p1, p2) {
|
|
||||||
return Math.round(p1.left) == Math.round(p2.left) && Math.round(p1.top) == Math.round(p2.top);
|
|
||||||
}
|
|
||||||
|
|
||||||
setup(function() {
|
|
||||||
f1 = fixture('TrivialFab').querySelector('#fab1');
|
|
||||||
f2 = fixture('SrcFab');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('applies an icon specified by the `icon` attribute', function() {
|
|
||||||
assert.strictEqual(!!f1.$.icon.usesSrcAttribute, false);
|
|
||||||
assert.ok(Polymer.dom(f1.$.icon.root).querySelector('svg'));
|
|
||||||
});
|
|
||||||
|
|
||||||
test('applies an icon specified by the `src` attribute', function() {
|
|
||||||
assert.strictEqual(f2.$.icon._usesIconset(), false);
|
|
||||||
assert.ok(f2.$.icon._img);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('renders correctly independent of line height', function() {
|
|
||||||
assert.ok(approxEqual(centerOf(f1.$.icon), centerOf(f1)));
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,26 +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 name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
||||||
<title>paper-fab tests</title>
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script>
|
|
||||||
WCT.loadSuites([
|
|
||||||
'basic.html',
|
|
||||||
'a11y.html'
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
{
|
|
||||||
"name": "paper-material",
|
|
||||||
"version": "1.0.6",
|
|
||||||
"description": "A material design container that looks like a lifted sheet of paper",
|
|
||||||
"private": true,
|
|
||||||
"authors": [
|
|
||||||
"The Polymer Authors"
|
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"web-components",
|
|
||||||
"web-component",
|
|
||||||
"polymer",
|
|
||||||
"paper",
|
|
||||||
"container"
|
|
||||||
],
|
|
||||||
"main": "paper-material.html",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git://github.com/PolymerElements/paper-material"
|
|
||||||
},
|
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
|
||||||
"homepage": "https://github.com/PolymerElements/paper-material",
|
|
||||||
"ignore": [],
|
|
||||||
"dependencies": {
|
|
||||||
"polymer": "Polymer/polymer#^1.1.0",
|
|
||||||
"paper-styles": "polymerelements/paper-styles#^1.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
|
||||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
|
||||||
"web-component-tester": "^4.0.0",
|
|
||||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
|
|
||||||
},
|
|
||||||
"_release": "1.0.6",
|
|
||||||
"_resolution": {
|
|
||||||
"type": "version",
|
|
||||||
"tag": "v1.0.6",
|
|
||||||
"commit": "6aef0896fcbc25f9f5bd1dd55f7679e6ab7f92ad"
|
|
||||||
},
|
|
||||||
"_source": "git://github.com/PolymerElements/paper-material.git",
|
|
||||||
"_target": "^1.0.0",
|
|
||||||
"_originalSource": "PolymerElements/paper-material"
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
bower_components
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
language: node_js
|
|
||||||
sudo: false
|
|
||||||
before_script:
|
|
||||||
- npm install -g bower polylint web-component-tester
|
|
||||||
- bower install
|
|
||||||
- polylint
|
|
||||||
env:
|
|
||||||
global:
|
|
||||||
- secure: PEaqY+YpV0ZhnQbJlNQbmfIFLqy7UvvCtii0sPoGKT5/P7ulMqMOPQV9l/zLAtYi14HEz63FKLqDrpnGaVe7Cz7jtt2WRWrWqTBdarqwSHs73Z2XqztD1+2wW6vgz/lfK00B8UplAk28B7d5dbWzwUF6Kg02zOfQMsawMpulFjo=
|
|
||||||
- secure: f/3XYrYjM8aXLe9kqM/MjHQ6IEsDRuoxDqM+l2JiR3v2Nw7lP6ZyXSNvKm8bN+VNU7ubSzAmRbUGnRU7e61BhnGzuLXjOqxYeJLWZaqoSm9TDz3re3rd7wB2ddAhRokeSSPO2KeAgr6C02P9M3Au1DiO1G66fuWVH62WtzW4+qY=
|
|
||||||
- CXX=g++-4.8
|
|
||||||
node_js: stable
|
|
||||||
addons:
|
|
||||||
firefox: latest
|
|
||||||
apt:
|
|
||||||
sources:
|
|
||||||
- google-chrome
|
|
||||||
- ubuntu-toolchain-r-test
|
|
||||||
packages:
|
|
||||||
- google-chrome-stable
|
|
||||||
- g++-4.8
|
|
||||||
sauce_connect: true
|
|
||||||
script:
|
|
||||||
- xvfb-run wct
|
|
||||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
|
||||||
|
|
@ -1,72 +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 :)
|
|
||||||
-->
|
|
||||||
# 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: [http://jsbin.com/cagaye](http://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 using the following syntax:
|
|
||||||
|
|
||||||
```markdown
|
|
||||||
(For a single issue)
|
|
||||||
Fixes #20
|
|
||||||
|
|
||||||
(For multiple issues)
|
|
||||||
Fixes #32, #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,35 +0,0 @@
|
||||||
{
|
|
||||||
"name": "paper-material",
|
|
||||||
"version": "1.0.6",
|
|
||||||
"description": "A material design container that looks like a lifted sheet of paper",
|
|
||||||
"private": true,
|
|
||||||
"authors": [
|
|
||||||
"The Polymer Authors"
|
|
||||||
],
|
|
||||||
"keywords": [
|
|
||||||
"web-components",
|
|
||||||
"web-component",
|
|
||||||
"polymer",
|
|
||||||
"paper",
|
|
||||||
"container"
|
|
||||||
],
|
|
||||||
"main": "paper-material.html",
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "git://github.com/PolymerElements/paper-material"
|
|
||||||
},
|
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
|
||||||
"homepage": "https://github.com/PolymerElements/paper-material",
|
|
||||||
"ignore": [],
|
|
||||||
"dependencies": {
|
|
||||||
"polymer": "Polymer/polymer#^1.1.0",
|
|
||||||
"paper-styles": "polymerelements/paper-styles#^1.0.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
|
||||||
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
|
|
||||||
"web-component-tester": "^4.0.0",
|
|
||||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
|
||||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,84 +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-material demo</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>
|
|
||||||
<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-material.html">
|
|
||||||
|
|
||||||
<style is="custom-style" include="demo-pages-shared-styles">
|
|
||||||
paper-material {
|
|
||||||
display: inline-block;
|
|
||||||
background: white;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 8px;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body unresolved>
|
|
||||||
<div class="vertical-section-container centered">
|
|
||||||
<h3>Paper-materials can have different elevations</h3>
|
|
||||||
<demo-snippet class="centered-demo">
|
|
||||||
<template>
|
|
||||||
<paper-material elevation="0">0</paper-material>
|
|
||||||
<paper-material elevation="1">1</paper-material>
|
|
||||||
<paper-material elevation="2">2</paper-material>
|
|
||||||
<paper-material elevation="3">3</paper-material>
|
|
||||||
<paper-material elevation="4">4</paper-material>
|
|
||||||
<paper-material elevation="5">5</paper-material>
|
|
||||||
</template>
|
|
||||||
</demo-snippet>
|
|
||||||
|
|
||||||
<h3>Changes in elevation can be animated</h3>
|
|
||||||
<demo-snippet class="centered-demo">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
#a1, #a2 { cursor: pointer; }
|
|
||||||
</style>
|
|
||||||
Tap each of these boxes!
|
|
||||||
<div>
|
|
||||||
<paper-material elevation="0" animated id="a1">animated</paper-material>
|
|
||||||
<paper-material elevation="3" id="a2">not animated</paper-material>
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
document.addEventListener('WebComponentsReady', function() {
|
|
||||||
a1.addEventListener('click', _onTap);
|
|
||||||
a2.addEventListener('click', _onTap);
|
|
||||||
});
|
|
||||||
function _onTap(e) {
|
|
||||||
var target = e.target;
|
|
||||||
if (!target.down) {
|
|
||||||
target.elevation += 1;
|
|
||||||
if (target.elevation === 5) {
|
|
||||||
target.down = true;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
target.elevation -= 1;
|
|
||||||
if (target.elevation === 0) {
|
|
||||||
target.down = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</template>
|
|
||||||
</demo-snippet>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,30 +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 name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
||||||
|
|
||||||
<title>paper-material</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></iron-component-page>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,42 +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-styles/shadow.html">
|
|
||||||
|
|
||||||
<dom-module id="paper-material-shared-styles">
|
|
||||||
<template>
|
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([elevation="1"]) {
|
|
||||||
@apply(--shadow-elevation-2dp);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([elevation="2"]) {
|
|
||||||
@apply(--shadow-elevation-4dp);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([elevation="3"]) {
|
|
||||||
@apply(--shadow-elevation-6dp);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([elevation="4"]) {
|
|
||||||
@apply(--shadow-elevation-8dp);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([elevation="5"]) {
|
|
||||||
@apply(--shadow-elevation-16dp);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
|
|
@ -1,78 +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="../paper-styles/shadow.html">
|
|
||||||
<link rel="import" href="paper-material-shared-styles.html">
|
|
||||||
|
|
||||||
<!--
|
|
||||||
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
|
|
||||||
|
|
||||||
`paper-material` is a container that renders two shadows on top of each other to
|
|
||||||
create the effect of a lifted piece of paper.
|
|
||||||
|
|
||||||
Example:
|
|
||||||
|
|
||||||
<paper-material elevation="1">
|
|
||||||
... content ...
|
|
||||||
</paper-material>
|
|
||||||
|
|
||||||
@group Paper Elements
|
|
||||||
@demo demo/index.html
|
|
||||||
-->
|
|
||||||
|
|
||||||
<dom-module id="paper-material">
|
|
||||||
<template>
|
|
||||||
<style include="paper-material-shared-styles"></style>
|
|
||||||
<style>
|
|
||||||
:host([animated]) {
|
|
||||||
@apply(--shadow-transition);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<content></content>
|
|
||||||
</template>
|
|
||||||
</dom-module>
|
|
||||||
<script>
|
|
||||||
Polymer({
|
|
||||||
is: 'paper-material',
|
|
||||||
|
|
||||||
properties: {
|
|
||||||
/**
|
|
||||||
* The z-depth of this element, from 0-5. Setting to 0 will remove the
|
|
||||||
* shadow, and each increasing number greater than 0 will be "deeper"
|
|
||||||
* than the last.
|
|
||||||
*
|
|
||||||
* @attribute elevation
|
|
||||||
* @type number
|
|
||||||
* @default 1
|
|
||||||
*/
|
|
||||||
elevation: {
|
|
||||||
type: Number,
|
|
||||||
reflectToAttribute: true,
|
|
||||||
value: 1
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set this to true to animate the shadow when setting a new
|
|
||||||
* `elevation` value.
|
|
||||||
*
|
|
||||||
* @attribute animated
|
|
||||||
* @type boolean
|
|
||||||
* @default false
|
|
||||||
*/
|
|
||||||
animated: {
|
|
||||||
type: Boolean,
|
|
||||||
reflectToAttribute: true,
|
|
||||||
value: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,24 +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 name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
|
||||||
<title>paper-material tests</title>
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script>
|
|
||||||
WCT.loadSuites([
|
|
||||||
'paper-material.html',
|
|
||||||
'paper-material.html?dom=shadow'
|
|
||||||
]);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
|
|
||||||
</body></html>
|
|
||||||
|
|
@ -1,88 +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">
|
|
||||||
<title>paper-material basic tests</title>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
||||||
|
|
||||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
|
||||||
<script src="../../web-component-tester/browser.js"></script>
|
|
||||||
<link href="../paper-material.html" rel="import">
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<test-fixture id="TrivialCard">
|
|
||||||
<template>
|
|
||||||
<paper-material elevation="1"></paper-material>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<test-fixture id="ProgressiveElevations">
|
|
||||||
<template>
|
|
||||||
<paper-material elevation="1"></paper-material>
|
|
||||||
<paper-material elevation="2"></paper-material>
|
|
||||||
<paper-material elevation="3"></paper-material>
|
|
||||||
<paper-material elevation="4"></paper-material>
|
|
||||||
<paper-material elevation="5"></paper-material>
|
|
||||||
</template>
|
|
||||||
</test-fixture>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
suite('<paper-material>', function() {
|
|
||||||
suite('with a non-zero elevation attribute', function() {
|
|
||||||
var style;
|
|
||||||
var card;
|
|
||||||
|
|
||||||
setup(function() {
|
|
||||||
card = fixture('TrivialCard');
|
|
||||||
style = window.getComputedStyle(card);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('has a shadow', function() {
|
|
||||||
expect(style.boxShadow).to.be.ok;
|
|
||||||
expect(style.boxShadow).to.not.be.eql('none');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('loses shadow with elevation value 0', function() {
|
|
||||||
card.elevation = 0;
|
|
||||||
expect(style.boxShadow).to.be.eql('none');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
suite('progressively increasing values of elevation', function() {
|
|
||||||
var cards;
|
|
||||||
|
|
||||||
setup(function() {
|
|
||||||
cards = fixture('ProgressiveElevations');
|
|
||||||
});
|
|
||||||
|
|
||||||
test('yield progressively "deeper" cards', function() {
|
|
||||||
var lastStyle;
|
|
||||||
var style;
|
|
||||||
|
|
||||||
expect(cards.length).to.be.eql(5);
|
|
||||||
|
|
||||||
cards.forEach(function (card) {
|
|
||||||
style = window.getComputedStyle(card);
|
|
||||||
|
|
||||||
expect(style.boxShadow).to.be.ok;
|
|
||||||
expect(style.boxShadow).to.not.be.eql('none');
|
|
||||||
expect(style.boxShadow).to.not.be.eql(lastStyle && lastStyle.boxShadow);
|
|
||||||
|
|
||||||
lastStyle = style;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -591,10 +591,6 @@ progress {
|
||||||
margin: 0 0 3em 0;
|
margin: 0 0 3em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.syncActivityForTarget paper-fab {
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media all and (min-width: 800px) {
|
@media all and (min-width: 800px) {
|
||||||
|
|
||||||
.syncActivityForTarget {
|
.syncActivityForTarget {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage fullWidthContent" data-require="scripts/dashboardpage,humanedate,buttonenabled,paper-icon-item,paper-item-body,paper-fab,emby-collapse,emby-button">
|
<div id="dashboardPage" data-role="page" class="page type-interior dashboardHomePage fullWidthContent" data-require="scripts/dashboardpage,humanedate,buttonenabled,listViewStyle,emby-collapse,emby-button">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="liveTvStatusPage" data-role="page" class="page type-interior liveTvSettingsPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Live%20TV" data-require="scripts/livetvstatus,scripts/taskbutton,paper-fab,paper-item-body,paper-icon-item,paper-checkbox,emby-button">
|
<div id="liveTvStatusPage" data-role="page" class="page type-interior liveTvSettingsPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Live%20TV" data-require="scripts/livetvstatus,scripts/taskbutton,emby-button">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
<div class="content-primary">
|
<div class="content-primary">
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs" data-require="jqmlistview,emby-collapse,scripts/metadataimagespage,paper-checkbox,paper-input,paper-fab,paper-icon-item,paper-item-body,emby-button">
|
<div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage withTabs" data-require="emby-collapse,scripts/metadataimagespage,paper-checkbox,emby-button">
|
||||||
|
|
||||||
<div data-role="content">
|
<div data-role="content">
|
||||||
|
|
||||||
|
|
@ -62,11 +62,7 @@
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<ul data-role="listview" class="ulForm">
|
<div><button is="emby-button" type="submit" class="raised submit block"><i class="md-icon">check</i><span>${ButtonSave}</span></button></div>
|
||||||
<li>
|
|
||||||
<button is="emby-button" type="submit" class="raised submit block"><i class="md-icon">check</i><span>${ButtonSave}</span></button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery'], function ($) {
|
define(['jQuery', 'listViewStyle'], function ($) {
|
||||||
|
|
||||||
var query = {
|
var query = {
|
||||||
|
|
||||||
|
|
@ -58,30 +58,30 @@
|
||||||
|
|
||||||
var info = infos[i];
|
var info = infos[i];
|
||||||
|
|
||||||
html += '<paper-icon-item>';
|
html += '<div class="listItem">';
|
||||||
|
|
||||||
html += '<paper-fab mini icon="folder" item-icon class="blue"></paper-fab>';
|
html += '<i class="listItemIcon md-icon">folder</i>';
|
||||||
|
|
||||||
html += (info.DisplayName || info.ItemName);
|
html += (info.DisplayName || info.ItemName);
|
||||||
|
|
||||||
html += '</paper-icon-item>';
|
html += '</div>';
|
||||||
|
|
||||||
var matchStringIndex = 0;
|
var matchStringIndex = 0;
|
||||||
|
|
||||||
html += info.MatchStrings.map(function (m) {
|
html += info.MatchStrings.map(function (m) {
|
||||||
|
|
||||||
var matchStringHtml = '';
|
var matchStringHtml = '';
|
||||||
matchStringHtml += '<paper-icon-item>';
|
matchStringHtml += '<div class="listItem">';
|
||||||
|
|
||||||
matchStringHtml += '<paper-item-body>';
|
matchStringHtml += '<div class="listItemBody">';
|
||||||
|
|
||||||
matchStringHtml += "<div secondary>" + m + "</div>";
|
matchStringHtml += "<div class='listItemBodyText secondary'>" + m + "</div>";
|
||||||
|
|
||||||
matchStringHtml += '</paper-item-body>';
|
matchStringHtml += '</div>';
|
||||||
|
|
||||||
matchStringHtml += '<button type="button" is="paper-icon-button-light" class="btnDeleteMatchEntry" data-index="' + i + '" data-matchindex="' + matchStringIndex + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
|
matchStringHtml += '<button type="button" is="paper-icon-button-light" class="btnDeleteMatchEntry" data-index="' + i + '" data-matchindex="' + matchStringIndex + '" title="' + Globalize.translate('ButtonDelete') + '"><i class="md-icon">delete</i></button>';
|
||||||
|
|
||||||
matchStringHtml += '</paper-icon-item>';
|
matchStringHtml += '</div>';
|
||||||
matchStringIndex++;
|
matchStringIndex++;
|
||||||
|
|
||||||
return matchStringHtml;
|
return matchStringHtml;
|
||||||
|
|
|
||||||
|
|
@ -151,28 +151,28 @@
|
||||||
var itemHtml = '';
|
var itemHtml = '';
|
||||||
|
|
||||||
itemHtml += '<a class="clearLink" href="' + item.Link + '" target="_blank">';
|
itemHtml += '<a class="clearLink" href="' + item.Link + '" target="_blank">';
|
||||||
itemHtml += '<paper-icon-item>';
|
itemHtml += '<div class="listItem">';
|
||||||
|
|
||||||
itemHtml += '<paper-fab mini class="blue" icon="dvr" item-icon></paper-fab>';
|
itemHtml += '<i class="listItemIcon md-icon">dvr</i>';
|
||||||
|
|
||||||
itemHtml += '<paper-item-body three-line>';
|
itemHtml += '<div class="listItemBody three-line">';
|
||||||
|
|
||||||
itemHtml += '<div>';
|
itemHtml += '<h3 class="listItemBodyText">';
|
||||||
itemHtml += item.Title;
|
itemHtml += item.Title;
|
||||||
itemHtml += '</div>';
|
itemHtml += '</h3>';
|
||||||
|
|
||||||
itemHtml += '<div secondary>';
|
itemHtml += '<div class="listItemBodyText secondary">';
|
||||||
var date = datetime.parseISO8601Date(item.Date, true);
|
var date = datetime.parseISO8601Date(item.Date, true);
|
||||||
itemHtml += date.toLocaleDateString();
|
itemHtml += date.toLocaleDateString();
|
||||||
itemHtml += '</div>';
|
itemHtml += '</div>';
|
||||||
|
|
||||||
itemHtml += '<div secondary>';
|
itemHtml += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
|
||||||
itemHtml += item.Description;
|
itemHtml += item.Description;
|
||||||
itemHtml += '</div>';
|
itemHtml += '</div>';
|
||||||
|
|
||||||
itemHtml += '</paper-item-body>';
|
itemHtml += '</div>';
|
||||||
|
|
||||||
itemHtml += '</paper-icon-item>';
|
itemHtml += '</div>';
|
||||||
itemHtml += '</a>';
|
itemHtml += '</a>';
|
||||||
|
|
||||||
return itemHtml;
|
return itemHtml;
|
||||||
|
|
@ -1031,7 +1031,7 @@
|
||||||
|
|
||||||
var html = '';
|
var html = '';
|
||||||
|
|
||||||
html += '<paper-icon-item>';
|
html += '<div class="listItem">';
|
||||||
|
|
||||||
var color = entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn' ? '#cc0000' : '#52B54B';
|
var color = entry.Severity == 'Error' || entry.Severity == 'Fatal' || entry.Severity == 'Warn' ? '#cc0000' : '#52B54B';
|
||||||
|
|
||||||
|
|
@ -1043,30 +1043,30 @@
|
||||||
height: 40
|
height: 40
|
||||||
});
|
});
|
||||||
|
|
||||||
html += '<paper-fab mini style="background-color:' + color + ';background-image:url(\'' + userImgUrl + '\');background-repeat:no-repeat;background-position:center center;background-size: cover;" item-icon></paper-fab>';
|
html += '<i class="listItemIcon md-icon" style="width:2em!important;height:2em!important;padding:0;color:transparent;background-color:' + color + ';background-image:url(\'' + userImgUrl + '\');background-repeat:no-repeat;background-position:center center;background-size: cover;">dvr</i>';
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
html += '<paper-fab mini icon="dvr" style="background-color:' + color + '" item-icon></paper-fab>';
|
html += '<i class="listItemIcon md-icon" style="background-color:' + color + '">dvr</i>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<paper-item-body three-line>';
|
html += '<div class="listItemBody three-line">';
|
||||||
|
|
||||||
html += '<div>';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += entry.Name;
|
html += entry.Name;
|
||||||
html += '</div>';
|
html += '</h3>';
|
||||||
|
|
||||||
html += '<div secondary>';
|
html += '<div class="listItemBodyText secondary">';
|
||||||
var date = datetime.parseISO8601Date(entry.Date, true);
|
var date = datetime.parseISO8601Date(entry.Date, true);
|
||||||
html += date.toLocaleDateString() + ' ' + date.toLocaleTimeString().toLowerCase();
|
html += date.toLocaleDateString() + ' ' + date.toLocaleTimeString().toLowerCase();
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<div secondary>';
|
html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
|
||||||
html += entry.ShortOverview || '';
|
html += entry.ShortOverview || '';
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '</paper-item-body>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '</paper-icon-item>';
|
html += '</div>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery'], function ($) {
|
define(['jQuery', 'listViewStyle'], function ($) {
|
||||||
|
|
||||||
function resetTuner(page, id) {
|
function resetTuner(page, id) {
|
||||||
|
|
||||||
|
|
@ -30,21 +30,21 @@
|
||||||
for (var i = 0, length = tuners.length; i < length; i++) {
|
for (var i = 0, length = tuners.length; i < length; i++) {
|
||||||
|
|
||||||
var tuner = tuners[i];
|
var tuner = tuners[i];
|
||||||
html += '<paper-icon-item>';
|
html += '<div class="listItem">';
|
||||||
|
|
||||||
html += '<paper-fab mini style="background:#52B54B;" icon="live-tv" item-icon></paper-fab>';
|
html += '<i class="listItemIcon md-icon">live_tv</i>';
|
||||||
|
|
||||||
html += '<paper-item-body two-line>';
|
html += '<div class="listItemBody two-line">';
|
||||||
|
|
||||||
html += '<div>';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += tuner.Name;
|
html += tuner.Name;
|
||||||
html += '</div>';
|
html += '</h3>';
|
||||||
|
|
||||||
html += '<div secondary>';
|
html += '<div class="listItemBodyText secondary">';
|
||||||
html += tuner.SourceType;
|
html += tuner.SourceType;
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<div secondary>';
|
html += '<div class="listItemBodyText secondary">';
|
||||||
if (tuner.Status == 'RecordingTv') {
|
if (tuner.Status == 'RecordingTv') {
|
||||||
if (tuner.ChannelName) {
|
if (tuner.ChannelName) {
|
||||||
|
|
||||||
|
|
@ -73,13 +73,13 @@
|
||||||
}
|
}
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '</paper-item-body>';
|
html += '</div>';
|
||||||
|
|
||||||
if (tuner.CanReset) {
|
if (tuner.CanReset) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" data-tunerid="' + tuner.Id + '" title="' + Globalize.translate('ButtonResetTuner') + '" class="btnResetTuner"><iron-icon icon="refresh"></iron-icon></button>';
|
html += '<button type="button" is="paper-icon-button-light" data-tunerid="' + tuner.Id + '" title="' + Globalize.translate('ButtonResetTuner') + '" class="btnResetTuner"><i class="md-icon">refresh</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</paper-icon-item>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -198,24 +198,24 @@
|
||||||
|
|
||||||
var href = 'livetvtunerprovider-' + device.Type + '.html?id=' + device.Id;
|
var href = 'livetvtunerprovider-' + device.Type + '.html?id=' + device.Id;
|
||||||
|
|
||||||
html += '<paper-icon-item>';
|
html += '<div class="listItem">';
|
||||||
|
|
||||||
html += '<paper-fab mini style="background:#52B54B;" icon="live-tv" item-icon></paper-fab>';
|
html += '<i class="listItemIcon md-icon">live_tv</i>';
|
||||||
|
|
||||||
html += '<paper-item-body two-line>';
|
html += '<div class="listItemBody two-line">';
|
||||||
html += '<a class="clearLink" href="' + href + '">';
|
html += '<a class="clearLink" href="' + href + '">';
|
||||||
html += '<div>';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += device.FriendlyName || getTunerName(device.Type);
|
html += device.FriendlyName || getTunerName(device.Type);
|
||||||
html += '</div>';
|
html += '</h3>';
|
||||||
|
|
||||||
html += '<div secondary>';
|
html += '<div class="listItemBodyText secondary">';
|
||||||
html += device.Url;
|
html += device.Url;
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
html += '</a>';
|
html += '</a>';
|
||||||
html += '</paper-item-body>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteDevice" data-id="' + device.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><iron-icon icon="delete"></iron-icon></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="btnDeleteDevice" data-id="' + device.Id + '" title="' + Globalize.translate('ButtonDelete') + '"><i class="md-icon">delete</i></button>';
|
||||||
html += '</paper-icon-item>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -308,22 +308,22 @@
|
||||||
for (var i = 0, length = providers.length; i < length; i++) {
|
for (var i = 0, length = providers.length; i < length; i++) {
|
||||||
|
|
||||||
var provider = providers[i];
|
var provider = providers[i];
|
||||||
html += '<paper-icon-item>';
|
html += '<div class="listItem">';
|
||||||
|
|
||||||
html += '<paper-fab mini style="background:#52B54B;" icon="dvr" item-icon></paper-fab>';
|
html += '<i class="listItemIcon md-icon">dvr</i>';
|
||||||
|
|
||||||
html += '<paper-item-body two-line>';
|
html += '<div class="listItemBody two-line">';
|
||||||
|
|
||||||
html += '<a class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
|
html += '<a class="clearLink" href="' + getProviderConfigurationUrl(provider.Type) + '&id=' + provider.Id + '">';
|
||||||
|
|
||||||
html += '<div>';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += getProviderName(provider.Type);
|
html += getProviderName(provider.Type);
|
||||||
html += '</div>';
|
html += '</h3>';
|
||||||
|
|
||||||
html += '</a>';
|
html += '</a>';
|
||||||
html += '</paper-item-body>';
|
html += '</div>';
|
||||||
html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><iron-icon icon="more-vert"></iron-icon></button>';
|
html += '<button type="button" is="paper-icon-button-light" class="btnOptions" data-id="' + provider.Id + '"><i class="md-icon">more_vert</i></button>';
|
||||||
html += '</paper-icon-item>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
define(['jQuery'], function ($) {
|
define(['jQuery', 'listViewStyle'], function ($) {
|
||||||
|
|
||||||
var currentType;
|
var currentType;
|
||||||
|
|
||||||
|
|
@ -159,22 +159,22 @@
|
||||||
|
|
||||||
var isChecked = config.DisabledImageFetchers.indexOf(plugin.Name) == -1 ? ' checked="checked"' : '';
|
var isChecked = config.DisabledImageFetchers.indexOf(plugin.Name) == -1 ? ' checked="checked"' : '';
|
||||||
|
|
||||||
html += '<paper-icon-item class="imageFetcherItem" data-pluginname="' + plugin.Name + '">';
|
html += '<div class="listItem imageFetcherItem" data-pluginname="' + plugin.Name + '">';
|
||||||
|
|
||||||
html += '<paper-checkbox class="chkImageFetcher" data-pluginname="' + plugin.Name + '" item-icon' + isChecked + '></paper-checkbox>';
|
html += '<paper-checkbox class="chkImageFetcher" data-pluginname="' + plugin.Name + '" item-icon' + isChecked + '></paper-checkbox>';
|
||||||
|
|
||||||
html += '<paper-item-body>';
|
html += '<div class="listItemBody">';
|
||||||
|
|
||||||
html += '<div>';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += plugin.Name;
|
html += plugin.Name;
|
||||||
|
html += '</h3>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '</paper-item-body>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnUp" style="padding:3px 8px;"><i class="md-icon">keyboard_arrow_up</i></button>';
|
||||||
|
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnDown" style="padding:3px 8px;"><i class="md-icon">keyboard_arrow_down</i></button>';
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnUp" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-up"></iron-icon></button>';
|
html += '</div>';
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnDown" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-down"></iron-icon></button>';
|
|
||||||
|
|
||||||
html += '</paper-icon-item>';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -262,22 +262,22 @@
|
||||||
|
|
||||||
var isChecked = config.DisabledMetadataFetchers.indexOf(plugin.Name) == -1 ? ' checked="checked"' : '';
|
var isChecked = config.DisabledMetadataFetchers.indexOf(plugin.Name) == -1 ? ' checked="checked"' : '';
|
||||||
|
|
||||||
html += '<paper-icon-item class="metadataFetcherItem" data-pluginname="' + plugin.Name + '">';
|
html += '<div class="listItem metadataFetcherItem" data-pluginname="' + plugin.Name + '">';
|
||||||
|
|
||||||
html += '<paper-checkbox class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" item-icon' + isChecked + '></paper-checkbox>';
|
html += '<paper-checkbox class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" item-icon' + isChecked + '></paper-checkbox>';
|
||||||
|
|
||||||
html += '<paper-item-body>';
|
html += '<div class="listItemBody">';
|
||||||
|
|
||||||
html += '<div>';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += plugin.Name;
|
html += plugin.Name;
|
||||||
|
html += '</h3>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '</paper-item-body>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnUp" style="padding:3px 8px;"><i class="md-icon">keyboard_arrow_up</i></button>';
|
||||||
|
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnDown" style="padding:3px 8px;"><i class="md-icon">keyboard_arrow_down</i></button>';
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnUp" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-up"></iron-icon></button>';
|
html += '</div>';
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnDown" style="padding:3px 8px;"><iron-icon icon="keyboard-arrow-down"></iron-icon></button>';
|
|
||||||
|
|
||||||
html += '</paper-icon-item>';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
@ -330,27 +330,27 @@
|
||||||
|
|
||||||
var plugin = plugins[i];
|
var plugin = plugins[i];
|
||||||
|
|
||||||
html += '<paper-icon-item class="localReaderOption" data-pluginname="' + plugin.Name + '">';
|
html += '<div class="listItem localReaderOption" data-pluginname="' + plugin.Name + '">';
|
||||||
|
|
||||||
html += '<paper-fab mini style="background:#52B54B;" icon="live-tv" item-icon></paper-fab>';
|
html += '<i class="listItemIcon md-icon">live_tv</i>';
|
||||||
|
|
||||||
html += '<paper-item-body>';
|
html += '<div class="listItemBody">';
|
||||||
|
|
||||||
html += '<div>';
|
html += '<h3 class="listItemBodyText">';
|
||||||
html += plugin.Name;
|
html += plugin.Name;
|
||||||
|
html += '</h3>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
html += '</paper-item-body>';
|
|
||||||
|
|
||||||
if (i > 0) {
|
if (i > 0) {
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnLocalReaderUp btnLocalReaderMove" data-pluginindex="' + i + '"><iron-icon icon="keyboard-arrow-up"></iron-icon></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonUp') + '" class="btnLocalReaderUp btnLocalReaderMove" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_up</i></button>';
|
||||||
}
|
}
|
||||||
else if (plugins.length > 1) {
|
else if (plugins.length > 1) {
|
||||||
|
|
||||||
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnLocalReaderDown btnLocalReaderMove" data-pluginindex="' + i + '"><iron-icon icon="keyboard-arrow-down"></iron-icon></button>';
|
html += '<button type="button" is="paper-icon-button-light" title="' + Globalize.translate('ButtonDown') + '" class="btnLocalReaderDown btnLocalReaderMove" data-pluginindex="' + i + '"><i class="md-icon">keyboard_arrow_down</i></button>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</paper-icon-item>';
|
html += '</div>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue