nodebb-theme-harmony 0.0.11 → 0.0.13

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,8 @@ 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;
 };
 
@@ -114,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.11",
+  "version": "0.0.13",
   "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');
+			});
 		});
 	}
 
@@ -76,13 +86,19 @@ $(document).ready(function () {
 
 			async function renderDraftList() {
 				const draftListEl = $('[component="drafts/list"]');
-				draftListEl.find('[data-save-id]').remove();
+				draftListEl.children(':not(.no-drafts)').remove();
 
 				const draftItems = drafts.listAvailable();
 				if (!draftItems.length) {
 					draftListEl.find('.no-drafts').removeClass('hidden');
 					return;
 				}
+				draftItems.reverse().forEach((draft) => {
+					if (draft) {
+						draft.text = draft.text.replace(/(?:\r\n|\r|\n)/g, '<br>');
+					}
+				});
+
 				const html = await app.parseAndTranslate('partials/sidebar/drafts', 'drafts', { drafts: draftItems });
 				draftListEl.find('.no-drafts').addClass('hidden');
 				draftListEl.append(html).find('.timeago').timeago();
@@ -97,6 +113,8 @@ $(document).ready(function () {
 
 			draftsEl.on('click', '[component="drafts/delete"]', function () {
 				drafts.removeDraft($(this).attr('data-save-id'));
+				renderDraftList();
+				return false;
 			});
 
 			$(window).on('action:composer.drafts.save', updateBadgeCount);

package/scss/common.scss

@@ -2,6 +2,9 @@
 body {
 	overflow-y: scroll;
 }
+.ff-base {
+	font-family: $font-family-base;
+}
 .ff-secondary {
 	font-family: $font-family-secondary;
 }

package/scss/sidebar.scss

@@ -75,6 +75,7 @@
 
 	.chats-dropdown, .notifications-dropdown, .drafts-dropdown {
 		min-width: 300px;
+		width: 300px;
 		ul {
 			max-height: 400px;
 			overflow-y: auto;
@@ -116,12 +117,3 @@
 		max-height: 100%;
 	}
 }
-
-.sidebar-left {
-	border-right: 1px solid $border-color;
-	left: 0px;
-}
-.sidebar-right {
-	border-left: 1px solid $border-color;
-	right: 0px;
-}

package/scss/skins.scss

@@ -1,6 +1,6 @@
 .skin-quartz {
 	// $body-bg-image is gradient in quartz
-	.icon {
+	[component="post"] .icon {
 		background-color: transparent !important;
 	}
 }
@@ -10,4 +10,11 @@
 	.topic-list-header .btn, .topic-main-buttons .btn {
 		padding: 6px 12px;
 	}
+}
+
+.skin-yeti {
+	.badge {
+		padding-left: 0.5rem;
+		padding-right: 0.5rem;
+	}
 }

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/chats/message-window.tpl

@@ -14,8 +14,8 @@
 		<!-- IMPORT partials/chats/options.tpl -->
 	</div>
 	<hr class="text-muted opacity-25"/>
-	<div class="position-relative">
-		<div component="chat/messages/scroll-up-alert" class="position-absolute me-md-4 end-0 text-sm scroll-up-alert alert alert-info hidden w-25 d-none d-md-block" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
+	<div class="row position-relative justify-content-center mx-5">
+		<div component="chat/messages/scroll-up-alert" class="col-12 col-xl-6 position-absolute text-sm scroll-up-alert alert alert-info hidden d-none d-md-block" 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 -->

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/drafts.tpl

@@ -10,19 +10,30 @@
 </a>
 <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">
+		<ul component="drafts/list" class="draft-list list-unstyled d-flex flex-column gap-1 pe-1">
 			<li class="no-drafts text-center p-2">[[modules:composer.no-drafts]]</li>
 
 			{{{ each drafts }}}
 			{{{ if !@first}}}
 			<hr class="m-0"/>
 			{{{ end }}}
-			<li class="dropdown-item rounded-1 p-2" data-save-id="{./save_id}">
-				<div class="d-flex gap-1 justify-content-between">
-					<div class="d-flex flex-column" component="drafts/open" data-save-id="{./save_id}">
+			<li class="" data-save-id="{./save_id}">
+				<div class="d-flex gap-1 justify-content-between ff-base">
+					<div class="dropdown-item rounded-1 p-2 d-flex flex-column gap-2 pointer" component="drafts/open" data-save-id="{./save_id}">
+						{{{ if (./action == "topics.post") }}}
 						{{{ if ./title}}}
-						<div class="text text-xs fw-semibold">{./title}</div>
+						<div class="text text-xs fw-semibold line-clamp-2">{./title}</div>
 						{{{ end }}}
+						{{{ end }}}
+
+						{{{ if (./action == "posts.reply") }}}
+						<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.replying_to, "{./title}"]]</div>
+						{{{ end }}}
+
+						{{{ if (./action == "posts.edit") }}}
+						<div class="text text-xs fw-semibold line-clamp-2">[[topic:composer.editing]]</div>
+						{{{ end }}}
+
 						{{{ if ./text }}}
 						<div class="text text-sm line-clamp-3">{./text}</div>
 						{{{ end }}}

package/templates/partials/sidebar-left.tpl

@@ -1,4 +1,4 @@
-<nav class="text-dark bg-light sidebar sidebar-left 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 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/chat.tpl

@@ -1,41 +0,0 @@
-<div id="chat-modal" class="chat-modal d-flex flex-nowrap modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
-	<div class="modal-dialog">
-		<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-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-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>
-				<!-- IMPORT partials/chats/options.tpl -->
-
-				<button id="chat-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-			</div>
-
-			<div class="modal-body d-flex flex-column" style="height: 500px;">
-				<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>
-				<ul class="chat-content p-0 m-0 list-unstyled d-flex flex-column overflow-auto flex-grow-1" component="chat/messages">
-					<!-- IMPORT partials/chats/messages.tpl -->
-				</ul>
-
-				<div component="chat/composer" class="d-flex">
-					<div class="flex-grow-1 position-relative">
-						<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="2"></textarea>
-						<span component="chat/message/remaining" class="text-muted position-absolute me-1 mb-1" style="right: 0px; bottom:0px;">{maximumChatMessageLength}</span>
-					</div>
-					<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
-					<form component="chat/upload" method="post" enctype="multipart/form-data">
-						<input type="file" name="files[]" multiple class="hidden"/>
-					</form>
-				</div>
-			</div>
-			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
-		</div>
-	</div>
-</div>