nodebb-theme-harmony 1.0.0-beta.4 → 1.0.0-beta.40

package/languages/en-GB/harmony.json

@@ -1,9 +1,13 @@
 {
 	"skins": "Skins",
 	"collapse": "Collapse",
+	"toggle-sidebars": "Toggle sidebars",
 	"login-register-to-search": "Login or register to search.",
 	"settings.title": "Theme settings",
 	"settings.enableQuickReply": "Enable quick reply",
 	"settings.centerHeaderElements": "Center header elements",
-	"settings.stickyToolbar": "Sticky toolbar"
+	"settings.stickyToolbar": "Sticky toolbar",
+	"settings.stickyToolbar.help": "The toolbar on topic and category pages will stick to the top of the page",
+	"settings.autohideBottombar": "Auto hide bottom bar",
+	"settings.autohideBottombar.help": "The bottom bar on mobile view will be hidden when the page is scrolled down"
 }

package/library.js

@@ -12,6 +12,7 @@ const defaults = {
 	enableQuickReply: 'on',
 	centerHeaderElements: 'off',
 	stickyToolbar: 'on',
+	autohideBottombar: 'off',
 	openSidebars: 'off',
 };
 
@@ -77,6 +78,16 @@ library.defineWidgetAreas = async function (areas) {
 	});
 
 	areas = areas.concat([
+		{
+			name: 'Main post header',
+			template: 'topic.tpl',
+			location: 'mainpost-header',
+		},
+		{
+			name: 'Main post footer',
+			template: 'topic.tpl',
+			location: 'mainpost-footer',
+		},
 		{
 			name: 'Sidebar Footer',
 			template: 'global',
@@ -92,15 +103,18 @@ async function loadThemeConfig(uid) {
 		meta.settings.get('harmony'),
 		user.getSettings(uid),
 	]);
-	return { ...defaults, ...themeConfig, ...userConfig };
+
+	const config = { ...defaults, ...themeConfig, ...(_.pick(userConfig, Object.keys(defaults))) };
+	config.enableQuickReply = config.enableQuickReply === 'on';
+	config.centerHeaderElements = config.centerHeaderElements === 'on';
+	config.stickyToolbar = config.stickyToolbar === 'on';
+	config.autohideBottombar = config.autohideBottombar === 'on';
+	config.openSidebars = config.openSidebars === 'on';
+	return config;
 }
 
 library.getThemeConfig = async function (config) {
-	const themeConfig = await loadThemeConfig(config.uid);
-	config.enableQuickReply = themeConfig.enableQuickReply === 'on';
-	config.centerHeaderElements = themeConfig.centerHeaderElements === 'on';
-	config.stickyToolbar = themeConfig.stickyToolbar === 'on';
-	config.openSidebars = themeConfig.openSidebars === 'on';
+	config.theme = await loadThemeConfig(config.uid);;
 	config.openDraftsOnPageLoad = false;
 	return config;
 };
@@ -126,7 +140,7 @@ library.saveUserSettings = async function (hookData) {
 
 library.addUserToTopic = async function (hookData) {
 	const { enableQuickReply } = await loadThemeConfig(hookData.req.uid);
-	if (enableQuickReply === 'on') {
+	if (enableQuickReply) {
 		if (hookData.req.user) {
 			const userData = await user.getUserData(hookData.req.uid);
 			hookData.templateData.loggedInUser = userData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.40",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -5,6 +5,8 @@ $(document).ready(function () {
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
+	handleMobileNavigator();
+	setupNavTooltips();
 
 	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
 		const skin = $(this).attr('data-value');
@@ -36,7 +38,7 @@ $(document).ready(function () {
 	});
 
 	function setupMobileMenu() {
-		require(['api'], function (api) {
+		require(['hooks', 'api', 'navigator'], function (hooks, api, navigator) {
 			$('[component="sidebar/toggle"]').on('click', async function () {
 				const sidebarEl = $('.sidebar');
 				sidebarEl.toggleClass('open');
@@ -48,7 +50,55 @@ $(document).ready(function () {
 					});
 				}
 				$(window).trigger('action:sidebar.toggle');
+				if (ajaxify.data.template.topic) {
+					hooks.fire('action:navigator.update', { newIndex: navigator.getIndex() });
+				}
+			});
+
+			const bottomBar = $('[component="bottombar"]');
+			$('body').on('shown.bs.dropdown', '.sticky-tools', function () {
+				bottomBar.addClass('hidden');
+			});
+			$('body').on('hidden.bs.dropdown', '.sticky-tools', function () {
+				bottomBar.removeClass('hidden');
+			});
+
+			let lastScrollTop = 0;
+			const $window = $(window);
+			function onWindowScroll() {
+				const st = $window.scrollTop();
+				if (st !== lastScrollTop) {
+					const diff = Math.abs(st - lastScrollTop);
+					const scrolledDown = st > lastScrollTop;
+					const scrolledUp = st < lastScrollTop;
+					if (diff > 5) {
+						bottomBar.css({
+							bottom: !scrolledUp && scrolledDown ?
+								-bottomBar.find('.bottombar-nav').outerHeight(true) :
+								0,
+						});
+						lastScrollTop = st;
+					}
+				}
+			}
+
+			const delayedScroll = utils.throttle(onWindowScroll, 250);
+			function enableAutohide() {
+				if (config.theme.autohideBottombar) {
+					lastScrollTop = $window.scrollTop();
+					$window.on('scroll', delayedScroll);
+				}
+			}
+
+			hooks.on('action:posts.loading', function () {
+				$window.off('scroll', delayedScroll);
+			});
+			hooks.on('action:posts.loaded', enableAutohide);
+			hooks.on('action:ajaxify.end', function () {
+				$window.off('scroll', delayedScroll);
+				enableAutohide();
 			});
+			enableAutohide();
 		});
 	}
 
@@ -59,33 +109,41 @@ $(document).ready(function () {
 	}
 
 	function setupDrafts() {
-		require(['composer/drafts'], function (drafts) {
+		require(['composer/drafts', 'bootbox'], function (drafts, bootbox) {
+			const draftsEl = $('[component="sidebar/drafts"]');
+
 			function updateBadgeCount() {
 				const count = drafts.getAvailableCount();
+				if (count > 0) {
+					draftsEl.removeClass('hidden');
+				}
 				$('[component="drafts/count"]').toggleClass('hidden', count <= 0).text(count);
 			}
 
 			async function renderDraftList() {
 				const draftListEl = $('[component="drafts/list"]');
-				draftListEl.children(':not(.no-drafts)').remove();
-
 				const draftItems = drafts.listAvailable();
 				if (!draftItems.length) {
 					draftListEl.find('.no-drafts').removeClass('hidden');
+					draftListEl.find('.placeholder-wave').addClass('hidden');
+					draftListEl.find('.draft-item-container').html('');
 					return;
 				}
 				draftItems.reverse().forEach((draft) => {
 					if (draft) {
-						draft.text = draft.text.replace(/(?:\r\n|\r|\n)/g, '<br>');
+						draft.text = utils.escapeHTML(
+							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();
+				draftListEl.find('.placeholder-wave').addClass('hidden');
+				draftListEl.find('.draft-item-container').html(html).find('.timeago').timeago();
 			}
 
-			const draftsEl = $('[component="sidebar/drafts"]');
+
 			draftsEl.on('shown.bs.dropdown', renderDraftList);
 
 			draftsEl.on('click', '[component="drafts/open"]', function () {
@@ -93,8 +151,13 @@ $(document).ready(function () {
 			});
 
 			draftsEl.on('click', '[component="drafts/delete"]', function () {
-				drafts.removeDraft($(this).attr('data-save-id'));
-				renderDraftList();
+				const save_id = $(this).attr('data-save-id');
+				bootbox.confirm('[[modules:composer.discard-draft-confirm]]', function (ok) {
+					if (ok) {
+						drafts.removeDraft(save_id);
+						renderDraftList();
+					}
+				});
 				return false;
 			});
 
@@ -103,6 +166,7 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+
 	function setupNProgress() {
 		require(['nprogress'], function (NProgress) {
 			window.nprogress = NProgress;
@@ -117,4 +181,38 @@ $(document).ready(function () {
 			}
 		});
 	}
+
+	function handleMobileNavigator() {
+		const paginationBlockEl = $('.pagination-block');
+		require(['hooks'], function (hooks) {
+			hooks.on('action:ajaxify.end', function () {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+			});
+			hooks.on('filter:navigator.scroll', function (hookData) {
+				paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
+				return hookData;
+			});
+		});
+	}
+
+	function setupNavTooltips() {
+		// remove title from user icon in sidebar to prevent double tooltip
+		$('.sidebar [component="header/avatar"] .avatar').removeAttr('title');
+		const tooltipEls = $('.sidebar [title]');
+		tooltipEls.tooltip({
+			trigger: 'manual',
+			animation: false,
+		});
+
+		tooltipEls.on('mouseenter', function (ev) {
+			const target = $(ev.target);
+			const isDropdown = target.hasClass('dropdown-menu') || !!target.parents('.dropdown-menu').length;
+			if (!$('.sidebar').hasClass('open') && !isDropdown) {
+				$(this).tooltip('show');
+			}
+		});
+		tooltipEls.on('click mouseleave', function () {
+			$(this).tooltip('hide');
+		});
+	}
 });

package/public/settings.js

@@ -19,6 +19,7 @@ define('forum/account/theme', ['forum/account/header', 'api', 'settings', 'alert
 						...themeSettings,
 					},
 				});
+				config.theme = (await api.get('/api/config')).theme;
 				alerts.success('[[success:settings-saved]]');
 			});
 		}

package/scss/common.scss

@@ -14,8 +14,43 @@ body {
 .text-sm { font-size: 0.875rem!important; } // 14px
 .text-xs { font-size: 0.75rem!important; } // 12px
 
-.btn-link:hover {
-	text-decoration: none;
+.caret {
+	&::after {
+		border: none;
+		font-family: "FontAwesome";
+		content: "\f078";
+		color: tint-color($primary, 40%);
+	}
+}
+
+blockquote {
+	background-color: $light;
+	font-style: normal;
+	border-left: 2px solid $border-color;
+	padding: 1rem;
+	p:last-child {
+		margin-bottom: 0;
+	}
+}
+
+body:not(.page-user) {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying {
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
+}
+.page-user {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying .account-content {
+			transition: opacity 150ms linear;
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
 }
 
 .sticky-tools {
@@ -35,6 +70,13 @@ body {
 	}
 }
 
+.btn-link {
+	&:hover, &.active {
+		background-color: $btn-ghost-hover-color;
+		text-decoration: none;
+	}
+}
+
 @mixin btn-ghost-base {
 	display: flex;
 	align-items: center;
@@ -48,10 +90,10 @@ body {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-	$hover-color: mix($light, $dark, 90);
+
 	cursor: pointer;
 	&:hover, &.active {
-		background-color: $hover-color;
+		background-color: $btn-ghost-hover-color;
 		text-decoration: none;
 	}
 }

package/scss/harmony.scss

@@ -9,6 +9,7 @@
 @import "status";
 @import "account";
 @import "groups";
+@import "search";
 @import "modals";
 
 @import "modules/breadcrumbs";
@@ -20,5 +21,6 @@
 @import "modules/topics-list";
 @import "modules/cover";
 @import "modules/nprogress";
+@import "modules/paginator";
 
 @import "skins";

package/scss/mixins.scss

@@ -124,9 +124,13 @@
 			display: none;
 		}
 
-		.timeline-event {
-			.timeline-text.timeago {
-				display: none;
+
+		[component="topic/event"], [component="topic/necro-post"] {
+			&.timeline-event {
+				.timeline-text {
+					line-height: 16px;
+					font-size: 0.75rem;
+				}
 			}
 		}
 	}

package/scss/modals.scss

@@ -1,4 +1,9 @@
 .tool-modal {
 	bottom: $spacer * 3;
 	right: $spacer * 4;
-}
+
+	@include media-breakpoint-down(md) {
+		right: $spacer;
+		left: $spacer;
+	}
+}

package/scss/modules/bottom-sheet.scss

@@ -8,7 +8,7 @@
 			inset: auto 0 0 0!important;
 
 			margin: 0 -1px -1px -1px;
-			padding: 0 5px 4rem 5px!important;
+			padding: 0 5px!important;
 			max-height: 60%;
 
 			box-shadow: 0 2px 6px rgba(0,0,0,0.35);

package/scss/modules/composer.scss

@@ -6,10 +6,6 @@ $composer-bg: $body-bg !default;
 	background-color: $bg !important;
 }
 
-.composer {
-	z-index: 3 !important;
-}
-
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
 	$composer-color: $secondary;

package/scss/modules/cover.scss

@@ -12,12 +12,11 @@
 
 	&:hover {
 		.controls {
-			opacity: 0.8;
+			opacity: 1;
 		}
 	}
 
 	.controls {
-		text-align: center;
 		height: 200px;
 		line-height: 200px;
 		opacity: 0;
@@ -28,15 +27,6 @@
 		> * {
 			pointer-events: all;
 		}
-
-		.fa {
-			color: white;
-			background-color: #333;
-			opacity: 1;
-			margin: 15px;
-			padding: 5px;
-			border-radius: 4px;
-		}
 	}
 
 	&.active {

package/scss/modules/paginator.scss

@@ -0,0 +1,24 @@
+.skin-noskin [component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $body-color;
+		background-color: $gray-300;
+		border-color: $gray-300;
+	}
+
+	.page-item:not(.disabled):hover .page-link {
+		color: $body-color;
+	}
+}
+
+[component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $pagination-active-color;
+	}
+	.page-item:not(.disabled):hover .page-link {
+		color: $pagination-hover-color;
+		background-color: $pagination-hover-bg;
+	}
+	.page-item:not(.disabled) .page-link {
+		color: $body-color;
+	}
+}

package/scss/overrides.scss

@@ -39,6 +39,8 @@ $text-muted: $gray-600 !default;
 $border-color: $gray-200 !default;
 $link-color: shade-color($blue, 20%) !default;
 
+$btn-ghost-hover-color: mix($light, $dark, 90);
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 
@@ -53,7 +55,7 @@ $link-hover-decoration: underline;
 
 // Custom fonts
 $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-family-secondary: "Poppins" !default;
+$font-family-secondary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-weight-semibold: 500 !default;
 
 $breadcrumb-divider: quote("→");

package/scss/search.scss

@@ -0,0 +1,8 @@
+[component="search/filters"] {
+	.filter-btn {
+		border-color: $gray-300!important;
+		&.active-filter {
+			border-color: $primary!important;
+		}
+	}
+}

package/scss/sidebar.scss

@@ -1,10 +1,10 @@
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
-	nav.sidebar, .bottombar {
+	nav.sidebar, .bottombar-nav {
 		color: $secondary !important;
 		background-color: $light !important;
 	}
-	.bottombar {
+	.bottombar-nav {
 		.dropdown-menu {
 			color: $secondary !important;
 			background-color: $light !important;
@@ -97,7 +97,10 @@
 }
 
 .bottombar {
-	z-index: $zindex-dropdown;
+	transition: bottom 150ms linear;
+}
+
+.bottombar-nav {
 	.nav-text {
 		font-size: 1rem;
 		color: $body-color;
@@ -128,7 +131,7 @@
 		overflow: auto!important;
 	}
 	.search-dropdown .quick-search-results {
-		max-height: 250px!important;
+		max-height: 225px!important;
 		overflow-y: auto!important;
 	}
 	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {

package/scss/topic.scss

@@ -1,3 +1,5 @@
+.pagination-block { display: none; }
+
 .page-topic {
 	[component="topic/title"] {
 		font-size: 28px;
@@ -14,18 +16,6 @@
 		line-height: 20px;
 	}
 
-	.action-bar {
-		.dropdown-toggle::after {
-			border: none;
-			font-family: "FontAwesome";
-			content: "\f078";
-			color: tint-color($primary, 40%);
-
-			position: relative;
-			top: 2px;
-		}
-	}
-
 	.topic {
 		.posts {
 			max-width: 960px;
@@ -67,6 +57,17 @@
 			[component="post/reply-count"] {
 				font-size: $font-size-base * .75;
 			}
+
+			[component="post/upvote"], [component="post/downvote"] {
+				&.upvoted, &.downvoted {
+					background-color: lighten($btn-ghost-hover-color, 5%);
+
+					&:hover {
+					background-color: $btn-ghost-hover-color;
+
+					}
+				}
+			}
 		}
 	}
 
@@ -106,6 +107,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {

package/templates/account/blocks.tpl

@@ -1,45 +1,39 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<div class="d-flex justify-content-between mb-3">
-				<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
-				<div class="justify-content-end">
-					<div class="dropdown">
-						<div class="input-group">
-							<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
-							<button class="btn btn-primary btn-sm" type="button">
-								<i class="fa fa-search"></i>
-							</button>
-						</div>
+<!-- IMPORT partials/account/header.tpl -->
+<div class="d-flex justify-content-between mb-3">
+	<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
+	<div class="justify-content-end">
+		<div class="dropdown">
+			<div class="input-group">
+				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
+				<button class="btn btn-primary btn-sm" type="button">
+					<i class="fa fa-search"></i>
+				</button>
+			</div>
 
-						<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
-							<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-							{{{ each edit }}}
-							<li class="">
-								<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
-									<div class="text-truncate">
-										<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
-									</div>
-									<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
+			<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
+				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+				{{{ each edit }}}
+				<li class="">
+					<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+						<div class="text-truncate">
+							<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
+						</div>
+						<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
 					</div>
-				</div>
-			</div>
-			<div class="users">
-				<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
-					{{{ each users }}}
-					<!-- IMPORT partials/users/item.tpl -->
-					{{{ end }}}
-				</div>
-				<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
-				<!-- IMPORT partials/paginator.tpl -->
-			</div>
+				</li>
+				{{{ end }}}
+			</ul>
 		</div>
-
 	</div>
-</div>
+</div>
+<div class="users">
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+		{{{ each users }}}
+		<!-- IMPORT partials/users/item.tpl -->
+		{{{ end }}}
+	</div>
+	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->