1
0
Fork 0
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:
Luke Pulverenti 2016-03-09 12:40:22 -05:00
parent fb269362ff
commit 71811cb9e3
221 changed files with 32936 additions and 101 deletions

View 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%;
}
}

View 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
});
})();

View file

@ -0,0 +1,8 @@
<style>
.demo-progress__progress-buffering .mdl-progress {
width: 50vw;
max-width: 260px;
}
</style>
{% include "progress-buffering.html" %}

View file

@ -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>

View file

@ -0,0 +1,7 @@
<style>
.demo-progress__progress-default .mdl-progress {
width: 50vw;
max-width: 260px;
}
</style>
{% include "progress-default.html" %}

View file

@ -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>

View file

@ -0,0 +1,7 @@
<style>
.demo-progress__progress-indeterminate .mdl-progress {
width: 50vw;
max-width: 260px;
}
</style>
{% include "progress-indeterminate.html" %}

View file

@ -0,0 +1,2 @@
<!-- MDL Progress Bar with Indeterminate Progress -->
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>