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