3 commits - plugins/calendar plugins/tasklist

Thomas Brüderli bruederli at kolabsys.com
Fri Sep 19 12:47:20 CEST 2014


 plugins/calendar/calendar_ui.js                   |  195 ++++++++++++++--------
 plugins/calendar/lib/calendar_ui.php              |    2 
 plugins/calendar/lib/js/fullcalendar.js           |    9 -
 plugins/calendar/skins/larry/calendar.css         |   28 ++-
 plugins/calendar/skins/larry/images/focusview.png |binary
 plugins/tasklist/skins/larry/images/focusview.png |binary
 plugins/tasklist/skins/larry/tasklist.css         |   16 +
 plugins/tasklist/tasklist.js                      |    4 
 8 files changed, 182 insertions(+), 72 deletions(-)

New commits:
commit d60799be6b350a11de91d4e20f1dc4648e842c7c
Author: Thomas Bruederli <bruederli at kolabsys.com>
Date:   Fri Sep 19 12:46:45 2014 +0200

    Add missing quickview background image

diff --git a/plugins/tasklist/skins/larry/images/focusview.png b/plugins/tasklist/skins/larry/images/focusview.png
new file mode 100644
index 0000000..573d802
Binary files /dev/null and b/plugins/tasklist/skins/larry/images/focusview.png differ


commit 2c5ee2e2bf669c9155e386730871b4dcc7c36c16
Author: Thomas Bruederli <bruederli at kolabsys.com>
Date:   Fri Sep 19 12:46:06 2014 +0200

    Align the visual indication of active quickview mode with the calendar module

diff --git a/plugins/tasklist/skins/larry/tasklist.css b/plugins/tasklist/skins/larry/tasklist.css
index 2b88c95..20ce2a6 100644
--- a/plugins/tasklist/skins/larry/tasklist.css
+++ b/plugins/tasklist/skins/larry/tasklist.css
@@ -302,6 +302,15 @@ body.tasklist.attachmentwin #mainscreen {
 	background: url(sprites.png) right 20px no-repeat;
 }
 
+.quickview-active #tasklistsbox .treelist li input,
+.quickview-active #tasklistsbox .treelist li span.listname {
+	opacity: 0.35;
+}
+
+.quickview-active #tasklistsbox .treelist div.focusview span.listname {
+	opacity: 1.0;
+}
+
 #tasklistsbox .treelist div span.actions {
 	display: inline-block;
 	position: absolute;
@@ -491,11 +500,16 @@ body.tasklist.attachmentwin #mainscreen {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding-bottom: 28px;
 	background: rgba(255, 255, 255, 0.2);
 	overflow: visible;
 }
 
+.quickview-active #tasksview {
+	background-image: url('images/focusview.png');
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
 #message.statusbar {
 	border-top: 1px solid #c3c3c3;
 }
diff --git a/plugins/tasklist/tasklist.js b/plugins/tasklist/tasklist.js
index 218b8db..65f603e 100644
--- a/plugins/tasklist/tasklist.js
+++ b/plugins/tasklist/tasklist.js
@@ -2838,6 +2838,10 @@ function rcube_tasklist_ui(settings)
 
         if (focusview) {
             li.addClass('focusview').find('a.quickview').attr('aria-checked', 'true');
+            $('body').addClass('quickview-active');
+        }
+        else {
+            $('body').removeClass('quickview-active');
         }
     }
 


commit 3c222ed4115236060baacf863a904b9d8b78cdb8
Author: Thomas Bruederli <bruederli at kolabsys.com>
Date:   Fri Sep 19 12:42:52 2014 +0200

    - Render quickview in main calendar view instead of a popup (to be consistent with the quickview mode in the tasks module).
    - Visually indicate quickview mode by fading inactive calendars and adding an eye-icon to the calendar view background.
    - Allo mulitple calendars to be added to the quickview with shift-click.

diff --git a/plugins/calendar/calendar_ui.js b/plugins/calendar/calendar_ui.js
index 381e7e8..3d580e8 100644
--- a/plugins/calendar/calendar_ui.js
+++ b/plugins/calendar/calendar_ui.js
@@ -40,6 +40,7 @@ function rcube_calendar_ui(settings)
     this.search_request = null;
     this.saving_lock;
     this.calendars = {};
+    this.quickview_sources = [];
 
 
     /***  private vars  ***/
@@ -66,7 +67,6 @@ function rcube_calendar_ui(settings)
     var freebusy_ui = { workinhoursonly:false, needsupdate:false };
     var freebusy_data = {};
     var current_view = null;
-    var quickview_calendar;
     var exec_deferred = bw.ie6 ? 5 : 1;
     var sensitivitylabels = { 'public':rcmail.gettext('public','calendar'), 'private':rcmail.gettext('private','calendar'), 'confidential':rcmail.gettext('confidential','calendar') };
     var ui_loading = rcmail.set_busy(true, 'loading');
@@ -2410,10 +2410,6 @@ function rcube_calendar_ui(settings)
         event.temp = true;
         event.className = 'fc-event-cal-'+data.calendar+' fc-event-temp';
         fc.fullCalendar(data.id ? 'updateEvent' : 'renderEvent', event);
-
-        if (data.id && me.quickview_active && me.quickview_active == data.calendar) {
-          quickview_calendar.fullCalendar('updateEvent', $.extend(quickview_calendar.fullCalendar('clientEvents', event._id)[0] || {}, event));
-        }
       }
     };
 
@@ -2621,55 +2617,114 @@ function rcube_calendar_ui(settings)
     };
 
     // opens the given calendar in a popup dialog
-    this.quickview = function(id)
+    this.quickview = function(id, shift)
     {
-      $('#quickview-calendar:ui-dialog').dialog('close');
+      var src, in_quickview = false;
+      $.each(this.quickview_sources, function(i,cal) {
+        if (cal.id == id) {
+          in_quickview = true;
+          src = cal;
+        }
+      });
 
-      var src, cal = this.calendars[id], date = fc.fullCalendar('getDate'),
-        h = $(window).height() - 50,
-        me = this;
+      // remove source from quickview
+      if (in_quickview && shift) {
+        this.quickview_sources = $.grep(this.quickview_sources, function(src) { return src.id != id; });
+      }
+      else {
+        if (!shift) {
+          // remove all current quickview event sources
+          if (this.quickview_active) {
+            fc.fullCalendar('removeEventSources');
+          }
 
-      // clone and modify calendar properties
-      src = $.extend({}, cal);
-      src.editable = false;
-      src.url += '&_quickview=1';
+          this.quickview_sources = [];
 
-      quickview_calendar = $('<div>')
-        .attr('id', 'quickview-calendar')
-        .dialog({
-          modal: true,
-          width: Math.min(1000, $(window).width() - 100),
-          height: h,
-          title: cal.name.replace('»', '»').replace(' ', ' '),
-          open: function() {
-            setTimeout(function() { quickview_calendar.find('.fc-button-next').first().focus(); }, 10);
-          },
-          close: function() {
-            quickview_calendar.dialog('destroy').fullCalendar('destroy').remove();
-            me.quickview_active = null;
-          },
-          resize: function(e) {
-            // adjust height when dialog resizes
-            quickview_calendar.fullCalendar('option', 'height', quickview_calendar.height() + 8);
-          }
-        })
-        .fullCalendar($.extend({}, fullcalendar_defaults, {
-          header: {
-            left: 'agendaDay,agendaWeek,month,table',
-            center: 'title',
-            right: 'prev,next today'
-          },
-          height: h - 50,
-          defaultView: fc.fullCalendar('getView').name || fullcalendar_defaults.defaultView,
-          listRange: fc.fullCalendar('option', 'listRange'),
-          listSections: fc.fullCalendar('option', 'listSections'),
-          date: date.getDate(),
-          month: date.getMonth(),
-          year: date.getFullYear(),
-          eventSources: [ src ]
-        }));
+          // uncheck all active quickview icons
+          calendars_list.container.find('div.focusview')
+            .add('#calendars .searchresults div.focusview')
+            .removeClass('focusview')
+              .find('a.quickview').attr('aria-checked', 'false');
+        }
+
+        if (!in_quickview) {
+          // clone and modify calendar properties
+          src = $.extend({}, this.calendars[id]);
+          src.url += '&_quickview=1';
+          this.quickview_sources.push(src);
+        }
+      }
+
+      // disable quickview
+      if (this.quickview_active && !this.quickview_sources.length) {
+        // register regular calendar event sources
+        $.each(this.calendars, function(k, cal) {
+          if (cal.active)
+            fc.fullCalendar('addEventSource', cal);
+        });
 
-        me.quickview_active = id;
+        this.quickview_active = false;
+        $('body').removeClass('quickview-active');
+
+        // uncheck all active quickview icons
+        calendars_list.container.find('div.focusview')
+          .add('#calendars .searchresults div.focusview')
+          .removeClass('focusview')
+            .find('a.quickview').attr('aria-checked', 'false');
+      }
+      // activate quickview
+      else if (!this.quickview_active) {
+        // remove regular calendar event sources
+        fc.fullCalendar('removeEventSources');
+
+        // register quickview event sources
+        $.each(this.quickview_sources, function(i, src) {
+          fc.fullCalendar('addEventSource', src);
+        });
+
+        this.quickview_active = true;
+        $('body').addClass('quickview-active');
+      }
+      // update quickview sources
+      else if (in_quickview) {
+        fc.fullCalendar('removeEventSource', src);
+      }
+      else if (src) {
+        fc.fullCalendar('addEventSource', src);
+      }
+
+      // activate quickview icon
+      if (this.quickview_active) {
+        $(calendars_list.get_item(id)).find('.calendar').first()
+          .add('#calendars .searchresults .cal-' + id)
+          [in_quickview ? 'removeClass' : 'addClass']('focusview')
+            .find('a.quickview').attr('aria-checked', in_quickview ? 'false' : 'true');
+      }
+    };
+
+    // disable quickview mode
+    function reset_quickview()
+    {
+      // remove all current quickview event sources
+      if (me.quickview_active) {
+        fc.fullCalendar('removeEventSources');
+        me.quickview_sources = [];
+      }
+
+      // register regular calendar event sources
+      $.each(me.calendars, function(k, cal) {
+        if (cal.active)
+          fc.fullCalendar('addEventSource', cal);
+      });
+
+      // uncheck all active quickview icons
+      calendars_list.container.find('div.focusview')
+        .add('#calendars .searchresults div.focusview')
+        .removeClass('focusview')
+          .find('a.quickview').attr('aria-checked', 'false');
+
+      me.quickview_active = false;
+      $('body').removeClass('quickview-active');
     };
 
     //public method to show the print dialog.
@@ -3040,16 +3095,23 @@ function rcube_calendar_ui(settings)
 
       if (source && (p.refetch || (p.update && !source.active))) {
         // activate event source if new event was added to an invisible calendar
-        if (!source.active) {
+        if (this.quickview_active) {
+          // map source to the quickview_sources equivalent
+          $.each(this.quickview_sources, function(src) {
+            if (src.id == source.id) {
+              source = src;
+              return false;
+            }
+          });
+          fc.fullCalendar('refetchEvents', source);
+        }
+        else if (!source.active) {
           source.active = true;
           fc.fullCalendar('addEventSource', source);
           $('#rcmlical' + source.id + ' input').prop('checked', true);
         }
         else
           fc.fullCalendar('refetchEvents', source);
-
-        if (this.quickview_active)
-          quickview_calendar.fullCalendar('refetchEvents');
       }
       // add/update single event object
       else if (source && p.update) {
@@ -3057,9 +3119,6 @@ function rcube_calendar_ui(settings)
         event.temp = false;
         event.editable = 0;
 
-        // update quickview
-        if (this.quickview_active)
-          update_view(quickview_calendar, event, source);
           // update fish-eye view
         if (this.fisheye_date)
           update_view($('#fish-eye-view'), event, source);
@@ -3075,16 +3134,10 @@ function rcube_calendar_ui(settings)
       // refetch all calendars
       else if (p.refetch) {
         fc.fullCalendar('refetchEvents');
-        if (this.quickview_active)
-          quickview_calendar.fullCalendar('refetchEvents');
       }
 
       // remove temp events
       fc.fullCalendar('removeEvents', function(e){ return e.temp; });
-
-      if (this.quickview_active) {
-        quickview_calendar.fullCalendar('removeEvents', function(e){ return e.temp; });
-      }
     };
 
     // modify query parameters for refresh requests
@@ -3160,6 +3213,9 @@ function rcube_calendar_ui(settings)
           var id = 'search-'+q;
           var sources = [];
           
+          if (me.quickview_active)
+            reset_quickview();
+          
           if (this._search_message)
             rcmail.hide_message(this._search_message);
           
@@ -3431,12 +3487,19 @@ function rcube_calendar_ui(settings)
           event.data.subscribed = false;
           add_calendar_source(event.data);
         }
-        me.quickview(event.data.id);
+        me.quickview(event.data.id, event.shiftKey || event.metaKey || event.ctrlKey);
       }
     });
 
     // init (delegate) event handler on calendar list checkboxes
-    $(rcmail.gui_objects.calendarslist).on('click', 'input[type=checkbox]', function(e){
+    $(rcmail.gui_objects.calendarslist).on('click', 'input[type=checkbox]', function(e) {
+      e.stopPropagation();
+
+      if (me.quickview_active) {
+        this.checked = !this.checked;
+        return false;
+      }
+
       var id = this.value;
       if (me.calendars[id]) {  // add or remove event source on click
         var action;
@@ -3457,8 +3520,6 @@ function rcube_calendar_ui(settings)
         // add/remove event source
         fc.fullCalendar(action, me.calendars[id]);
         rcmail.http_post('calendar', { action:'subscribe', c:{ id:id, active:me.calendars[id].active?1:0 } });
-
-        e.stopPropagation();
       }
     })
     .on('keypress', 'input[type=checkbox]', function(e) {
@@ -3476,7 +3537,7 @@ function rcube_calendar_ui(settings)
         id = id.replace(/--xsR$/, '');
 
       if (me.calendars[id])
-        me.quickview(id);
+        me.quickview(id, e.shiftKey || e.metaKey || e.ctrlKey);
 
       e.stopPropagation();
       return false;
diff --git a/plugins/calendar/lib/calendar_ui.php b/plugins/calendar/lib/calendar_ui.php
index f80cce1..612bda5 100644
--- a/plugins/calendar/lib/calendar_ui.php
+++ b/plugins/calendar/lib/calendar_ui.php
@@ -312,7 +312,7 @@ class calendar_ui
           html::tag('input', array('type' => 'checkbox', 'name' => '_cal[]', 'value' => $id, 'checked' => $prop['active'], 'aria-labelledby' => $label_id), '') .
           html::span('actions', 
             ($prop['removable'] ? html::a(array('href' => '#', 'class' => 'remove', 'title' => $this->cal->gettext('removelist')), ' ') : '') .
-            html::a(array('href' => '#', 'class' => 'quickview', 'title' => $this->cal->gettext('quickview'), 'role' => 'button'), '') .
+            html::a(array('href' => '#', 'class' => 'quickview', 'title' => $this->cal->gettext('quickview'), 'role' => 'checkbox', 'aria-checked' => 'false'), '') .
             (isset($prop['subscribed']) ? html::a(array('href' => '#', 'class' => 'subscribed', 'title' => $this->cal->gettext('calendarsubscribe'), 'role' => 'checkbox', 'aria-checked' => $prop['subscribed'] ? 'true' : 'false'), ' ') : '')
           ) .
           html::span(array('class' => 'handle', 'style' => "background-color: #" . ($prop['color'] ?: 'f00')), ' ')
diff --git a/plugins/calendar/lib/js/fullcalendar.js b/plugins/calendar/lib/js/fullcalendar.js
index 8cf0dbd..a417a25 100644
--- a/plugins/calendar/lib/js/fullcalendar.js
+++ b/plugins/calendar/lib/js/fullcalendar.js
@@ -1,5 +1,5 @@
 /*!
- * FullCalendar v1.6.4-rcube-1.1
+ * FullCalendar v1.6.4-rcube-1.1.2
  * Docs & License: http://arshaw.com/fullcalendar/
  * (c) 2013 Adam Shaw, 2014 Kolab Systems AG
  */
@@ -940,6 +940,7 @@ function EventManager(options, _sources) {
 	t.fetchEvents = fetchEvents;
 	t.addEventSource = addEventSource;
 	t.removeEventSource = removeEventSource;
+  t.removeEventSources = removeEventSources;
 	t.updateEvent = updateEvent;
 	t.renderEvent = renderEvent;
 	t.removeEvents = removeEvents;
@@ -1151,6 +1152,12 @@ function EventManager(options, _sources) {
 		});
 		reportEvents(cache);
 	}
+
+
+	function removeEventSources() {
+		sources = [];
+		removeEvents();
+	}
 	
 	
 	
diff --git a/plugins/calendar/skins/larry/calendar.css b/plugins/calendar/skins/larry/calendar.css
index 44b0142..8b1022a 100644
--- a/plugins/calendar/skins/larry/calendar.css
+++ b/plugins/calendar/skins/larry/calendar.css
@@ -227,6 +227,16 @@ pre {
 	color: #004458;
 }
 
+.quickview-active #calendars .treelist div input,
+.quickview-active #calendars .treelist div .calname {
+	opacity: 0.35;
+}
+
+.quickview-active #calendars .treelist div.focusview .calname {
+	opacity: 1.0;
+	background-image: none;
+}
+
 #calendars .treelist li div.virtual > span.calname {
 	color: #aaa;
 	top: 4px;
@@ -335,10 +345,14 @@ pre {
 
 #calendars .treelist div a.quickview:focus,
 #calendars .treelist div:hover a.quickview {
-	background-position: 0 -148px;
+	background-position: 0 -128px;
 	background-color: transparent !important;
 }
 
+#calendars .treelist div.focusview a.quickview {
+	background-position: -16px -128px;
+}
+
 #calendars .treelist div a.remove:focus,
 #calendars .treelist div:hover a.remove {
 	background-position: -16px -168px;
@@ -1590,6 +1604,12 @@ a.dropdown-link:after {
 	background: #fff;
 }
 
+.calendarmain.quickview-active .fc-content {
+	background-image: url('images/focusview.png');
+	background-position: center;
+	background-repeat: no-repeat;
+}
+
 #fish-eye-view .fc-content {
 	top: 2px;
 	bottom: 2px;
@@ -1889,7 +1909,11 @@ div.fc-event-location {
 }
 
 .fc-sat, .fc-sun {
-	background-color: #fdfdfd;
+	background-color: rgba(198,198,198, 0.08);
+}
+
+.calendarmain .fc-state-highlight {
+	background-color: rgba(233,198,14, 0.12);
 }
 
 .fc-widget-header {
diff --git a/plugins/calendar/skins/larry/images/focusview.png b/plugins/calendar/skins/larry/images/focusview.png
new file mode 100644
index 0000000..d906167
Binary files /dev/null and b/plugins/calendar/skins/larry/images/focusview.png differ




More information about the commits mailing list