Contacts menu

* load list of contacts from the server
* show last message of each contact

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>

11 files changed, 988 insertions, 21 deletions

diff --git a/core/Controller/ContactsMenuController.php b/core/Controller/ContactsMenuController.php
new file mode 100644
index 00000000000..edd2f2c8be8
--- /dev/null
+++ b/core/Controller/ContactsMenuController.php
@@ -0,0 +1,61 @@
+<?php
+
+/**
+ * @copyright 2017 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2017 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * 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
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace OC\Core\Controller;
+
+use OC\Contacts\ContactsMenu\Manager;
+use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\IRequest;
+
+class ContactsMenuController extends Controller {
+
+	/** @var Manager */
+	private $manager;
+
+	/** @var string */
+	private $userId;
+
+	/**
+	 * @param IRequest $request
+	 * @param string $UserId
+	 * @param Manager $manager
+	 */
+	public function __construct(IRequest $request, $UserId, Manager $manager) {
+		parent::__construct('core', $request);
+		$this->userId = $UserId;
+		$this->manager = $manager;
+	}
+
+	/**
+	 * @NoAdminRequired
+	 *
+	 * @param string|null filter
+	 * @return JSONResponse
+	 */
+	public function index($filter = null) {
+		return $this->manager->getEntries($this->userId, $filter);
+	}
+
+}
diff --git a/core/css/header.scss b/core/css/header.scss
index 619852faf60..50d270a6ff9 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -20,10 +20,21 @@
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
+}
 
-	/* Dropdown menu arrow */
-	&.menu:after,
-	.menu:after {
+/* Header menu */
+.menu {
+	position: absolute;
+	top: 45px;
+	background-color: #fff;
+	box-shadow: 0 1px 10px rgba(150, 150, 150, 0.75);
+	border-radius: 0 0 3px 3px;
+	display: none;
+	box-sizing: border-box;
+	z-index: 2000;
+
+	/* Dropdown arrow */
+	&:after {
 		border: 10px solid transparent;
 		border-bottom-color: $color-main-background;
 		bottom: 100%;
@@ -199,19 +210,12 @@ nav {
 
 #navigation {
 	position: relative;
-	top: 45px;
 	left: -100%;
 	width: 160px;
-	margin-top: 0;
 	background-color: $color-main-background;
 	box-shadow: 0 1px 10px $color-box-shadow;
-	border-radius: 3px;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	display: none;
-	box-sizing: border-box;
-	z-index: 2000;
 	&:after {
+		/* position of dropdown arrow */
 		left: 47%;
 		bottom: 100%;
 		border: solid transparent;
@@ -407,17 +411,9 @@ nav {
 }
 
 #expanddiv {
-	position: absolute;
 	right: 13px;
-	top: 45px;
-	z-index: 2000;
-	display: none;
 	background: $color-main-background;
 	box-shadow: 0 1px 10px $color-box-shadow;
-	border-radius: 3px;
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-	box-sizing: border-box;
 	&:after {
 		/* position of dropdown arrow */
 		right: 13px;
diff --git a/core/css/icons.scss b/core/css/icons.scss
index 1ca29f22600..f9b73f51923 100644
--- a/core/css/icons.scss
+++ b/core/css/icons.scss
@@ -438,6 +438,10 @@ img, object, video, button, textarea, input, select {
 	background-image: url('../img/places/calendar-dark.svg?v=1');
 }
 
+.icon-contacts {
+	background-image: url('../img/places/contacts.svg?v=1');
+}
+
 .icon-contacts-dark {
 	background-image: url('../img/places/contacts-dark.svg?v=1');
 }
diff --git a/core/css/styles.scss b/core/css/styles.scss
index a6970336c12..ed11fd52158 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -1057,6 +1057,121 @@ span.ui-icon {
 	margin: 3px 7px 30px 0;
 }
 
+/* ---- CONTACTS MENU ---- */
+
+#contactsmenu {
+	.menutoggle {
+		background-size: 16px 16px;
+		padding: 14px;
+		cursor: pointer;
+		opacity: .7;
+	}
+}
+
+#contactsmenu > .menu {
+	/* show ~4.5 entries */
+	height: 278px;
+	width: 350px;
+	right: 13px;
+
+	&::after {
+		right: 61px;
+	}
+
+	.emptycontent {
+		margin-top: 5vh !important;
+		margin-bottom: 2vh;
+		.icon-loading {
+			position: inherit;
+		}
+		.icon-search {
+			display: inline-block;
+		}
+	}
+
+	.content {
+		max-height: calc(100% - 50px);
+		overflow-y: auto;
+
+		.footer {
+			text-align: center;
+
+			a {
+				display: block;
+				width: 100%;
+				padding: 12px 0;
+				opacity: .5;
+			}
+		}
+	}
+
+	.contact {
+		display: flex;
+		position: relative;
+		align-items: center;
+		padding: 3px 3px 3px 10px;
+		border-bottom: 1px solid #eeeeee;
+
+		:last-of-type {
+			border-bottom: none;
+		}
+
+		.avatar {
+			height: 32px;
+			width: 32px;
+			display: inline-block;
+		}
+
+		.body {
+			flex-grow: 1;
+			padding-left: 8px;
+
+			div {
+				position: relative;
+				width: 100%;
+			}
+
+			.full-name, .last-message {
+				/* TODO: don't use fixed width */
+				max-width: 204px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+			.last-message {
+				opacity: .5;
+			}
+		}
+
+		.top-action, .second-action, .other-actions {
+			width: 16px;
+			height: 16px;
+			padding: 14px;
+			opacity: .5;
+			cursor: pointer;
+
+			:hover {
+				opacity: 1;
+			}
+		}
+
+		/* actions menu */
+		.menu {
+			top: 47px;
+			margin-right: 13px;
+		}
+		.popovermenu::after {
+			right: 2px;
+		}
+	}
+}
+
+
+#contactsmenu-search {
+	width: calc(100% - 16px);
+	margin: 8px;
+}
+
 /* ---- TOOLTIPS ---- */
 
 .extra-data {
diff --git a/core/img/places/contacts.svg b/core/img/places/contacts.svg
new file mode 100644
index 00000000000..fb6a60c0844
--- /dev/null
+++ b/core/img/places/contacts.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewbox="0 0 32 32"><path style="block-progression:tb;text-transform:none;text-indent:0" d="M9.24 6.67c-1.955 0-3.613 1.43-3.613 3.275.014.583.066 1.302.414 2.823v.037l.038.038c.112.32.275.503.49.753.215.25.47.544.715.79l.075.076c.048.21.107.436.15.64.117.54.105.922.076 1.053-.84.295-1.885.647-2.823 1.054-.526.228-1.002.433-1.392.677-.39.244-.777.43-.903.978a.473.473 0 0 0 0 .076c-.123 1.13-.31 2.793-.452 3.915a.618.618 0 0 0 .3.603c1.704.92 4.32 1.29 6.927 1.28 2.607-.01 5.202-.403 6.85-1.28a.618.618 0 0 0 .3-.603c-.044-.35-.1-1.14-.15-1.92-.05-.778-.09-1.543-.15-1.994a.607.607 0 0 0-.15-.3c-.524-.626-1.306-1.008-2.22-1.393-.836-.352-1.815-.717-2.786-1.13-.055-.12-.11-.473 0-1.016.03-.144.074-.3.113-.45l.263-.3c.216-.248.447-.506.64-.754.192-.25.35-.462.452-.753l.037-.038c.393-1.588.393-2.25.413-2.823v-.037c0-1.845-1.658-3.275-3.613-3.275zm10.336-3.005c-2.85 0-5.268 2.084-5.268 4.774.02.85.096 1.898.604 4.115v.055l.055.055c.162.466.4.733.713 1.097s.687.793 1.043 1.153c.04.042.068.068.11.11.07.306.155.636.22.932.168.788.15 1.346.11 1.537-1.226.43-2.75.942-4.117 1.536-.768.334-1.462.632-2.03.988-.57.356-1.134.625-1.317 1.427a.67.67 0 0 0 0 .11c-.18 1.648-.452 4.07-.66 5.707a.9.9 0 0 0 .44.878c2.48 1.34 6.295 1.88 10.096 1.865s7.584-.586 9.987-1.865a.9.9 0 0 0 .44-.878c-.067-.512-.148-1.665-.22-2.8-.072-1.133-.134-2.25-.22-2.907a.884.884 0 0 0-.22-.44c-.763-.91-1.903-1.468-3.237-2.03-1.217-.513-2.645-1.045-4.06-1.646-.08-.177-.16-.69 0-1.483.042-.212.108-.44.164-.658.133-.15.237-.272.384-.44.315-.36.652-.735.933-1.098.28-.362.51-.673.66-1.097l.053-.055c.574-2.315.574-3.28.604-4.116V8.44c0-2.69-2.418-4.775-5.268-4.775z" fill="#fff"/></svg>
diff --git a/core/js/contactsmenu.js b/core/js/contactsmenu.js
new file mode 100644
index 00000000000..2991a0e84d1
--- /dev/null
+++ b/core/js/contactsmenu.js
@@ -0,0 +1,515 @@
+/* global OC.Backbone, Handlebars, Promise, _ */
+
+/**
+ * @copyright 2017 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2017 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * 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
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+(function(OC, $, _, Handlebars) {
+	'use strict';
+
+	var MENU_TEMPLATE = ''
+			+ '<input id="contactsmenu-search" type="search" placeholder="Search contacts …" value="{{searchTerm}}">'
+			+ '<div class="content">'
+			+ '</div>';
+	var CONTACTS_LIST_TEMPLATE = ''
+			+ '{{#unless contacts.length}}'
+			+ '<div class="emptycontent">'
+			+ '    <a class="icon-search"></a>'
+			+ '    <h2>' + t('core', 'No contacts found') + '</h2>'
+			+ '</div>'
+			+ '{{/unless}}'
+			+ '<div id="contactsmenu-contacts"></div>'
+			+ '{{#if contactsAppEnabled}}<div class="footer"><a href="{{contactsAppURL}}">' + t('core', 'Show all contacts …') + '</a></div>{{/if}}';
+	var LOADING_TEMPLATE = ''
+			+ '<div class="emptycontent">'
+			+ '    <a class="icon-loading"></a>'
+			+ '    <h2>{{loadingText}}</h2>'
+			+ '</div>';
+	var ERROR_TEMPLATE = ''
+			+ '<div class="emptycontent">'
+			+ '    <h2>' + t('core', 'Could not load your contacts.') + '</h2>'
+			+ '</div>';
+	var CONTACT_TEMPLATE = ''
+			+ '{{#if contact.avatar}}'
+			+ '<img src="{{contact.avatar}}" class="avatar">'
+			+ '{{else}}'
+			+ '<div class="avatar"></div>'
+			+ '{{/if}}'
+			+ '<div class="body">'
+			+ '    <div class="full-name">{{contact.fullName}}</div>'
+			+ '    <div class="last-message">{{contact.lastMessage}}</div>'
+			+ '</div>'
+			+ '{{#if contact.topAction}}'
+			+ '<a class="top-action {{contact.topAction.icon}}" href="{{contact.topAction.hyperlink}}"></a>'
+			+ '{{/if}}'
+			+ '{{#if contact.hasManyActions}}'
+			+ '    <span class="other-actions icon-more"></span>'
+			+ '    <div class="menu popovermenu">'
+			+ '        <ul>'
+			+ '            {{#each contact.actions}}'
+			+ '            <li>'
+			+ '                <a href="{{hyperlink}}">'
+			+ '                    <span class="{{icon}}"></span>'
+			+ '                    <span>{{title}}</span>'
+			+ '                </a>'
+			+ '            </li>'
+			+ '            {{/each}}'
+			+ '        </ul>'
+			+ '    </div>'
+			+ '{{/if}}'
+			+ '{{#if contact.hasTwoActions}}'
+			+ '<a class="second-action {{contact.secondAction.icon}}" href="{{contact.secondAction.hyperlink}}"></a>'
+			+ '{{/if}}';
+
+	/**
+	 * @class Contact
+	 */
+	var Contact = OC.Backbone.Model.extend({
+		defaults: {
+			fullName: '',
+			lastMessage: '',
+			actions: [],
+			hasOneAction: false,
+			hasTwoActions: false,
+			hasManyActions: false
+		},
+
+		/**
+		 * @returns {undefined}
+		 */
+		initialize: function() {
+			// Add needed property for easier template rendering
+			if (this.get('actions').length === 0) {
+				this.set('hasOneAction', true);
+			} else if (this.get('actions').length === 1) {
+				this.set('hasTwoActions', true);
+				this.set('secondAction', this.get('actions')[0]);
+			} else {
+				this.set('hasManyActions', true);
+			}
+		}
+	});
+
+	/**
+	 * @class ContactCollection
+	 */
+	var ContactCollection = OC.Backbone.Collection.extend({
+		model: Contact
+	});
+
+	/**
+	 * @class ContactsListView
+	 */
+	var ContactsListView = OC.Backbone.View.extend({
+
+		/** @type {ContactsCollection} */
+		_collection: undefined,
+
+		/** @type {array} */
+		_subViews: [],
+
+		/**
+		 * @param {object} options
+		 * @returns {undefined}
+		 */
+		initialize: function(options) {
+			this._collection = options.collection;
+		},
+
+		/**
+		 * @returns {self}
+		 */
+		render: function() {
+			var self = this;
+			self.$el.html('');
+			self._subViews = [];
+
+			self._collection.forEach(function(contact) {
+				var item = new ContactsListItemView({
+					model: contact
+				});
+				item.render();
+				self.$el.append(item.$el);
+				item.on('toggle:actionmenu', self._onChildActionMenuToggle, self);
+				self._subViews.push(item);
+			});
+
+			return self;
+		},
+
+		/**
+		 * Event callback to propagate opening (another) entry's action menu
+		 *
+		 * @param {type} $src
+		 * @returns {undefined}
+		 */
+		_onChildActionMenuToggle: function($src) {
+			this._subViews.forEach(function(view) {
+				view.trigger('parent:toggle:actionmenu', $src);
+			});
+		}
+	});
+
+	/**
+	 * @class CotnactsListItemView
+	 */
+	var ContactsListItemView = OC.Backbone.View.extend({
+
+		/** @type {string} */
+		className: 'contact',
+
+		/** @type {undefined|function} */
+		_template: undefined,
+
+		/** @type {Contact} */
+		_model: undefined,
+
+		/** @type {boolean} */
+		_actionMenuShown: false,
+
+		events: {
+			'click .icon-more': '_onToggleActionsMenu'
+		},
+
+		/**
+		 * @param {object} data
+		 * @returns {undefined}
+		 */
+		template: function(data) {
+			if (!this._template) {
+				this._template = Handlebars.compile(CONTACT_TEMPLATE);
+			}
+			return this._template(data);
+		},
+
+		/**
+		 * @param {object} options
+		 * @returns {undefined}
+		 */
+		initialize: function(options) {
+			this._model = options.model;
+			this.on('parent:toggle:actionmenu', this._onOtherActionMenuOpened, this);
+		},
+
+		/**
+		 * @returns {self}
+		 */
+		render: function() {
+			this.$el.html(this.template({
+				contact: this._model.toJSON()
+			}));
+			this.delegateEvents();
+
+			// Show placeholder iff no avatar is available (avatar is rendered as img, not div)
+			this.$('div.avatar').imageplaceholder(this._model.get('fullName'));
+
+			return this;
+		},
+
+		/**
+		 * Toggle the visibility of the action popover menu
+		 *
+		 * @private
+		 * @returns {undefined}
+		 */
+		_onToggleActionsMenu: function() {
+			this._actionMenuShown = !this._actionMenuShown;
+			if (this._actionMenuShown) {
+				this.$('.menu').show();
+			} else {
+				this.$('.menu').hide();
+			}
+			this.trigger('toggle:actionmenu', this.$el);
+		},
+
+		/**
+		 * @private
+		 * @argument {jQuery} $src
+		 * @returns {undefined}
+		 */
+		_onOtherActionMenuOpened: function($src) {
+			if (this.$el.is($src)) {
+				// Ignore
+				return;
+			}
+			this._actionMenuShown = false;
+			this.$('.menu').hide();
+		}
+	});
+
+	/**
+	 * @class ContactsMenuView
+	 */
+	var ContactsMenuView = OC.Backbone.View.extend({
+
+		/** @type {undefined|function} */
+		_loadingTemplate: undefined,
+
+		/** @type {undefined|function} */
+		_errorTemplate: undefined,
+
+		/** @type {undefined|function} */
+		_contentTemplate: undefined,
+
+		/** @type {undefined|function} */
+		_contactsTemplate: undefined,
+
+		/** @type {undefined|ContactCollection} */
+		_contacts: undefined,
+
+		events: {
+			'input #contactsmenu-search': '_onSearch'
+		},
+
+		/**
+		 * @returns {undefined}
+		 */
+		_onSearch: _.debounce(function() {
+			this.trigger('search', this.$('#contactsmenu-search').val());
+		}, 700),
+
+		/**
+		 * @param {object} data
+		 * @returns {string}
+		 */
+		loadingTemplate: function(data) {
+			if (!this._loadingTemplate) {
+				this._loadingTemplate = Handlebars.compile(LOADING_TEMPLATE);
+			}
+			return this._loadingTemplate(data);
+		},
+
+		/**
+		 * @param {object} data
+		 * @returns {string}
+		 */
+		errorTemplate: function(data) {
+			if (!this._errorTemplate) {
+				this._errorTemplate = Handlebars.compile(ERROR_TEMPLATE);
+			}
+			return this._errorTemplate(data);
+		},
+
+		/**
+		 * @param {object} data
+		 * @returns {string}
+		 */
+		contentTemplate: function(data) {
+			if (!this._contentTemplate) {
+				this._contentTemplate = Handlebars.compile(MENU_TEMPLATE);
+			}
+			return this._contentTemplate(data);
+		},
+
+		/**
+		 * @param {object} data
+		 * @returns {string}
+		 */
+		contactsTemplate: function(data) {
+			if (!this._contactsTemplate) {
+				this._contactsTemplate = Handlebars.compile(CONTACTS_LIST_TEMPLATE);
+			}
+			return this._contactsTemplate(data);
+		},
+
+		/**
+		 * @param {object} options
+		 * @returns {undefined}
+		 */
+		initialize: function(options) {
+			this.options = options;
+		},
+
+		/**
+		 * @param {string} text
+		 * @returns {undefined}
+		 */
+		showLoading: function(text) {
+			this.render();
+			this._contacts = undefined;
+			this.$('.content').html(this.loadingTemplate({
+				loadingText: text
+			}));
+		},
+
+		/**
+		 * @returns {undefined}
+		 */
+		showError: function() {
+			this.render();
+			this._contacts = undefined;
+			this.$('.content').html(this.errorTemplate());
+		},
+
+		/**
+		 * @param {object} viewData
+		 * @param {string} searchTerm
+		 * @returns {undefined}
+		 */
+		showContacts: function(viewData, searchTerm) {
+			this._contacts = viewData.contacts;
+			this.render({
+				contacts: viewData.contacts
+			});
+
+			var list = new ContactsListView({
+				collection: viewData.contacts
+			});
+			list.render();
+			this.$('.content').html(this.contactsTemplate({
+				contacts: viewData.contacts,
+				searchTerm: searchTerm,
+				contactsAppEnabled: viewData.contactsAppEnabled,
+				contactsAppURL: OC.generateUrl('/apps/contacts')
+			}));
+			this.$('#contactsmenu-contacts').html(list.$el);
+		},
+
+		/**
+		 * @param {object} data
+		 * @returns {self}
+		 */
+		render: function(data) {
+			var searchVal = this.$('#contactsmenu-search').val();
+			this.$el.html(this.contentTemplate(data));
+
+			// Focus search
+			this.$('#contactsmenu-search').val(searchVal);
+			this.$('#contactsmenu-search').focus();
+			return this;
+		}
+
+	});
+
+	/**
+	 * @param {Object} options
+	 * @param {jQuery} options.el
+	 * @param {jQuery} options.trigger
+	 * @class ContactsMenu
+	 */
+	var ContactsMenu = function(options) {
+		this.initialize(options);
+	};
+
+	ContactsMenu.prototype = {
+		/** @type {jQuery} */
+		$el: undefined,
+
+		/** @type {jQuery} */
+		_$trigger: undefined,
+
+		/** @type {ContactsMenuView} */
+		_view: undefined,
+
+		/** @type {Promise} */
+		_contactsPromise: undefined,
+
+		/**
+		 * @param {Object} options
+		 * @param {jQuery} options.el - the element to render the menu in
+		 * @param {jQuery} options.trigger - the element to click on to open the menu
+		 * @returns {undefined}
+		 */
+		initialize: function(options) {
+			this.$el = options.el;
+			this._$trigger = options.trigger;
+
+			this._view = new ContactsMenuView({
+				el: this.$el
+			});
+			this._view.on('search', function(searchTerm) {
+				this._loadContacts(searchTerm);
+			}, this);
+
+			OC.registerMenu(this._$trigger, this.$el, function() {
+				this._toggleVisibility(true);
+			}.bind(this));
+			this.$el.on('beforeHide', function() {
+				this._toggleVisibility(false);
+			}.bind(this));
+		},
+
+		/**
+		 * @private
+		 * @param {boolean} show
+		 * @returns {Promise}
+		 */
+		_toggleVisibility: function(show) {
+			if (show) {
+				return this._loadContacts();
+			} else {
+				this.$el.html('');
+				return Promise.resolve();
+			}
+		},
+
+		/**
+		 * @private
+		 * @param {string|undefined} searchTerm
+		 * @returns {Promise}
+		 */
+		_getContacts: function(searchTerm) {
+			var url = OC.generateUrl('/contactsmenu/contacts');
+			return Promise.resolve($.ajax(url, {
+				method: 'GET',
+				data: {
+					filter: searchTerm
+				}
+			}));
+		},
+
+		/**
+		 * @param {string|undefined} searchTerm
+		 * @returns {undefined}
+		 */
+		_loadContacts: function(searchTerm) {
+			var self = this;
+
+			if (!self._contactsPromise) {
+				self._contactsPromise = self._getContacts(searchTerm);
+			}
+
+			if (_.isUndefined(searchTerm) || searchTerm === '') {
+				self._view.showLoading(t('core', 'Loading your contacts …'));
+			} else {
+				self._view.showLoading(t('core', 'Looking for {term} …', {
+					term: searchTerm
+				}));
+			}
+			return self._contactsPromise.then(function(data) {
+				// Convert contact entries to Backbone collection
+				data.contacts = new ContactCollection(data.contacts);
+
+				self._view.showContacts(data, searchTerm);
+			}, function(e) {
+				self._view.showError();
+				console.error('could not load contacts', e);
+			}).then(function() {
+				// Delete promise, so that contacts are fetched again when the
+				// menu is opened the next time.
+				delete self._contactsPromise;
+			}).catch(console.error.bind(this));
+		}
+	};
+
+	OC.ContactsMenu = ContactsMenu;
+
+})(OC, $, _, Handlebars);
diff --git a/core/js/core.json b/core/js/core.json
index 6494d4105f8..aadd66a0558 100644
--- a/core/js/core.json
+++ b/core/js/core.json
@@ -40,6 +40,7 @@
 		"sharedialogresharerinfoview.js",
 		"sharedialogshareelistview.js",
 		"octemplate.js",
+		"contactsmenu.js",
 		"eventsource.js",
 		"config.js",
 		"public/appconfig.js",
diff --git a/core/js/js.js b/core/js/js.js
index 95c00dd6448..03d831567d3 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -654,8 +654,13 @@ var OCP = {},
 	/**
 	 * For menu toggling
 	 * @todo Write documentation
+	 *
+	 * @param {jQuery} $toggle
+	 * @param {jQuery} $menuEl
+	 * @param {function|undefined} toggle callback invoked everytime the menu is opened
+	 * @returns {undefined}
 	 */
-	registerMenu: function($toggle, $menuEl) {
+	registerMenu: function($toggle, $menuEl, toggle) {
 		var self = this;
 		$menuEl.addClass('menu');
 		$toggle.on('click.menu', function(event) {
@@ -671,7 +676,7 @@ var OCP = {},
 				// close it
 				self.hideMenus();
 			}
-			$menuEl.slideToggle(OC.menuSpeed);
+			$menuEl.slideToggle(OC.menuSpeed, toggle);
 			OC._currentMenu = $menuEl;
 			OC._currentMenuToggle = $toggle;
 		});
@@ -1473,8 +1478,16 @@ function initCore() {
 		});
 	}
 
+	function setupContactsMenu() {
+		new OC.ContactsMenu({
+			el: $('#contactsmenu .menu'),
+			trigger: $('#contactsmenu .menutoggle')
+		});
+	}
+
 	setupMainMenu();
 	setupUserMenu();
+	setupContactsMenu();
 
 	// move triangle of apps dropdown to align with app name triangle
 	// 2 is the additional offset between the triangles
diff --git a/core/js/tests/specs/contactsmenuSpec.js b/core/js/tests/specs/contactsmenuSpec.js
new file mode 100644
index 00000000000..1db9a6a9554
--- /dev/null
+++ b/core/js/tests/specs/contactsmenuSpec.js
@@ -0,0 +1,255 @@
+/* global expect, sinon, _, spyOn, Promise */
+
+/**
+ * @copyright 2017 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @author 2017 Christoph Wurst <christoph@winzerhof-wurst.at>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * 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
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+describe('Contacts menu', function() {
+	var $triggerEl,
+			$menuEl,
+			menu;
+
+	/**
+	 * @private
+	 * @returns {Promise}
+	 */
+	function openMenu() {
+		return menu._toggleVisibility(true);
+	}
+
+	beforeEach(function(done) {
+		$triggerEl = $('<div class="menutoggle">');
+		$menuEl = $('<div class="menu">');
+
+		menu = new OC.ContactsMenu({
+			el: $menuEl,
+			trigger: $triggerEl
+		});
+		done();
+	});
+
+	it('shows a loading message while data is being fetched', function() {
+		fakeServer.respondWith('GET', OC.generateUrl('/contactsmenu/contacts'), [
+			200,
+			{},
+			''
+		]);
+
+		openMenu();
+
+		expect($menuEl.html()).toContain('Loading your contacts …');
+	});
+
+	it('shows an error message when loading the contacts data fails', function(done) {
+		spyOn(console, 'error');
+		fakeServer.respondWith('GET', OC.generateUrl('/contactsmenu/contacts'), [
+			500,
+			{},
+			''
+		]);
+
+		var opening = openMenu();
+
+		expect($menuEl.html()).toContain('Loading your contacts …');
+		fakeServer.respond();
+
+		opening.then(function() {
+			expect($menuEl.html()).toContain('Could not load your contacts.');
+			expect(console.error).toHaveBeenCalledTimes(1);
+			done();
+		}, function(e) {
+			done.fail(e);
+		});
+	});
+
+	it('loads data successfully', function(done) {
+		spyOn(menu, '_getContacts').and.returnValue(Promise.resolve({
+			contacts: [
+				{
+					id: null,
+					fullName: 'Acosta Lancaster',
+					topAction: {
+						title: 'Mail',
+						icon: 'icon-mail',
+						hyperlink: 'mailto:deboraoliver%40centrexin.com'
+					},
+					actions: [
+						{
+							title: 'Mail',
+							icon: 'icon-mail',
+							hyperlink: 'mailto:mathisholland%40virxo.com'
+						},
+						{
+							title: 'Details',
+							icon: 'icon-info',
+							hyperlink: 'https:\/\/localhost\/index.php\/apps\/contacts'
+						}
+					],
+					lastMessage: ''
+				},
+				{
+					id: null,
+					fullName: 'Adeline Snider',
+					topAction: {
+						title: 'Mail',
+						icon: 'icon-mail',
+						hyperlink: 'mailto:ceciliasoto%40essensia.com'
+					},
+					actions: [
+						{
+							title: 'Mail',
+							icon: 'icon-mail',
+							hyperlink: 'mailto:pearliesellers%40inventure.com'
+						},
+						{
+							title: 'Details',
+							icon: 'icon-info',
+							hyperlink: 'https://localhost\/index.php\/apps\/contacts'
+						}
+					],
+					lastMessage: 'cu'
+				}
+			],
+			contactsAppEnabled: true
+		}));
+
+		openMenu().then(function() {
+			expect(menu._getContacts).toHaveBeenCalled();
+			expect($menuEl.html()).toContain('Acosta Lancaster');
+			expect($menuEl.html()).toContain('Adeline Snider');
+			expect($menuEl.html()).toContain('Show all contacts …');
+			done();
+		}, function(e) {
+			done.fail(e);
+		});
+
+	});
+
+	it('doesn\'t show a link to the contacts app if it\'s disabled', function(done) {
+		spyOn(menu, '_getContacts').and.returnValue(Promise.resolve({
+			contacts: [
+				{
+					id: null,
+					fullName: 'Acosta Lancaster',
+					topAction: {
+						title: 'Mail',
+						icon: 'icon-mail',
+						hyperlink: 'mailto:deboraoliver%40centrexin.com'
+					},
+					actions: [
+						{
+							title: 'Mail',
+							icon: 'icon-mail',
+							hyperlink: 'mailto:mathisholland%40virxo.com'
+						},
+						{
+							title: 'Details',
+							icon: 'icon-info',
+							hyperlink: 'https:\/\/localhost\/index.php\/apps\/contacts'
+						}
+					],
+					lastMessage: ''
+				}
+			],
+			contactsAppEnabled: false
+		}));
+
+		openMenu().then(function() {
+			expect(menu._getContacts).toHaveBeenCalled();
+			expect($menuEl.html()).not.toContain('Show all contacts …');
+			done();
+		}, function(e) {
+			done.fail(e);
+		});
+	});
+
+	it('shows only one entry\'s action menu at a time', function(done) {
+		spyOn(menu, '_getContacts').and.returnValue(Promise.resolve({
+			contacts: [
+				{
+					id: null,
+					fullName: 'Acosta Lancaster',
+					topAction: {
+						title: 'Mail',
+						icon: 'icon-mail',
+						hyperlink: 'mailto:deboraoliver%40centrexin.com'
+					},
+					actions: [
+						{
+							title: 'Details',
+							icon: 'icon-info',
+							hyperlink: 'https:\/\/localhost\/index.php\/apps\/contacts'
+						}
+					],
+					lastMessage: ''
+				},
+				{
+					id: null,
+					fullName: 'Adeline Snider',
+					topAction: {
+						title: 'Mail',
+						icon: 'icon-mail',
+						hyperlink: 'mailto:ceciliasoto%40essensia.com'
+					},
+					actions: [
+						{
+							title: 'Details',
+							icon: 'icon-info',
+							hyperlink: 'https://localhost\/index.php\/apps\/contacts'
+						}
+					],
+					lastMessage: 'cu'
+				}
+			],
+			contactsAppEnabled: true
+		}));
+
+		openMenu().then(function() {
+			expect(menu._getContacts).toHaveBeenCalled();
+			expect($menuEl.html()).toContain('Adeline Snider');
+			expect($menuEl.html()).toContain('Show all contacts …');
+
+			// Both menus are closed at the beginning
+			expect($menuEl.find('.contact').eq(0).find('.menu').is(':visible')).toBeFalsy();
+			expect($menuEl.find('.contact').eq(1).find('.menu').is(':visible')).toBeFalsy();
+
+			// Open the first one
+			$menuEl.find('.contact').eq(0).find('.other-actions').click();
+			expect($menuEl.find('.contact').eq(0).find('.menu').css('display')).toBe('block');
+			expect($menuEl.find('.contact').eq(1).find('.menu').css('display')).toBe('none');
+
+			// Open the second one
+			$menuEl.find('.contact').eq(1).find('.other-actions').click();
+			expect($menuEl.find('.contact').eq(0).find('.menu').css('display')).toBe('none');
+			expect($menuEl.find('.contact').eq(1).find('.menu').css('display')).toBe('block');
+
+			// Close the second one
+			$menuEl.find('.contact').eq(1).find('.other-actions').click();
+			expect($menuEl.find('.contact').eq(0).find('.menu').css('display')).toBe('none');
+			expect($menuEl.find('.contact').eq(1).find('.menu').css('display')).toBe('none');
+
+			done();
+		}, function(e) {
+			done.fail(e);
+		});
+	});
+
+});
diff --git a/core/routes.php b/core/routes.php
index 7a2d9d750cc..0e882c625fc 100644
--- a/core/routes.php
+++ b/core/routes.php
@@ -57,6 +57,7 @@ $application->registerRoutes($this, [
 		['name' => 'Preview#getPreview', 'url' => '/core/preview.png', 'verb' => 'GET'],
 		['name' => 'Css#getCss', 'url' => '/css/{appName}/{fileName}', 'verb' => 'GET'],
 		['name' => 'Js#getJs', 'url' => '/js/{appName}/{fileName}', 'verb' => 'GET'],
+		['name' => 'contactsMenu#index', 'url' => '/contactsmenu/contacts', 'verb' => 'GET'],
 	],
 	'ocs' => [
 		['root' => '/cloud', 'name' => 'OCS#getCapabilities', 'url' => '/capabilities', 'verb' => 'GET'],
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 91b7eb3490b..426ed4b1125 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -118,6 +118,10 @@
 						autocomplete="off" tabindex="5">
 					<button class="icon-close-white" type="reset"></button>
 				</form>
+				<div id="contactsmenu">
+					<div class="icon-contacts menutoggle"></div>
+					<div class="menu"></div>
+				</div>
 				<div id="settings">
 					<div id="expand" tabindex="6" role="link" class="menutoggle">
 						<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
@@ -161,5 +165,6 @@
 				<?php print_unescaped($_['content']); ?>
 			</div>
 		</div>
+
 	</body>
 </html>