Drive/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Hide calendars search box and toggle on click of the search icon

Browse source
This commit is contained in:
Thomas Bruederli 2014-05-20 12:04:22 +02:00
parent d569bb8644
commit af416196d9
2 changed files with 49 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
plugins/calendar/skins/larry/calendar.css
View file

@ -164,7 +164,32 @@ pre {
right: 0;
}
#calendars .boxtitle {
position: relative;
}
#calendars .boxtitle a.iconbutton.search {
position: absolute;
top: 8px;
right: 8px;
width: 16px;
cursor: pointer;
background-position: -2px -317px;
}
#calendars .listsearchbox {
display: none;
}
#calendars .listsearchbox.expanded {
display: block;
}
#calendars .scroller {
top: 34px;
}
#calendars .listsearchbox.expanded + .scroller {
top: 68px;
}

25
plugins/calendar/skins/larry/templates/calendar.html
View file

@ -22,7 +22,9 @@
<div id="datepicker" class="uibox"></div>
<div id="calendars" class="uibox listbox" style="visibility:hidden">
<h2 class="boxtitle"><roundcube:label name="calendar.calendars" /></h2>
<h2 class="boxtitle"><roundcube:label name="calendar.calendars" />
<a class="iconbutton search" title="<roundcube:label name='calendar.findcalendars' />"></a>
</h2>
<div class="listsearchbox">
<div class="searchbox">
<input type="text" name="q" id="calendarlistsearch" placeholder="<roundcube:label name='calendar.findcalendars' />" />
@ -253,6 +255,27 @@ $(document).ready(function(e){
.data('offset', $('#calendarsidebartoggle').position().left)
.data('sidebarwidth', $('#calendarsidebar').width() + $('#calendarsidebar').position().left);
// animation to unfold list search box
$('#calendars .boxtitle a.search').click(function(e){
var box = $('#calendars .listsearchbox'),
dir = box.is(':visible') ? -1 : 1;
box.slideToggle({
duration: 160,
progress: function(animation, progress) {
if (dir < 0) progress = 1 - progress;
$('#calendars .scroller').css('top', (34 + 34 * progress) + 'px');
},
complete: function() {
box.toggleClass('expanded');
if (box.is(':visible')) {
box.find('input[type=text]').focus();
}
// TODO: save state in localStorage
}
});
});
new rcube_splitter({ id:'calresourceviewsplitter', p1:'#resource-dialog-left', p2:'#resource-dialog-right',
orientation:'v', relative:true, start:380, min:220, size:10, offset:-3 }).init();
});