nodebb-theme-harmony 0.0.12 → 0.0.14

package/library.js

@@ -12,6 +12,7 @@ const defaults = {
 	enableQuickReply: 'on',
 	centerHeaderElements: 'off',
 	stickyToolbar: 'on',
+	openSidebars: 'off',
 };
 
 library.init = async function (params) {
@@ -99,6 +100,7 @@ library.getThemeConfig = async function (config) {
 	config.enableQuickReply = themeConfig.enableQuickReply === 'on';
 	config.centerHeaderElements = themeConfig.centerHeaderElements === 'on';
 	config.stickyToolbar = themeConfig.stickyToolbar === 'on';
+	config.openSidebars = themeConfig.openSidebars === 'on';
 	config.openDraftsOnPageLoad = false;
 	return config;
 };
@@ -115,7 +117,9 @@ library.getAdminSettings = async function (hookData) {
 
 library.saveUserSettings = async function (hookData) {
 	Object.keys(defaults).forEach((key) => {
-		hookData.settings[key] = hookData.data[key] || undefined;
+		if (hookData.data.hasOwnProperty(key)) {
+			hookData.settings[key] = hookData.data[key] || undefined;
+		}
 	});
 	return hookData;
 };

package/package.json

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

package/public/harmony.js

@@ -35,9 +35,19 @@ $(document).ready(function () {
 	});
 
 	function setupMobileMenu() {
-		$('[component="sidebar/toggle"]').on('click', function () {
-			$('.sidebar').toggleClass('open');
-			$(window).trigger('action:sidebar.toggle');
+		require(['api'], function (api) {
+			$('[component="sidebar/toggle"]').on('click', async function () {
+				const sidebarEl = $('.sidebar');
+				sidebarEl.toggleClass('open');
+				if (app.user.uid) {
+					await api.put(`/users/${app.user.uid}/settings`, {
+						settings: {
+							openSidebars: sidebarEl.hasClass('open') ? 'on' : 'off',
+						},
+					});
+				}
+				$(window).trigger('action:sidebar.toggle');
+			});
 		});
 	}
 
@@ -79,7 +89,6 @@ $(document).ready(function () {
 				draftListEl.children(':not(.no-drafts)').remove();
 
 				const draftItems = drafts.listAvailable();
-				console.log('harmony sees', draftItems);
 				if (!draftItems.length) {
 					draftListEl.find('.no-drafts').removeClass('hidden');
 					return;
@@ -89,7 +98,7 @@ $(document).ready(function () {
 						draft.text = draft.text.replace(/(?:\r\n|\r|\n)/g, '<br>');
 					}
 				});
-				console.log(draftItems);
+
 				const html = await app.parseAndTranslate('partials/sidebar/drafts', 'drafts', { drafts: draftItems });
 				draftListEl.find('.no-drafts').addClass('hidden');
 				draftListEl.append(html).find('.timeago').timeago();

package/scss/mixins.scss

@@ -47,7 +47,7 @@
 		}
 
 		&:last-child {
-			min-height: 7rem;
+			padding-bottom: 2rem;
 
 			&:after {
 				content: '';

package/scss/modules/topic-navigator.scss

@@ -1,3 +1,7 @@
+body:not(.page-topic) [component="topic/navigator"] {
+	display: none!important;
+}
+
 [component="topic/navigator"] {
 	max-height: calc(200px + (2rem * 4));
 	user-select: none;

package/templates/groups/details.tpl

@@ -34,6 +34,11 @@
 	</div>
 
 	<div class="d-flex flex-column flex-md-row">
+		<div data-widget-area="left">
+			{{{each widgets.left}}}
+			{{widgets.left.html}}
+			{{{end}}}
+		</div>
 		<!-- IMPORT partials/groups/sidebar-left.tpl -->
 
 		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width:0;">
@@ -68,5 +73,11 @@
 				{{{ end }}}
 			</div>
 		</div>
+
+		<div data-widget-area="right">
+			{{{each widgets.right}}}
+			{{widgets.right.html}}
+			{{{end}}}
+		</div>
 	</div>
 </div>

package/templates/partials/quick-search-results.tpl

@@ -42,6 +42,6 @@
 {{{ end }}}
 
 {{{if !posts.length}}}
-<div class="text-center no-results">[[search:no-matches]]</li>
+<div class="text-center no-results py-2 py-md-0">[[search:no-matches]]</li>
 <li role="separator" class="dropdown-divider d-block d-md-none"></li>
 {{{end}}}

package/templates/partials/sidebar-left.tpl

@@ -1,4 +1,4 @@
-<nav class="text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
+<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
 	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 		{{{ each navigation }}}
 		<!-- IF function.displayMenuItem, @index -->

package/templates/partials/sidebar-right.tpl

@@ -1,4 +1,4 @@
-<nav class="text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
+<nav class="{{{ if config.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
 	{{{ if config.loggedIn }}}
 	<ul id="logged-in-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
 	<!-- IMPORT partials/sidebar/logged-in-menu.tpl -->

package/templates/partials/topic/navigator.tpl

@@ -1,4 +1,4 @@
-<div class="d-none flex-column flex-grow-1 align-items-center mb-2 mx-2 mt-auto" component="topic/navigator">
+<div class="d-sm-flex flex-column flex-grow-1 align-items-center mb-2 mx-2 mt-auto" component="topic/navigator">
 	<a href="#" class="nav-link border-0 p-2" data-action="toTop"><i class="fa fa-fw fa-angles-up"></i></a>
 	<a href="#" class="nav-link border-0 p-2" data-action="scrollUp"><i class="fa fa-fw fa-angle-up"></i></a>
 	<div class="track d-inline-block flex-grow-1 position-relative">

package/templates/partials/topic/post.tpl

@@ -71,7 +71,7 @@
 
 	<div class="clearfix">
 		{{{ if !hideReplies }}}
-		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 border rounded-1 p-1 threaded-replies user-select-none float-start text-muted text-decoration-none {{{ if !posts.replies.count }}}hidden{{{ end }}}">
+		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 btn-outline border rounded-1 p-1 threaded-replies user-select-none float-start text-muted text-decoration-none {{{ if !posts.replies.count }}}hidden{{{ end }}}">
 			<span component="post/reply-count/avatars" class="avatars d-inline-flex gap-1 align-items-top {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
 				{{{each posts.replies.users}}}
 				<span>{buildAvatar(posts.replies.users, "20px", true, "")}</span>
@@ -91,7 +91,7 @@
 		{{{ end }}}
 	</div>
 
-	<div component="post/replies/container" class="mt-2 col-11 border rounded-1 p-3"></div>
+	<div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3"></div>
 
 	<div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
 		<!-- IMPORT partials/topic/reactions.tpl -->

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

@@ -1,5 +1,5 @@
 <div component="topic/reply/container" class="btn-group action-bar bottom-sheet {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
-	<a href="{config.relative_path}/compose?tid={tid}&title={title}" 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 visible-xs-inline"></i><span class="visible-md-inline visible-lg-inline"> [[topic:reply]]</span></a>
+	<a href="{config.relative_path}/compose?tid={tid}&title={title}" 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">
 		<span class="caret"></span>
 	</button>