nodebb-theme-harmony 2.0.11 → 2.0.12

package/library.js

@@ -15,6 +15,7 @@ const defaults = {
 	centerHeaderElements: 'off',
 	mobileTopicTeasers: 'off',
 	stickyToolbar: 'on',
+	topicSidebarTools: 'off',
 	autohideBottombar: 'on',
 	openSidebars: 'off',
 	chatModals: 'off',
@@ -147,6 +148,7 @@ library.loadThemeConfig = async function (uid) {
 	config.centerHeaderElements = config.centerHeaderElements === 'on';
 	config.mobileTopicTeasers = config.mobileTopicTeasers === 'on';
 	config.stickyToolbar = config.stickyToolbar === 'on';
+	config.topicSidebarTools = config.topicSidebarTools === 'on';
 	config.autohideBottombar = config.autohideBottombar === 'on';
 	config.openSidebars = config.openSidebars === 'on';
 	config.chatModals = config.chatModals === 'on';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },

package/scss/mixins.scss

@@ -35,24 +35,6 @@
 		margin-left: 1.5rem;
 		transition: border-color 1s ease-out;
 
-		&:first-child {
-			&:before {
-				content: '';
-				position: absolute;
-				top: 0;
-				height: 16px;
-				width: 16px;
-				background-color: $border-color;
-				border-radius: 100%;
-				transform: translate(calc(-50% - .5px), -100%);
-				transition: background-color 1s ease-out;
-			}
-
-			&.highlight:before {
-				background-color: $primary;
-			}
-		}
-
 		&:last-child {
 			padding-bottom: 2rem;
 

package/scss/modules/topic-navigator.scss

@@ -21,8 +21,8 @@ body.template-topic {
 		min-width: 170px;
 	}
 	.scroller-container {
-		left: 10px;
-		height: 300px;
+		left: 16px;
+		height: 275px;
 		border-left: 2px solid $border-color;
 
 		.scroller-thumb {

package/templates/account/theme.tpl

@@ -37,6 +37,17 @@
 		</label>
 	</div>
 
+	<div class="form-check form-switch mb-3">
+		<input class="form-check-input" type="checkbox" role="switch" id="topicSidebarTools" name="topicSidebarTools" {{{ if theme.topicSidebarTools }}}checked{{{ end }}}>
+		<label class="form-check-label" for="topicSidebarTools">
+			[[themes/harmony:settings.topicSidebarTools]]
+			<p class="form-text mb-0">
+				[[themes/harmony:settings.topicSidebarTools.help]]
+			</p>
+		</label>
+	</div>
+
+
 	<div class="form-check form-switch mb-3">
 		<input class="form-check-input" type="checkbox" role="switch" id="autohideBottombar" name="autohideBottombar" {{{ if theme.autohideBottombar }}}checked{{{ end }}}>
 		<label class="form-check-label" for="autohideBottombar">

package/templates/admin/plugins/harmony.tpl

@@ -30,6 +30,15 @@
 						</p>
 					</div>
 				</div>
+				<div class="form-check form-switch">
+					<input type="checkbox" class="form-check-input" id="topicSidebarTools" name="topicSidebarTools" />
+					<div for="topicSidebarTools" class="form-check-label">
+						[[themes/harmony:settings.topicSidebarTools]]
+						<p class="form-text">
+							[[themes/harmony:settings.topicSidebarTools.help]]
+						</p>
+					</div>
+				</div>
 				<div class="form-check form-switch">
 					<input type="checkbox" class="form-check-input" id="autohideBottombar" name="autohideBottombar" />
 					<div for="autohideBottombar" class="form-check-label">

package/templates/partials/post_bar.tpl

@@ -1,14 +1,8 @@
-<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}}">
+<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} {{{ if config.theme.topicSidebarTools }}}d-block d-lg-none{{{ end }}}">
 	<nav class="d-flex flex-nowrap my-2 p-0 border-0 rounded topic-main-buttons">
 		<div class="d-flex flex-row p-2 text-bg-light border rounded w-100 align-items-center">
 			<div class="d-flex me-auto mb-0 gap-2 align-items-center flex-wrap">
-				{{{ if loggedIn }}}
-				<button component="topic/mark-unread" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center">
-					<i class="fa fa-fw fa-inbox text-primary"></i>
-					<span class="d-none d-md-inline fw-semibold">[[topic:mark-unread]]</span>
-				</button>
-				{{{ end }}}
-
+				<!-- IMPORT partials/topic/mark-unread.tpl -->
 				<!-- IMPORT partials/topic/watch.tpl -->
 				<!-- IMPORT partials/topic/sort.tpl -->
 				<!-- IMPORT partials/topic/tools.tpl -->
@@ -16,10 +10,6 @@
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
 				<a class="btn btn-ghost btn-sm d-none d-lg-flex align-items-center align-self-stretch" target="_blank" href="{rssFeedUrl}" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
 				{{{ end }}}
-
-				{{{ if browsingUsers }}}
-				<div class="hidden-xs"><!-- IMPORT partials/topic/browsing-users.tpl --></div>
-				{{{ end }}}
 			</div>
 			<!-- IMPORT partials/topic/reply-button.tpl -->
 		</div>

package/templates/partials/topic/mark-unread.tpl

@@ -0,0 +1,6 @@
+{{{ if loggedIn }}}
+<button component="topic/mark-unread" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center">
+	<i class="fa fa-fw fa-inbox text-primary"></i>
+	<span class="d-none d-md-inline fw-semibold">[[topic:mark-unread]]</span>
+</button>
+{{{ end }}}

package/templates/partials/topic/navigator.tpl

@@ -1,26 +1,22 @@
-<div class="pagination-block d-none d-lg-block flex-grow-1 mb-4">
-	<div class="d-flex justify-content-end sticky-top mt-4" style="top:6rem;z-index:1;">
-		<div class="ps-1 ps-md-0 d-inline-block">
-			<div class="scroller-content d-flex gap-2 flex-column align-items-start">
-				<button class="pagetop btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
-				<div class="scroller-container position-relative">
-					<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
-						<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
-						<div>
-							<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
-							<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
-						</div>
-					</div>
+<div class="pagination-block d-none d-lg-block">
+	<div class="scroller-content d-flex gap-2 flex-column align-items-start">
+		<button class="pagetop btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px 8px;"><i class="fa fa-fw fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
+		<div class="scroller-container position-relative">
+			<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
+				<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
+				<div>
+					<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
+					<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
+				</div>
+			</div>
 
-					<div class="unread d-inline-block position-absolute bottom-0">
-						<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
-							<a class="text-decoration-none" href="{url}" tabindex="-1" aria-disabled="true" aria-label="[[topic:unread-posts-link]]"></a>
-						</div>
-					</div>
+			<div class="unread d-inline-block position-absolute bottom-0">
+				<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
+					<a class="text-decoration-none" href="{url}" tabindex="-1" aria-disabled="true" aria-label="[[topic:unread-posts-link]]"></a>
 				</div>
-				<button class="pagebottom btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
 			</div>
 		</div>
+		<button class="pagebottom btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px 8px;"><i class="fa fa-fw fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
 	</div>
 </div>
 

package/templates/partials/topic/reply-button.tpl

@@ -1,7 +1,7 @@
 {{{ if privileges.topics:reply }}}
 <div component="topic/reply/container" class="btn-group">
-	<a href="{config.relative_path}/compose?tid={tid}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
-	<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:reply-options]]">
+	<a href="{config.relative_path}/compose?tid={tid}" class="d-flex {{{ if !config.theme.topicSidebarTools}}}px-3{{{ end }}} gap-2 align-items-center btn btn-sm btn-primary fw-semibold" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-fw fa-reply {{{ if !config.theme.topicSidebarTools}}} d-sm-block d-md-none {{{ end }}}"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
+	<button type="button" class="btn btn-sm btn-primary dropdown-toggle flex-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:reply-options]]">
 		<span class="caret"></span>
 	</button>
 	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">

package/templates/topic.tpl

@@ -67,9 +67,9 @@
 
 				<div class="d-flex gap-0 gap-lg-5">
 					<div class="posts-container" style="min-width: 0;">
-						<ul component="topic" class="posts timeline list-unstyled mt-sm-2 p-0 py-3" style="min-width: 0;" data-tid="{tid}" data-cid="{cid}">
+						<ul component="topic" class="posts timeline list-unstyled p-0 py-3" style="min-width: 0;" data-tid="{tid}" data-cid="{cid}">
 						{{{ each posts }}}
-							<li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
+							<li component="post" class="{{{ if (./index != 0) }}}pt-4{{{ end }}} {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
 								<a component="post/anchor" data-index="{./index}" id="{increment(./index, "1")}"></a>
 								<meta itemprop="datePublished" content="{./timestampISO}">
 								{{{ if ./editedISO }}}
@@ -93,8 +93,29 @@
 						<!-- IMPORT partials/topic/quickreply.tpl -->
 						{{{ end }}}
 					</div>
-
-					<!-- IMPORT partials/topic/navigator.tpl -->
+					<div class="d-flex d-none d-lg-block flex-grow-1 mt-2">
+						<div class="sticky-top" style="{{{ if config.theme.topicSidebarTools }}}top:2rem;{{{ else }}}top:6rem; {{{ end }}} z-index:1;">
+							<div class="d-flex flex-column gap-3 align-items-end">
+								{{{ if config.theme.topicSidebarTools }}}
+								<div class="d-flex flex-column gap-2" style="min-width: 170px;">
+									<!-- IMPORT partials/topic/reply-button.tpl -->
+									<!-- IMPORT partials/topic/mark-unread.tpl -->
+									<!-- IMPORT partials/topic/watch.tpl -->
+									<!-- IMPORT partials/topic/sort.tpl -->
+									<!-- IMPORT partials/topic/tools.tpl -->
+								</div>
+								{{{ end }}}
+								{{{ if config.theme.topicSidebarTools }}}<hr class="my-0" style="min-width: 170px;"/>{{{ end }}}
+								<!-- IMPORT partials/topic/navigator.tpl -->
+								{{{ if config.theme.topicSidebarTools }}}<hr class="my-0" style="min-width: 170px;" />{{{ end }}}
+								{{{ if browsingUsers }}}
+								<div class="d-flex flex-column ps-2 hidden-xs" style="min-width: 170px;">
+								<!-- IMPORT partials/topic/browsing-users.tpl -->
+								</div>
+								{{{ end }}}
+							</div>
+						</div>
+					</div>
 				</div>
 
 				{{{ if config.usePagination }}}