implement hq widget author image and notifications updates

7 files changed, 66 insertions, 49 deletions

diff --git a/view/css/widgets.css b/view/css/widgets.css
index 463f53d22..6b5ef3986 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -242,6 +242,11 @@ a.wikilist {
 	position: relative;
 }
 
+/* messages (hq) */
+#messages-author-container {
+	z-index: 3 !important;
+}
+
 /* hq_controls */
 .hq_controls_fixed_bottom_center {
 	z-index: 1028;
@@ -250,3 +255,4 @@ a.wikilist {
 	left: 50%;
 	transform: translateX(-50%);
 }
+
diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js
index e50a4f927..8edd8dafa 100644
--- a/view/js/autocomplete.js
+++ b/view/js/autocomplete.js
@@ -38,7 +38,7 @@ function contact_format(item) {
 		var desc = ((item.label) ? item.nick + ' ' + item.label : item.nick);
 		if(typeof desc === 'undefined') desc = '';
 		if(desc) desc = ' ('+desc+')';
-		return "<div class='{0} dropdown-item dropdown-notification clearfix' title='{4}'><img class='menu-img-2' src='{1}' loading='lazy'><span class='fw-bold contactname'>{2}</span><span class='dropdown-sub-text'>{4}</span></div>".format(item.taggable, item.photo, item.name, desc, typeof(item.link) !== 'undefined' ? item.link : desc.replace('(','').replace(')',''));
+		return "<div class='dropdown-item dropdown-notification lh-sm text-truncate' title='{4}'><img class='menu-img-2' src='{1}' loading='lazy'><strong>{2}</strong><br><small class='opacity-75'>{4}</small></div>".format(item.taggable, item.photo, item.name, desc, typeof(item.link) !== 'undefined' ? item.link : desc.replace('(','').replace(')',''));
 	}
 	else
 		return "";
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 6675ebaf8..5d27071a5 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -774,20 +774,6 @@ div.jGrowl div.jGrowl-notification {
 	text-overflow: ellipsis;
 }
 
-.dropdown-notification,
-.notification,
-.member-item {
-	line-height: 1rem;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: block;
-	white-space: nowrap;
-}
-
-.notification.notification-forum {
-	font-size: 0.9rem;
-}
-
 #acl-search::-webkit-input-placeholder {
 	/* non-fontawesome fonts set a fallback for text parts of the placeholder*/
 	font-family: ForkAwesome, sans-serif, arial, freesans;
@@ -1202,15 +1188,15 @@ img.mail-conv-sender-photo {
 .menu-img-3 {
 	width: 3rem;
 	height: 3rem;
-	margin-right: 5px;
+	margin-right: .5rem;
 	border-radius: var(--bs-border-radius);
 	float: left;
 }
 
 .menu-img-2 {
-	height: 2rem;
-	width: 2rem;
-	margin-right: 5px;
+	height: 2.3rem;
+	width: 2.3rem;
+	margin-right: .5rem;
 	border-radius: var(--bs-border-radius);
 	float: left;
 }
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 4d5bd42be..d29de1b15 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -129,8 +129,8 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
 		$x .= $schemecss;
 	}
 
-	$left_aside_width = 21; //unit: rem
-	$right_aside_width = 21; //unit: rem
+	$left_aside_width = 22; //unit: rem
+	$right_aside_width = 22; //unit: rem
 
 	$main_width = $left_aside_width + $right_aside_width + intval($converse_width);
 
diff --git a/view/tpl/channel_activities.tpl b/view/tpl/channel_activities.tpl
index acce3cb13..3ec37e235 100644
--- a/view/tpl/channel_activities.tpl
+++ b/view/tpl/channel_activities.tpl
@@ -6,7 +6,7 @@
 	<div class="col">
 		<div class="card">
 			<a href="{{$i.url}}" class="text-reset">
-				<div class="card-body">
+				<div class="card-body clearfix">
 					{{if $i.title}}
 						<strong>{{$i.title}}</strong>
 						<hr>
diff --git a/view/tpl/messages_widget.tpl b/view/tpl/messages_widget.tpl
index 8dece872e..3bedf518f 100644
--- a/view/tpl/messages_widget.tpl
+++ b/view/tpl/messages_widget.tpl
@@ -25,17 +25,25 @@
 <div id="messages-widget" class="border-start border-end border-bottom overflow-auto mb-3 clearfix" style="height: 70vh;">
 	<div id="messages-template" rel="template" class="d-none">
 		<a href="{6}" class="list-group-item list-group-item-action message" data-b64mid="{0}">
-			<div class="d-flex w-100 justify-content-between">
-				<div class="mb-1 text-truncate" title="{5}">
-					{7}
-					<strong>{4}</strong>
+			<div class="mb-2">
+				<img src="{9}" loading="lazy" class="rounded menu-img-2">
+				<div class="text-nowrap">
+					<div class="d-flex justify-content-between align-items-center lh-sm">
+						<div class="text-truncate mr-1">
+							{7}
+							<strong title="{4}">{4}</strong>
+						</div>
+						<small class="messages-timeago opacity-75" title="{1}"></small>
+					</div>
+					<div class="text-truncate">
+						<small class="opacity-75" title="{5}">{5}</small>
+					</div>
 				</div>
-				<small class="messages-timeago text-nowrap" title="{1}"></small>
 			</div>
-			<div class="mb-1">
+			<div class="mb-2">
 				<div class="text-break">{2}</div>
 			</div>
-			<small>{3}</small>
+			<small class="opacity-75">{3}</small>
 			{8}
 		</a>
 	</div>
@@ -47,17 +55,25 @@
 		</div>
 		{{foreach $entries as $e}}
 		<a href="{{$e.href}}" class="list-group-item list-group-item-action message" data-b64mid="{{$e.b64mid}}">
-			<div class="d-flex w-100 justify-content-between">
-				<div class="mb-1 text-truncate" title="{{$e.author_addr}}">
-					{{$e.icon}}
-					<strong>{{$e.author_name}}</strong>
+			<div class="mb-2">
+				<img src="{{$e.author_img}}" loading="lazy" class="rounded menu-img-2">
+				<div class="text-nowrap">
+					<div class="d-flex justify-content-between align-items-center lh-sm">
+						<div class="text-truncate mr-1">
+							{{$e.icon}}
+							<strong title="{{$e.author_name}}">{{$e.author_name}}</strong>
+						</div>
+						<small class="messages-timeago opacity-75" title="{{$e.created}}"></small>
+					</div>
+					<div class="text-truncate">
+						<small class="opacity-75" title="{{$e.author_addr}}">{{$e.author_addr}}</small>
+					</div>
 				</div>
-				<small class="messages-timeago text-nowrap" title="{{$e.created}}"></small>
 			</div>
-			<div class="mb-1">
+			<div class="mb-2">
 				<div class="text-break">{{$e.summary}}</div>
 			</div>
-			<small>{{$e.info}}</small>
+			<small class="opacity-75">{{$e.info}}</small>
 			{{if $e.unseen_count}}
 			<span class="badge bg-transparent border border-{{$e.unseen_class}} text-{{$e.unseen_class}} rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">{{$e.unseen_count}}</span>
 			{{/if}}
@@ -169,7 +185,8 @@
 						e.author_addr,
 						e.href,
 						e.icon,
-						e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : ''
+						e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : '',
+						e.author_img
 					);
 					$('#messages-loading').before(html);
 				});
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 9102eb7bc..d3347b4d8 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -535,28 +535,36 @@
 	</div>
 	<div id="nav-notifications-template" rel="template">
 		<a class="list-group-item list-group-item-action notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
-			<img class="menu-img-3" data-src="{1}" loading="lazy">
-			<div class="contactname"><span class="fw-bold">{2}</span> <small>{3}</small></div>
-			<span>{4}</span><br>
-			<span class="notifications-autotime" title="{5}">{5}</span>
+			<img data-src="{1}" loading="lazy" class="rounded menu-img-2">
+			<div class="text-nowrap">
+				<div class="d-flex justify-content-between lh-sm">
+					<div class="text-truncate mr-1">
+						<strong title="{2} - {3}">{2}</strong>
+					</div>
+					<small class="notifications-autotime opacity-75" title="{5}"></small>
+				</div>
+				<div class="text-truncate">{4}</div>
+			</div>
 		</a>
 	</div>
 	<div id="nav-notifications-forums-template" rel="template">
-		<a class="list-group-item list-group-item-action notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
-			<div class="justify-content-between">
+		<a class="list-group-item list-group-item-action justify-content-between align-items-center d-flex notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
+			<div>
 				<img class="menu-img-1" data-src="{1}" loading="lazy">
-				<span class="badge bg-secondary">{10}</span>
+				<span>{2}</span>
 			</div>
-			<span>{2}</span>
-			<i class="fa fa-{11}"></i>
+			<span class="badge bg-secondary">{10}</span>
 		</a>
 	</div>
 	<div id="notifications" class="border border-top-0 rounded navbar-nav collapse">
 		{{foreach $notifications as $notification}}
 		<div class="rounded-top rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse {{$notification.type}}-button">
-			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item fakelink notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
-				<i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
-				<span class="float-end badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
+			<a id="notification-link-{{$notification.type}}" class="collapsed list-group-item justify-content-between align-items-center d-flex fakelink stretched-link notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
+				<div>
+					<i class="fa fa-fw fa-{{$notification.icon}}"></i>
+					{{$notification.label}}
+				</div>
+				<span class="badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
 			</a>
 		</div>
 		<div id="nav-{{$notification.type}}-sub" class="rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">