mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added ps4 profile
This commit is contained in:
Luke Pulverenti
parent
0d59297b1b
commit
10d2fbe3b3
43 changed files with 1245 additions and 267 deletions
125
dashboard-ui/thirdparty/iron-a11y-announcer/iron-a11y-announcer.html
vendored
Normal file
125
dashboard-ui/thirdparty/iron-a11y-announcer/iron-a11y-announcer.html
vendored
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
<!--
|
||||
@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">
|
||||
|
||||
<!--
|
||||
`iron-a11y-announcer` is a singleton element that is intended to add a11y
|
||||
to features that require on-demand announcement from screen readers. In
|
||||
order to make use of the announcer, it is best to request its availability
|
||||
in the announcing element.
|
||||
|
||||
Example:
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'x-chatty',
|
||||
|
||||
attached: function() {
|
||||
// This will create the singlton element if it has not
|
||||
// been created yet:
|
||||
Polymer.IronA11yAnnouncer.requestAvailability();
|
||||
}
|
||||
});
|
||||
|
||||
After the `iron-a11y-announcer` has been made available, elements can
|
||||
make announces by firing bubbling `iron-announce` events.
|
||||
|
||||
Example:
|
||||
|
||||
this.fire('iron-announce', {
|
||||
text: 'This is an announcement!'
|
||||
}, { bubbles: true });
|
||||
|
||||
Note: announcements are only audible if you have a screen reader enabled.
|
||||
|
||||
@group Iron Elements
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="iron-a11y-announcer">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
clip: rect(0px,0px,0px,0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<span aria-live$="[[mode]]">[[_text]]</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer.IronA11yAnnouncer = Polymer({
|
||||
is: 'iron-a11y-announcer',
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* The value of mode is used to set the `aria-live` attribute
|
||||
* for the element that will be announced. Valid values are: `off`,
|
||||
* `polite` and `assertive`.
|
||||
*/
|
||||
mode: {
|
||||
type: String,
|
||||
value: 'polite'
|
||||
},
|
||||
|
||||
_text: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
if (!Polymer.IronA11yAnnouncer.instance) {
|
||||
Polymer.IronA11yAnnouncer.instance = this;
|
||||
}
|
||||
|
||||
document.body.addEventListener('iron-announce', this._onIronAnnounce.bind(this));
|
||||
},
|
||||
|
||||
/**
|
||||
* Cause a text string to be announced by screen readers.
|
||||
*
|
||||
* @param {string} text The text that should be announced.
|
||||
*/
|
||||
announce: function(text) {
|
||||
this._text = '';
|
||||
this.async(function() {
|
||||
this._text = text;
|
||||
}, 100);
|
||||
},
|
||||
|
||||
_onIronAnnounce: function(event) {
|
||||
if (event.detail && event.detail.text) {
|
||||
this.announce(event.detail.text);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Polymer.IronA11yAnnouncer.instance = null;
|
||||
|
||||
Polymer.IronA11yAnnouncer.requestAvailability = function() {
|
||||
if (!Polymer.IronA11yAnnouncer.instance) {
|
||||
document.createElement('iron-a11y-announcer');
|
||||
}
|
||||
|
||||
document.body.appendChild(Polymer.IronA11yAnnouncer.instance);
|
||||
};
|
||||
})();
|
||||
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -8,46 +8,31 @@
|
|||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
paper-button[toggles] {
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
paper-button[toggles][active] {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
paper-button.secondary {
|
||||
paper-button.submit {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
paper-button[raised].secondary {
|
||||
paper-button[raised].submit {
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button[toggles][active].secondary {
|
||||
background-color: rgba(66, 133, 244, 0.25);
|
||||
paper-button.more {
|
||||
color: #388E3C;
|
||||
}
|
||||
|
||||
paper-button[toggles][active][raised].secondary {
|
||||
background-color: rgba(66, 133, 244, 0.75);
|
||||
}
|
||||
|
||||
paper-button.submit {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
paper-button[raised].submit {
|
||||
background: #52B54B;
|
||||
paper-button[raised].more {
|
||||
background: #388E3C;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button[toggles][active].submit {
|
||||
background-color: rgba(82, 181, 75, 0.25);
|
||||
paper-button.secondary {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
paper-button[toggles][active][raised].submit {
|
||||
background-color: rgba(82, 181, 75, 0.75);
|
||||
paper-button[raised].secondary {
|
||||
background: #52B54B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button.cancel {
|
||||
|
|
@ -59,14 +44,6 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
paper-button[toggles][active].cancel {
|
||||
background-color: rgba(68, 68, 68, 0.25);
|
||||
}
|
||||
|
||||
paper-button[toggles][active][raised].cancel {
|
||||
background-color: rgba(68, 68, 68, 0.75);
|
||||
}
|
||||
|
||||
paper-button.hover:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
|
@ -101,11 +78,13 @@
|
|||
outline: none;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.clearLink {
|
||||
text-decoration: none;
|
||||
font-weight: inherit !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
paper-button.mini {
|
||||
|
|
@ -113,5 +92,20 @@ paper-button.mini {
|
|||
}
|
||||
|
||||
paper-button.mini .content {
|
||||
padding: 0.35em 0.9em;
|
||||
padding: 0.35em 0.7em;
|
||||
}
|
||||
|
||||
|
||||
paper-toast {
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
#docspinner {
|
||||
display: block;
|
||||
margin-top: -14px;
|
||||
margin-left: -14px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
|
|
|||
156
dashboard-ui/thirdparty/paper-icon-button/paper-icon-button.html
vendored
Normal file
156
dashboard-ui/thirdparty/paper-icon-button/paper-icon-button.html
vendored
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
||||
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
Code distributed by Google as part of the polymer project is also
|
||||
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-button-behavior.html">
|
||||
<link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
|
||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||
|
||||
<!--
|
||||
Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
|
||||
|
||||
`paper-icon-button` is a button with an image placed at the center. When the user touches
|
||||
the button, a ripple effect emanates from the center of the button.
|
||||
|
||||
`paper-icon-button` includes a default icon set. Use `icon` to specify which icon
|
||||
from the icon set to use.
|
||||
|
||||
<paper-icon-button icon="menu"></paper-icon-button>
|
||||
|
||||
See [`iron-iconset`](#iron-iconset) for more information about
|
||||
how to use a custom icon set.
|
||||
|
||||
Example:
|
||||
|
||||
<link href="path/to/iron-icons/iron-icons.html" rel="import">
|
||||
|
||||
<paper-icon-button icon="favorite"></paper-icon-button>
|
||||
<paper-icon-button src="star.png"></paper-icon-button>
|
||||
|
||||
###Styling
|
||||
|
||||
Style the button with CSS as you would a normal DOM element. If you are using the icons
|
||||
provided by `iron-icons`, they will inherit the foreground color of the button.
|
||||
|
||||
/* make a red "favorite" button */
|
||||
<paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
|
||||
|
||||
By default, the ripple is the same color as the foreground at 25% opacity. You may
|
||||
customize the color using this selector:
|
||||
|
||||
/* make #my-button use a blue ripple instead of foreground color */
|
||||
#my-button::shadow #ripple {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
The opacity of the ripple is not customizable via CSS.
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-icon-button-disabled-text` | The color of the disabled button | `--primary-text-color`
|
||||
`--paper-icon-button-ink-color` | Selected/focus ripple color | `--default-primary-color`
|
||||
`--paper-icon-button` | Mixin for a button | `{}`
|
||||
`--paper-icon-button-disabled` | Mixin for a disabled button | `{}`
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-icon-button
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-icon-button">
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
|
||||
@apply(--paper-icon-button);
|
||||
}
|
||||
|
||||
:host #ink {
|
||||
color: var(--paper-icon-button-ink-color, --primary-text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
color: var(--paper-icon-button-disabled-text, --disabled-text-color);
|
||||
pointer-events: none;
|
||||
cursor: auto;
|
||||
@apply(--paper-icon-button-disabled);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<paper-ripple id="ink" class="circle" center></paper-ripple>
|
||||
<iron-icon id="icon" src="[[src]]" icon="[[icon]]" alt$="[[alt]]"></iron-icon>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-icon-button',
|
||||
|
||||
hostAttributes: {
|
||||
role: 'button',
|
||||
tabindex: '0'
|
||||
},
|
||||
|
||||
behaviors: [
|
||||
Polymer.PaperInkyFocusBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The URL of an image for the icon. If the src property is specified,
|
||||
* the icon property should not be.
|
||||
*/
|
||||
src: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Specifies the icon name or index in the set of icons available in
|
||||
* the icon's icon set. If the icon property is specified,
|
||||
* the src property should not be.
|
||||
*/
|
||||
icon: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* Specifies the alternate text for the button, for accessibility.
|
||||
*/
|
||||
alt: {
|
||||
type: String,
|
||||
observer: "_altChanged"
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function(newValue, oldValue) {
|
||||
var label = this.getAttribute('aria-label');
|
||||
|
||||
// Don't stomp over a user-set aria-label.
|
||||
if (!label || oldValue == label) {
|
||||
this.setAttribute('aria-label', newValue);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
325
dashboard-ui/thirdparty/paper-spinner/paper-spinner.css
vendored
Normal file
325
dashboard-ui/thirdparty/paper-spinner/paper-spinner.css
vendored
Normal file
|
|
@ -0,0 +1,325 @@
|
|||
/**
|
||||
@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
|
||||
|
||||
*/
|
||||
/**************************/
|
||||
/* STYLES FOR THE SPINNER */
|
||||
/**************************/
|
||||
|
||||
/*
|
||||
* Constants:
|
||||
* STROKEWIDTH = 3px
|
||||
* ARCSIZE = 270 degrees (amount of circle the arc takes up)
|
||||
* ARCTIME = 1333ms (time it takes to expand and contract arc)
|
||||
* ARCSTARTROT = 216 degrees (how much the start location of the arc
|
||||
* should rotate each time, 216 gives us a
|
||||
* 5 pointed star shape (it's 360/5 * 3).
|
||||
* For a 7 pointed star, we might do
|
||||
* 360/7 * 3 = 154.286)
|
||||
* CONTAINERWIDTH = 28px
|
||||
* SHRINK_TIME = 400ms
|
||||
*/
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 28px; /* CONTAINERWIDTH */
|
||||
height: 28px; /* CONTAINERWIDTH */
|
||||
}
|
||||
|
||||
#spinnerContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#spinnerContainer.active {
|
||||
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite;
|
||||
animation: container-rotate 1568ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes container-rotate {
|
||||
to { -webkit-transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
@keyframes container-rotate {
|
||||
to { transform: rotate(360deg) }
|
||||
}
|
||||
|
||||
.spinner-layer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.layer-1 {
|
||||
border-color: var(--paper-spinner-layer-1-color, --google-blue-500);
|
||||
}
|
||||
|
||||
.layer-2 {
|
||||
border-color: var(--paper-spinner-layer-2-color, --google-red-500);
|
||||
}
|
||||
|
||||
.layer-3 {
|
||||
border-color: var(--paper-spinner-layer-3-color, --google-yellow-500);
|
||||
}
|
||||
|
||||
.layer-4 {
|
||||
border-color: var(--paper-spinner-layer-4-color, --google-blue-500);
|
||||
}
|
||||
|
||||
/**
|
||||
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
|
||||
*
|
||||
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
|
||||
* guarantee that the animation will start _exactly_ after that value. So we avoid using
|
||||
* animation-delay and instead set custom keyframes for each color (as layer-2undant as it
|
||||
* seems).
|
||||
*
|
||||
* We write out each animation in full (instead of separating animation-name,
|
||||
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
|
||||
* specific properties properly, treats them as -webkit-animation, and overrides the
|
||||
* other animation rules. See https://github.com/Polymer/platform/issues/53.
|
||||
*/
|
||||
.active .spinner-layer.layer-1 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-2 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-3 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .spinner-layer.layer-4 {
|
||||
/* durations: 4 * ARCTIME */
|
||||
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both, layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fill-unfill-rotate {
|
||||
12.5% { -webkit-transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { -webkit-transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { -webkit-transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { -webkit-transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { -webkit-transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { -webkit-transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { -webkit-transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { -webkit-transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
@keyframes fill-unfill-rotate {
|
||||
12.5% { transform: rotate(135deg); } /* 0.5 * ARCSIZE */
|
||||
25% { transform: rotate(270deg); } /* 1 * ARCSIZE */
|
||||
37.5% { transform: rotate(405deg); } /* 1.5 * ARCSIZE */
|
||||
50% { transform: rotate(540deg); } /* 2 * ARCSIZE */
|
||||
62.5% { transform: rotate(675deg); } /* 2.5 * ARCSIZE */
|
||||
75% { transform: rotate(810deg); } /* 3 * ARCSIZE */
|
||||
87.5% { transform: rotate(945deg); } /* 3.5 * ARCSIZE */
|
||||
to { transform: rotate(1080deg); } /* 4 * ARCSIZE */
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK: Even though the intention is to have the current .spinner-layer at
|
||||
* `opacity: 1`, we set it to `opacity: 0.99` instead since this forces Chrome
|
||||
* to do proper subpixel rendering for the elements being animated. This is
|
||||
* especially visible in Chrome 39 on Ubuntu 14.04. See:
|
||||
*
|
||||
* - https://github.com/Polymer/paper-spinner/issues/9
|
||||
* - https://code.google.com/p/chromium/issues/detail?id=436255
|
||||
*/
|
||||
@-webkit-keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@keyframes layer-1-fade-in-out {
|
||||
from { opacity: 0.99; }
|
||||
25% { opacity: 0.99; }
|
||||
26% { opacity: 0; }
|
||||
89% { opacity: 0; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0.99; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-2-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
15% { opacity: 0; }
|
||||
25% { opacity: 0.99; }
|
||||
50% { opacity: 0.99; }
|
||||
51% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-3-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
40% { opacity: 0; }
|
||||
50% { opacity: 0.99; }
|
||||
75% { opacity: 0.99; }
|
||||
76% { opacity: 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes layer-4-fade-in-out {
|
||||
from { opacity: 0; }
|
||||
65% { opacity: 0; }
|
||||
75% { opacity: 0.99; }
|
||||
90% { opacity: 0.99; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Patch the gap that appear between the two adjacent div.circle-clipper while the
|
||||
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
|
||||
*
|
||||
* Update: the gap no longer appears on Chrome when .spinner-layer's opacity is 0.99,
|
||||
* but still does on Safari and IE.
|
||||
*/
|
||||
.gap-patch {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: 0;
|
||||
left: 45%;
|
||||
width: 10%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.gap-patch .circle {
|
||||
width: 1000%;
|
||||
left: -450%;
|
||||
}
|
||||
|
||||
.circle-clipper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
.circle-clipper .circle {
|
||||
width: 200%;
|
||||
}
|
||||
|
||||
.circle {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-width: 3px; /* STROKEWIDTH */
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-bottom-color: transparent !important;
|
||||
border-radius: 50%;
|
||||
-webkit-animation: none;
|
||||
animation: none;
|
||||
|
||||
@apply(--layout-fit);
|
||||
}
|
||||
|
||||
.circle-clipper.left .circle {
|
||||
border-right-color: transparent !important;
|
||||
-webkit-transform: rotate(129deg);
|
||||
transform: rotate(129deg);
|
||||
}
|
||||
|
||||
.circle-clipper.right .circle {
|
||||
left: -100%;
|
||||
border-left-color: transparent !important;
|
||||
-webkit-transform: rotate(-129deg);
|
||||
transform: rotate(-129deg);
|
||||
}
|
||||
|
||||
.active .circle-clipper.left .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: left-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
.active .circle-clipper.right .circle {
|
||||
/* duration: ARCTIME */
|
||||
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
animation: right-spin 1333ms cubic-bezier(0.4, 0.0, 0.2, 1) infinite both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes left-spin {
|
||||
from { -webkit-transform: rotate(130deg); }
|
||||
50% { -webkit-transform: rotate(-5deg); }
|
||||
to { -webkit-transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@keyframes left-spin {
|
||||
from { transform: rotate(130deg); }
|
||||
50% { transform: rotate(-5deg); }
|
||||
to { transform: rotate(130deg); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes right-spin {
|
||||
from { -webkit-transform: rotate(-130deg); }
|
||||
50% { -webkit-transform: rotate(5deg); }
|
||||
to { -webkit-transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
@keyframes right-spin {
|
||||
from { transform: rotate(-130deg); }
|
||||
50% { transform: rotate(5deg); }
|
||||
to { transform: rotate(-130deg); }
|
||||
}
|
||||
|
||||
#spinnerContainer.cooldown {
|
||||
/* duration: SHRINK_TIME */
|
||||
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
}
|
||||
|
||||
@-webkit-keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from { opacity: 0.99; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
222
dashboard-ui/thirdparty/paper-spinner/paper-spinner.html
vendored
Normal file
222
dashboard-ui/thirdparty/paper-spinner/paper-spinner.html
vendored
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<!--
|
||||
@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/color.html">
|
||||
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
|
||||
|
||||
<!--
|
||||
Element providing material design circular spinner.
|
||||
|
||||
<paper-spinner active></paper-spinner>
|
||||
|
||||
The default spinner cycles between four layers of colors; by default they are
|
||||
blue, red, yellow and green. It can be customized so that it uses one color only
|
||||
by setting all the layer colors to the same value.
|
||||
|
||||
### Accessibility
|
||||
|
||||
Alt attribute should be set to provide adequate context for accessibility. If not provided,
|
||||
it defaults to 'loading'.
|
||||
Empty alt can be provided to mark the element as decorative if alternative content is provided
|
||||
in another form (e.g. a text block following the spinner).
|
||||
|
||||
<paper-spinner alt="Loading contacts list" active></paper-spinner>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--google-blue-500`
|
||||
`--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500`
|
||||
`--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500`
|
||||
`--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500`
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-spinner
|
||||
@hero hero.svg
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-spinner">
|
||||
|
||||
<link rel="import" type="css" href="paper-spinner.css">
|
||||
|
||||
<template>
|
||||
|
||||
<div id="spinnerContainer" class-name="[[_spinnerContainerClassName]]">
|
||||
<div class="spinner-layer layer-1">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer layer-2">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer layer-3">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spinner-layer layer-4">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
function classNames(obj) {
|
||||
var classNames = [];
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key]) {
|
||||
classNames.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return classNames.join(' ');
|
||||
}
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-spinner',
|
||||
|
||||
listeners: {
|
||||
'animationend': 'reset',
|
||||
'webkitAnimationEnd': 'reset'
|
||||
},
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* Displays the spinner.
|
||||
*
|
||||
* @attribute active
|
||||
* @type boolean
|
||||
* @default false
|
||||
*/
|
||||
active: {
|
||||
observer: '_activeChanged',
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Alternative text content for accessibility support.
|
||||
* If alt is present, it will add an aria-label whose content matches alt when active.
|
||||
* If alt is not present, it will default to 'loading' as the alt value.
|
||||
*
|
||||
* @attribute alt
|
||||
* @type string
|
||||
* @default 'loading'
|
||||
*/
|
||||
alt: {
|
||||
observer: '_altChanged',
|
||||
type: String,
|
||||
value: 'loading'
|
||||
},
|
||||
|
||||
/**
|
||||
* True when the spinner is going from active to inactive. This is represented by a fade
|
||||
* to 0% opacity to the user.
|
||||
*/
|
||||
_coolingDown: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
_spinnerContainerClassName: {
|
||||
type: String,
|
||||
computed: '_computeSpinnerContainerClassName(active, _coolingDown)'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_computeSpinnerContainerClassName: function(active, _coolingDown) {
|
||||
return classNames({
|
||||
active: active || _coolingDown,
|
||||
cooldown: _coolingDown
|
||||
});
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// Allow user-provided `aria-label` take preference to any other text alternative.
|
||||
if (this.hasAttribute('aria-label')) {
|
||||
this.alt = this.getAttribute('aria-label');
|
||||
} else {
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
}
|
||||
|
||||
if (!this.active) {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_activeChanged: function() {
|
||||
if (this.active) {
|
||||
this.removeAttribute('aria-hidden');
|
||||
} else {
|
||||
this._coolingDown = true;
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
},
|
||||
|
||||
_altChanged: function() {
|
||||
if (this.alt === '') {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
} else {
|
||||
this.removeAttribute('aria-hidden');
|
||||
}
|
||||
|
||||
this.setAttribute('aria-label', this.alt);
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
this.active = false;
|
||||
this._coolingDown = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
</script>
|
||||
|
||||
</dom-module>
|
||||
164
dashboard-ui/thirdparty/paper-toast/paper-toast.html
vendored
Normal file
164
dashboard-ui/thirdparty/paper-toast/paper-toast.html
vendored
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!--
|
||||
@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/typography.html">
|
||||
<link rel="import" href="../iron-a11y-announcer/iron-a11y-announcer.html">
|
||||
|
||||
<!--
|
||||
`paper-toast` provides a subtle notification toast.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-toast
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
-->
|
||||
<dom-module id="paper-toast">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
|
||||
background: #323232;
|
||||
color: #f1f1f1;
|
||||
min-height: 48px;
|
||||
min-width: 288px;
|
||||
padding: 16px 24px 12px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
border-radius: 2px;
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
|
||||
-webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
|
||||
transition: visibility 0.3s, transform 0.3s;
|
||||
|
||||
-webkit-transform: translateY(100px);
|
||||
transform: translateY(100px);
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
:host(.capsule) {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
:host(.fit-bottom) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:host(.paper-toast-open){
|
||||
visibility: visible;
|
||||
|
||||
-webkit-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<span id="label">{{text}}</span>
|
||||
<content></content>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
(function() {
|
||||
|
||||
var PaperToast = Polymer({
|
||||
is: 'paper-toast',
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The duration in milliseconds to show the toast.
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
value: 3000
|
||||
},
|
||||
|
||||
/**
|
||||
* The text to display in the toast.
|
||||
*/
|
||||
text: {
|
||||
type: String,
|
||||
value: ""
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the toast is currently visible.
|
||||
*/
|
||||
visible: {
|
||||
type: Boolean,
|
||||
readOnly: true,
|
||||
value: false,
|
||||
observer: '_visibleChanged'
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
Polymer.IronA11yAnnouncer.requestAvailability();
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.async(function() {
|
||||
this.hide();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the toast.
|
||||
* @method show
|
||||
*/
|
||||
show: function() {
|
||||
if (PaperToast.currentToast) {
|
||||
PaperToast.currentToast.hide();
|
||||
}
|
||||
PaperToast.currentToast = this;
|
||||
this.removeAttribute('aria-hidden');
|
||||
this._setVisible(true);
|
||||
this.fire('iron-announce', {
|
||||
text: this.text
|
||||
});
|
||||
this.debounce('hide', this.hide, this.duration);
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the toast
|
||||
*/
|
||||
hide: function() {
|
||||
this.setAttribute('aria-hidden', 'true');
|
||||
this._setVisible(false);
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggle the opened state of the toast.
|
||||
* @method toggle
|
||||
*/
|
||||
toggle: function() {
|
||||
if (!this.visible) {
|
||||
this.show();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
_visibleChanged: function(visible) {
|
||||
this.toggleClass('paper-toast-open', visible);
|
||||
}
|
||||
});
|
||||
|
||||
PaperToast.currentToast = null;
|
||||
|
||||
})();
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue