Fix activity rendering in the sidebar

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/activity.css

@@ -7,3 +7,17 @@
 	background-color: rgba(233, 50, 45, 0.2);
 	text-decoration: none;
 }
+
+.activityTabView .avatardiv-container {
+	display: inline-block;
+	bottom: -3px;
+	margin-left: 3px;
+}
+
+.activityTabView .avatar-name-wrapper {
+	font-weight: bold;
+}
+
+.activityTabView .activitysubject a {
+	font-weight: bold;
+}

js/controller/ActivityController.js

@@ -48,7 +48,7 @@ class ActivityController {
 	}
 
 	parseMessage(subject, parameters) {
-		OCA.Activity.RichObjectStringParser._userLocalTemplate = '<avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}"></avatar>';
+		OCA.Activity.RichObjectStringParser._userLocalTemplate = '<span class="avatar-name-wrapper"><avatar ng-attr-contactsmenu ng-attr-tooltip ng-attr-user="{{ id }}" ng-attr-displayname="{{name}}" ng-attr-size="16"></avatar> {{ name }}</span>';
 		return OCA.Activity.RichObjectStringParser.parseMessage(subject, parameters);
 	}
 
@@ -57,10 +57,9 @@ class ActivityController {
 		let dataLengthBefore = self.getData(self.element.id).length;
 		let _executeFetch = function() {
 			let promise = self.activityservice.fetchMoreActivities(self.type, self.element.id);
-			if (Promise.resolve(promise) === promise) {
 			promise.then(function (data) {
 				let dataLengthAfter = self.getData(self.element.id).length;
-					if (data !== null || dataLengthAfter <= dataLengthBefore || dataLengthAfter < 5) {
+				if (data !== null && (dataLengthAfter <= dataLengthBefore || dataLengthAfter < 5)) {
 					_executeFetch();
 				} else {
 					self.loading = false;
@@ -70,7 +69,7 @@ class ActivityController {
 				self.loading = false;
 				self.$scope.$apply();
 			});
-			}
+
 		};
 		_executeFetch();
 	}

js/directive/avatar.js

@@ -32,6 +32,10 @@ app.directive('avatar', function() {
 		link: function(scope, element, attr){
 			scope.uid = attr.displayname;
 			scope.displayname = attr.displayname;
+			scope.size = attr.size;
+			if (typeof scope.size === 'undefined') {
+				scope.size = 32;
+			}
 			var value = attr.user;
 			var avatardiv = $(element).find('.avatardiv');
 			if(typeof attr.contactsmenu !== 'undefined' && attr.contactsmenu !== 'false') {
@@ -44,7 +48,7 @@ app.directive('avatar', function() {
 					placement: 'top'
 				});
 			}
-			avatardiv.avatar(value, 32, false, false, false, attr.displayname);
+			avatardiv.avatar(value, scope.size, false, false, false, attr.displayname);
 		},
 		controller: function () {}
 	};

js/directive/bindHtmlCompile.js

@@ -0,0 +1,38 @@
+/*
+ * @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @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/>.
+ *
+ */
+import app from '../app/App.js';
+
+app.directive('bindHtmlCompile', function ($compile) {
+	'use strict';
+
+	return {
+		restrict: 'A',
+		link: function (scope, element, attrs) {
+			scope.$watch(function () {
+				return scope.$eval(attrs.bindHtmlCompile);
+			}, function (value) {
+				element.html(value);
+				$compile(element.contents())(scope);
+			});
+		}
+	};
+});

js/service/ActivityService.js

@@ -78,6 +78,7 @@ class ActivityService {
 			});
 			self.since[type][id].oldest = response.headers('X-Activity-Last-Given');
 			self.running = false;
+			return response;
 		}, function (error) {
 			if (error.status === 304) {
 				self.since[type][id].finished = true;

templates/part.board.sidebarView.php

@@ -150,7 +150,7 @@
     	</ul>
     </div>
 
-	<div id="board-detail-activity" class="tab" ng-if="params.tab==4">
+	<div id="board-detail-activity" class="tab activityTabView" ng-if="params.tab==4">
 		<activity-component ng-if="boardservice.getCurrent()" type="deck_board" element="boardservice.getCurrent()"></activity-component>
 	</div>
 

templates/part.card.activity.html

@@ -1,11 +1,11 @@
-<ul class="activities" infinite-scroll="$ctrl.page()" infinite-scroll-container="'#app-sidebar'" infinite-scroll-disabled="$ctrl.activityservice.running">
+<ul class="activities" infinite-scroll="$ctrl.page()" infinite-scroll-container="'#app-sidebar'" infinite-scroll-disabled="$ctrl.activityservice.running" infinite-scroll-immediate-check="false">
 	<li ng-if="$ctrl.loadingNewer()"><div class="icon-loading-small"></div></li>
 	<li class="activity box" ng-repeat="activity in $ctrl.getData($ctrl.element.id) track by $index">
 		<div class="activity-icon">
 			<img src="{{activity.icon}}" alt="">
 		</div>
 		<div class="activitysubject"
-			 ng-bind-html="$ctrl.parseMessage(activity.subject_rich[0], activity.subject_rich[1])"></div>
+			 bind-html-compile="$ctrl.parseMessage(activity.subject_rich[0], activity.subject_rich[1])"></div>
 		<span class="activitytime has-tooltip live-relative-timestamp"
 			  data-timestamp="{{ activity.timestamp }}">{{ activity.timestamp/1000 | relativeDateFilter }}</span>
 		<div class="activitymessage" ng-bind-html="activity.message"></div>

templates/part.card.php

@@ -131,7 +131,7 @@
 		</div>
 	</div>
 
-	<div class="section-content card-activity" ng-if="params.tab === 2">
+	<div class="section-content card-activity activityTabView" ng-if="params.tab === 2">
 		<activity-component type="deck_card" element="cardservice.getCurrent()"></activity-component>
 	</div>