mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework settings page
This commit is contained in:
Luke Pulverenti
parent
3e9ce24eaf
commit
2548f83871
35 changed files with 1216 additions and 520 deletions
|
|
@ -25,14 +25,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/iron-meta",
|
||||
"homepage": "https://github.com/PolymerElements/iron-meta",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-meta.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-meta.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-meta"
|
||||
"_originalSource": "PolymerElements/iron-meta"
|
||||
}
|
||||
50
dashboard-ui/bower_components/paper-item/.bower.json
vendored
Normal file
50
dashboard-ui/bower_components/paper-item/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
{
|
||||
"name": "paper-item",
|
||||
"version": "1.0.2",
|
||||
"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": "MIT",
|
||||
"homepage": "https://github.com/PolymerElements/paper-item",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
|
||||
"paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "209d000bd2e99d9b31cfc996bbc5b0fc554be21d"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-item.git",
|
||||
"_target": "~1.0.2",
|
||||
"_originalSource": "PolymerElements/paper-item",
|
||||
"_direct": true
|
||||
}
|
||||
1
dashboard-ui/bower_components/paper-item/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/paper-item/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components/
|
||||
13
dashboard-ui/bower_components/paper-item/all-imports.html
vendored
Normal file
13
dashboard-ui/bower_components/paper-item/all-imports.html
vendored
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!--
|
||||
@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">
|
||||
40
dashboard-ui/bower_components/paper-item/bower.json
vendored
Normal file
40
dashboard-ui/bower_components/paper-item/bower.json
vendored
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "paper-item",
|
||||
"version": "1.0.2",
|
||||
"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": "MIT",
|
||||
"homepage": "https://github.com/PolymerElements/paper-item",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
|
||||
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
|
||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0",
|
||||
"paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
285
dashboard-ui/bower_components/paper-item/demo/index.html
vendored
Normal file
285
dashboard-ui/bower_components/paper-item/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
<!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="../../paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="../../paper-toggle-button/paper-toggle-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/paper-styles.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
|
||||
<style is="custom-style">
|
||||
.list {
|
||||
padding-top: 12px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
width: 240px;
|
||||
height: 228px;
|
||||
margin: 12px;
|
||||
@apply(--shadow-elevation-2dp);
|
||||
}
|
||||
|
||||
.short {
|
||||
padding-top: 12px;
|
||||
height: 216px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: var(--paper-light-blue-300);
|
||||
}
|
||||
.red {
|
||||
background-color: var(--paper-red-300);
|
||||
}
|
||||
.orange {
|
||||
background-color: var(--paper-amber-300);
|
||||
}
|
||||
.green {
|
||||
background-color: var(--paper-green-300);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body unresolved>
|
||||
<div class="layout wrap inline center-center">
|
||||
<div>
|
||||
<h4>Single line items</h4>
|
||||
<div class="list short">
|
||||
<paper-item>Inbox</paper-item>
|
||||
<paper-item>Starred</paper-item>
|
||||
<paper-item>Sent mail</paper-item>
|
||||
<paper-item>Drafts</paper-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Icon with text</h4>
|
||||
<div class="list short">
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="inbox" item-icon></iron-icon> Inbox
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="send" item-icon></iron-icon> Outbox
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="delete" item-icon></iron-icon> Trash
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<iron-icon icon="report" item-icon></iron-icon> Spam
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Avatar with text</h4>
|
||||
<div class="list short">
|
||||
<paper-icon-item>
|
||||
<div class="avatar blue" item-icon></div> Alphonso Engelking
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar red" item-icon></div> Andrews Boyd
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar orange" item-icon></div> Angela Decker
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar green" item-icon></div> Lorem Ipsum
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Avatar with text and icon</h4>
|
||||
<div class="list short">
|
||||
<paper-icon-item>
|
||||
<div class="avatar red" item-icon></div>
|
||||
<div class="flex">Alphonso</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar orange" item-icon></div>
|
||||
<div class="flex">Andrews</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar green" item-icon></div>
|
||||
<div class="flex">Angela</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar blue" item-icon></div>
|
||||
<div class="flex">Lorem</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Avatar with text and control</h4>
|
||||
<div class="list short">
|
||||
<paper-icon-item>
|
||||
<div class="avatar orange" item-icon></div>
|
||||
<div class="flex">Alphonso</div>
|
||||
<paper-checkbox></paper-checkbox>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar green" item-icon></div>
|
||||
<div class="flex">Andrews</div>
|
||||
<paper-checkbox checked></paper-checkbox>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar blue" item-icon></div>
|
||||
<div class="flex">Angela</div>
|
||||
<paper-checkbox></paper-checkbox>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar red" item-icon></div>
|
||||
<div class="flex">Lorem</div>
|
||||
<paper-checkbox></paper-checkbox>
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Control with text and icon</h4>
|
||||
<div class="list short">
|
||||
<paper-icon-item>
|
||||
<paper-checkbox item-icon></paper-checkbox>
|
||||
<div class="flex">Alphonso</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<paper-checkbox checked item-icon></paper-checkbox>
|
||||
<div class="flex">Andrews</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<paper-checkbox item-icon></paper-checkbox>
|
||||
<div class="flex">Angela</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<paper-checkbox item-icon></paper-checkbox>
|
||||
<div class="flex">Lorem</div>
|
||||
<iron-icon icon="communication:chat"></iron-icon>
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Two-line items</h4>
|
||||
<div class="list">
|
||||
<paper-item>
|
||||
<paper-item-body two-line class="layout vertical">
|
||||
<div>Profile Photo</div>
|
||||
<div secondary>Change your Google+ profile photo</div>
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
<paper-item>
|
||||
<paper-item-body two-line>
|
||||
<div>Show your status</div>
|
||||
<div secondary>Your status is visible to everyone you use with</div>
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
<paper-item>
|
||||
<paper-item-body two-line class="layout vertical">
|
||||
<div>Settings</div>
|
||||
<div secondary>Change your account settings</div>
|
||||
</paper-item-body>
|
||||
</paper-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Icon with two-line text</h4>
|
||||
<div class="list">
|
||||
<paper-icon-item>
|
||||
<div class="avatar green" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>Alphonso Engelking</div>
|
||||
<div secondary>Change photo</div>
|
||||
</paper-item-body>
|
||||
</paper-icon-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>
|
||||
<iron-icon icon="communication:email" item-icon></iron-icon>
|
||||
<paper-item-body two-line>
|
||||
<div>alphonso@example.com</div>
|
||||
<div secondary>Personal</div>
|
||||
</paper-item-body>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Avatar with text and icon</h4>
|
||||
<div class="list">
|
||||
<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>
|
||||
<iron-icon icon="star"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar red" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>Recipes</div>
|
||||
<div secondary>Jan 17, 2014</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="star"></iron-icon>
|
||||
</paper-icon-item>
|
||||
<paper-icon-item>
|
||||
<div class="avatar orange" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>Work</div>
|
||||
<div secondary>Jan 28, 2014</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="star"></iron-icon>
|
||||
</paper-icon-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
dashboard-ui/bower_components/paper-item/index.html
vendored
Normal file
30
dashboard-ui/bower_components/paper-item/index.html
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!--
|
||||
@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>
|
||||
86
dashboard-ui/bower_components/paper-item/paper-icon-item.html
vendored
Normal file
86
dashboard-ui/bower_components/paper-item/paper-icon-item.html
vendored
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<!--
|
||||
@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/paper-styles.html">
|
||||
|
||||
<!--
|
||||
`<paper-icon-item>` is a convenience element to make an item with icon. It is a non 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-icon-item` | Mixin applied to the item | `{}`
|
||||
|
||||
-->
|
||||
|
||||
<dom-module id="paper-icon-item">
|
||||
|
||||
<link rel="import" type="css" href="paper-item-shared.css">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-item);
|
||||
@apply(--paper-icon-item);
|
||||
}
|
||||
|
||||
.content-icon {
|
||||
width: var(--paper-item-icon-width, 56px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div id="contentIcon" class="content-icon layout horizontal center">
|
||||
<content select="[item-icon]"></content>
|
||||
</div>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-icon-item',
|
||||
|
||||
hostAttributes: {
|
||||
'role': 'listitem'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
93
dashboard-ui/bower_components/paper-item/paper-item-body.html
vendored
Normal file
93
dashboard-ui/bower_components/paper-item/paper-item-body.html
vendored
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<!--
|
||||
@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/paper-styles.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">
|
||||
|
||||
<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 > * {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:host > ::content [secondary] {
|
||||
color: var(--paper-item-body-secondary-color, --secondary-text-color);
|
||||
@apply(--paper-font-body1);
|
||||
|
||||
@apply(--paper-item-body-secondary);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-item-body'
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
19
dashboard-ui/bower_components/paper-item/paper-item-shared.css
vendored
Normal file
19
dashboard-ui/bower_components/paper-item/paper-item-shared.css
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
@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
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
min-height: var(--paper-item-min-height, 48px);
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
:host > ::content > *:not(:first-child):not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
95
dashboard-ui/bower_components/paper-item/paper-item.html
vendored
Normal file
95
dashboard-ui/bower_components/paper-item/paper-item.html
vendored
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!--
|
||||
@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/paper-styles.html">
|
||||
|
||||
<!--
|
||||
`<paper-item>` is a non-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>
|
||||
|
||||
### 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 | `{}`
|
||||
|
||||
### 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">
|
||||
|
||||
<link rel="import" type="css" href="paper-item-shared.css">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-item);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-item',
|
||||
|
||||
hostAttributes: {
|
||||
role: 'listitem'
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
34
dashboard-ui/bower_components/paper-item/test/index.html
vendored
Normal file
34
dashboard-ui/bower_components/paper-item/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!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'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
66
dashboard-ui/bower_components/paper-item/test/paper-item.html
vendored
Normal file
66
dashboard-ui/bower_components/paper-item/test/paper-item.html
vendored
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<!--
|
||||
@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="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../paper-item.html">
|
||||
<link rel="import" href="../paper-icon-item.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="item">
|
||||
<template>
|
||||
<paper-item>item</paper-item>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="iconItem">
|
||||
<template>
|
||||
<paper-icon-item>item</paper-icon-item>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('item a11y tests', function() {
|
||||
var item, iconItem;
|
||||
|
||||
setup(function() {
|
||||
item = fixture('item');
|
||||
iconItem = fixture('iconItem');
|
||||
});
|
||||
|
||||
test('item has role="listitem"', function() {
|
||||
assert.equal(item.getAttribute('role'), 'listitem', 'has role="item"');
|
||||
});
|
||||
|
||||
test('icon item has role="listitem"', function() {
|
||||
assert.equal(iconItem.getAttribute('role'), 'listitem', 'has role="item"');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
"tag": "v1.0.11",
|
||||
"commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-styles.git",
|
||||
"_source": "git://github.com/PolymerLabs/paper-styles.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-styles"
|
||||
"_originalSource": "PolymerLabs/paper-styles"
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue