nodebb-theme-harmony 1.1.2 → 1.1.4

package/library.js

@@ -129,6 +129,11 @@ library.defineWidgetAreas = async function (areas) {
 			template: 'account/profile.tpl',
 			location: 'profile-aboutme-after',
 		},
+		{
+			name: 'Chat Header',
+			template: 'chats.tpl',
+			location: 'header',
+		},
 	]);
 
 	return areas;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "nbbpm": {
     "compatibility": "^3.3.0"
   },

package/scss/chats.scss

@@ -47,6 +47,18 @@ body.page-user-chats {
 	}
 }
 
+[component="chat/user/list"] [data-uid] {
+	[component="chat/user/list/username"] {
+		color: $text-muted;
+	}
+	&.online {
+		[component="chat/user/list/username"] {
+			color: initial;
+			font-weight: $font-weight-semibold;
+		}
+	}
+}
+
 .expanded-chat {
 	.chat-content {
 		@include fix-lists;

package/scss/skins.scss

@@ -20,7 +20,7 @@
 }
 
 :root {
-	.skin-darkly {
+	.skin-darkly, .skin-slate, .skin-cyborg {
 		--bs-border-color: #929292;
 	}
 }

package/templates/chats.tpl

@@ -15,15 +15,17 @@
 				<label class="text-sm text-muted lh-1">[[modules:chat.public-rooms, {publicRooms.length}]]</label>
 			</div>
 			<div id="public-rooms" component="chat/public" class="collapse show">
-				{{{ each publicRooms }}}
-				<div component="chat/public/room" class="btn-ghost-sm ff-sans justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
-					<div><i class="fa {./icon} text-muted"></i> {./roomName}</div>
-					<div class="d-flex gap-1">
-						<div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div>
-						<div component="chat/public/room/sort/handle" class="text-muted {{{ if isAdmin }}}hover-d-block{{{ else }}}d-none{{{ end }}}" style="cursor:grab;"><i class="fa fa-bars"></i></div>
+				<div class="d-flex gap-1 flex-column">
+					{{{ each publicRooms }}}
+					<div component="chat/public/room" class="btn-ghost-sm ff-sans justify-content-between hover-parent {{{ if ./unread}}}unread{{{ end }}}" data-roomid="{./roomId}">
+						<div><i class="fa {./icon} text-muted"></i> {./roomName}</div>
+						<div class="d-flex gap-1">
+							<div component="chat/public/room/unread/count" data-count="{./unreadCount}" class="badge border bg-light text-primary {{{ if !./unreadCount }}}hidden{{{ end }}}">{./unreadCountText}</div>
+							<div component="chat/public/room/sort/handle" class="text-muted {{{ if isAdmin }}}hover-d-block{{{ else }}}d-none{{{ end }}}" style="cursor:grab;"><i class="fa fa-bars"></i></div>
+						</div>
 					</div>
+					{{{ end }}}
 				</div>
-				{{{ end }}}
 			</div>
 		</div>
 		{{{ end }}}

package/templates/partials/chats/message-window.tpl

@@ -1,4 +1,11 @@
 <div class="d-flex flex-column h-100">
+	{{{ if widgets.header.length }}}
+	<div data-widget-area="header">
+		{{{each widgets.header}}}
+		{{widgets.header.html}}
+		{{{end}}}
+	</div>
+	{{{ end }}}
 	{{{ if !roomId }}}
 	<div class="d-flex flex-column align-items-center gap-3 p-5">
 		<i class="fa-solid fa-wind fs-2 text-muted"></i>

package/templates/partials/chats/message.tpl

@@ -20,7 +20,7 @@
 
 		{{{ if (isAdminOrGlobalMod || (!config.disableChatMessageEditing && messages.self)) }}}
 		<div component="chat/message/controls" class="position-relative">
-			<div class="btn-group border shadow-sm controls position-absolute small hover-d-block end-0" style="bottom:1rem;">
+			<div class="btn-group border shadow-sm controls position-absolute bg-body hover-d-block end-0" style="bottom:1rem;">
 				{{{ if (!config.disableChatMessageEditing && messages.self) }}}
 				<button class="btn btn-sm btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>
 				<button class="btn btn-sm btn-link" data-action="delete"><i class="fa fa-trash"></i></button>

package/templates/partials/chats/user-list.tpl

@@ -1,9 +1,9 @@
 <div component="chat/user/list" class="border-start hidden d-flex flex-column gap-1 p-1 overflow-auto" style="min-width:240px; width: 240px;">
 	{{{ each users }}}
-	<a data-index="{./index}" class="btn-ghost-sm d-flex justify-content-start align-items-center gap-2" href="{config.relative_path}/uid/{./uid}">
+	<a data-index="{./index}" data-uid="{./uid}" class="btn-ghost-sm d-flex justify-content-start align-items-center gap-2 {{{ if ./online }}}online{{{ end}}}" href="{config.relative_path}/uid/{./uid}">
 		<div>{buildAvatar(users, "24px", true)}</div>
 		<div class="d-flex gap-1 flex-grow-1 text-nowrap text-truncate">
-			<span class="text-truncate">{./username}</span>
+			<span component="chat/user/list/username" class="text-truncate">{./username}</span>
 			{{{ if ./isOwner }}}<span><i class="fa fa-star text-warning" data-bs-toggle="tooltip" title="[[modules:chat.owner]]"></i></span>{{{ end }}}
 		</div>
 	</a>