mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update sliders
This commit is contained in:
Luke Pulverenti
parent
7f6b2415fb
commit
acefeed732
26 changed files with 524 additions and 91 deletions
|
|
@ -15,12 +15,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.45",
|
||||
"_release": "1.4.45",
|
||||
"version": "1.4.46",
|
||||
"_release": "1.4.46",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.45",
|
||||
"commit": "4cefbfaedea068552e25c904340e675e66de4964"
|
||||
"tag": "1.4.46",
|
||||
"commit": "3dcd07a1386cef6bbb6267851b90f950ca18f5ad"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
|||
|
|
@ -9,10 +9,12 @@
|
|||
|
||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
|
||||
if (descriptor.configurable) {
|
||||
// descriptor returning null in webos
|
||||
if (descriptor && descriptor.configurable) {
|
||||
var baseSetMethod = descriptor.set;
|
||||
descriptor.set = function (value) {
|
||||
baseSetMethod.call(this, value);
|
||||
|
||||
this.dispatchEvent(new CustomEvent('valueset', {
|
||||
bubbles: false,
|
||||
cancelable: false
|
||||
|
|
|
|||
323
dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css
vendored
Normal file
323
dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.css
vendored
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
_:-ms-input-placeholder, :root .mdl-slider.mdl-slider {
|
||||
-ms-appearance: none;
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mdl-slider {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
color: #52B54B;
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
/**************************** Tracks ****************************/
|
||||
/**************************** Thumbs ****************************/
|
||||
/**************************** 0-value ****************************/
|
||||
/**************************** Disabled ****************************/
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider {
|
||||
height: .56vh;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-track {
|
||||
background: #666;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-progress {
|
||||
background: #52B54B;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-track {
|
||||
background: none;
|
||||
color: transparent;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider::-ms-track {
|
||||
height: .56vh;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-fill-lower {
|
||||
padding: 0;
|
||||
background: linear-gradient(to right, transparent, transparent 16px, #52B54B 16px, #52B54B 0);
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-fill-upper {
|
||||
padding: 0;
|
||||
background: linear-gradient(to left, transparent, transparent 16px, #666 16px, #666 0);
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #52B54B;
|
||||
border: none;
|
||||
transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider::-webkit-slider-thumb {
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
background: #52B54B;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider::-moz-range-thumb {
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
}
|
||||
|
||||
.mdl-slider:focus:not(:active)::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 10px rgba(82, 181, 75, 0.26);
|
||||
}
|
||||
|
||||
.mdl-slider:focus:not(:active)::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 10px rgba(82, 181, 75, 0.26);
|
||||
}
|
||||
|
||||
.mdl-slider:active::-webkit-slider-thumb {
|
||||
background-image: none;
|
||||
background: #52B54B;
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.mdl-slider:active::-moz-range-thumb {
|
||||
background-image: none;
|
||||
background: #52B54B;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: #52B54B;
|
||||
}
|
||||
|
||||
.mdl-slider[disabled]::-ms-thumb {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider::-ms-thumb {
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider::-webkit-slider-thumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider:hover::-webkit-slider-thumb {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value::-webkit-slider-thumb {
|
||||
/*border: 2px solid #52B54B;
|
||||
background: transparent;*/
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value::-moz-range-thumb {
|
||||
/*border: 2px solid #52B54B;
|
||||
background: transparent;*/
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value + .mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
|
||||
/*box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
|
||||
background: rgba(0,0,0, 0.12);*/
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:focus:not(:active)::-moz-range-thumb {
|
||||
/*box-shadow: 0 0 0 10px rgba(0,0,0, 0.12);
|
||||
background: rgba(0,0,0, 0.12);*/
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:active::-webkit-slider-thumb {
|
||||
border: 1.6px solid #52B54B;
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:active + .mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:active::-moz-range-thumb {
|
||||
border: 1.5px solid #52B54B;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value::-ms-fill-lower {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value::-ms-fill-upper {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:active::-ms-fill-upper {
|
||||
margin-left: 9px;
|
||||
}
|
||||
|
||||
.mdl-slider:disabled:focus::-webkit-slider-thumb, .mdl-slider:disabled:active::-webkit-slider-thumb, .mdl-slider:disabled::-webkit-slider-thumb {
|
||||
-webkit-transform: scale(0.667);
|
||||
transform: scale(0.667);
|
||||
background: rgba(0,0,0, 0.26);
|
||||
}
|
||||
|
||||
.mdl-slider:disabled:focus::-moz-range-thumb, .mdl-slider:disabled:active::-moz-range-thumb, .mdl-slider:disabled::-moz-range-thumb {
|
||||
transform: scale(0.667);
|
||||
background: rgba(0,0,0, 0.26);
|
||||
}
|
||||
|
||||
.mdl-slider:disabled + .mdl-slider__background-flex > .mdl-slider__background-lower {
|
||||
background-color: #666;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
.mdl-slider:disabled + .mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-lowest-value:disabled::-webkit-slider-thumb {
|
||||
border: 3px solid rgba(0,0,0, 0.26);
|
||||
background: transparent;
|
||||
-webkit-transform: scale(0.667);
|
||||
transform: scale(0.667);
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:disabled:focus::-moz-range-thumb, .mdl-slider.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-lowest-value:disabled::-moz-range-thumb {
|
||||
border: 3px solid rgba(0,0,0, 0.26);
|
||||
background: transparent;
|
||||
transform: scale(0.667);
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:disabled:active + .mdl-slider__background-flex > .mdl-slider__background-upper {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.mdl-slider:disabled::-ms-fill-lower {
|
||||
margin-right: 6px;
|
||||
background: linear-gradient(to right, transparent, transparent 25px, rgba(30,30,30, 0.7) 25px, rgba(30,30,30, 0.7) 0);
|
||||
}
|
||||
|
||||
.mdl-slider:disabled::-ms-fill-upper {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.mdl-slider.is-lowest-value:disabled:active::-ms-fill-upper {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.mdl-slider__ie-container {
|
||||
height: 18px;
|
||||
overflow: visible;
|
||||
border: none;
|
||||
margin: none;
|
||||
padding: none;
|
||||
}
|
||||
|
||||
.mdl-slider__container {
|
||||
height: 18px;
|
||||
position: relative;
|
||||
background: none;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.mdl-slider__background-flex {
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
-webkit-transform: translate(0, -1px);
|
||||
transform: translate(0, -1px);
|
||||
}
|
||||
|
||||
.layout-tv .mdl-slider__background-flex {
|
||||
height: .56vh;
|
||||
}
|
||||
|
||||
.mdl-slider__background-lower {
|
||||
background: #52B54B;
|
||||
-webkit-flex: 0;
|
||||
-ms-flex: 0;
|
||||
flex: 0;
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mdl-slider__background-upper {
|
||||
background: #666;
|
||||
-webkit-flex: 0;
|
||||
-ms-flex: 0;
|
||||
flex: 0;
|
||||
position: relative;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
99
dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js
vendored
Normal file
99
dashboard-ui/bower_components/emby-webcomponents/emby-slider/emby-slider.js
vendored
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
define(['browser', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser) {
|
||||
|
||||
var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
||||
var supportsNativeProgressStyle = browser.firefox || browser.edge || browser.msie;
|
||||
var supportsValueSetOverride = false;
|
||||
|
||||
if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
|
||||
|
||||
var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
|
||||
// descriptor returning null in webos
|
||||
if (descriptor && descriptor.configurable) {
|
||||
supportsValueSetOverride = true;
|
||||
}
|
||||
}
|
||||
|
||||
function updateValues(range, backgroundLower, backgroundUpper) {
|
||||
|
||||
//if (fraction === 0) {
|
||||
// range.classList.add('is-lowest-value');
|
||||
//} else {
|
||||
// range.classList.remove('is-lowest-value');
|
||||
//}
|
||||
|
||||
if (backgroundLower) {
|
||||
var fraction = (range.value - range.min) / (range.max - range.min);
|
||||
|
||||
backgroundLower.style.flex = fraction;
|
||||
backgroundLower.style.webkitFlex = fraction;
|
||||
backgroundUpper.style.flex = 1 - fraction;
|
||||
backgroundUpper.style.webkitFlex = 1 - fraction;
|
||||
}
|
||||
}
|
||||
|
||||
EmbySliderPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embycheckbox') == 'true') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute('data-embycheckbox', 'true');
|
||||
|
||||
this.classList.add('mdl-slider');
|
||||
this.classList.add('mdl-js-slider');
|
||||
|
||||
var containerElement = this.parentNode;
|
||||
containerElement.classList.add('mdl-slider__container');
|
||||
|
||||
if (!supportsNativeProgressStyle) {
|
||||
containerElement.insertAdjacentHTML('beforeend', '<div class="mdl-slider__background-flex"><div class="mdl-slider__background-lower"></div><div class="mdl-slider__background-upper"></div></div>');
|
||||
}
|
||||
|
||||
var backgroundLower = containerElement.querySelector('.mdl-slider__background-lower');
|
||||
var backgroundUpper = containerElement.querySelector('.mdl-slider__background-upper');
|
||||
|
||||
this.addEventListener('input', function () {
|
||||
this.dragging = true;
|
||||
});
|
||||
this.addEventListener('change', function () {
|
||||
this.dragging = false;
|
||||
updateValues(this, backgroundLower, backgroundUpper);
|
||||
});
|
||||
|
||||
if (!supportsNativeProgressStyle) {
|
||||
|
||||
if (supportsValueSetOverride) {
|
||||
this.addEventListener('valueset', function () {
|
||||
updateValues(this, backgroundLower, backgroundUpper);
|
||||
});
|
||||
} else {
|
||||
startInterval(this, backgroundLower, backgroundUpper);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function startInterval(range, backgroundLower, backgroundUpper) {
|
||||
var interval = range.interval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
range.interval = setInterval(function () {
|
||||
updateValues(range, backgroundLower, backgroundUpper);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
EmbySliderPrototype.detachedCallback = function () {
|
||||
|
||||
var interval = this.interval;
|
||||
if (interval) {
|
||||
clearInterval(interval);
|
||||
}
|
||||
this.interval = null;
|
||||
};
|
||||
|
||||
document.registerElement('emby-slider', {
|
||||
prototype: EmbySliderPrototype,
|
||||
extends: 'input'
|
||||
});
|
||||
});
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
<div id="eligibleForSeriesFields" class="hide">
|
||||
<br />
|
||||
<label class="checkboxContainer">
|
||||
<input type="checkbox" is="emby-checkbox" id="chkRecordSeries"/>
|
||||
<input type="checkbox" is="emby-checkbox" id="chkRecordSeries" />
|
||||
<span>${RecordSeries}</span>
|
||||
</label>
|
||||
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
<span>${RecordOnAllChannels}</span>
|
||||
</label>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div class="convertRecordingsContainer hide checkboxContainer">
|
||||
<label>
|
||||
|
|
@ -48,7 +48,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="advanced hide">
|
||||
<br />
|
||||
<br />
|
||||
<emby-collapsible title="${Advanced}">
|
||||
<div class="seriesDays hide">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue