nodebb-theme-persona 13.2.21 → 13.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "13.2.21",
+  "version": "13.2.23",
   "nbbpm": {
     "compatibility": "^3.3.0"
   },

package/scss/chats.scss

@@ -334,6 +334,17 @@ body.page-user-chats {
 					opacity: 0.3;
 				}
 			}
+			&.pinned {
+				.message-body-wrapper .controls {
+					[data-action="pin"] {
+						display: none;
+					}
+
+					[data-action="unpin"] {
+						display: inline;
+					}
+				}
+			}
 
 			.chat-user-image {
 				@include user-icon-style(32px, 1.6rem, 50%);
@@ -393,7 +404,7 @@ body.page-user-chats {
 					border: 1px solid $gray-200;
 					box-shadow: 0 6px 12px rgba(0,0,0,.175);
 
-					[data-action="restore"] {
+					[data-action="restore"], [data-action="unpin"] {
 						display: none;
 					}
 				}

package/templates/chat.tpl

@@ -2,12 +2,12 @@
 	<div class="modal-dialog">
 		<div class="modal-content" component="chat/message/window">
 			<div class="modal-header d-flex">
-				<div class="fs-6 flex-grow-1" component="chat/room/name" data-icon="{icon}">{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}</div>
-				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize">
+				<div class="fs-6 flex-grow-1 fw-semibold tracking-tight text-truncate text-nowrap" component="chat/room/name" data-icon="{icon}">{{{ if ./roomName }}}<i class="fa {icon} text-muted"></i> {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}}</div>
+				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize" title="[[modules:chat.maximize]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
 					<span aria-hidden="true"><i class="fa fa-fw fa-expand"></i></span>
 					<span class="sr-only">[[modules:chat.maximize]]</span>
 				</button>
-				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="minimize">
+				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="minimize" title="[[modules:chat.minimize]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
 					<span aria-hidden="true"><i class="fa fa-fw fa-minus"></i></span>
 					<span class="sr-only">[[modules:chat.minimize]]</span>
 				</button>

package/templates/partials/chats/composer.tpl

@@ -3,13 +3,13 @@
 		<div component="chat/composer/replying-to-text"></div> <button component="chat/composer/replying-to-cancel" class="btn-ghost-sm px-2 py-1"><i class="fa fa-times"></i></button>
 	</div>
 	<div class="w-100 flex-grow-1 flex-nowrap position-relative d-flex rounded-2 border border-secondary p-1 align-items-end">
-		<button component="chat/upload/button" class="btn btn-light btn-sm px-2 rounded-1" type="button"><i class="fa fa-fw fa-upload"></i></button>
+		<button component="chat/upload/button" class="btn btn-light btn-sm px-2 rounded-1" type="button" title="[[global:upload]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-upload"></i></button>
 		<div class="flex-grow-1 align-self-center">
 			<textarea component="chat/input" placeholder="[[modules:chat.placeholder.mobile]]" class="bg-transparent text-body form-control chat-input mousetrap rounded-0 border-0 shadow-none ps-1 py-0" style="min-height: 1.5rem;height:0;max-height:30vh;resize:none;"></textarea>
 		</div>
 		<div class="d-flex gap-1">
 			<div component="chat/message/remaining" class="text-xs text-muted me-1 align-self-center">{maximumChatMessageLength}</div>
-			<button class="btn btn-primary btn-sm px-2 rounded-1" type="button" data-action="send"><i class="fa fa-fw fa-paper-plane"></i></button>
+			<button class="btn btn-primary btn-sm px-2 rounded-1" type="button" data-action="send" title="[[modules:chat.send]]" data-bs-toggle="tooltip"><i class="fa fa-fw fa-paper-plane"></i></button>
 		</div>
 	</div>
 	<form class="hidden" component="chat/upload" method="post" enctype="multipart/form-data">

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

@@ -30,6 +30,7 @@
 		</div>
 
 		<!-- IMPORT partials/chats/user-list.tpl -->
+		<!-- IMPORT partials/chats/pinned-messages.tpl -->
 	</div>
 	{{{ end }}}
 </div>

package/templates/partials/chats/message.tpl

@@ -1,4 +1,4 @@
-<li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear<!-- IF ../deleted --> deleted<!-- END -->" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}" data-username="{messages.fromUser.username}">
+<li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear{{{ if messages.deleted }}} deleted{{{ end }}} {{{ if messages.pinned}}} pinned{{{ end }}}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}" data-username="{messages.fromUser.username}">
 
 	{{{ if messages.parent }}}
 	<div class="d-flex ms-4 mb-2 align-items-center">
@@ -35,11 +35,15 @@
 		<!-- IMPORT partials/chats/reactions.tpl -->
 		<div component="chat/message/controls" class="btn-group controls">
 			<!-- IMPORT partials/chats/add-reaction.tpl -->
-			<button class="btn btn-sm btn-link" data-action="reply"><i class="fa fa-reply"></i></button>
+			<button class="btn btn-sm btn-link" data-action="reply" title="[[topic:reply]]"><i class="fa fa-reply"></i></button>
 			{{{ if (isAdminOrGlobalMod || (!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-times"></i></button>
-			<button class="btn btn-sm btn-link" data-action="restore"><i class="fa fa-repeat"></i></button>
+			<button class="btn btn-sm btn-link" data-action="edit" title="[[topic:edit]]"><i class="fa fa-pencil"></i></button>
+			<button class="btn btn-sm btn-link" data-action="delete" title="[[topic:delete]]"><i class="fa fa-trash"></i></button>
+			<button class="btn btn-sm btn-link" data-action="restore" title="[[topic:restore]]"><i class="fa fa-repeat"></i></button>
+			{{{ end }}}
+			{{{ if (isAdminOrGlobalMod || isOwner )}}}
+				<button class="btn btn-sm btn-link" data-action="pin" title="[[modules:chat.pin-message]]"><i class="fa fa-thumbtack"></i></button>
+				<button class="btn btn-sm btn-link" data-action="unpin" title="[[modules:chat.unpin-message]]"><i class="fa fa-thumbtack fa-rotate-90"></i></button>
 			{{{ end }}}
 			{{{ if isAdminOrGlobalMod }}}
 			<button class="btn btn-sm btn-link chat-ip-button" title="[[modules:chat.show-ip]]"><i class="fa fa-info-circle"></i></button>

package/templates/partials/chats/options.tpl

@@ -41,9 +41,12 @@
 		</ul>
 	</div>
 
+	<!-- pinned messages -->
+	<button component="chat/pinned/messages/btn" class="btn btn-sm btn-light" title="[[modules:chat.pinned-messages]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
+		<i class="fa fa-thumb-tack text-muted"></i>
+	</button>
 
-
-
+	<!-- manage/options dropdown -->
 	<div class="dropdown d-flex" data-manual-tooltip="1" title="[[modules:chat.options]]">
 		<button class="btn btn-sm btn-light" data-bs-toggle="dropdown" component="chat/controlsToggle">
 			<i class="fa fa-gear text-muted"></i>
@@ -76,6 +79,7 @@
 		</ul>
 	</div>
 
+	<!-- users toggle -->
 	{{{ if users.length }}}
 	<div component="chat/user/list/btn" class="btn btn-sm btn-light d-none d-lg-flex flex-nowrap gap-3 align-items-center" title="[[modules:chat.view-users-list]]" data-bs-toggle="tooltip" data-bs-placement="bottom">
 		<div class="d-flex text-nowrap">

package/templates/partials/chats/pinned-messages.tpl

@@ -0,0 +1,35 @@
+<div component="chat/messages/pinned/container" class="d-flex flex-column expanded-chat border-start hidden" style="min-width:340px; width: 340px;">
+	<h3 class="fs-6 p-1 mb-0 text-center text-secondary">[[modules:chat.pinned-messages]]</h3>
+
+	<div component="chat/messages/pinned/empty" class="text-center p-4 d-flex flex-column">
+		<div class="p-4"><i class="fa-solid fa-wind fs-2 text-muted"></i></div>
+		<div class="text-xs fw-semibold text-muted">[[modules:chat.no-pinned-messages]]</div>
+	</div>
+
+	<ul component="chat/messages/pinned" class="chat-content list-unstyled d-flex flex-column gap-1 p-1 overflow-auto">
+		{{{ each messages }}}
+		<li component="chat/message" class="chat-message mx-2 pe-2 {{{ if messages.deleted }}} deleted{{{ end }}} {{{ if messages.pinned}}} pinned{{{ end }}} border-top pt-3" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-timestamp="{messages.timestamp}" data-username="{messages.fromUser.username}" data-index="{./index}">
+
+			<div class="message-header lh-1 d-flex align-items-center gap-2 text-sm pb-2">
+				<a href="{config.relative_path}/user/{messages.fromUser.userslug}" class="text-decoration-none">{buildAvatar(messages.fromUser, "18px", true, "not-responsive")}</a>
+				<span class="chat-user fw-semibold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
+
+				<span class="chat-timestamp text-muted timeago" title="{messages.timestampISO}"></span>
+			</div>
+			<div class="message-body-wrapper hover-parent">
+				<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
+					{messages.content}
+				</div>
+				<div component="chat/message/controls" class="position-relative">
+					<div class="d-flex border shadow-sm controls position-absolute bg-body hover-d-block end-0" style="bottom:1rem;">
+						{{{ if (isAdminOrGlobalMod || isOwner )}}}
+						<button class="btn btn-sm btn-link" data-action="pin" title="[[modules:chat.pin-message]]"><i class="fa fa-thumbtack"></i></button>
+						<button class="btn btn-sm btn-link" data-action="unpin" title="[[modules:chat.unpin-message]]"><i class="fa fa-thumbtack fa-rotate-90"></i></button>
+						{{{ end }}}
+					</div>
+				</div>
+			</div>
+		</li>
+		{{{ end }}}
+	</ul>
+</div>