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 docked tabs

Browse source
This commit is contained in:
Luke Pulverenti 2016-08-15 14:18:05 -04:00
parent 818ee2bcc3
commit 16e66718f9
9 changed files with 147 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

20
dashboard-ui/components/appfooter/appfooter.css Normal file
View file

@ -0,0 +1,20 @@
.appfooter {
background: #1c1c1c;
position: fixed;
left: 0;
right: 0;
z-index: 1;
bottom: 0;
}
.appfooter-headroom {
transition: transform 180ms linear;
}
.appfooter--pinned {
transform: none;
}
.appfooter--unpinned {
transform: translateY(100%);
}

72
dashboard-ui/components/appfooter/appfooter.js Normal file
View file

@ -0,0 +1,72 @@
define(['css!./appfooter'], function () {
function render(options) {
var elem = document.createElement('div');
elem.classList.add('appfooter');
document.body.appendChild(elem);
return elem;
}
function initHeadRoom(instance, elem) {
require(["headroom"], function () {
// construct an instance of Headroom, passing the element
var headroom = new Headroom(elem, {
// or scroll tolerance per direction
tolerance: {
down: 20,
up: 0
},
classes: {
pinned: 'appfooter--pinned',
unpinned: 'appfooter--unpinned',
top: 'appfooter--top',
notTop: 'appfooter--not-top',
initial: 'appfooter-headroom'
}
});
// initialise
headroom.init();
instance.headroom = headroom;
});
}
function dockedTabs(options) {
var self = this;
self.element = render(options);
self.add = function (elem) {
self.element.appendChild(elem);
};
self.insert = function (elem) {
if (typeof elem === 'string') {
self.element.insertAdjacentHTML('afterbegin', elem);
} else {
self.element.insertBefore(elem, self.element.firstChild);
}
};
initHeadRoom(self, self.element);
}
dockedTabs.prototype.destroy = function () {
var self = this;
if (self.headroom) {
self.headroom.destroy();
}
self.Element = null;
};
return dockedTabs;
});

29
dashboard-ui/components/dockedtabs/dockedtabs.css
View file

@ -1,32 +1,7 @@
.dockedtabs {
height: 54px;
background: #212121;
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: flex;
}
.dockedtabs-bottom {
bottom: 0;
}
.dockedtabs-headroom {
transition: transform 180ms linear;
}
.dockedtabs--pinned {
transform: none;
}
.dockedtabs--unpinned {
transform: translateY(100%);
}
.dockedtabs-tabs {
.dockedtabs-tabs {
flex-grow: 1;
display: flex;
padding: .5em 0;
}
.dockedtabs-tab-button {

36
dashboard-ui/components/dockedtabs/dockedtabs.js
View file

@ -36,53 +36,21 @@
elem.innerHTML = html;
document.body.appendChild(elem);
options.appFooter.add(elem);
return elem;
}
function initHeadRoom(instance, elem) {
require(["headroom"], function () {
// construct an instance of Headroom, passing the element
var headroom = new Headroom(elem, {
// or scroll tolerance per direction
tolerance: {
down: 20,
up: 0
},
classes: {
pinned: 'dockedtabs--pinned',
unpinned: 'dockedtabs--unpinned',
top: 'dockedtabs--top',
notTop: 'dockedtabs--not-top',
initial: 'dockedtabs-headroom'
}
});
// initialise
headroom.init();
instance.headroom = headroom;
});
}
function dockedTabs(options) {
var self = this;
self.element = render(options);
initHeadRoom(self, self.element);
}
dockedTabs.prototype.destroy = function() {
dockedTabs.prototype.destroy = function () {
var self = this;
if (self.headroom) {
self.headroom.destroy();
}
self.Element = null;
};