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 search animation

Browse source
This commit is contained in:
Luke Pulverenti 2015-11-17 11:36:48 -05:00
parent b99edc598d
commit 8d0251b825
3 changed files with 27 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

28
dashboard-ui/css/search.css
View file

@ -108,26 +108,20 @@
} }
.headerSearchInput { .headerSearchInput {
margin: 0!important; margin: 0 !important;
background: #222!important; background: #222 !important;
border: 0!important; border: 0 !important;
color: #ddd!important; color: #eee !important;
border-radius: 3px!important; border-radius: 0 !important;
padding: 4px 0 3px 0!important; padding: 7px 0 6px 0 !important;
text-indent: 50px!important; text-indent: 10px !important;
font-size: 16px; font-size: 16px;
font-family: inherit; font-family: inherit;
outline: none; outline: none;
vertical-align: middle; vertical-align: middle;
width: 85%!important; width: 85% !important;
display: inline-block!important; display: inline-block !important;
} height: 100%!important;
.searchInputIcon {
position: absolute;
left: 20px;
top: 18px;
color: #ddd !important;
} }
.viewMenuSearch { .viewMenuSearch {
@ -163,7 +157,7 @@
.viewMenuSearchForm { .viewMenuSearchForm {
max-width: none; max-width: none;
padding: 10px; padding: 5px;
} }
.searchResultsOverlay { .searchResultsOverlay {

1
dashboard-ui/scripts/librarymenu.js
View file

@ -24,7 +24,6 @@
html += '<div class="viewMenuSearch hide">'; html += '<div class="viewMenuSearch hide">';
html += '<form class="viewMenuSearchForm">'; html += '<form class="viewMenuSearchForm">';
html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />'; html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />';
html += '<iron-icon class="searchInputIcon" icon="search"></iron-icon>';
html += '<paper-icon-button icon="close" class="btnCloseSearch"></paper-icon-button>'; html += '<paper-icon-button icon="close" class="btnCloseSearch"></paper-icon-button>';
html += '</form>'; html += '</form>';
html += '</div>'; html += '</div>';

32
dashboard-ui/scripts/searchmenu.js
View file

@ -11,20 +11,24 @@
require(["jquery", "velocity"], function ($, Velocity) { require(["jquery", "velocity"], function ($, Velocity) {
$('.btnCloseSearch').hide(); $('.btnCloseSearch').hide();
var elem = $('.viewMenuSearch') var elem = $('.viewMenuSearch').removeClass('hide')[0];
.css({ left: '100%' })
.removeClass('hide')[0];
Velocity.animate(elem, { "left": "0px" }, fadeIn(elem, 1).onfinish = function () {
{
complete: function () {
$('.headerSearchInput').focus(); $('.headerSearchInput').focus();
$('.btnCloseSearch').show(); $('.btnCloseSearch').show();
} };
});
}); });
}; };
function fadeIn(elem, iterations) {
var keyframes = [
{ opacity: '0', offset: 0 },
{ opacity: '1', offset: 1 }];
var timing = { duration: 200, iterations: iterations };
return elem.animate(keyframes, timing);
}
self.hide = function () { self.hide = function () {
var viewMenuSearch = document.querySelector('.viewMenuSearch'); var viewMenuSearch = document.querySelector('.viewMenuSearch');
@ -34,18 +38,8 @@
} }
if (!viewMenuSearch.classList.contains('hide')) { if (!viewMenuSearch.classList.contains('hide')) {
require(["jquery", "velocity"], function ($, Velocity) {
$('.btnCloseSearch').hide(); $('.btnCloseSearch').hide();
viewMenuSearch.style.left = '0'; viewMenuSearch.classList.add('hide');
Velocity.animate(viewMenuSearch, { "left": "100%" },
{
complete: function () {
$('.viewMenuSearch').visible(false);
}
});
});
} }
}; };