mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update shared components
This commit is contained in:
parent
fb269362ff
commit
71811cb9e3
221 changed files with 32936 additions and 101 deletions
120
dashboard-ui/bower_components/material-design-lite/src/progress/_progress.scss
vendored
Normal file
120
dashboard-ui/bower_components/material-design-lite/src/progress/_progress.scss
vendored
Normal file
|
@ -0,0 +1,120 @@
|
|||
/**
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "../variables";
|
||||
|
||||
.mdl-progress {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: $bar-height;
|
||||
width: 500px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.mdl-progress > .bar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0%;
|
||||
transition: width 0.2s $animation-curve-default;
|
||||
}
|
||||
|
||||
.mdl-progress > .progressbar {
|
||||
background-color: $progress-main-color;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mdl-progress > .bufferbar {
|
||||
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
||||
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mdl-progress > .auxbar {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Webkit only
|
||||
@supports (-webkit-appearance:none) {
|
||||
.mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
|
||||
.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
|
||||
background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
|
||||
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
||||
mask: url('#{$progress-image-path}/buffer.svg?embed');
|
||||
}
|
||||
}
|
||||
|
||||
.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
|
||||
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
|
||||
background-image: linear-gradient(to right, $progress-fallback-buffer-color, $progress-fallback-buffer-color),
|
||||
linear-gradient(to right, $progress-main-color, $progress-main-color);
|
||||
}
|
||||
|
||||
.mdl-progress.mdl-progress--indeterminate > .bar1,
|
||||
.mdl-progress.mdl-progress__indeterminate > .bar1 {
|
||||
background-color: $progress-main-color;
|
||||
animation-name: indeterminate1;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
.mdl-progress.mdl-progress--indeterminate > .bar3,
|
||||
.mdl-progress.mdl-progress__indeterminate > .bar3 {
|
||||
background-image: none;
|
||||
background-color: $progress-main-color;
|
||||
animation-name: indeterminate2;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@keyframes indeterminate1 {
|
||||
0% {
|
||||
left: 0%;
|
||||
width: 0%;
|
||||
}
|
||||
50% {
|
||||
left: 25%;
|
||||
width: 75%;
|
||||
}
|
||||
75% {
|
||||
left: 100%;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes indeterminate2 {
|
||||
0% {
|
||||
left: 0%;
|
||||
width: 0%;
|
||||
}
|
||||
50% {
|
||||
left: 0%;
|
||||
width: 0%;
|
||||
}
|
||||
75% {
|
||||
left: 0%;
|
||||
width: 25%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
width: 0%;
|
||||
}
|
||||
}
|
123
dashboard-ui/bower_components/material-design-lite/src/progress/progress.js
vendored
Normal file
123
dashboard-ui/bower_components/material-design-lite/src/progress/progress.js
vendored
Normal file
|
@ -0,0 +1,123 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright 2015 Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Class constructor for Progress MDL component.
|
||||
* Implements MDL component design pattern defined at:
|
||||
* https://github.com/jasonmayes/mdl-component-design-pattern
|
||||
*
|
||||
* @constructor
|
||||
* @param {HTMLElement} element The element that will be upgraded.
|
||||
*/
|
||||
var MaterialProgress = function MaterialProgress(element) {
|
||||
this.element_ = element;
|
||||
|
||||
// Initialize instance.
|
||||
this.init();
|
||||
};
|
||||
window['MaterialProgress'] = MaterialProgress;
|
||||
|
||||
/**
|
||||
* Store constants in one place so they can be updated easily.
|
||||
*
|
||||
* @enum {string | number}
|
||||
* @private
|
||||
*/
|
||||
MaterialProgress.prototype.Constant_ = {
|
||||
};
|
||||
|
||||
/**
|
||||
* Store strings for class names defined by this component that are used in
|
||||
* JavaScript. This allows us to simply change it in one place should we
|
||||
* decide to modify at a later date.
|
||||
*
|
||||
* @enum {string}
|
||||
* @private
|
||||
*/
|
||||
MaterialProgress.prototype.CssClasses_ = {
|
||||
INDETERMINATE_CLASS: 'mdl-progress__indeterminate'
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the current progress of the progressbar.
|
||||
*
|
||||
* @param {number} p Percentage of the progress (0-100)
|
||||
* @public
|
||||
*/
|
||||
MaterialProgress.prototype.setProgress = function(p) {
|
||||
if (this.element_.classList.contains(this.CssClasses_.INDETERMINATE_CLASS)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.progressbar_.style.width = p + '%';
|
||||
};
|
||||
MaterialProgress.prototype['setProgress'] =
|
||||
MaterialProgress.prototype.setProgress;
|
||||
|
||||
/**
|
||||
* Set the current progress of the buffer.
|
||||
*
|
||||
* @param {number} p Percentage of the buffer (0-100)
|
||||
* @public
|
||||
*/
|
||||
MaterialProgress.prototype.setBuffer = function(p) {
|
||||
this.bufferbar_.style.width = p + '%';
|
||||
this.auxbar_.style.width = (100 - p) + '%';
|
||||
};
|
||||
MaterialProgress.prototype['setBuffer'] =
|
||||
MaterialProgress.prototype.setBuffer;
|
||||
|
||||
/**
|
||||
* Initialize element.
|
||||
*/
|
||||
MaterialProgress.prototype.init = function() {
|
||||
if (this.element_) {
|
||||
var el = document.createElement('div');
|
||||
el.className = 'progressbar bar bar1';
|
||||
this.element_.appendChild(el);
|
||||
this.progressbar_ = el;
|
||||
|
||||
el = document.createElement('div');
|
||||
el.className = 'bufferbar bar bar2';
|
||||
this.element_.appendChild(el);
|
||||
this.bufferbar_ = el;
|
||||
|
||||
el = document.createElement('div');
|
||||
el.className = 'auxbar bar bar3';
|
||||
this.element_.appendChild(el);
|
||||
this.auxbar_ = el;
|
||||
|
||||
this.progressbar_.style.width = '0%';
|
||||
this.bufferbar_.style.width = '100%';
|
||||
this.auxbar_.style.width = '0%';
|
||||
|
||||
this.element_.classList.add('is-upgraded');
|
||||
}
|
||||
};
|
||||
|
||||
// The component registers itself. It can assume componentHandler is available
|
||||
// in the global scope.
|
||||
componentHandler.register({
|
||||
constructor: MaterialProgress,
|
||||
classAsString: 'MaterialProgress',
|
||||
cssClass: 'mdl-js-progress',
|
||||
widget: true
|
||||
});
|
||||
})();
|
|
@ -0,0 +1,8 @@
|
|||
<style>
|
||||
.demo-progress__progress-buffering .mdl-progress {
|
||||
width: 50vw;
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% include "progress-buffering.html" %}
|
|
@ -0,0 +1,8 @@
|
|||
<!-- MDL Progress Bar with Buffering -->
|
||||
<div id="p3" class="mdl-progress mdl-js-progress"></div>
|
||||
<script>
|
||||
document.querySelector('#p3').addEventListener('mdl-componentupgraded', function() {
|
||||
this.MaterialProgress.setProgress(33);
|
||||
this.MaterialProgress.setBuffer(87);
|
||||
});
|
||||
</script>
|
|
@ -0,0 +1,7 @@
|
|||
<style>
|
||||
.demo-progress__progress-default .mdl-progress {
|
||||
width: 50vw;
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
{% include "progress-default.html" %}
|
|
@ -0,0 +1,7 @@
|
|||
<!-- Simple MDL Progress Bar -->
|
||||
<div id="p1" class="mdl-progress mdl-js-progress"></div>
|
||||
<script>
|
||||
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function() {
|
||||
this.MaterialProgress.setProgress(44);
|
||||
});
|
||||
</script>
|
|
@ -0,0 +1,7 @@
|
|||
<style>
|
||||
.demo-progress__progress-indeterminate .mdl-progress {
|
||||
width: 50vw;
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
{% include "progress-indeterminate.html" %}
|
|
@ -0,0 +1,2 @@
|
|||
<!-- MDL Progress Bar with Indeterminate Progress -->
|
||||
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
|
Loading…
Add table
Add a link
Reference in a new issue