nodebb-theme-harmony 1.0.0-beta.1 → 1.0.0-beta.100

package/README.md

@@ -5,4 +5,15 @@ The Harmony theme is the default theme for NodeBB for versions spanning v3.0.0 o
 
 ## Issues
 
-Issues are tracked in [the main project issue tracker](https://github.com/NodeBB/NodeBB/issues?q=is%3Aopen+is%3Aissue+label%3Athemes).
+Issues are tracked in [the main project issue tracker](https://github.com/NodeBB/NodeBB/issues?q=is%3Aopen+is%3Aissue+label%3Athemes).
+
+## Screenshots
+
+### Categories
+<img height="450" src="screenshots/categories.png">
+
+### Recent
+<img height="450" src="screenshots/recent.png">
+
+### Topic
+<img height="450" src="screenshots/topic.png">

package/languages/en-GB/harmony.json

@@ -1,9 +1,13 @@
 {
 	"skins": "Skins",
 	"collapse": "Collapse",
+	"expand": "Expand",
 	"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,11 +78,26 @@ 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',
 			location: 'sidebar-footer',
 		},
+		{
+			name: 'Brand Header',
+			template: 'global',
+			location: 'brand-header',
+		},
 	]);
 
 	return areas;
@@ -92,15 +108,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;
 };
@@ -124,25 +143,6 @@ library.saveUserSettings = async function (hookData) {
 	return hookData;
 };
 
-library.addUserToTopic = async function (hookData) {
-	const { enableQuickReply } = await loadThemeConfig(hookData.req.uid);
-	if (enableQuickReply === 'on') {
-		if (hookData.req.user) {
-			const userData = await user.getUserData(hookData.req.uid);
-			hookData.templateData.loggedInUser = userData;
-		} else {
-			hookData.templateData.loggedInUser = {
-				uid: 0,
-				username: '[[global:guest]]',
-				picture: user.getDefaultAvatar(),
-				'icon:text': '?',
-				'icon:bgColor': '#aaa',
-			};
-		}
-	}
-	return hookData;
-};
-
 library.filterMiddlewareRenderHeader = async function (hookData) {
 	const userSettings = await user.getSettings(hookData.req.uid);
 

package/package.json

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

package/plugin.json

@@ -8,7 +8,6 @@
 		{ "hook": "filter:settings.get", "method": "getAdminSettings"},
 		{ "hook": "filter:user.saveSettings", "method": "saveUserSettings" },
 		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" },
-		{ "hook": "filter:topic.build", "method": "addUserToTopic" },
 		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" },
 		{ "hook": "filter:middleware.render", "method": "removeFinalBreadcrumb" }
 	],

package/public/harmony.js

@@ -1,9 +1,13 @@
 'use strict';
 
 $(document).ready(function () {
+	setupNProgress();
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
+	handleMobileNavigator();
+	setupNavTooltips();
+	fixPlaceholders();
 
 	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
 		const skin = $(this).attr('data-value');
@@ -35,7 +39,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');
@@ -47,6 +51,70 @@ $(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"]');
+			const $body = $('body');
+			const $window = $(window);
+			$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;
+			let newPostsLoaded = false;
+
+			function onWindowScroll() {
+				const st = $window.scrollTop();
+				if (newPostsLoaded) {
+					newPostsLoaded = false;
+					lastScrollTop = st;
+					return;
+				}
+				if (st !== lastScrollTop && !navigator.scrollActive) {
+					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() {
+				$window.off('scroll', delayedScroll);
+				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', function () {
+				newPostsLoaded = true;
+				setTimeout(enableAutohide, 250);
+			});
+			hooks.on('action:ajaxify.end', function () {
+				$window.off('scroll', delayedScroll);
+				$body.removeClass('chat-loaded');
+				bottomBar.css({ bottom: 0 });
+				setTimeout(enableAutohide, 250);
+			});
+			hooks.on('action:chat.loaded', function () {
+				$body.toggleClass('chat-loaded', !!(ajaxify.data.template.chats && ajaxify.data.roomId));
 			});
 		});
 	}
@@ -55,56 +123,44 @@ $(document).ready(function () {
 		$('[component="sidebar/search"]').on('shown.bs.dropdown', function () {
 			$(this).find('[component="search/fields"] input[name="query"]').trigger('focus');
 		});
-
-		function resizeResults(hookData) {
-			if (hookData && hookData.data && !hookData.data.posts.length) {
-				$('.bottombar .quick-search-results').css({ height: 'initial' });
-				return;
-			}
-			const dropdown = $('.bottombar .search-dropdown');
-			const padY = dropdown.innerHeight() - dropdown.height();
-			const input = dropdown.find('.input-container').outerHeight(true);
-			const showMore = dropdown.find('.show-more-container').outerHeight(true);
-			const newHeight = Math.max(
-				150,
-				$(window).height() - (input + (showMore || 0) + (padY * 2) + 30)
-			);
-			$('.bottombar .quick-search-results').height(newHeight);
-		}
-		require(['hooks'], function (hooks) {
-			$(window).on('resize', resizeResults);
-			hooks.on('action:search.quick.complete', resizeResults);
-		});
 	}
 
 	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 () {
@@ -112,8 +168,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;
 			});
 
@@ -122,4 +183,77 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+
+	function setupNProgress() {
+		require(['nprogress'], function (NProgress) {
+			window.nprogress = NProgress;
+			if (NProgress) {
+				$(window).on('action:ajaxify.start', function () {
+					NProgress.set(0.7);
+				});
+
+				$(window).on('action:ajaxify.end', function () {
+					NProgress.done(true);
+				});
+			}
+		});
+	}
+
+	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');
+		});
+	}
+
+	function fixPlaceholders() {
+		if (!config.loggedIn) {
+			return;
+		}
+		['notifications', 'chat'].forEach((type) => {
+			const countEl = document.querySelector(`[component="${type}/count"]`);
+			if (!countEl) {
+				return;
+			}
+			const count = parseInt(countEl.innerText, 10);
+			if (count > 1) {
+				const listEls = document.querySelectorAll(`[component="${type}/list"]`);
+				listEls.forEach((listEl) => {
+					const placeholder = listEl.querySelector('li');
+
+					for (let x = 0; x < count - 1; x++) {
+						const cloneEl = placeholder.cloneNode(true);
+						listEl.insertBefore(cloneEl, placeholder);
+					}
+				});
+			}
+		});
+	}
 });

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/account.scss

@@ -1,4 +1,4 @@
-.page-user #panel {
+.page-user.page-status-200 #panel {
 	margin-top: 0px!important;
 }
 .account {

package/scss/chats.scss

@@ -3,52 +3,85 @@
 .page-user-chats #content {
 	max-width: 100%;
 }
+
 body.page-user-chats {
 	overflow: hidden;
+	[data-widget-area="footer"] {
+		display: none;
+	}
+	height: 100%;
+	> .layout-container {
+		height: 100%;
+		> #panel {
+			height: 100%;
+			> .container {
+				height: 100%;
+			}
+		}
+	}
+}
+
+[component="chat/recent"] {
+	.active .chat-room-btn {
+		background-color: $btn-ghost-hover-color;
+	}
+}
+
+[component="chat/nav-wrapper"] {
+	width: 300px;
 }
 
-.expanded-chat, .chat-modal {
+.expanded-chat {
 	// no taskbar so hide minimize button
 	[data-action="minimize"] {
 		display: none!important;
 	}
-	.chat-content .chat-message {
-		.message-body-wrapper .controls {
-			[data-action="restore"] {
-				display: none;
+
+	.chat-content {
+		@include fix-lists;
+
+		.chat-message {
+			.message-body-wrapper .controls {
+				[data-action="restore"] {
+					display: none;
+				}
 			}
 		}
-	}
-	.chat-content .chat-message.deleted {
-		.message-body-wrapper .controls {
-			[data-action] {
-				display: none;
-			}
+		.chat-message.deleted {
+			.message-body-wrapper .controls {
+				[data-action] {
+					display: none;
+				}
 
-			[data-action="restore"] {
-				display: inline;
+				[data-action="restore"] {
+					display: inline;
+				}
 			}
-		}
 
-		.message-body {
-			opacity: 0.3;
+			.message-body {
+				opacity: 0.3;
+			}
 		}
 	}
 }
 
 /* Mobile handling of chat page */
 @include media-breakpoint-down(md) {
-	.page-user-chats {
-		.chats-full {
-			padding-bottom: 8rem!important;
-		}
+	[component="chat/nav-wrapper"] {
+		width: 100%;
+	}
 
-		[component="chat/nav-wrapper"][data-loaded="1"] {
-			display: none!important;
-		}
 
-		[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
-			display: none!important;
-		}
+	.page-user-chats.chat-loaded .bottombar {
+		display: none!important;
 	}
+
+	[component="chat/nav-wrapper"][data-loaded="1"] {
+		display: none!important;
+	}
+
+	[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
+		display: none!important;
+	}
+
 }

package/scss/common.scss

@@ -1,27 +1,88 @@
 
 body {
 	overflow-y: scroll;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
 }
+
+// fixes chrome font boosting :/ https://stackoverflow.com/questions/13430897/how-to-override-font-boosting-in-mobile-chrome
+body * {
+	max-height:1000000px;
+	text-size-adjust: none;
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
+}
+
+hr {
+    border-top-color: $border-color;
+	opacity: 1;
+}
+
 .ff-base {
-	font-family: $font-family-base;
+	font-family: $font-family-base !important;
+}
+.ff-sans {
+	font-family: $font-family-sans-serif !important;
 }
 .ff-secondary {
 	font-family: $font-family-secondary;
 }
-.tracking-tight { letter-spacing: -0.025em; }
+.tracking-tight { letter-spacing: -0.02em; }
+
+.caret {
+	&::after {
+		border: none;
+		font-family: "FontAwesome";
+		content: "\f078";
+		color: tint-color($primary, 40%);
+	}
+}
+
+.placeholder-wave {
+	opacity: 0.5;
+}
+
+.bg-card-cap {
+	--bs-bg-opacity: 1;
+	background-color: $card-cap-bg!important;
+}
 
-.text-md { font-size: 1.125rem!important; } // 18px
-.text-sm { font-size: 0.875rem!important; } // 14px
-.text-xs { font-size: 0.75rem!important; } // 12px
+blockquote {
+	background-color: $light;
+	font-style: normal;
+	border-left: 2px solid $border-color;
+	padding: 1rem;
+	p:last-child {
+		margin-bottom: 0;
+	}
+}
 
-.btn-link:hover {
-	text-decoration: none;
+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 {
 	position: sticky;
 	z-index: 3;
-	top: calc($spacer * 0.5);
+	top: 0;
+	padding: 0.25rem 0;
 	background-color: $body-bg;
 }
 // quartz doesn't need body-bg for tool background
@@ -35,6 +96,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 +116,10 @@ body {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-	$hover-color: mix($light, $dark, 90);
+	font-family: $font-family-secondary;
 	cursor: pointer;
 	&:hover, &.active {
-		background-color: $hover-color;
+		background-color: $btn-ghost-hover-color;
 		text-decoration: none;
 	}
 }
@@ -59,12 +127,18 @@ body {
 .btn-ghost {
 	@include btn-ghost-base();
 	line-height: 1.5rem;
+	> i {
+		line-height: 1.5rem;
+	}
 }
 
 .btn-ghost-sm {
 	@include btn-ghost-base();
 	font-size: 0.875rem;
 	line-height: 1.25rem;
+	> i {
+		line-height: 1.25rem;
+	}
 }
 
 .btn-outline {

package/scss/flags.scss

@@ -0,0 +1,5 @@
+.page-flags {
+	[component="flag/history"] {
+		max-height: 30rem;
+	}
+}

package/scss/groups.scss

@@ -3,8 +3,8 @@
 }
 
 .group-hover-bg {
-	$hover-color: mix($light, $dark, 97);
-	$border-color: mix($light, $dark, 90);
+	$hover-color: mix($light, $dark, 97%);
+	$border-color: mix($light, $dark, 90%);
 	.card-body {
 		border-color: $border-color!important;
 	}