nodebb-theme-persona 13.2.22 → 13.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "13.2.22",
+  "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/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">
@@ -41,6 +41,10 @@
 			<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>
 			{{{ end }}}

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>