nodebb-theme-persona 13.3.36 → 14.0.0-pre.2

package/library.js

@@ -51,7 +51,7 @@ library.defineWidgetAreas = async function (areas) {
 	const templates = [
 		'categories.tpl', 'category.tpl', 'topic.tpl', 'users.tpl',
 		'unread.tpl', 'recent.tpl', 'popular.tpl', 'top.tpl', 'tags.tpl', 'tag.tpl',
-		'login.tpl', 'register.tpl',
+		'login.tpl', 'register.tpl', 'world.tpl',
 	];
 	function capitalizeFirst(str) {
 		return str.charAt(0).toUpperCase() + str.slice(1);
@@ -93,5 +93,3 @@ library.getThemeConfig = async function (config) {
 	config.enableQuickReply = settings.enableQuickReply === 'on';
 	return config;
 };
-
-

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "13.3.36",
+  "version": "14.0.0-pre.2",
   "nbbpm": {
-    "compatibility": "^3.7.0"
+    "compatibility": "^4.0.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "library.js",

package/scss/categories.scss

@@ -1,4 +1,4 @@
-.categories, .category > ul {
+.categories, .category > ul, .world > ul {
 	list-style-type: none;
 	padding: 0;
 

package/scss/category.scss

@@ -1,4 +1,4 @@
-.category {
+.category, .world {
 
 	.topic-list {
 		overflow: visible;

package/scss/mixins.scss

@@ -23,6 +23,20 @@
 			z-index: 1;
 			box-shadow: 0 0 0 ($spacer * .5) $body-bg;
 		}
+
+		[component="user/locality"] {
+			transform: translate(-75%, -100%);
+			z-index: 2;
+			background-color: $body-bg;
+			font-size: .75rem;
+			margin-left: -15px;
+		}
+
+		[component="user/status"] {
+			transform: translate(-80%, -100%);
+			z-index: 2;
+			margin-left: -15px;
+		}
 	}
 
 	@include media-breakpoint-down(sm) {
@@ -81,6 +95,16 @@
 					}
 				}
 			}
+
+			[component="user/status"] {
+				padding: 5px;
+				top: 36px;
+				left: 36px;
+			}
+
+			[component="user/locality"] {
+				font-size: .75rem;
+			}
 		}
 	}
 

package/scss/persona.scss

@@ -8,6 +8,7 @@
 @import "noscript";
 @import "categories";
 @import "header";
+@import "status";
 @import "account";
 @import "groups";
 @import "chats";

package/scss/status.scss

@@ -0,0 +1,25 @@
+.status {
+	padding: 3px;
+
+	&.online {
+		background-color: $success;
+	}
+
+	&.away {
+		background-color: $warning;
+	}
+
+	&.dnd {
+		background-color: $danger;
+	}
+
+	&.offline {
+		background-color: $gray-600;
+	}
+}
+
+@include media-breakpoint-up(sm) {
+	.status {
+		padding: 5px;
+	}
+}

package/templates/flags/detail.tpl

@@ -119,7 +119,7 @@
 				<h2 class="h4">[[flags:quick-actions]]</h2>
 
 				<div class="d-grid gap-1">
-					<a class="btn btn-light" href="{config.relative_path}/{type_path}/{targetId}">
+					<a class="btn btn-light" href="{config.relative_path}/{type_path}/{encodeURIComponent(targetId)}">
 						<i class="fa fa-external-link"></i>
 						[[flags:go-to-target]]
 					</a>

package/templates/flags/list.tpl

@@ -21,6 +21,7 @@
 			<ul class="dropdown-menu" role="menu">
 				<li><a href="#" class="dropdown-item" data-action="bulk-assign" role="menuitem">[[flags:assign-to-me]]</a></li>
 				<li><a href="#" class="dropdown-item" data-action="bulk-mark-resolved" role="menuitem">[[flags:bulk-resolve]]</a></li>
+				<li><a href="#" class="dropdown-item" data-action="bulk-purge" role="menuitem">[[flags:bulk-purge]]</a></li>
 			</ul>
 		</div>
 

package/templates/partials/account/menu.tpl

@@ -15,7 +15,10 @@
 		</li>
 		<!-- ENDIF canChat -->
 		<li>
-			<a class="dropdown-item" component="account/flag" href="#" role="menuitem">[[user:flag-profile]]</a>
+			<a {{{if flagId }}}hidden{{{end}}} class="dropdown-item" component="account/flag" href="#" role="menuitem">[[user:flag-profile]]</a>
+		</li>
+		<li>
+			<a {{{if !flagId }}}hidden{{{end}}} class="dropdown-item" component="account/already-flagged" href="#" role="menuitem" data-flag-id="{flagId}">[[user:profile-flagged]]</a>
 		</li>
 		<li>
 			<a class="dropdown-item {{{ if ./isBlocked }}}hidden{{{ end }}}" component="account/block" href="#" role="menuitem">[[user:block-user]]</a>

package/templates/partials/header/notifications.tpl

@@ -31,7 +31,7 @@
 						</div>
 					</div>
 					<div>
-						<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
+						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
 							<i class="unread fa fa-2xs fa-circle text-primary"></i>
 						</button>
 					</div>

package/templates/partials/posts_list_item.tpl

@@ -1,6 +1,6 @@
 <li component="post" class="posts-list-item row<!-- IF ../deleted --> deleted<!-- ELSE --><!-- IF ../topic.deleted --> deleted<!-- ENDIF --><!-- ENDIF -->{{{ if ../topic.scheduled }}} scheduled{{{ end }}}" data-pid="{../pid}" data-uid="{../uid}">
     <div class="col-lg-11 col-sm-10 col-9 post-body">
-        <a class="topic-title" href="{config.relative_path}/post/{../pid}">
+        <a class="topic-title" href="{config.relative_path}/post/{encodeURIComponent(../pid)}">
             <!-- IF !../isMainPost -->RE: <!-- ENDIF -->{../topic.title}
         </a>
 

package/templates/partials/search-results.tpl

@@ -12,7 +12,7 @@
 		<div class="card-body">
 			<div>
 				<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
-				<span class="search-result-text search-result-title"><a href="{config.relative_path}/post/{posts.pid}">{./topic.title}</a></span>
+				<span class="search-result-text search-result-title"><a href="{config.relative_path}/post/{encodeURIComponent(posts.pid)}">{./topic.title}</a></span>
 			</div>
 
 			{{{ if showAsPosts }}}

package/templates/partials/topic/post-menu-list.tpl

@@ -84,11 +84,24 @@
 	</li>
 	{{{ end }}}
 
+	{{{ if !posts.display_original_url }}}
 	<li>
 		<a class="dropdown-item d-flex align-items-center gap-2" role="menuitem" href="#" data-clipboard-text="{posts.absolute_url}">
 			<i class="fa fa-fw fa-link"></i> [[topic:copy-permalink]]
 		</a>
 	</li>
+	{{{ else }}}
+	<li>
+		<a class="dropdown-item" role="menuitem" href="#" data-clipboard-text="{{{ if posts.url }}}{posts.url}{{{ else }}}{posts.pid}{{{ end }}}">
+			<i class="fa fa-fw fa-link"></i> [[topic:copy-permalink]]
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item" role="menuitem" href="{{{ if posts.url }}}{posts.url}{{{ else }}}{posts.pid}{{{ end }}}">
+			<i class="fa fa-fw fa-external-link"></i> [[topic:go-to-original]]
+		</a>
+	</li>
+	{{{ end }}}
 
 	<!-- IF postSharing.length -->
 	<!-- IF config.loggedIn --><li class="dropdown-divider"></li><!-- ENDIF config.loggedIn -->
@@ -108,7 +121,7 @@
 	<a class="dropdown-item d-flex align-items-center gap-2" component="post/flag" role="menuitem" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:flag-post]]</a>
 </li>
 <li {{{ if !posts.flags.flagged }}}hidden{{{ end }}} class="disabled text-muted">
-	<a class="dropdown-item d-flex align-items-center gap-2" component="post/already-flagged" role="menuitem" href="#"><i class="fa fa-fw fa-flag"></i> [[topic:already-flagged]]</a>
+	<a class="dropdown-item d-flex align-items-center gap-2" component="post/already-flagged" role="menuitem" href="#" data-flag-id="{posts.flagId}"><i class="fa fa-fw fa-flag"></i> [[topic:already-flagged]]</a>
 </li>
 
 {{{ if (!posts.selfPost && posts.uid) }}}

package/templates/partials/topic/post.tpl

@@ -10,7 +10,14 @@
 	<div class="icon float-start">
 		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
 			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
-			<i component="user/status" class="fa fa-circle status {posts.user.status}" title="[[global:{posts.user.status}]]"></i>
+			{{{ if ./user.isLocal }}}
+			<span component="user/status" class="position-absolute top-100 start-100 border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+			{{{ else }}}
+			<span component="user/locality" class="position-absolute top-100 start-100 lh-1 border border-white border-2 rounded-circle small" title="[[global:remote-user]]">
+				<span class="visually-hidden">[[global:remote-user]]</span>
+				<i class="fa fa-globe"></i>
+			</span>
+			{{{ end }}}
 		</a>
 	</div>
 
@@ -99,6 +106,10 @@
 			<a component="post/quote" href="#" class="btn btn-sm btn-link user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
 		</span>
 
+		{{{ if ./announces }}}
+		<a component="post/announce-count" href="#" class="btn-ghost-sm" title="[[activitypub:announcers]]"><i class="fa fa-share-alt text-primary"></i> {./announces}</a>
+		{{{ end }}}
+
 		<!-- IF !reputation:disabled -->
 		<span class="votes">
 			<a component="post/upvote" href="#" class="btn btn-sm btn-link <!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">

package/templates/partials/topic/quickreply.tpl

@@ -4,7 +4,7 @@
 		<a data-uid="{loggedInUser.uid}" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
 			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
 			{{{ if loggedInUser.status }}}
-			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
+			<i component="user/status" class="fa fa-circle status position-absolute top-100 start-100 {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
 			{{{ end }}}
 		</a>
 	</div>

package/templates/partials/topics_list.tpl

@@ -37,7 +37,7 @@
 				<i component="topic/scheduled" class="fa fa-clock-o {{{ if !topics.scheduled }}}hidden{{{ end }}}" title="[[topic:scheduled]]"></i>
 				<i component="topic/pinned" class="fa fa-thumb-tack {{{ if (topics.scheduled || !topics.pinned) }}}hidden{{{ end }}}" title="{{{ if !../pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {../pinExpiryISO}]]{{{ end }}}"></i>
 				<i component="topic/locked" class="fa fa-lock {{{ if !topics.locked }}}hidden{{{ end }}}" title="[[topic:locked]]"></i>
-				<i component="topic/moved" class="fa fa-arrow-circle-right {{{ if !topics.oldCid }}}hidden{{{ end }}}" title="[[topic:moved]]"></i>
+				<i component="topic/moved" class="fa fa-arrow-circle-right  {{{ if (!./oldCid || (./oldCid == "-1")) }}}hidden{{{ end }}}" title="[[topic:moved]]"></i>
 				{{{each topics.icons}}}{@value}{{{end}}}
 
 				{{{ if topics.noAnchor }}}
@@ -47,13 +47,13 @@
 				{{{ end }}}
 			</h2>
 			<div class="info">
-				<!-- IF !template.category -->
+				{{{ if (!template.category && !template.world) }}}
 				<div class="category-item d-inline-block">
 					{buildCategoryIcon(./category, "24px", "rounded-circle")}
 					<a class="text-muted" href="{config.relative_path}/category/{topics.category.slug}">{topics.category.name}</a>
 				</div>
 				&bull;
-				<!-- ENDIF !template.category -->
+				{{{ end }}}
 
 
 				<span data-tid="{./tid}" component="topic/tags" class="tag-list hidden-xs {{{ if !./tags.length }}}hidden{{{ end}}}">

package/templates/topic.tpl

@@ -33,7 +33,7 @@
 					<span component="topic/locked" class="badge badge border border-gray-300 text-body {{{ if !locked }}}hidden{{{ end }}}">
 						<i class="fa fa-lock"></i> [[topic:locked]]
 					</span>
-					<a component="topic/moved" href="{config.relative_path}/category/{oldCid}" class="badge badge border border-gray-300 text-body text-decoration-none {{{ if !oldCid }}}hidden{{{ end }}}">
+					<a component="topic/moved" href="{config.relative_path}/category/{oldCid}" class="badge badge border border-gray-300 text-body text-decoration-none {{{ if (!oldCid || (oldCid == "-1")) }}}hidden{{{ end }}}">
 						<i class="fa fa-arrow-circle-right"></i> {{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}
 					</a>
 					{{{each icons}}}<span class="lh-1">{@value}</span>{{{end}}}

package/templates/world.tpl

@@ -0,0 +1,59 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+<div class="row">
+	<div class="world {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		{{{ if (topics.length || privileges.topics:create) }}}
+		<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 flex-nowrap">
+			<div class="d-flex gap-1 align-items-stretch">
+				{{{ if privileges.topics:create }}}
+				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary text-nowrap" data-ajaxify="false" role="button">[[category:new-topic-button]]</a>
+				{{{ else }}}
+					{{{ if !loggedIn }}}
+					<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+					{{{ end }}}
+				{{{ end }}}
+
+				<a href="{url}" class="d-inline-block">
+					<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex gap-1 align-items-center hide" id="new-topics-alert"><i class="fa fa-fw fa-rotate-right"></i>[[recent:load-new-posts]]</div>
+				</a>
+			</div>
+			<div component="category/controls" class="d-flex gap-1 align-items-stretch">
+				<!-- IMPORT partials/category/watch.tpl -->
+				<!-- IMPORT partials/category/sort.tpl -->
+				<!-- IMPORT partials/category/tools.tpl -->
+			</div>
+		</div>
+		{{{ end }}}
+
+		{{{ if (!topics.length && privileges.topics:create)}}}
+		<hr class="visible-xs" />
+		<div class="alert alert-info" id="category-no-topics">[[activitypub:no-topics]]</div>
+		{{{ end }}}
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
+</div>
+
+<!-- IF !config.usePagination -->
+<noscript>
+	<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+<!-- ENDIF !config.usePagination -->