mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
rework settings page
This commit is contained in:
Luke Pulverenti
parent
3e9ce24eaf
commit
2548f83871
@ -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"
|
||||
}
|
||||
@ -5,23 +5,16 @@
|
||||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferencesdisplay,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="ui-btn-active lnkDisplayPreferences">${TabGeneral}</a>
|
||||
<a href="#" class="lnkHomeScreenPreferences">${TabHomeScreen}</a>
|
||||
<a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
|
||||
<a href="#" class="lnkMyProfile">${TabProfile}</a>
|
||||
</div>
|
||||
<div id="displayPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderDisplaySettings}" data-require="scripts/mypreferencesdisplay,paperbuttonstyle,jqmicons" data-backbutton="true" data-menubutton="false">
|
||||
|
||||
<div data-role="content">
|
||||
<br />
|
||||
<form class="displayPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderNavigation}
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div>
|
||||
@ -45,12 +38,10 @@
|
||||
</div>
|
||||
|
||||
<div class="fldFullscreen">
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<div data-role="controlgroup">
|
||||
<label for="chkEnableFullScreen">${LabelEnableFullScreen}</label>
|
||||
<input type="checkbox" id="chkEnableFullScreen" />
|
||||
</div>
|
||||
<paper-checkbox class="chkEnableFullScreen">${LabelEnableFullScreen}</paper-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -58,52 +49,37 @@
|
||||
</div>
|
||||
|
||||
<div class="detailSection syncSettingsSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderSync}
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div>
|
||||
<div data-role="controlgroup">
|
||||
<label for="chkSyncToExternalCard">${OptionSyncToSDCard}</label>
|
||||
<input type="checkbox" id="chkSyncToExternalCard" />
|
||||
</div>
|
||||
</div>
|
||||
<paper-checkbox class="chkSyncToExternalCard">${OptionSyncToSDCard}</paper-checkbox>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detailSection requiresUserPreferences">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderDisplay}<span style="color:#52B54B;margin-left:.5em;">*</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div data-role="controlgroup">
|
||||
<div>
|
||||
<input type="checkbox" id="chkDisplayMissingEpisodes" />
|
||||
<label for="chkDisplayMissingEpisodes">${LabelDisplayMissingEpisodesWithinSeasons}</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="chkDisplayUnairedEpisodes" />
|
||||
<label for="chkDisplayUnairedEpisodes">${LabelUnairedMissingEpisodesWithinSeasons}</label>
|
||||
</div>
|
||||
<div>
|
||||
<paper-checkbox class="chkDisplayMissingEpisodes">${LabelDisplayMissingEpisodesWithinSeasons}</paper-checkbox>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<div data-role="controlgroup">
|
||||
<input type="checkbox" id="chkDisplayTrailersWithinMovieSuggestions" />
|
||||
<label for="chkDisplayTrailersWithinMovieSuggestions">${LabelDisplayTrailersWithinMovieSuggestions}</label>
|
||||
</div>
|
||||
<div class="fieldDescription">${LabelDisplayTrailersWithinMovieSuggestionsHelp}</div>
|
||||
<paper-checkbox class="chkDisplayUnairedEpisodes">${LabelUnairedMissingEpisodesWithinSeasons}</paper-checkbox>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<div data-role="controlgroup">
|
||||
<input type="checkbox" id="chkGroupMoviesIntoCollections" />
|
||||
<label for="chkGroupMoviesIntoCollections">${LabelGroupMoviesIntoCollections}</label>
|
||||
</div>
|
||||
<div class="fieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
|
||||
<paper-checkbox class="chkDisplayTrailersWithinMovieSuggestions">${LabelDisplayTrailersWithinMovieSuggestions}</paper-checkbox>
|
||||
<div class="fieldDescription paperCheckboxFieldDescription">${LabelDisplayTrailersWithinMovieSuggestionsHelp}</div>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<paper-checkbox class="chkGroupMoviesIntoCollections">${LabelGroupMoviesIntoCollections}</paper-checkbox>
|
||||
<div class="fieldDescription paperCheckboxFieldDescription">${LabelGroupMoviesIntoCollectionsHelp}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -113,8 +89,6 @@
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
|
||||
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</div>
|
||||
<p>
|
||||
<span style="color:#52B54B;margin-left:.5em;margin-right:.5em;">*</span><span>${LegendTheseSettingsShared}</span>
|
||||
|
||||
@ -5,23 +5,15 @@
|
||||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferenceshome,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="lnkDisplayPreferences">${TabGeneral}</a>
|
||||
<a href="#" class="ui-btn-active lnkHomeScreenPreferences">${TabHomeScreen}</a>
|
||||
<a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
|
||||
<a href="#" class="lnkMyProfile">${TabProfile}</a>
|
||||
</div>
|
||||
<div id="homeScreenPreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderHomeScreenSettings}" data-require="scripts/mypreferenceshome,paperbuttonstyle,jqmicons" data-backbutton="true" data-menubutton="false">
|
||||
|
||||
<div data-role="content">
|
||||
<br />
|
||||
<form class="homeScreenPreferencesForm userProfileSettingsForm" style="margin: 0 auto;">
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderHomePage}
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
@ -87,9 +79,9 @@
|
||||
</div>
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderMyViews}<span style="color:#52B54B;margin-left:.5em;">*</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<div>
|
||||
<p>${LabelSelectFolderGroups}</p>
|
||||
@ -99,11 +91,8 @@
|
||||
<br />
|
||||
|
||||
<div>
|
||||
<div data-role="controlgroup">
|
||||
<label for="chkDisplayCollectionView">${LabelDisplayCollectionsView}</label>
|
||||
<input id="chkDisplayCollectionView" type="checkbox" />
|
||||
</div>
|
||||
<div class="fieldDescription">${LabelDisplayCollectionsViewHelp}</div>
|
||||
<paper-checkbox class="chkDisplayCollectionView">${LabelDisplayCollectionsView}</paper-checkbox>
|
||||
<div class="fieldDescription paperCheckboxFieldDescription">${LabelDisplayCollectionsViewHelp}</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
@ -119,9 +108,9 @@
|
||||
</div>
|
||||
|
||||
<div class="detailSection viewStylesSection" style="display:none;">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderViewStyles}<span style="color:#52B54B;margin-left:.5em;">*</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<p>${LabelSelectViewStyles}</p>
|
||||
<div class="viewStylesList">
|
||||
@ -132,9 +121,9 @@
|
||||
</div>
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderViewOrder}<span style="color:#52B54B;margin-left:.5em;">*</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<p>${LabelSelectUserViewOrder}</p>
|
||||
<div class="viewOrderList">
|
||||
@ -145,9 +134,9 @@
|
||||
</div>
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderLatestItems}<span style="color:#52B54B;margin-left:.5em;">*</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<p>${LabelSelectLastestItemsFolders}</p>
|
||||
<div class="latestItemsList">
|
||||
@ -155,10 +144,7 @@
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div data-role="controlgroup">
|
||||
<label for="chkHidePlayedFromLatest">${OptionHideWatchedContentFromLatestMedia}</label>
|
||||
<input id="chkHidePlayedFromLatest" type="checkbox" />
|
||||
</div>
|
||||
<paper-checkbox class="chkHidePlayedFromLatest">${OptionHideWatchedContentFromLatestMedia}</paper-checkbox>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -167,8 +153,6 @@
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
|
||||
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</div>
|
||||
<p>
|
||||
<span style="color:#52B54B;margin-left:.5em;margin-right:.5em;">*</span><span>${LegendTheseSettingsShared}</span>
|
||||
|
||||
@ -5,24 +5,17 @@
|
||||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferenceslanguages,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
|
||||
<div id="languagePreferencesPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${HeaderPlaybackSettings}" data-require="scripts/mypreferenceslanguages,paperbuttonstyle,jqmicons" data-backbutton="true" data-menubutton="false">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="lnkDisplayPreferences">${TabGeneral}</a>
|
||||
<a href="#" class="lnkHomeScreenPreferences">${TabHomeScreen}</a>
|
||||
<a href="#" class="ui-btn-active lnkLanguagePreferences">${TabPlayback}</a>
|
||||
<a href="#" class="lnkMyProfile">${TabProfile}</a>
|
||||
</div>
|
||||
<div data-role="content">
|
||||
|
||||
<br />
|
||||
<form style="margin: 0 auto;" class="languagePreferencesForm userProfileSettingsForm">
|
||||
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderLanguagePreferences}<span style="color:#52B54B;margin-left:.5em;">*</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div>
|
||||
@ -30,11 +23,8 @@
|
||||
<select id="selectAudioLanguage" data-mini="true"></select>
|
||||
</div>
|
||||
<br />
|
||||
<div data-role="controlgroup">
|
||||
<input type="checkbox" id="chkPlayDefaultAudioTrack" />
|
||||
<label for="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</label>
|
||||
</div>
|
||||
<br />
|
||||
<paper-checkbox class="chkPlayDefaultAudioTrack">${LabelPlayDefaultAudioTrack}</paper-checkbox>
|
||||
<br /><br /><br />
|
||||
<div>
|
||||
<label for="selectSubtitleLanguage">${LabelSubtitleLanguagePreference}</label>
|
||||
<select id="selectSubtitleLanguage" data-mini="true"></select>
|
||||
@ -57,31 +47,27 @@
|
||||
|
||||
</div>
|
||||
<div class="detailSection cinemaModeOptions" style="display:none;">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderCinemaMode}<span style="color:#52B54B;margin-left:.5em;">*</span>
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div data-role="controlgroup">
|
||||
<input type="checkbox" id="chkEnableCinemaMode" />
|
||||
<label for="chkEnableCinemaMode">${LabelEnableCinemaMode}</label>
|
||||
</div>
|
||||
<paper-checkbox class="chkEnableCinemaMode">${LabelEnableCinemaMode}</paper-checkbox>
|
||||
|
||||
<div class="fieldDescription">${CinemaModeConfigurationHelp}</div>
|
||||
<div class="fieldDescription paperCheckboxFieldDescription">${CinemaModeConfigurationHelp}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderAdvanced}
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div>
|
||||
<label for="selectMaxBitrate">${LabelMaxStreamingBitrate}</label>
|
||||
<select id="selectMaxBitrate" data-mini="true">
|
||||
</select>
|
||||
<select id="selectMaxBitrate" data-mini="true"></select>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
@ -116,20 +102,17 @@
|
||||
<div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="chkEnableChromecastAc3">${LabelEnableChromecastAc3Passthrough}</label>
|
||||
<input type="checkbox" id="chkEnableChromecastAc3" data-mini="true" />
|
||||
<paper-checkbox class="chkEnableChromecastAc3">${LabelEnableChromecastAc3Passthrough}</paper-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<div>
|
||||
<fieldset data-role="controlgroup">
|
||||
<legend>${LabelExternalPlayers}</legend>
|
||||
<input type="checkbox" id="chkExternalVideoPlayer" />
|
||||
<label for="chkExternalVideoPlayer">${OptionEnableExternalVideoPlayers}</label>
|
||||
</fieldset>
|
||||
<div style="padding: 0 2px;display:none;" class="labelGenericExternalPlayers">${LabelExternalPlayersHelp}</div>
|
||||
<div style="padding: 0 2px;display:none;" class="labelNativeExternalPlayers">${LabelNativeExternalPlayersHelp}</div>
|
||||
<paper-checkbox class="chkExternalVideoPlayer">${OptionEnableExternalVideoPlayers}</paper-checkbox>
|
||||
<div class="fieldDescription paperCheckboxFieldDescription">
|
||||
<div style="display:none;" class="labelGenericExternalPlayers">${LabelExternalPlayersHelp}</div>
|
||||
<div style="display:none;" class="labelNativeExternalPlayers">${LabelNativeExternalPlayersHelp}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -138,8 +121,6 @@
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
|
||||
<paper-button raised class="cancel block btnCancel" onclick="history.back();"><iron-icon icon="close"></iron-icon><span>${ButtonCancel}</span></paper-button>
|
||||
</div>
|
||||
<p>
|
||||
<span style="color:#52B54B;margin-left:.5em;margin-right:.5em;">*</span><span>${LegendTheseSettingsShared}</span>
|
||||
|
||||
95
dashboard-ui/mypreferencesmenu.html
Normal file
95
dashboard-ui/mypreferencesmenu.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="myPreferencesMenuPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-contextname="${HeaderSettings}" data-require="scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
|
||||
|
||||
<style>
|
||||
.avatar.green {
|
||||
background-color: #81c784;
|
||||
}
|
||||
|
||||
.avatar.orange {
|
||||
background-color: #ffd54f;
|
||||
}
|
||||
|
||||
.avatar.blue {
|
||||
background-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.avatar.red {
|
||||
background-color: #e57373;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.list {
|
||||
padding-top: 12px;
|
||||
background-color: #303030;
|
||||
margin: 12px auto;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
<div data-role="content">
|
||||
<div class="readOnlyContent" style="margin: 0 auto;">
|
||||
<h1>${HeaderSettings}</h1>
|
||||
<div class="list">
|
||||
<a href="#" class="clearLink lnkDisplayPreferences">
|
||||
<paper-icon-item>
|
||||
<div class="avatar blue" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>${ButtonDisplaySettings}</div>
|
||||
<div secondary>${ButtonDisplaySettingsHelp}</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="tv"></iron-icon>
|
||||
</paper-icon-item>
|
||||
</a>
|
||||
|
||||
<a href="#" class="clearLink lnkHomeScreenPreferences">
|
||||
<paper-icon-item>
|
||||
<div class="avatar red" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>${ButtonHomeScreenSettings}</div>
|
||||
<div secondary>${ButtonHomeScreenSettingsHelp}</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="home"></iron-icon>
|
||||
</paper-icon-item>
|
||||
</a>
|
||||
|
||||
<a href="#" class="clearLink lnkLanguagePreferences">
|
||||
<paper-icon-item>
|
||||
<div class="avatar green" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>${ButtonPlaybackSettings}</div>
|
||||
<div secondary>${ButtonPlaybackSettingsHelp}</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="play-circle-outline"></iron-icon>
|
||||
</paper-icon-item>
|
||||
</a>
|
||||
|
||||
<a href="#" class="clearLink lnkMyProfile">
|
||||
<paper-icon-item>
|
||||
<div class="avatar orange" item-icon></div>
|
||||
<paper-item-body two-line>
|
||||
<div>${ButtonProfile}</div>
|
||||
<div secondary>${ButtonProfileHelp}</div>
|
||||
</paper-item-body>
|
||||
<iron-icon icon="person"></iron-icon>
|
||||
</paper-icon-item>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,14 +4,7 @@
|
||||
<title>Emby</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage" data-contextname="${HeaderSettings}" data-require="scripts/myprofile,scripts/mypreferencescommon,paperbuttonstyle,jqmicons">
|
||||
|
||||
<div class="libraryViewNav">
|
||||
<a href="#" class="lnkDisplayPreferences">${TabDisplay}</a>
|
||||
<a href="#" class="lnkHomeScreenPreferences">${TabHomeScreen}</a>
|
||||
<a href="#" class="lnkLanguagePreferences">${TabPlayback}</a>
|
||||
<a href="#" class="ui-btn-active lnkMyProfile">${TabProfile}</a>
|
||||
</div>
|
||||
<div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${HeaderProfile}" data-require="scripts/myprofile,paperbuttonstyle,jqmicons" data-backbutton="true" data-menubutton="false">
|
||||
|
||||
<div data-role="content">
|
||||
<br />
|
||||
@ -20,9 +13,8 @@
|
||||
|
||||
<div style="vertical-align:top;margin: .5em 0 0 1em;display:inline-block;">
|
||||
<h2 class="username" style="margin: 0;"></h2>
|
||||
<button id="btnDeleteImage" type="button" data-icon="delete" style="display: none;margin-top:1em;">
|
||||
${ButtonDeleteImage}
|
||||
</button>
|
||||
<br/>
|
||||
<paper-button raised class="cancel" id="btnDeleteImage"><iron-icon icon="delete"></iron-icon><span>${ButtonDeleteImage}</span></paper-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -59,24 +51,20 @@
|
||||
<form class="updatePasswordForm passwordSection userProfileSettingsForm" style="display:none;margin: 0 auto 2em;">
|
||||
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderPassword}
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div id="fldCurrentPassword" style="display: none;">
|
||||
<label for="txtCurrentPassword">${LabelCurrentPassword}</label>
|
||||
<input type="password" id="txtCurrentPassword" name="txtCurrentPassword" />
|
||||
<paper-input type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtNewPassword">${LabelNewPassword}</label>
|
||||
<input type="password" id="txtNewPassword" name="txtNewPassword" />
|
||||
<paper-input type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtNewPasswordConfirm">${LabelNewPasswordConfirm}</label>
|
||||
<input type="password" id="txtNewPasswordConfirm" name="txtNewPasswordConfirm" />
|
||||
<paper-input type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
@ -92,24 +80,22 @@
|
||||
</form>
|
||||
<form class="localAccessForm localAccessSection userProfileSettingsForm" style="margin: 0 auto;">
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionHeader">
|
||||
<h1>
|
||||
${HeaderEasyPinCode}
|
||||
</div>
|
||||
</h1>
|
||||
<div class="detailSectionContent">
|
||||
<br />
|
||||
<div>${EasyPasswordHelp}</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtEasyPassword">${LabelEasyPinCode}</label>
|
||||
<input type="password" id="txtEasyPassword" />
|
||||
<paper-input type="password" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</label>
|
||||
<input type="checkbox" id="chkEnableLocalEasyPassword" />
|
||||
<div class="fieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
|
||||
<paper-checkbox class="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</paper-checkbox>
|
||||
<div class="fieldDescription paperCheckboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
|
||||
</div>
|
||||
<br />
|
||||
<br /><br/>
|
||||
<div>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
return dictionaries[getUrl(name, culture)];
|
||||
}
|
||||
|
||||
function loadDictionary(name, culture) {
|
||||
function loadDictionary(name, culture, loadUrl, saveUrl) {
|
||||
|
||||
var deferred = DeferredBuilder.Deferred();
|
||||
|
||||
@ -25,10 +25,8 @@
|
||||
deferred.resolve();
|
||||
} else {
|
||||
|
||||
var url = getUrl(name, culture);
|
||||
|
||||
$.getJSON(url).done(function (dictionary) {
|
||||
dictionaries[url] = dictionary;
|
||||
$.getJSON(loadUrl).done(function (dictionary) {
|
||||
dictionaries[saveUrl] = dictionary;
|
||||
deferred.resolve();
|
||||
});
|
||||
}
|
||||
@ -41,7 +39,19 @@
|
||||
|
||||
currentCulture = value;
|
||||
|
||||
return $.when(loadDictionary('html', value), loadDictionary('javascript', value));
|
||||
var htmlValue = value;
|
||||
var jsValue = value;
|
||||
|
||||
var htmlUrl = getUrl('html', htmlValue);
|
||||
var jsUrl = getUrl('javascript', jsValue);
|
||||
|
||||
var htmlLoadUrl = getUrl('html', htmlValue);
|
||||
var jsLoadUrl = getUrl('javascript', jsValue);
|
||||
|
||||
//htmlLoadUrl = getUrl('html', 'server');
|
||||
//jsLoadUrl = getUrl('javascript', 'javascript');
|
||||
|
||||
return $.when(loadDictionary('html', htmlValue, htmlLoadUrl, htmlUrl), loadDictionary('javascript', jsValue, jsLoadUrl, jsUrl));
|
||||
}
|
||||
|
||||
function ensure() {
|
||||
|
||||
@ -341,7 +341,7 @@
|
||||
html += '</a>';
|
||||
|
||||
if (user.localUser && showUserAtTop()) {
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" data-itemid="mysync" href="mypreferencesdisplay.html?userId=' + user.localUser.Id + '"><iron-icon icon="settings" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" onclick="return LibraryMenu.onLinkClicked(event, this);" data-itemid="mysync" href="mypreferencesmenu.html?userId=' + user.localUser.Id + '"><iron-icon icon="settings" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
|
||||
}
|
||||
|
||||
html += '<a class="sidebarLink lnkMediaFolder lnkMySync" data-itemid="mysync" onclick="return LibraryMenu.onLinkClicked(event, this);" href="mysync.html"><iron-icon icon="refresh" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSync') + '</span></a>';
|
||||
|
||||
@ -425,14 +425,14 @@
|
||||
Format: 'srt',
|
||||
Method: 'Embed'
|
||||
});
|
||||
profile.SubtitleProfiles.push({
|
||||
Format: 'ass',
|
||||
Method: 'Embed'
|
||||
});
|
||||
profile.SubtitleProfiles.push({
|
||||
Format: 'ssa',
|
||||
Method: 'Embed'
|
||||
});
|
||||
//profile.SubtitleProfiles.push({
|
||||
// Format: 'ass',
|
||||
// Method: 'Embed'
|
||||
//});
|
||||
//profile.SubtitleProfiles.push({
|
||||
// Format: 'ssa',
|
||||
// Method: 'Embed'
|
||||
//});
|
||||
profile.SubtitleProfiles.push({
|
||||
Format: 'pgs',
|
||||
Method: 'Embed'
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
$(document).on('pageshowready', ".userPreferencesPage", function () {
|
||||
$(document).on('pageshowready', "#myPreferencesMenuPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
|
||||
@ -2,36 +2,33 @@
|
||||
|
||||
function loadForm(page, user) {
|
||||
|
||||
$('#chkDisplayMissingEpisodes', page).checked(user.Configuration.DisplayMissingEpisodes || false).checkboxradio("refresh");
|
||||
$('#chkDisplayUnairedEpisodes', page).checked(user.Configuration.DisplayUnairedEpisodes || false).checkboxradio("refresh");
|
||||
|
||||
$('#chkDisplayTrailersWithinMovieSuggestions', page).checked(user.Configuration.IncludeTrailersInSuggestions || false).checkboxradio("refresh");
|
||||
|
||||
$('#chkGroupMoviesIntoCollections', page).checked(user.Configuration.GroupMoviesIntoBoxSets || false).checkboxradio("refresh");
|
||||
page.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
|
||||
page.querySelector('.chkDisplayUnairedEpisodes').checked = user.Configuration.DisplayUnairedEpisodes || false;
|
||||
page.querySelector('.chkDisplayTrailersWithinMovieSuggestions').checked = user.Configuration.IncludeTrailersInSuggestions || false;
|
||||
page.querySelector('.chkGroupMoviesIntoCollections').checked = user.Configuration.GroupMoviesIntoBoxSets || false;
|
||||
|
||||
$('#selectThemeSong', page).val(appStorage.getItem('enableThemeSongs-' + user.Id) || '').selectmenu("refresh");
|
||||
$('#selectBackdrop', page).val(appStorage.getItem('enableBackdrops-' + user.Id) || '').selectmenu("refresh");
|
||||
|
||||
$('#chkEnableFullScreen', page).checked(AppSettings.enableFullScreen()).checkboxradio("refresh");
|
||||
|
||||
$('#chkSyncToExternalCard', page).checked(AppSettings.enableSyncToExternalStorage()).checkboxradio("refresh");
|
||||
page.querySelector('.chkEnableFullScreen').checked = AppSettings.enableFullScreen();
|
||||
page.querySelector('.chkSyncToExternalCard').checked = AppSettings.enableSyncToExternalStorage();
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
}
|
||||
|
||||
function saveUser(page, user) {
|
||||
|
||||
user.Configuration.DisplayMissingEpisodes = $('#chkDisplayMissingEpisodes', page).checked();
|
||||
user.Configuration.DisplayUnairedEpisodes = $('#chkDisplayUnairedEpisodes', page).checked();
|
||||
user.Configuration.GroupMoviesIntoBoxSets = $('#chkGroupMoviesIntoCollections', page).checked();
|
||||
user.Configuration.IncludeTrailersInSuggestions = $('#chkDisplayTrailersWithinMovieSuggestions', page).checked();
|
||||
user.Configuration.DisplayMissingEpisodes = page.querySelector('.chkDisplayMissingEpisodes').checked;
|
||||
user.Configuration.DisplayUnairedEpisodes = page.querySelector('.chkDisplayUnairedEpisodes').checked;
|
||||
user.Configuration.IncludeTrailersInSuggestions = page.querySelector('.chkDisplayTrailersWithinMovieSuggestions').checked;
|
||||
user.Configuration.GroupMoviesIntoBoxSets = page.querySelector('.chkGroupMoviesIntoCollections').checked;
|
||||
|
||||
AppSettings.enableFullScreen($('#chkEnableFullScreen', page).checked());
|
||||
AppSettings.enableFullScreen(page.querySelector('.chkEnableFullScreen').checked);
|
||||
|
||||
appStorage.setItem('enableThemeSongs-' + user.Id, $('#selectThemeSong', page).val());
|
||||
appStorage.setItem('enableBackdrops-' + user.Id, $('#selectBackdrop', page).val());
|
||||
|
||||
AppSettings.enableSyncToExternalStorage($('#chkSyncToExternalCard', page).checked());
|
||||
AppSettings.enableSyncToExternalStorage(page.querySelector('.chkSyncToExternalCard').checked);
|
||||
|
||||
ApiClient.updateUserConfiguration(user.Id, user.Configuration).done(function () {
|
||||
Dashboard.alert(Globalize.translate('SettingsSaved'));
|
||||
|
||||
@ -159,9 +159,8 @@
|
||||
|
||||
function loadForm(page, user, displayPreferences) {
|
||||
|
||||
$('#chkDisplayCollectionView', page).checked(user.Configuration.DisplayCollectionsView || false).checkboxradio("refresh");
|
||||
|
||||
$('#chkHidePlayedFromLatest', page).checked(user.Configuration.HidePlayedInLatest || false).checkboxradio("refresh");
|
||||
page.querySelector('.chkDisplayCollectionView').checked = user.Configuration.DisplayCollectionsView || false;
|
||||
page.querySelector('.chkHidePlayedFromLatest').checked = user.Configuration.HidePlayedInLatest || false;
|
||||
|
||||
$('#selectHomeSection1', page).val(displayPreferences.CustomPrefs.home0 || '').selectmenu("refresh");
|
||||
$('#selectHomeSection2', page).val(displayPreferences.CustomPrefs.home1 || '').selectmenu("refresh");
|
||||
@ -191,9 +190,8 @@
|
||||
|
||||
function saveUser(page, user, displayPreferences) {
|
||||
|
||||
user.Configuration.DisplayCollectionsView = $('#chkDisplayCollectionView', page).checked();
|
||||
|
||||
user.Configuration.HidePlayedInLatest = $('#chkHidePlayedFromLatest', page).checked();
|
||||
user.Configuration.DisplayCollectionsView = page.querySelector('.chkDisplayCollectionView').checked;
|
||||
user.Configuration.HidePlayedInLatest = page.querySelector('.chkHidePlayedFromLatest').checked;
|
||||
|
||||
user.Configuration.LatestItemsExcludes = $(".chkIncludeInLatest:not(:checked)", page).get().map(function (i) {
|
||||
|
||||
@ -239,7 +237,7 @@
|
||||
|
||||
function onSubmit() {
|
||||
|
||||
var page = $(this).parents('.page');
|
||||
var page = $(this).parents('.page')[0];
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
|
||||
@ -28,11 +28,11 @@
|
||||
});
|
||||
|
||||
$('#selectSubtitlePlaybackMode', page).val(user.Configuration.SubtitleMode || "").selectmenu("refresh").trigger('change');
|
||||
$('#chkPlayDefaultAudioTrack', page).checked(user.Configuration.PlayDefaultAudioTrack || false).checkboxradio("refresh");
|
||||
$('#chkEnableCinemaMode', page).checked(user.Configuration.EnableCinemaMode || false).checkboxradio("refresh");
|
||||
|
||||
$('#chkEnableChromecastAc3', page).checked(AppSettings.enableChromecastAc3()).checkboxradio("refresh");
|
||||
$('#chkExternalVideoPlayer', page).checked(AppSettings.enableExternalPlayers()).checkboxradio("refresh");
|
||||
page.querySelector('.chkPlayDefaultAudioTrack').checked = user.Configuration.PlayDefaultAudioTrack || false;
|
||||
page.querySelector('.chkEnableCinemaMode').checked = user.Configuration.EnableCinemaMode || false;
|
||||
page.querySelector('.chkEnableChromecastAc3').checked = AppSettings.enableChromecastAc3();
|
||||
page.querySelector('.chkExternalVideoPlayer').checked = AppSettings.enableExternalPlayers();
|
||||
|
||||
var bitrateOptions = MediaPlayer.getVideoQualityOptions().map(function (i) {
|
||||
|
||||
@ -81,8 +81,8 @@
|
||||
user.Configuration.SubtitleLanguagePreference = $('#selectSubtitleLanguage', page).val();
|
||||
|
||||
user.Configuration.SubtitleMode = $('#selectSubtitlePlaybackMode', page).val();
|
||||
user.Configuration.PlayDefaultAudioTrack = $('#chkPlayDefaultAudioTrack', page).checked();
|
||||
user.Configuration.EnableCinemaMode = $('#chkEnableCinemaMode', page).checked();
|
||||
user.Configuration.PlayDefaultAudioTrack = page.querySelector('.chkPlayDefaultAudioTrack').checked;
|
||||
user.Configuration.EnableCinemaMode = page.querySelector('.chkEnableCinemaMode').checked;
|
||||
|
||||
ApiClient.updateUserConfiguration(user.Id, user.Configuration).done(function () {
|
||||
Dashboard.alert(Globalize.translate('SettingsSaved'));
|
||||
@ -98,10 +98,11 @@
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
AppSettings.enableExternalPlayers($('#chkExternalVideoPlayer', page).checked());
|
||||
AppSettings.enableExternalPlayers(page.querySelector('.chkExternalVideoPlayer').checked);
|
||||
|
||||
AppSettings.maxStreamingBitrate($('#selectMaxBitrate', page).val());
|
||||
AppSettings.maxChromecastBitrate($('#selectMaxChromecastBitrate', page).val());
|
||||
AppSettings.enableChromecastAc3($('#chkEnableChromecastAc3', page).checked());
|
||||
AppSettings.enableExternalPlayers(page.querySelector('.chkEnableChromecastAc3').checked);
|
||||
|
||||
var userId = getParameterByName('userId') || Dashboard.getCurrentUserId();
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
var page = $($.mobile.activePage)[0];
|
||||
|
||||
reloadUser(page);
|
||||
}
|
||||
@ -246,7 +246,7 @@
|
||||
$('#btnResetEasyPassword', page).hide();
|
||||
}
|
||||
|
||||
$('#chkEnableLocalEasyPassword', page).checked(user.Configuration.EnableLocalPassword).checkboxradio('refresh');
|
||||
page.querySelector('.chkEnableLocalEasyPassword').checked = user.Configuration.EnableLocalPassword;
|
||||
});
|
||||
|
||||
$('#txtCurrentPassword', page).val('');
|
||||
@ -277,7 +277,7 @@
|
||||
|
||||
ApiClient.getUser(userId).done(function (user) {
|
||||
|
||||
user.Configuration.EnableLocalPassword = $('#chkEnableLocalEasyPassword', page).checked();
|
||||
user.Configuration.EnableLocalPassword = page.queryselector('.chkEnableLocalEasyPassword').checked;
|
||||
|
||||
ApiClient.updateUserConfiguration(user.Id, user.Configuration).done(function () {
|
||||
|
||||
@ -313,7 +313,7 @@
|
||||
|
||||
self.onSubmit = function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
var page = $($.mobile.activePage)[0];
|
||||
|
||||
if ($('#txtNewPassword', page).val() != $('#txtNewPasswordConfirm', page).val()) {
|
||||
|
||||
@ -332,7 +332,7 @@
|
||||
|
||||
self.onLocalAccessSubmit = function () {
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
var page = $($.mobile.activePage)[0];
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
@ -347,7 +347,7 @@
|
||||
|
||||
var msg = Globalize.translate('PasswordResetConfirmation');
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
var page = $($.mobile.activePage)[0];
|
||||
|
||||
Dashboard.confirm(msg, Globalize.translate('PasswordResetHeader'), function (result) {
|
||||
|
||||
@ -377,7 +377,7 @@
|
||||
|
||||
var msg = Globalize.translate('PinCodeResetConfirmation');
|
||||
|
||||
var page = $.mobile.activePage;
|
||||
var page = $($.mobile.activePage)[0];
|
||||
|
||||
Dashboard.confirm(msg, Globalize.translate('HeaderPinCodeReset'), function (result) {
|
||||
|
||||
|
||||
@ -778,7 +778,7 @@ var Dashboard = {
|
||||
html = '';
|
||||
|
||||
if (user.localUser && user.localUser.Policy.EnableUserPreferenceAccess) {
|
||||
html += '<p><a data-mini="true" data-role="button" href="mypreferencesdisplay.html?userId=' + user.localUser.Id + '" data-icon="gear">' + Globalize.translate('ButtonSettings') + '</button></a>';
|
||||
html += '<p><a data-mini="true" data-role="button" href="mypreferencesmenu.html?userId=' + user.localUser.Id + '" data-icon="gear">' + Globalize.translate('ButtonSettings') + '</button></a>';
|
||||
}
|
||||
|
||||
$('.preferencesContainer', elem).html(html).trigger('create');
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
$('#fldConnectInfo', page).show();
|
||||
}
|
||||
|
||||
$('.lnkEditUserPreferences', page).attr('href', 'mypreferencesdisplay.html?userId=' + user.Id);
|
||||
$('.lnkEditUserPreferences', page).attr('href', 'mypreferencesmenu.html?userId=' + user.Id);
|
||||
|
||||
Dashboard.setPageTitle(user.Name);
|
||||
|
||||
|
||||
@ -367,9 +367,9 @@
|
||||
"LabelAutomaticUpdates": "Enable automatic updates",
|
||||
"LabelAutomaticUpdatesTmdb": "Enable automatic updates from TheMovieDB.org",
|
||||
"LabelAutomaticUpdatesTvdb": "Enable automatic updates from TheTVDB.com",
|
||||
"LabelAutomaticUpdatesFanartHelp": "If enabled, new images will be downloaded automatically as they're added to fanart.tv. Existing images will not be replaced.",
|
||||
"LabelAutomaticUpdatesTmdbHelp": "If enabled, new images will be downloaded automatically as they're added to TheMovieDB.org. Existing images will not be replaced.",
|
||||
"LabelAutomaticUpdatesTvdbHelp": "If enabled, new images will be downloaded automatically as they're added to TheTVDB.com. Existing images will not be replaced.",
|
||||
"LabelAutomaticUpdatesFanartHelp": "If enabled, new images will be downloaded automatically as they're added to fanart.tv. Existing images will not be replaced. This will cause library scans to take longer and will result in more disk activity.",
|
||||
"LabelAutomaticUpdatesTmdbHelp": "If enabled, new images will be downloaded automatically as they're added to TheMovieDB.org. Existing images will not be replaced. This will cause library scans to take longer and will result in more disk activity.",
|
||||
"LabelAutomaticUpdatesTvdbHelp": "If enabled, new images will be downloaded automatically as they're added to TheTVDB.com. Existing images will not be replaced. This will cause library scans to take longer and will result in more disk activity.",
|
||||
"LabelFanartApiKey": "Personal api key:",
|
||||
"LabelFanartApiKeyHelp": "Requests to fanart without a personal API key return results that were approved over 7 days ago. With a personal API key that drops to 48 hours and if you are also a fanart VIP member that will further drop to around 10 minutes.",
|
||||
"ExtractChapterImagesHelp": "Extracting chapter images will allow clients to display graphical scene selection menus. The process can be slow, cpu-intensive and may require several gigabytes of space. It runs when videos are discovered, and also as a nightly scheduled task. The schedule is configurable in the scheduled tasks area. It is not recommended to run this task during peak usage hours.",
|
||||
@ -1500,5 +1500,15 @@
|
||||
"HeaderImagePrimary": "Primary",
|
||||
"HeaderImageBackdrop": "Backdrop",
|
||||
"HeaderImageLogo": "Logo",
|
||||
"HeaderUserPrimaryImage": "User Image"
|
||||
"HeaderUserPrimaryImage": "User Image",
|
||||
"ButtonDisplaySettings": "Display settings",
|
||||
"ButtonHomeScreenSettings": "Home screen settings",
|
||||
"ButtonPlaybackSettings": "Playback settings",
|
||||
"ButtonProfile": "Profile",
|
||||
"ButtonDisplaySettingsHelp": "Your Emby display settings",
|
||||
"ButtonHomeScreenSettingsHelp": "Configure the display of your home screen",
|
||||
"ButtonPlaybackSettingsHelp": "Specify your audio and subtitle preferences, streaming quality, and more.",
|
||||
"ButtonProfileHelp": "Set your profile image and password.",
|
||||
"HeaderHomeScreenSettings": "Home Screen Settings",
|
||||
"HeaderProfile": "Profile"
|
||||
}
|
||||
|
||||
1
dashboard-ui/thirdparty/emby-icons.html
vendored
1
dashboard-ui/thirdparty/emby-icons.html
vendored
@ -70,7 +70,6 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
|
||||
<g id="live-tv"><path d="M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3c-1.1 0-2 .89-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.11-.9-2-2-2zm0 14H3V8h18v12zM9 10v8l7-4z" /></g>
|
||||
<g id="notifications"><path d="M11.5 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6.5-6v-5.5c0-3.07-2.13-5.64-5-6.32V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5v.68c-2.87.68-5 3.25-5 6.32V16l-2 2v1h17v-1l-2-2z" /></g>
|
||||
<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z" /></g>
|
||||
<g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" /></g>
|
||||
<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" /></g>
|
||||
<g id="mic"><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z" /></g>
|
||||
<g id="insert-drive-file"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z" /></g>
|
||||
|
||||
45
dashboard-ui/thirdparty/paper-button-style.css
vendored
45
dashboard-ui/thirdparty/paper-button-style.css
vendored
@ -343,3 +343,48 @@ paper-menu-item {
|
||||
.scrollablePaperTabs #tabsContent {
|
||||
position: static !important;
|
||||
}*/
|
||||
|
||||
.ui-page-theme-b paper-item-body [secondary] {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-checkbox {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-checkbox paper-ripple {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-checkbox #checkboxLabel.paper-checkbox {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.ui-page-theme-b .paperCheckboxFieldDescription {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-checkbox #checkbox.paper-checkbox {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-checkbox #checkbox.checked.paper-checkbox {
|
||||
background-color: #2ad;
|
||||
border-color: #2ad;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-input label {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-input input {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.ui-page-theme-b paper-input .focused-line {
|
||||
background-color: #52B54B !important;
|
||||
}
|
||||
|
||||
.ui-page-theme-b .unfocused-line.paper-input-container {
|
||||
background: #858585;
|
||||
}
|
||||
|
||||
@ -27,28 +27,23 @@
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionContent">
|
||||
<div id="fldCurrentPassword" style="display: none;">
|
||||
<label for="txtCurrentPassword">${LabelCurrentPassword}</label>
|
||||
<input type="password" id="txtCurrentPassword" name="txtCurrentPassword" />
|
||||
<br />
|
||||
</div>
|
||||
<div>
|
||||
<label for="txtNewPassword">${LabelNewPassword}</label>
|
||||
<input type="password" id="txtNewPassword" name="txtNewPassword" />
|
||||
<paper-input type="password" id="txtCurrentPassword" label="${LabelCurrentPassword}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtNewPasswordConfirm">${LabelNewPasswordConfirm}</label>
|
||||
<input type="password" id="txtNewPasswordConfirm" name="txtNewPasswordConfirm" />
|
||||
<paper-input type="password" id="txtNewPassword" label="${LabelNewPassword}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
|
||||
${ButtonSave}
|
||||
<paper-input type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
<div id="btnResetPassword" style="display: none;">
|
||||
<button type="button" data-icon="lock" onclick="UpdatePasswordPage.resetPassword();" data-mini="true">
|
||||
${ButtonResetPassword}
|
||||
</button>
|
||||
<paper-button raised class="cancel block" onclick="UpdatePasswordPage.resetPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetPassword}</span></paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,23 +60,19 @@
|
||||
<div>${EasyPasswordHelp}</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="txtEasyPassword">${LabelEasyPinCode}</label>
|
||||
<input type="password" id="txtEasyPassword" />
|
||||
<paper-input type="password" id="txtEasyPassword" label="${LabelEasyPinCode}" autocomplete="off"></paper-input>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<label for="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</label>
|
||||
<input type="checkbox" id="chkEnableLocalEasyPassword" />
|
||||
<div class="fieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
|
||||
<paper-checkbox class="chkEnableLocalEasyPassword">${LabelInNetworkSignInWithEasyPassword}</paper-checkbox>
|
||||
<div class="fieldDescription paperCheckboxFieldDescription">${LabelInNetworkSignInWithEasyPasswordHelp}</div>
|
||||
</div>
|
||||
<br />
|
||||
<br /><br />
|
||||
<div>
|
||||
<button type="submit" data-theme="b" data-icon="check" data-mini="true">
|
||||
${ButtonSave}
|
||||
</button>
|
||||
<button id="btnResetEasyPassword" style="display:none;" type="button" data-icon="lock" onclick="UpdatePasswordPage.resetEasyPassword();" data-mini="true">
|
||||
${ButtonResetEasyPassword}
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></paper-button>
|
||||
</button>
|
||||
<paper-button id="btnResetEasyPassword" style="display:none;" raised class="cancel block" onclick="UpdatePasswordPage.resetEasyPassword();"><iron-icon icon="lock"></iron-icon><span>${ButtonResetEasyPassword}</span></paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,4 +19,6 @@
|
||||
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
|
||||
<link rel="import" href="bower_components/paper-input/paper-input.html">
|
||||
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
|
||||
<link rel="import" href="bower_components/paper-item/paper-icon-item.html">
|
||||
<link rel="import" href="bower_components/paper-item/paper-item-body.html">
|
||||
<link rel="import" href="thirdparty/emby-icons.html">
|
||||
@ -1,4 +1,12 @@
|
||||
<html><head><meta charset="UTF-8"><!--
|
||||
@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
|
||||
--><!--
|
||||
@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
|
||||
@ -17743,324 +17751,127 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</script>
|
||||
|
||||
</dom-module>
|
||||
<dom-module id="paper-radio-button" assetpath="bower_components/paper-radio-button/">
|
||||
<dom-module id="paper-icon-item" assetpath="bower_components/paper-item/">
|
||||
|
||||
<style>
|
||||
/*
|
||||
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
|
||||
@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: inline-block;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
min-height: var(--paper-item-min-height, 48px);
|
||||
padding: 0px 16px;
|
||||
}
|
||||
|
||||
:host(:focus) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#radioContainer {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
:host #ink {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: var(--paper-radio-button-unchecked-ink-color, --primary-text-color);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host #ink[checked] {
|
||||
color: var(--paper-radio-button-checked-ink-color, --default-primary-color);
|
||||
}
|
||||
|
||||
:host #offRadio {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
border: solid 2px;
|
||||
background-color: var(--paper-radio-button-unchecked-background-color, transparent);
|
||||
border-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
|
||||
transition: border-color 0.28s;
|
||||
}
|
||||
|
||||
:host #onRadio {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--paper-radio-button-checked-color, --default-primary-color);
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transition: -webkit-transform ease 0.28s;
|
||||
transition: transform ease 0.28s;
|
||||
}
|
||||
|
||||
:host([checked]) #offRadio {
|
||||
border-color: var(--paper-radio-button-checked-color, --default-primary-color);
|
||||
}
|
||||
|
||||
:host([checked]) #onRadio {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
#radioLabel {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
white-space: normal;
|
||||
pointer-events: none;
|
||||
color: var(--paper-radio-button-label-color, --primary-text-color);
|
||||
}
|
||||
|
||||
#radioLabel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* disabled state */
|
||||
:host([disabled]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:host([disabled]) #offRadio {
|
||||
border-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:host([disabled][checked]) #onRadio {
|
||||
background-color: var(--paper-radio-button-unchecked-color, --primary-text-color);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:host([disabled]) #radioLabel {
|
||||
/* slightly darker than the button, so that it's readable */
|
||||
opacity: 0.65;
|
||||
:host > ::content > *:not(:first-child):not(:last-child) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<div id="radioContainer">
|
||||
<div id="offRadio"></div>
|
||||
<div id="onRadio"></div>
|
||||
<paper-ripple id="ink" class="circle" center="" checked$="[[checked]]"></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div id="radioLabel" aria-hidden="true"><content></content></div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-radio-button',
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperInkyFocusBehavior
|
||||
],
|
||||
|
||||
hostAttributes: {
|
||||
role: 'radio',
|
||||
'aria-checked': false,
|
||||
tabindex: 0
|
||||
},
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* Fired when the checked state changes due to user interaction.
|
||||
*
|
||||
* @event change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the checked state changes.
|
||||
*
|
||||
* @event iron-change
|
||||
*/
|
||||
|
||||
/**
|
||||
* Gets or sets the state, `true` is checked and `false` is unchecked.
|
||||
*/
|
||||
checked: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true,
|
||||
notify: true,
|
||||
observer: '_checkedChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, the button toggles the active state with each tap or press
|
||||
* of the spacebar.
|
||||
*/
|
||||
toggles: {
|
||||
type: Boolean,
|
||||
value: true,
|
||||
reflectToAttribute: true
|
||||
}
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
if (Polymer.dom(this).textContent == '') {
|
||||
this.$.radioLabel.hidden = true;
|
||||
} else {
|
||||
this.setAttribute('aria-label', Polymer.dom(this).textContent);
|
||||
}
|
||||
this._isReady = true;
|
||||
},
|
||||
|
||||
_buttonStateChanged: function() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
if (this._isReady) {
|
||||
this.checked = this.active;
|
||||
}
|
||||
},
|
||||
|
||||
_checkedChanged: function() {
|
||||
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||
this.active = this.checked;
|
||||
this.fire('iron-change');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</dom-module>
|
||||
<dom-module name="paper-radio-group">
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center);
|
||||
@apply(--paper-font-subhead);
|
||||
|
||||
@apply(--paper-item);
|
||||
@apply(--paper-icon-item);
|
||||
}
|
||||
|
||||
:host ::content > * {
|
||||
padding: 12px;
|
||||
.content-icon {
|
||||
width: var(--paper-item-icon-width, 56px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content id="items" select="*"></content>
|
||||
<div id="contentIcon" class="content-icon layout horizontal center">
|
||||
<content select="[item-icon]"></content>
|
||||
</div>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-radio-group',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronA11yKeysBehavior,
|
||||
Polymer.IronSelectableBehavior
|
||||
],
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-icon-item',
|
||||
|
||||
hostAttributes: {
|
||||
role: 'radiogroup',
|
||||
tabindex: 0
|
||||
},
|
||||
'role': 'listitem'
|
||||
}
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* Overriden from Polymer.IronSelectableBehavior
|
||||
*/
|
||||
attrForSelected: {
|
||||
type: String,
|
||||
value: 'name'
|
||||
},
|
||||
|
||||
/**
|
||||
* Overriden from Polymer.IronSelectableBehavior
|
||||
*/
|
||||
selectedAttribute: {
|
||||
type: String,
|
||||
value: 'checked'
|
||||
},
|
||||
|
||||
/**
|
||||
* Overriden from Polymer.IronSelectableBehavior
|
||||
*/
|
||||
selectable: {
|
||||
type: String,
|
||||
value: 'paper-radio-button'
|
||||
}
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'left up': 'selectPrevious',
|
||||
'right down': 'selectNext',
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the given value.
|
||||
*/
|
||||
select: function(value) {
|
||||
if (this.selected) {
|
||||
var oldItem = this._valueToItem(this.selected);
|
||||
|
||||
// Do not allow unchecking the selected item.
|
||||
if (this.selected == value) {
|
||||
oldItem.checked = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (oldItem)
|
||||
oldItem.checked = false;
|
||||
}
|
||||
|
||||
Polymer.IronSelectableBehavior.select.apply(this, [value]);
|
||||
this.fire('paper-radio-group-changed');
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the previous item. If the previous item is disabled, then it is
|
||||
* skipped, and its previous item is selected
|
||||
*/
|
||||
selectPrevious: function() {
|
||||
var length = this.items.length;
|
||||
var newIndex = Number(this._valueToIndex(this.selected));
|
||||
|
||||
do {
|
||||
newIndex = (newIndex - 1 + length) % length;
|
||||
} while (this.items[newIndex].disabled)
|
||||
|
||||
this.select(this._indexToValue(newIndex));
|
||||
},
|
||||
|
||||
/**
|
||||
* Selects the next item. If the next item is disabled, then it is
|
||||
* skipped, and the next item after it is selected.
|
||||
*/
|
||||
selectNext: function() {
|
||||
var length = this.items.length;
|
||||
var newIndex = Number(this._valueToIndex(this.selected));
|
||||
|
||||
do {
|
||||
newIndex = (newIndex + 1 + length) % length;
|
||||
} while (this.items[newIndex].disabled)
|
||||
|
||||
this.select(this._indexToValue(newIndex));
|
||||
},
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
<dom-module id="paper-item-body" assetpath="bower_components/paper-item/">
|
||||
|
||||
<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>
|
||||
<iron-iconset-svg name="icons" size="24">
|
||||
<svg>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user