show calendars as popover

css/mail.css

@@ -677,6 +677,14 @@ input.submit-message,
 .attachment-import {
 	right: 79px;
 }
+.attachment-import-popover {
+	right: -17px;
+	top: 56px;
+}
+.attachment-import-popover::after {
+	left: 30px;
+	right: initial;
+}
 /* show icon + text for Download all button
 	as well as when there is only one attachment */
 .attachments-save-to-cloud,

js/service/davservice.js

@@ -22,6 +22,7 @@ define(function(require) {
 
 	var _ = require('underscore');
 	var $ = require('jquery');
+	var Backbone = require('backbone');
 	var dav = require('davclient');
 	var OC = require('OC');
 	var Radio = require('radio');
@@ -84,7 +85,7 @@ define(function(require) {
 		client.propFind(url, props, 1, {
 			'requesttoken': OC.requestToken
 		}).then(function(data) {
-			var calendars = [];
+			var calendars = new Backbone.Collection();
 
 			_.each(data.body, function(cal) {
 				if (cal.propStat.length < 1) {

js/templates/calendar.html

@@ -0,0 +1 @@
+<a class="select-calendar" data-calendar-url="some-url">{{displayname}}</a>

js/templates/message-attachment.html

@@ -8,4 +8,5 @@
 <button class="button icon-add attachment-import calendar" title="{{ t 'Import into calendar' }}"></button>
 {{/if}}
 <button class="button icon-download attachment-download" title="{{ t 'Download attachment' }}"></button>
-<button class="icon-folder attachment-save-to-cloud" title="{{ t 'Save to Files' }}"></button>
+<button class="icon-folder attachment-save-to-cloud" title="{{ t 'Save to Files' }}"></button>
+<div class="popovermenu bubble attachment-import-popover hidden"></div>

js/views/app.js

@@ -62,6 +62,10 @@ define(function(require) {
 
 			window.addEventListener('resize', this.onWindowResize);
 
+			$(document).on('click', function(e) {
+				Radio.ui.trigger('document:click', e);
+			});
+
 			// TODO: create marionette view and encapsulate events
 			$(document).on('click', '#forward-button', function() {
 				Radio.message.trigger('forward');

js/views/calendarspopoverview.js

@@ -0,0 +1,30 @@
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * ownCloud - Mail
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+define(function(require) {
+	'use strict';
+
+	var Marionette = require('marionette');
+	var CalendarView = require('views/calendarview');
+
+	return Marionette.CollectionView.extend({
+		childView: CalendarView,
+		tagName: 'ul'
+	});
+});

js/views/calendarview.js

@@ -0,0 +1,31 @@
+/**
+ * @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * ownCloud - Mail
+ *
+ * This code is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License, version 3,
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>
+ *
+ */
+
+define(function(require) {
+	'use strict';
+
+	var Marionette = require('marionette');
+	var Handlebars = require('handlebars');
+	var CalendarTemplate = require('text!templates/calendar.html');
+
+	return Marionette.ItemView.extend({
+		template: Handlebars.compile(CalendarTemplate),
+		tagName: 'li'
+	});
+});

js/views/messageattachment.js

@@ -25,6 +25,7 @@ define(function(require) {
 	var Marionette = require('marionette');
 	var Radio = require('radio');
 	var MessageController = require('controller/messagecontroller');
+	var CalendarsPopoverView = require('views/calendarspopoverview');
 	var MessageAttachmentTemplate = require('text!templates/message-attachment.html');
 
 	/**
@@ -35,15 +36,26 @@ define(function(require) {
 		ui: {
 			'downloadButton': '.attachment-download',
 			'saveToCloudButton': '.attachment-save-to-cloud',
-			'importCalendarEventButton': '.attachment-import.calendar'
+			'importCalendarEventButton': '.attachment-import.calendar',
+			'attachmentImportPopover': '.attachment-import-popover'
 		},
 		events: {
-			'click': '_onDownload',
+			'click': '_onClick',
 			'click @ui.saveToCloudButton': '_onSaveToCloud',
 			'click @ui.importCalendarEventButton': '_onImportCalendarEvent'
 		},
-		_onDownload: function(e) {
+		initialize: function() {
+			this.listenTo(Radio.ui, 'document:click', this._closeImportPopover);
+		},
+		_onClick: function(e) {
 			if (!e.isDefaultPrevented()) {
+				var $target = $(e.target);
+				if ($target.hasClass('select-calendar')) {
+					var url = $target.data('calendar-url');
+					alert(url);
+					return;
+				}
+
 				e.preventDefault();
 				window.location = this.model.get('downloadUrl');
 			}
@@ -83,22 +95,30 @@ define(function(require) {
 			var fetchingCalendars = Radio.dav.request('calendars');
 
 			var _this = this;
-			$.when(downloadingAttachment).done(function(data) {
-				//console.log(data);
-			});
 			$.when(downloadingAttachment.fail(function() {
 				Radio.ui.trigger('error:show', t('Error while downloading calendar event'));
 			}));
-			$.when(downloadingAttachment).always(function() {
+			$.when(fetchingCalendars, downloadingAttachment).always(function() {
 				_this.ui.importCalendarEventButton
 					.removeClass('icon-loading-small')
 					.addClass('icon-add');
 			});
 
-			$.when(fetchingCalendars).done(function(data) {
-				console.log(data);
+			$.when(fetchingCalendars, downloadingAttachment).
+				done(function(calendars, ics) {
+				_this.ui.attachmentImportPopover.removeClass('hidden');
+				var calendarsView = new CalendarsPopoverView({
+					collection: calendars
+				});
+				calendarsView.render();
+				_this.ui.attachmentImportPopover.html(calendarsView.$el);
 			});
-
+		},
+		_closeImportPopover: function(e) {
+			var $target = $(e.target);
+			if (this.$el.find($target).length === 0) {
+				this.ui.attachmentImportPopover.addClass('hidden');
+			}
 		}
 	});