update components
This commit is contained in:
parent
1846f1afcf
commit
965bf947c8
16 changed files with 111 additions and 63 deletions
|
@ -1,6 +1,7 @@
|
|||
.emby-tab-button {
|
||||
background: transparent;
|
||||
border: 0 !important;
|
||||
border: 2px solid transparent !important;
|
||||
border-width: 0 0 2px 0 !important;
|
||||
cursor: pointer;
|
||||
outline: none !important;
|
||||
width: auto;
|
||||
|
@ -23,12 +24,13 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.emby-tab-button:focus {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
.emby-tab-button:focus {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.emby-tab-button-active {
|
||||
color: #52B54B !important;
|
||||
border-color: #52B54B !important;
|
||||
}
|
||||
|
||||
.emby-tabs-slider {
|
||||
|
@ -39,7 +41,7 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
/* Need this or it will be partially covered by the drop-shadow on android */
|
||||
bottom: 1px;
|
||||
bottom: 0;
|
||||
height: 2px;
|
||||
z-index: 1000;
|
||||
background: #52B54B;
|
||||
|
|
|
@ -15,37 +15,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
function getButtonSelectionBar(tabButton) {
|
||||
var elem = tabButton.querySelector('.' + buttonClass + '-selection-bar');
|
||||
|
||||
if (!elem) {
|
||||
elem = document.createElement('div');
|
||||
elem.classList.add(buttonClass + '-selection-bar');
|
||||
tabButton.appendChild(elem);
|
||||
}
|
||||
|
||||
return elem;
|
||||
}
|
||||
|
||||
function hideButtonSelectionBar(tabButton) {
|
||||
|
||||
var elem = getButtonSelectionBar(tabButton);
|
||||
|
||||
elem.classList.add('hide');
|
||||
elem.classList.remove('emby-tab-button-selection-bar-active');
|
||||
}
|
||||
|
||||
function showButtonSelectionBar(tabButton) {
|
||||
var elem = getButtonSelectionBar(tabButton);
|
||||
|
||||
elem.classList.remove('hide');
|
||||
elem.classList.add('emby-tab-button-selection-bar-active');
|
||||
}
|
||||
|
||||
function animtateSelectionBar(bar, start, pos, duration, onFinish) {
|
||||
|
||||
var endTransform = pos ? ('translateX(' + pos + 'px)') : 'none';
|
||||
var startTransform = start ? ('translateX(' + start + 'px)') : 'none';
|
||||
var endTransform = pos ? ('translateX(' + Math.round(pos) + 'px)') : 'none';
|
||||
var startTransform = start ? ('translateX(' + Math.round(start) + 'px)') : 'none';
|
||||
|
||||
if (!duration || !bar.animate) {
|
||||
bar.style.transform = endTransform;
|
||||
|
@ -66,16 +39,14 @@
|
|||
iterations: 1,
|
||||
easing: 'linear',
|
||||
fill: 'forwards'
|
||||
}).onFinish = onFinish;
|
||||
});
|
||||
|
||||
// for some reason onFinish is not firing. temporary browser issue?
|
||||
setTimeout(onFinish, duration);
|
||||
}
|
||||
|
||||
function moveSelectionBar(tabs, newButton, oldButton, animate) {
|
||||
|
||||
if (oldButton) {
|
||||
hideButtonSelectionBar(oldButton);
|
||||
}
|
||||
hideButtonSelectionBar(newButton);
|
||||
|
||||
var selectionBar = tabs.selectionBar;
|
||||
|
||||
if (selectionBar) {
|
||||
|
@ -104,13 +75,14 @@
|
|||
|
||||
var delay = animate ? 100 : 0;
|
||||
tabs.currentOffset = endPosition;
|
||||
newButton.classList.add(activeButtonClass);
|
||||
|
||||
var onAnimationFinish = function() {
|
||||
var onAnimationFinish = function () {
|
||||
|
||||
//if (tabs.getAttribute('data-selectionbar') != 'false') {
|
||||
// showButtonSelectionBar(newButton);
|
||||
//}
|
||||
newButton.classList.add(activeButtonClass);
|
||||
|
||||
if (tabs.getAttribute('data-selectionbar') != 'false') {
|
||||
showButtonSelectionBar(newButton);
|
||||
}
|
||||
if (selectionBar) {
|
||||
selectionBar.classList.add('hide');
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue