Elastic: Calendar searching

plugins/calendar/calendar_ui.js

@@ -3423,12 +3423,13 @@ function rcube_calendar_ui(settings)
           this._search_message = rcmail.display_message(rcmail.gettext('searchnoresults', 'calendar'), 'notice');
           append = '<div class="message">' + rcmail.gettext('searchnoresults', 'calendar') + '</div>';
         }
-        append += '<div class="fc-bottomlinks formlinks"></div>';
+        append += '<div class="fc-bottomlinks formlinks toolbar"></div>';
         addlinks = true;
       }
       
       if (fc.fullCalendar('getView').name == 'table') {
-        var container = fc.find('.fc-list-content > .fc-listappend');
+        var elastic = $('#calendar').data('elastic-mode');
+        var container = elastic ? $('#searchcontrols') : fc.find('.fc-list-content > .fc-listappend');
         if (append) {
           if (!container.length)
             container = $('<div class="fc-listappend"></div>').appendTo(fc.find('.fc-list-content'));
@@ -3440,11 +3441,29 @@ function rcube_calendar_ui(settings)
         // add links to adjust search date range
         if (addlinks) {
           var lc = container.find('.fc-bottomlinks');
-          $('<a>').attr('href', '#').html(rcmail.gettext('searchearlierdates', 'calendar')).appendTo(lc).click(function(){
+
+          if (elastic) {
+            $('<a>').attr({href: '#', 'class': 'button icon tools'})
+              .append($('<span class="inner">').text(rcmail.gettext('showtools')))
+              .prependTo('#searchcontrols')
+              .click(function() {
+                $(this).attr('title', rcmail.gettext($('#searchcontrols').toggleClass('open').is('.open') ? 'hidetools' : 'showtools'));
+              });
+          }
+
+          $('<a>').attr({href: '#', 'class': 'button prev'})
+            .append($('<span class="inner">').text(rcmail.gettext(elastic ? 'earlierevents' : 'searchearlierdates', 'calendar')))
+            .appendTo(lc)
+            .click(function() {
               fc.fullCalendar('incrementDate', 0, -1, 0);
             });
+
           lc.append(" ");
-          $('<a>').attr('href', '#').html(rcmail.gettext('searchlaterdates', 'calendar')).appendTo(lc).click(function(){
+
+          $('<a>').attr({href: '#', 'class': 'button next'})
+            .append($('<span class="inner">').text(rcmail.gettext(elastic ? 'laterevents' : 'searchlaterdates', 'calendar')))
+            .appendTo(lc)
+            .click(function() {
               var range = fc.fullCalendar('option', 'listRange');
               if (range < 90) {
                 fc.fullCalendar('option', 'listRange', fc.fullCalendar('option', 'listRange') + 30).fullCalendar('render');

plugins/calendar/localization/en_US.inc

@@ -103,6 +103,8 @@ $labels['printdescriptions'] = 'Print descriptions';
 $labels['parentcalendar'] = 'Insert inside';
 $labels['searchearlierdates'] = '« Search for earlier events';
 $labels['searchlaterdates'] = 'Search for later events »';
+$labels['earlierevents'] = 'Earlier';
+$labels['laterevents'] = 'Later';
 $labels['andnmore'] = '$nr more...';
 $labels['togglerole'] = 'Click to toggle role';
 $labels['createfrommail'] = 'Save as event';
@@ -117,6 +119,7 @@ $labels['showfburl'] = 'Show free-busy URL';
 $labels['fburldescription'] = 'Use the following address to access Free-Busy information from other applications. You can copy and paste this into any calendar software that supports free-busy information in iCal format. No authentication is required for this URL.';
 $labels['findcalendars'] = 'Find calendars...';
 $labels['searchterms'] = 'Search terms';
+$labels['findevents'] = 'Find events';
 $labels['calsearchresults'] = 'Available Calendars';
 $labels['calendarsubscribe'] = 'List permanently';
 $labels['nocalendarsfound'] = 'No calendars found';

plugins/calendar/skins/elastic/templates/calendar.html

@@ -40,6 +40,7 @@
 <div class="content selected no-navbar" role="main">
 	<h2 id="aria-label-toolbar" class="voice"><roundcube:label name="arialabeltoolbar" /></h2>
 	<div class="header" role="toolbar" aria-labelledby="aria-label-toolbar">
+		<a class="button icon menu-button" href="#menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 		<a class="button icon back-sidebar-button folders" href="#sidebar" data-hidden="big"><span class="inner"><roundcube:label name="calendar.calendars" /></span></a>
 		<span class="header-title"></span>
 		<!-- toolbar -->
@@ -59,19 +60,13 @@
 				label="calendar.export" title="calendar.exporttitle" innerClass="inner" />
 			<roundcube:container name="toolbar" id="calendartoolbar" />
 		</div>
-<!--
+		<roundcube:object name="plugin.searchform" id="searchform" wrapper="searchbar toolbar"
-	<div id="quicksearchbar" class="searchbox" role="search" aria-labelledby="aria-label-searchform">
+			label="searchform" buttontitle="calendar.findevents" label-domain="calendar" ariatag="h2" />
-		<h2 id="aria-label-searchform" class="voice"><roundcube:label name="calendar.arialabelsearchform" /></h2>
-		<label for="quicksearchbox" class="voice"><roundcube:label name="calendar.arialabelquicksearchbox" /></label>
-		<roundcube:object name="plugin.searchform" id="quicksearchbox" />
-		<a id="searchmenulink" class="iconbutton searchoptions" tabindex="-1"> </a>
-		<roundcube:button type="link" command="reset-search" id="searchreset" class="iconbutton reset" title="resetsearch" label="resetsearch" />
-	</div>
--->
 	</div>
 	<h2 id="aria-label-calendarview" class="voice"><roundcube:label name="calendar.arialabelcalendarview" /></h2>
 	<div id="calendar" class="content" role="main" aria-labelledby="aria-label-calendarview" data-elastic-mode="true">
 		<roundcube:object name="plugin.agenda_options" id="agendaoptions" />
+		<div id="searchcontrols" class="search-controls"></div>
 	</div>
 	<div class="footer toolbar" role="toolbar" data-hidden="big">
 		<a href="#" class="button prev" onclick="$('.fc-button-prev').click()"><span class="inner"><roundcube:label name="previous" /></span></a>
@@ -188,9 +183,9 @@
 
 <div id="eventresourcesdialog" class="popupmenu">
 	<div class="resources-dialog">
-		<h3 class="voice" id="aria-label-resourceselection"><roundcube:label name="calendar.arialabelresourceselection" /></h2>
+		<h3 class="voice" id="aria-label-resourceselection"><roundcube:label name="calendar.arialabelresourceselection" /></h3>
 		<div class="resource-selection uibox listbox" role="navigation" aria-labelledby="aria-label-resourceselection">
-			<span class="header-title"><roundcube:label name="calendar.resources" /></span>
+			<span class="header-title"><roundcube:label name="calendar.tabresources" /></span>
 			<div id="resourcequicksearch" class="header">
 				<div class="searchbox" role="search" aria-labelledby="aria-label-resourcesearchform" aria-controls="resources-list">
 					<h3 id="aria-label-resourcesearchform" class="voice"><roundcube:label name="calendar.arialabelresourcesearchform" /></h3>

plugins/calendar/skins/larry/calendar.css

@@ -2051,6 +2051,7 @@ div.fc-event-location {
 .fc-listappend .formlinks a {
 	font-size: 12px;
 	padding: 0 0.3em;
+	max-width: initial;
 }
 
 .fc-event-temp {

plugins/libkolab/skins/elastic/include/calendar.less

@@ -699,7 +699,8 @@ body.quickview-active .fc-content {
             }
 
             td.fc-event-handle {
-                padding: 3px 8px 3px 5px;
+                padding: 7px 8px 6px 5px;
+                vertical-align: top;
             }
         }
 
@@ -1088,6 +1089,68 @@ body.task-calendar {
     }
 }
 
+#searchcontrols {
+    position: absolute;
+    top: 7.5rem;
+    right: 0;
+    display: none;
+    height: @layout-header-height;
+    overflow: hidden;
+    transform: translateX(80%);
+    transition: transform 0.3s ease-in-out;
+    background-color: fadeout(lighten(@color-main, 15%), 10%);
+    border-radius: .3rem 0 0 .3rem;
+
+    .toolbar {
+        float: right;
+        height: @layout-header-height;
+
+        a.button:before {
+            width: auto;
+            height: 1.75rem;
+            display: block;
+            float: none;
+        }
+    }
+
+    a.button.icon.tools {
+        padding: 0 .25rem;
+        display: inline-block;
+        height: @layout-header-height;
+
+        span.inner {
+            display: none;
+        }
+
+        &:before {
+            line-height: @layout-header-height;
+            margin: 0;
+        }
+    }
+
+    &.open {
+        transform: translateX(0);
+
+        a.button.icon.tools:before {
+            content: @fa-var-chevron-right;
+        }
+    }
+
+    a {
+        color: @color-image-tools;
+
+        &:focus,
+        &:hover {
+            background-color: @color-image-tools-hover !important;
+            outline: 0;
+        }
+    }
+
+    .message {
+        display: none;
+    }
+}
+
 #eventshow {
     margin: 0;
 
@@ -1648,8 +1711,6 @@ body.task-calendar {
 }
 
 .header-title {
-    position: relative;
-
     .tz {
         position: absolute;
         bottom: 0;