nodebb-theme-harmony 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -26,6 +26,12 @@ $(document).ready(function () {
 				width: $('#panel').width(),
 			});
 		});
+
+		hooks.on('filter:chat.openChat', function (hookData) {
+			// disables chat modals & goes straight to chat page
+			hookData.modal = false;
+			return hookData;
+		});
 	});
 
 	function setupMobileMenu() {

package/scss/chats.scss

@@ -7,11 +7,6 @@ body.page-user-chats {
 	overflow: hidden;
 }
 
-/* Styles common to both full chat and chat modal */
-.chats-full, .chat-modal {
-	height: calc(100vh - var(--panel-offset) - $spacer)!important;
-}
-
 .expanded-chat, .chat-modal {
 	// no taskbar so hide minimize button
 	[data-action="minimize"] {
@@ -42,9 +37,11 @@ body.page-user-chats {
 }
 
 /* Mobile handling of chat page */
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down(md) {
 	.page-user-chats {
-		padding-bottom: 0;
+		.chats-full {
+			padding-bottom: 8rem!important;
+		}
 
 		[component="chat/nav-wrapper"][data-loaded="1"] {
 			display: none!important;
@@ -53,20 +50,5 @@ body.page-user-chats {
 		[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
 			display: none!important;
 		}
-
-		[component="chat/messages"] {
-			width: calc(100vw - $grid-gutter-width);
-		}
-	}
-
-	[data-action="pop-out"] {
-		display: none!important;
 	}
 }
-
-/* Mobile handling of chat modal */
-@include media-breakpoint-down(sm) {
-	.chat-modal {
-		z-index: $zindex-popover + 10;
-	}
-}

package/scss/common.scss

@@ -62,4 +62,16 @@ body {
 	@include btn-ghost-base();
 	font-size: 0.875rem;
 	line-height: 1.25rem;
-}
+}
+
+.btn-outline {
+	@include btn-ghost-base();
+	border-color: $border-color;
+}
+
+.btn-outline-sm {
+	@include btn-ghost-base();
+	border-color: $border-color;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+}

package/templates/chat.tpl

@@ -3,11 +3,11 @@
 		<div class="modal-content">
 			<div class="modal-header d-flex">
 				<div class="fs-5 flex-grow-1" component="chat/room/name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></div>
-				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize">
+				<button type="button" class="btn btn-outline d-none d-md-flex" data-action="maximize">
 					<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-outline d-none d-md-flex" data-action="minimize">
 					<span aria-hidden="true"><i class="fa fa-fw fa-minus"></i></span>
 					<span class="sr-only">[[modules:chat.minimize]]</span>
 				</button>

package/templates/chats.tpl

@@ -1,12 +1,21 @@
 <div class="chats-full d-flex gap-1 vh-100 py-3">
 	<div class="d-flex flex-column h-100" component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
 		<div class="chat-search dropdown mb-2">
-			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-bs-toggle="dropdown" />
+			<label class="text-xs text-muted">[[users:search-user-for-chat]]</label>
+
+			<div class="input-group">
+				<input class="form-control" type="text" component="chat/search" data-bs-toggle="dropdown" />
+				<button class="btn btn-primary" type="button">
+					<i class="fa fa-search"></i>
+				</button>
+			</div>
+
 			<ul component="chat/search/list" class="dropdown-menu">
 				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
 			</ul>
 		</div>
-		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}">
+		<hr class="text-muted opacity-25 my-1">
+		<ul component="chat/recent" class="chats-list list-unstyled overflow-auto mb-0 pe-2" data-nextstart="{nextStart}" style="width:300px;">
 			{{{each rooms}}}
 			<!-- IMPORT partials/chats/recent_room.tpl -->
 			{{{end}}}

package/templates/modules/taskbar.tpl

@@ -1,5 +1,5 @@
 <!-- THIS FILE IS STILL PERSONA -->
 
-<div id="taskbar" class="taskbar fixed-bottom">
+<div id="taskbar" class="taskbar fixed-bottom hidden">
 	<div class="navbar-inner"><ul class="nav navbar-nav"></ul></div>
 </div>

package/templates/partials/categories/lastpost.tpl

@@ -4,7 +4,7 @@
 	<div component="category/posts" class="ps-3">
 		<a class="background-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}"></a>
 		<p class="mb-0">
-			<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "20px", true)}</a>
 			<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
 				<span class="timeago text-xs" title="{../timestampISO}"></span>
 			</a>

package/templates/partials/chats/dropdown.tpl

@@ -1,38 +1,7 @@
 {{{ if !rooms.length }}}
-<li class="text-center"><a href="#" class="text-reset">[[modules:chat.no_active]]</a></li>
+<li class="text-center p-2">[[modules:chat.no_active]]</li>
 {{{ end }}}
 
 {{{ each rooms }}}
-<li class="{{{ if ./unread }}}unread{{{ end }}} dropdown-item rounded-1 p-2 d-flex gap-2 pointer" data-roomid="{./roomId}">
-	<div class="main-avatar">
-	{{{ if ./users.length }}}
-		{{{ if ./groupChat}}}
-		<div class="position-relative" style="width:32px; height:32px;">
-			<a class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</a>
-			<a class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</a>
-		</div>
-		{{{ else }}}
-		<a href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</a>
-		{{{ end }}}
-	{{{ else }}}
-	<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
-	{{{ end }}}
-	</div>
-
-	<div class="notification-chat-content d-flex flex-grow-1 flex-column w-100">
-		<div class="room-name fw-semibold text-xs">
-			{{{ if !./lastUser.uid }}}
-			<span>[[modules:chat.no-users-in-room]]</span>
-			{{{ else }}}
-			{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
-			{{{ end }}}
-		</div>
-		<div class="teaser-content text-sm line-clamp-3">
-			<a href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</a>
-			<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
-			{./teaser.content}
-		</div>
-		<div class="teaser-timestamp notification-chat-controls text-muted text-xs">{./teaser.timeagoLong}</div>
-	</div>
-</li>
-{{{ end }}}
+<!-- IMPORT partials/chats/recent_room.tpl -->
+{{{ end }}}

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

@@ -1,24 +1,20 @@
 <!-- IF roomId -->
 <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
-	<div component="chat/header" class="d-flex align-items-center px-3">
-		<span class="members flex-grow-1">
-			[[modules:chat.chatting_with]]:
-			{{{each users}}}
-			<a href="{config.relative_path}/uid/{../uid}">{../username}</a><!-- IF !@last -->,<!-- END -->
-			{{{end}}}
-		</span>
+	<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
+		<h5 class="members flex-1 fw-semibold tracking-tight">
+			{./chatWithMessage}
+		</h5>
 
-		<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted" data-action="pop-out" aria-hidden="true" aria-label="Pop Out"><i class="fa fa-compress"></i></button>
 		<!-- IMPORT partials/chats/options.tpl -->
-		<button type="button" class="btn-close" aria-hidden="true" aria-label="Close" data-action="close"></button>
 	</div>
+	<hr class="text-muted opacity-25"/>
 	<div class="position-relative">
-		<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
+		<div component="chat/messages/scroll-up-alert" class="position-absolute me-4 end-0 text-sm scroll-up-alert alert alert-info hidden w-25" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
 	</div>
 	<ul class="chat-content p-0 m-0 list-unstyled overflow-auto flex-grow-1">
 		<!-- IMPORT partials/chats/messages.tpl -->
 	</ul>
-	<div component="chat/composer" class="d-flex">
+	<div component="chat/composer" class="d-flex gap-1 border-top pt-2">
 		<div class="flex-grow-1 position-relative">
 			<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2" style="resize:none;"></textarea>
 			<span component="chat/message/remaining" class="text-muted position-absolute me-1 mb-1" style="right: 0px; bottom:0px;">{maximumChatMessageLength}</span>

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-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
+<li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear{{{ if ./deleted }}} deleted{{{ end }}} {{{ if messages.newSet }}}border-top pt-3{{{ end }}}" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
 	<div class="message-header {{{ if !messages.newSet }}}hidden{{{ end }}} pb-2">
 		<a href="{config.relative_path}/user/{messages.fromUser.userslug}" class="text-decoration-none">{buildAvatar(messages.fromUser, "24px", false, "not-responsive rounded")}</a>
 		<span class="chat-user fw-bold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>

package/templates/partials/chats/options.tpl

@@ -1,7 +1,5 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="dropdown">
-  <button class="btn btn-link p-2 text-muted align-text-top" data-bs-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
+  <button class="btn btn-outline align-text-top" data-bs-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
   <ul class="dropdown-menu dropdown-menu-end" component="chat/controls">
     <li class="dropdown-header">[[modules:chat.options]]</li>
     <li>
@@ -13,14 +11,14 @@
     <li>
       <a class="dropdown-item" href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
     </li>
-    <!-- IF users.length -->
+    {{{ if users.length }}}
     <li role="separator" class="dropdown-divider"></li>
     <li class="dropdown-header">[[modules:chat.in-room]]</li>
-    {{{each users}}}
+    {{{ each users }}}
     <li>
       <a class="dropdown-item" href="{config.relative_path}/uid/{../uid}">{buildAvatar(users, "24px", true)} {../username}</a>
     </li>
-    {{{end}}}
-    <!-- END -->
+    {{{ end }}}
+    {{{ end }}}
   </ul>
 </div>

package/templates/partials/chats/recent_room.tpl

@@ -1,20 +1,37 @@
-<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="{{{ if rooms.unread }}}unread{{{ end }}} card card-body p-1 mb-1 border-0 pointer">
-	<div class="members">
-	{{{ each rooms.users}}}
-	{{{ if @first }}}
-	<div class="main-avatar">
-		<a href="{config.relative_path}/user/{rooms.users.userslug}" class="text-decoration-none">{buildAvatar(rooms.users, "24px", true)}</a>
-		<span component="chat/title">{{{ if rooms.roomName }}}{rooms.roomName}{{{ else }}}{rooms.usernames}{{{ end }}}</span>
-	</div>
-	{{{ else }}}
-	<a href="{config.relative_path}/user/{rooms.users.userslug}" class="text-decoration-none">{buildAvatar(rooms.users, "24px", true)}</a>
-	{{{ end }}}
-	{{{ end }}}
-	{{{ if !./users.length}}}
-	<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 24px;">?</span>
-	{{{ if !rooms.lastUser.uid }}}
-	<span class="text-muted">[[modules:chat.no-users-in-room]]</span>
-	{{{ end }}}
-	{{{ end }}}
-	</div>
-</li>
+<a class="text-decoration-none text-reset" href="{config.relative_path}/me/chats/{./roomId}">
+	<li component="chat/recent/room" data-roomid="{./roomId}" data-full="1" class="{{{ if ./unread }}}unread{{{ end }}} btn-ghost-sm gap-2 justify-content-start align-items-start">
+		<div class="main-avatar">
+		{{{ if ./users.length }}}
+			{{{ if ./groupChat}}}
+			<div class="position-relative" style="width:32px; height:32px;">
+				<span class="text-decoration-none position-absolute top-0" style="left: 8px;" href="{config.relative_path}/user/{./users.1.userslug}">{buildAvatar(./users.1, "24px", true)}</span>
+				<span class="text-decoration-none position-absolute start-0" style="top: 8px;" href="{config.relative_path}/user/{./users.0.userslug}" >{buildAvatar(./users.0, "24px", true)}</span>
+			</div>
+			{{{ else }}}
+			<span href="{config.relative_path}/user/{./users.0.userslug}" class="text-decoration-none">{buildAvatar(./users.0, "32px", true)}</span>
+			{{{ end }}}
+		{{{ else }}}
+		<span class="avatar avatar-rounded text-bg-warning" component="avatar/icon" style="--avatar-size: 32px;">?</span>
+		{{{ end }}}
+		</div>
+
+		<div class="d-flex flex-grow-1 flex-column w-100">
+			<div class="room-name fw-semibold text-xs">
+				{{{ if !./lastUser.uid }}}
+				<span>[[modules:chat.no-users-in-room]]</span>
+				{{{ else }}}
+				{{{ if ./roomName }}}{./roomName}{{{ else }}}{./usernames}{{{ end }}}
+				{{{ end }}}
+			</div>
+			{{{ if ./teaser }}}
+			<div class="teaser-content text-sm line-clamp-3 text-break">
+				<span href="#" class="text-decoration-none">{buildAvatar(./teaser.user, "14px", true)}</span>
+				<strong class="text-xs fw-semibold teaser-username">{./teaser.user.username}:</strong>
+				{./teaser.content}
+			</div>
+			<div class="teaser-timestamp text-muted text-xs">{./teaser.timeagoLong}</div>
+			{{{ end }}}
+		</div>
+	</li>
+</a>
+<hr class="text-muted opacity-25 my-1"/>

package/templates/partials/notifications_list.tpl

@@ -1,15 +1,24 @@
 {{{ if !notifications.length }}}
-<li class="no-notifs text-center"><a href="#" class="text-reset">[[notifications:no_notifs]]</a></li>
+<li class="no-notifs text-center p-2">[[notifications:no_notifs]]</li>
 {{{ end }}}
 
 {{{ each notifications }}}
-<li class="{./readClass} mb-2" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
+<li class="{./readClass} mb-2 p-1" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
 	<div class="d-flex gap-1 justify-content-between">
-		<div>
-			<a href="{./path}" class="notification-chat-content text-reset">
-				<span class="text text-sm">{./bodyShort}</span>
-			</a>
-			<div class="text-xs text-muted">{./timeagoLong}</div>
+		<div class="d-flex gap-2">
+			{{{ if ./image }}}
+			{{{ if ./from }}}
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}"><img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" /></a>
+			{{{ end }}}
+			{{{ else }}}
+			<a class="text-decoration-none"  href="{config.relative_path}/user/{./user.userslug}"><div class="avatar avatar-rounded" style="--avatar-size: 32px; background-color: {./user.icon:bgColor};">{./user.icon:text}</div></a>
+			{{{ end }}}
+			<div class=" d-flex flex-column">
+				<a href="{./path}" class="text-decoration-none notification-chat-content text-reset text text-sm">
+					{./bodyShort}
+				</a>
+				<div class="text-xs text-muted">{./timeagoLong}</div>
+			</div>
 		</div>
 		<div class="notification-chat-controls">
 			{{{ if ./nid }}}

package/templates/partials/sidebar/chats.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="chats-dropdown dropdown-menu p-1 shadow">
 	<li>
-		<ul component="chat/list" class="chat-list chats-list list-unstyled p-2">
+		<ul component="chat/list" class="chat-list chats-list list-unstyled p-0 pe-1">
 			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
 				<div class="main-avatar">
 					<div class="placeholder" style="width: 32px; height: 32px;"></div>

package/templates/partials/sidebar/drafts.tpl

@@ -11,7 +11,7 @@
 <ul class="drafts-dropdown dropdown-menu p-1 shadow">
 	<li>
 		<ul component="drafts/list" class="draft-list list-unstyled d-flex flex-column gap-1">
-			<li class="no-drafts text-center hidden p-3 text-sm text-muted">[[modules:composer.no-drafts]]</li>
+			<li class="no-drafts text-center p-2">[[modules:composer.no-drafts]]</li>
 
 			{{{ each drafts }}}
 			{{{ if !@first}}}

package/templates/partials/sidebar/notifications.tpl

@@ -10,7 +10,7 @@
 </a>
 <ul class="notifications-dropdown dropdown-menu p-2 shadow">
 	<li>
-		<ul component="notifications/list" class="notification-list list-unstyled p-2">
+		<ul component="notifications/list" class="notification-list list-unstyled">
 			<li class="mb-2 placeholder-wave">
 				<div class="text-sm placeholder col-11">&nbsp;</div>
 				<div class="text-sm placeholder col-5">&nbsp;</div><br />

package/templates/partials/chats-menu.tpl

@@ -1,43 +0,0 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-{{{ if config.loggedIn }}}
-<ul class="nav nav-pills">
-	<li class="nav-item">
-		<a class="nav-link" href="#" data-bs-target="#notifications" data-bs-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
-	</li>
-	{{{ if !config.disableChat }}}
-	<li class="nav-item">
-		<a class="nav-link" href="#" data-bs-target="#chats" data-bs-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
-	</li>
-	{{{ end }}}
-	<li class="nav-item">
-		<a class="nav-link active" href="#" data-bs-target="#profile" data-bs-toggle="tab">
-			{buildAvatar(user, "24px", true, "user-icon")}
-			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
-		</a>
-	</li>
-</ul>
-
-<div class="tab-content">
-	<div class="tab-pane fade show active" id="profile">
-		<section class="menu-section" data-section="profile">
-			<ul class="menu-section-list dropdown-menu show text-bg-dark w-100 border-0" component="header/usercontrol"></ul>
-		</section>
-	</div>
-	<div class="tab-pane fade" id="notifications">
-		<section class="menu-section text-bg-dark" data-section="notifications">
-			<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
-			<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
-		</section>
-	</div>
-	{{{ if !config.disableChat }}}
-	<div class="tab-pane fade" id="chats">
-		<section class="menu-section text-bg-dark" data-section="chats">
-			<ul class="menu-section-list chat-list" component="chat/list">
-				<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a>
-			</ul>
-		</section>
-	</div>
-	{{{ end }}}
-</div>
-{{{ end }}}