apply our theming

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

apps/comments/appinfo/app.php

@@ -27,7 +27,7 @@ $eventDispatcher->addListener(
 	function() {
 		\OCP\Util::addScript('oc-backbone-webdav');
 		\OCP\Util::addScript('comments', 'merged');
-		\OCP\Util::addStyle('comments', 'vendor/At.js/jquery.atwho.min');
+		\OCP\Util::addStyle('comments', 'autocomplete');
 		\OCP\Util::addStyle('comments', 'comments');
 	}
 );

apps/comments/css/autocomplete.scss

@@ -0,0 +1,77 @@
+/**
+ * based upon apps/comments/js/vendor/At.js/dist/css/jquery.atwho.css,
+ * only changed colors and font-weight
+ */
+
+.atwho-view {
+	position:absolute;
+	top: 0;
+	left: 0;
+	display: none;
+	margin-top: 18px;
+	background: $color-main-background;
+	color: $color-main-text;
+	border: 1px solid $color-border;
+	border-radius: 3px;
+	box-shadow: 0 0 5px $color-box-shadow;
+	min-width: 120px;
+	z-index: 11110 !important;
+}
+
+.atwho-view .atwho-header {
+	padding: 5px;
+	margin: 5px;
+	cursor: pointer;
+	border-bottom: solid 1px $color-border;
+	color: $color-main-text;
+	font-size: 11px;
+	font-weight: bold;
+}
+
+.atwho-view .atwho-header .small {
+	color: $color-main-text;
+	float: right;
+	padding-top: 2px;
+	margin-right: -5px;
+	font-size: 12px;
+	font-weight: normal;
+}
+
+.atwho-view .atwho-header:hover {
+	cursor: default;
+}
+
+.atwho-view .cur {
+	background: $color-primary;
+	color: $color-primary-text;
+}
+.atwho-view .cur small {
+	color: $color-primary-text;
+}
+.atwho-view strong {
+	color: $color-main-text;
+	font-weight: normal;
+}
+.atwho-view .cur strong {
+	color: $color-primary-text;
+	font-weight: normal;
+}
+.atwho-view ul {
+	/* width: 100px; */
+	list-style:none;
+	padding:0;
+	margin:auto;
+	max-height: 200px;
+	overflow-y: auto;
+}
+.atwho-view ul li {
+	display: block;
+	padding: 5px 10px;
+	border-bottom: 1px solid $color-border;
+	cursor: pointer;
+}
+.atwho-view small {
+	font-size: smaller;
+	color: $color-main-text;
+	font-weight: normal;
+}

apps/comments/css/vendor/At.js/jquery.atwho.min.css

@@ -1 +0,0 @@
-.atwho-view{position:absolute;top:0;left:0;display:none;margin-top:18px;background:#fff;color:#000;border:1px solid #DDD;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,.1);min-width:120px;z-index:11110!important}.atwho-view .atwho-header{padding:5px;margin:5px;cursor:pointer;border-bottom:solid 1px #eaeff1;color:#6f8092;font-size:11px;font-weight:700}.atwho-view .atwho-header .small{color:#6f8092;float:right;padding-top:2px;margin-right:-5px;font-size:12px;font-weight:400}.atwho-view .atwho-header:hover{cursor:default}.atwho-view .cur{background:#36F;color:#fff}.atwho-view .cur small{color:#fff}.atwho-view strong{color:#36F}.atwho-view .cur strong{color:#fff;font:700}.atwho-view ul{list-style:none;padding:0;margin:auto;max-height:200px;overflow-y:auto}.atwho-view ul li{display:block;padding:5px 10px;border-bottom:1px solid #DDD;cursor:pointer}.atwho-view small{font-size:smaller;color:#777;font-weight:400}

apps/comments/js/commentstabview.js

@@ -180,9 +180,23 @@
 			$target.atwho({
 				at: '@',
 				callbacks: {
-					remoteFilter: s._onAutoComplete
+					remoteFilter: s._onAutoComplete,
+					highlighter: function (li) {
+						// misuse the highlighter callback to instead of
+						// highlighting loads the avatars.
+						var $li = $(li);
+						$li.find('.avatar').avatar(undefined, 32);
+						return $li;
+					}
 				},
-				displayTpl: "<li>${label}</li>",
+				displayTpl: '<li>'
+				+ '<span class="avatar-name-wrapper">'
+				+ '<div class="avatar" '
+				+ 'data-username="${id}"'	// for avatars
+				+ ' data-user="${id}"'		// for contactsmenu
+				+ ' data-user-display-name="${label}"></div>'
+				+ ' <strong>${label}</strong>'
+				+ '</span></li>',
 				insertTpl: ''
 				+ '<span class="avatar-name-wrapper">'
 				+ '<div class="avatar" '
@@ -229,7 +243,7 @@
 						callback(data);
 					}
 				);
-			}, 200);
+			}, 400);
 		},
 
 		_formatItem: function(commentModel) {