Fix styling and proper template rendering

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

css/style.scss

@@ -941,25 +941,59 @@ input.input-inline {
 
 .activity-icon {
 	opacity: 1 !important;
+	.avatardiv-container {
+		top: -4px;
+		left: -7px;
+		margin-right: 5px;
+		img {
+			max-width: 24px;
+			max-height: 24px;
+		}
+	}
 }
 
+.activitysubject.commentAuthor {
+	margin-left: 26px;
+	margin-right: 0;
+	margin-top: 10px;
+}
+.activityTabView {
+	.activity {
+		margin-bottom: 20px;
+	}
+	.activitytime {
+		margin: 0 !important;
+	}
+}
 .activitysubject .app-popover-menu-utils {
 	display: inline-block;
-	position: absolute;
-	top: -5px;
-	right: 0;
 	a {
 		font-weight: normal;
 	}
 	button {
 		opacity: .5;
-		padding: 14px 19px;
+		padding: 7px;
+		margin-left: 10px;
 	}
 }
 
-#commentsTabView .comment {
+#commentsTabView {
+	.newCommentRow .avatardiv-container {
+		left: -7px;
+	}
+	.comment {
 		position: relative;
 		padding: 0 0 15px;
+
+		.avatardiv {
+			width: 24px;
+			height: 24px;
+			line-height: 24px;
+		}
+	}
+	.newCommentForm {
+		margin-left: 26px;
+	}
 }
 
 .card-attachments {

js/controller/ActivityController.js

@@ -38,6 +38,8 @@ class ActivityController {
 		};
 		this.$scope.newComment = '';
 
+		this.currentUser = OC.getCurrentUser();
+
 		const self = this;
 		this.$scope.$watch(function () {
 			return self.element.id;
@@ -115,7 +117,7 @@ class ActivityController {
 		var avatar = '' +
 			'<span class="avatar" ng-attr-size="16" ' +
 			'ng-attr-user="' + _.escape(uid) + '" ' +
-			'ng-attr-displayname="' + _.escape(displayName) + '">' +
+			'ng-attr-displayname="' + _.escape(displayName) + '" ng-attr-contactsmenu="true">' +
 			'</span>';
 
 		var isCurrentUser = (uid === OC.getCurrentUser().uid);
@@ -263,6 +265,9 @@ class ActivityController {
 		return this.activityservice.runningNewer;
 	}
 
+	t(text) {
+		return t('deck', text);
+	}
 }
 
 let activityComponent = {

templates/part.card.activity.html

@@ -1,11 +1,11 @@
 <div id="commentsTabView">
 	<div class="newCommentRow comment" data-id="">
 		<div class="authorRow">
-			<div class="avatardiv" avatar ng-attr-user="admin" ng-attr-displayname="Admin"></div>
+			<div class="avatardiv" avatar ng-attr-user="{{ $ctrl.currentUser.uid }}" ng-attr-displayname="{{ $ctrl.currentUser.displayName }}" ng-attr-size="24"></div>
-			<div class="author currentUser">admin</div>
+			<div class="author currentUser">{{ $ctrl.currentUser.displayName }}</div>
 		</div>
 		<form class="newCommentForm">
-			<div contenteditable="true" class="message" data-placeholder="{{ $ctrl.t('deck', 'New comment …') }}" ng-model="$ctrl.$scope.newComment" ng-disabled="$ctrl.status.commentCreateLoading"></div>
+			<div contenteditable="true" class="message" data-placeholder="{{ $ctrl.t('New comment …') }}" ng-model="$ctrl.$scope.newComment" ng-disabled="$ctrl.status.commentCreateLoading"></div>
 			<input class="submit icon-confirm has-tooltip" type="submit"
 				   value="" title="" data-original-title="Post" ng-click="$ctrl.postComment()" ng-if="!$ctrl.status.commentCreateLoading">
 			<div class="submitLoading icon-loading-small" ng-if="$ctrl.status.commentCreateLoading"></div>
@@ -17,10 +17,12 @@
 	<li class="activity box" ng-repeat="activity in $ctrl.getActivityStream() track by $index">
 		<div class="activity-icon">
 			<img ng-if="!activity.commentModel" src="{{activity.icon}}" alt="">
-			<div ng-if="activity.commentModel" avatar ng-attr-size="16" ng-attr-user="{{ activity.commentModel.get('actorId') }}" ng-attr-displayname="{{ activity.actorDisplayName }}"></div>
+			<div ng-if="activity.commentModel" avatar ng-attr-contactsmenu="true" ng-attr-size="24" ng-attr-user="{{ activity.commentModel.get('actorId') }}" ng-attr-displayname="{{ activity.actorDisplayName }}"></div>
 		</div>
+		<span class="activitytime has-tooltip live-relative-timestamp"
+			  data-timestamp="{{ activity.timestamp }}">{{ activity.timestamp/1000 | relativeDateFilter }}</span>
 		<div class="activitysubject" ng-if="!activity.commentModel" bind-html-compile="$ctrl.parseMessage(activity.subject_rich[0], activity.subject_rich[1])"></div>
-		<div class="activitysubject" ng-if="activity.commentModel">
+		<div class="activitysubject commentAuthor" ng-if="activity.commentModel">
 			{{ activity.subject_rich[1].user.name }}
 			<div class="app-popover-menu-utils">
 				<button class="button-inline icon-more ng-pristine ng-valid ng-empty ng-touched" aria-label="Actions"></button>
@@ -32,8 +34,6 @@
 				</div>
 			</div>
 		</div>
-		<span class="activitytime has-tooltip live-relative-timestamp"
-			  data-timestamp="{{ activity.timelineTimestamp }}">{{ activity.timestamp/1000 | relativeDateFilter }}</span>
 		<div class="activitymessage" ng-if="!activity.commentModel" ng-bind-html="activity.message"></div>
 		<div class="activitymessage" ng-if="activity.commentModel" bind-html-compile="$ctrl.formatMessage(activity)"></div>
 	</li>