mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update polymer

Browse source
This commit is contained in:
Luke Pulverenti 2015-09-14 21:17:19 -04:00
parent 571dd964e6
commit c526176a6a
23 changed files with 707 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

98
dashboard-ui/bower_components/paper-progress/paper-progress.html vendored
View file

@ -10,8 +10,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="../paper-styles/paper-styles-classes.html">
<link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
<!--
The progress bars are for situations where the percentage completed can be
@ -60,14 +60,17 @@ the value changed. You can also customize the transition:
The following mixins are available for styling:
Custom property | Description | Default
--------------------------------------------|----------------------------------------|----------
--paper-progress-container-color | Mixin applied to container | --google-grey-300
--paper-progress-transition-duration | Duration of the transition | 0.008s
--paper-progress-transition-timing-function | The timing function for the transition | ease
--paper-progress-transition-delay | delay for the transition | 0s
--paper-progress-active-color | The color of the active bar | --google-green-500
--paper-progress-secondary-color | The color of the secondary bar | --google-green-100
Custom property | Description | Default
--------------------------------------------|---------------------------------------------|----------
--paper-progress-container-color | Mixin applied to container | --google-grey-300
--paper-progress-transition-duration | Duration of the transition | 0.008s
--paper-progress-transition-timing-function | The timing function for the transition | ease
--paper-progress-transition-delay | delay for the transition | 0s
--paper-progress-active-color | The color of the active bar | --google-green-500
--paper-progress-secondary-color | The color of the secondary bar | --google-green-100
--paper-progress-disabled-active-color | The color of the active bar if disabled | --google-grey-500
--paper-progress-disabled-secondary-color | The color of the secondary bar if disabled | --google-grey-300
--paper-progress-height | The height of the progress bar | 4px
@group Paper Elements
@element paper-progress
@ -80,21 +83,31 @@ Custom property | Description
:host {
display: block;
width: 200px;
height: 4px;
position: relative;
overflow: hidden;
}
:host,
#primaryProgress.indeterminate:after {
background-color: var(--paper-progress-container-color, --google-grey-300);
#progressContainer {
position: relative;
}
:host > *,
#primaryProgress.indeterminate:after {
#progressContainer,
/* the stripe for the indeterminate animation*/
.indeterminate:after {
height: var(--paper-progress-height, 4px);
}
#primaryProgress,
#secondaryProgress,
.indeterminate:after {
@apply(--layout-fit);
}
#progressContainer,
.indeterminate:after {
background-color: var(--paper-progress-container-color, --google-grey-300);
}
:host(.transiting) > * {
-webkit-transition-property: -webkit-transform;
transition-property: transform;
@ -114,10 +127,12 @@ Custom property | Description
#primaryProgress,
#secondaryProgress {
@apply(--layout-fit);
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: scaleX(0);
transform: scaleX(0);
will-change: transform;
}
#primaryProgress {
@ -125,20 +140,27 @@ Custom property | Description
}
#secondaryProgress {
position: relative;
background-color: var(--paper-progress-secondary-color, --google-green-100);
}
#primaryProgress.indeterminate {
:host([disabled]) #primaryProgress {
background-color: var(--paper-progress-disabled-active-color, --google-grey-500);
}
:host([disabled]) #secondaryProgress {
background-color: var(--paper-progress-disabled-active-color, --google-grey-300);
}
:host(:not([disabled])) #primaryProgress.indeterminate {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-animation: indeterminate-bar 2s linear infinite;
animation: indeterminate-bar 2s linear infinite;
}
#primaryProgress.indeterminate:after {
:host(:not([disabled])) #primaryProgress.indeterminate:after {
content: "";
width: 100%;
-webkit-transform-origin: center center;
transform-origin: center center;
@ -211,8 +233,10 @@ Custom property | Description
}
</style>
<template>
<div id="secondaryProgress" hidden$="[[!_hasSecondaryProgress(secondaryRatio)]]"></div>
<div id="primaryProgress"></div>
<div id="progressContainer">
<div id="secondaryProgress" hidden$="[[_hideSecondaryProgress(secondaryRatio)]]"></div>
<div id="primaryProgress"></div>
</div>
</template>
</dom-module>
@ -225,10 +249,6 @@ Custom property | Description
Polymer.IronRangeBehavior
],
hostAttributes: {
role: 'progressbar'
},
properties: {
/**
@ -253,15 +273,29 @@ Custom property | Description
*/
indeterminate: {
type: Boolean,
value: false
value: false,
observer: '_toggleIndeterminate'
},
/**
* True if the progress is disabled.
*/
disabled: {
type: Boolean,
value: false,
reflectToAttribute: true,
observer: '_disabledChanged'
}
},
observers: [
'_progressChanged(secondaryProgress, value, min, max)',
'_toggleIndeterminate(indeterminate)'
'_progressChanged(secondaryProgress, value, min, max)'
],
hostAttributes: {
role: 'progressbar'
},
_toggleIndeterminate: function(indeterminate) {
// If we use attribute/class binding, the animation sometimes doesn't translate properly
// on Safari 7.1. So instead, we toggle the class here in the update method.
@ -295,8 +329,12 @@ Custom property | Description
this.setAttribute('aria-valuemax', max);
},
_hasSecondaryProgress: function(secondaryRatio) {
return secondaryRatio > 0
_disabledChanged: function(disabled) {
this.$.progressContainer.setAttribute('aria-disabled', disabled ? 'true' : 'false');
},
_hideSecondaryProgress: function(secondaryRatio) {
return secondaryRatio === 0;
}
});