Contacts menu

core/Controller/ContactsMenuController.php

@@ -0,0 +1,62 @@
+<?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;
+use OCP\IUserSession;
+
+class ContactsMenuController extends Controller {
+
+	/** @var Manager */
+	private $manager;
+
+	/** @var IUserSession */
+	private $userSession;
+
+	/**
+	 * @param IRequest $request
+	 * @param IUserSession $userSession
+	 * @param Manager $manager
+	 */
+	public function __construct(IRequest $request, IUserSession $userSession, Manager $manager) {
+		parent::__construct('core', $request);
+		$this->userSession = $userSession;
+		$this->manager = $manager;
+	}
+
+	/**
+	 * @NoAdminRequired
+	 *
+	 * @param string|null filter
+	 * @return JSONResponse
+	 */
+	public function index($filter = null) {
+		return $this->manager->getEntries($this->userSession->getUser(), $filter);
+	}
+
+}

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;

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');
 }

core/css/styles.scss

@@ -1057,6 +1057,119 @@ 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,
+		.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 {