nodebb-theme-harmony 1.0.0 → 1.0.1

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,14 @@
 {
 	"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.mobileTopicTeasers": "Show topic teasers on mobile",
+	"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

@@ -1,5 +1,6 @@
 'use strict';
 
+const nconf = require.main.require('nconf');
 const meta = require.main.require('./src/meta');
 const _ = require.main.require('lodash');
 const user = require.main.require('./src/user');
@@ -11,7 +12,9 @@ const library = module.exports;
 const defaults = {
 	enableQuickReply: 'on',
 	centerHeaderElements: 'off',
+	mobileTopicTeasers: 'off',
 	stickyToolbar: 'on',
+	autohideBottombar: 'off',
 	openSidebars: 'off',
 };
 
@@ -27,8 +30,26 @@ library.init = async function (params) {
 		middleware.canViewUsers,
 		middleware.checkAccountPermissions,
 	], controllers.renderThemeSettings);
+
+	if (nconf.get('isPrimary') && process.env.NODE_ENV === 'production') {
+		setTimeout(buildSkins, 0);
+	}
 };
 
+async function buildSkins() {
+	try {
+		const plugins = require.main.require('./src/plugins');
+		await plugins.prepareForBuild(['client side styles']);
+		for (const skin of meta.css.supportedSkins) {
+			// eslint-disable-next-line no-await-in-loop
+			await meta.css.buildBundle(`client-${skin}`, true);
+		}
+		require.main.require('./src/meta/minifier').killAll();
+	} catch (err) {
+		console.error(err.stack);
+	}
+}
+
 library.addAdminNavigation = async function (header) {
 	header.plugins.push({
 		route: '/plugins/harmony',
@@ -77,11 +98,36 @@ 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',
+		},
+		{
+			name: 'About me (before)',
+			template: 'account/profile.tpl',
+			location: 'profile-aboutme-before',
+		},
+		{
+			name: 'About me (after)',
+			template: 'account/profile.tpl',
+			location: 'profile-aboutme-after',
+		},
 	]);
 
 	return areas;
@@ -92,15 +138,19 @@ 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.mobileTopicTeasers = config.mobileTopicTeasers === '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 +174,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",
+  "version": "1.0.1",
   "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,26 +1,31 @@
 'use strict';
 
 $(document).ready(function () {
+	setupSkinSwitcher();
 	setupNProgress();
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
+	handleMobileNavigator();
+	setupNavTooltips();
+	fixPlaceholders();
 
-	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
-		const skin = $(this).attr('data-value');
-		$('[component="skinSwitcher"] .dropdown-item .fa-check').addClass('invisible');
-		$(this).find('.fa-check').removeClass('invisible');
-		require(['forum/account/settings'], function (accountSettings) {
-			$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').addClass('fa-fade');
-			accountSettings.changeSkin(skin);
+	function setupSkinSwitcher() {
+		$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
+			const skin = $(this).attr('data-value');
+			$('[component="skinSwitcher"] .dropdown-item .fa-check').addClass('invisible');
+			$(this).find('.fa-check').removeClass('invisible');
+			require(['forum/account/settings', 'hooks'], function (accountSettings, hooks) {
+				hooks.one('action:skin.change', function () {
+					$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').removeClass('fa-fade');
+				});
+				$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').addClass('fa-fade');
+				accountSettings.changeSkin(skin);
+			});
 		});
-	});
+	}
 
 	require(['hooks'], function (hooks) {
-		hooks.on('action:skin.change', function () {
-			$('[component="skinSwitcher"] [component="skinSwitcher/icon"]').removeClass('fa-fade');
-		});
-
 		$(window).on('action:composer.resize action:sidebar.toggle', function () {
 			$('[component="composer"]').css({
 				left: $('.sidebar-left').outerWidth(true),
@@ -36,7 +41,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,6 +53,73 @@ $(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');
+			});
+			function isSearchVisible() {
+				return !!$('[component="bottombar"] [component="sidebar/search"] .search-dropdown.show').length;
+			}
+
+			let lastScrollTop = 0;
+			let newPostsLoaded = false;
+
+			function onWindowScroll() {
+				const st = $window.scrollTop();
+				if (newPostsLoaded) {
+					newPostsLoaded = false;
+					lastScrollTop = st;
+					return;
+				}
+				if (st !== lastScrollTop && !navigator.scrollActive && !isSearchVisible()) {
+					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));
 			});
 		});
 	}
@@ -56,56 +128,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 () {
@@ -113,8 +173,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;
 			});
 
@@ -123,6 +188,7 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+
 	function setupNProgress() {
 		require(['nprogress'], function (NProgress) {
 			window.nprogress = NProgress;
@@ -137,4 +203,62 @@ $(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');
+		});
+	}
+
+	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,107 @@
 .page-user-chats #content {
 	max-width: 100%;
 }
+
+.stacked-avatars {
+	width: 32px;
+	height: 32px;
+	span:first-child {
+		top: 0;
+		left: 8px;
+	}
+	span:last-child {
+		left: 0;
+		top: 8px;
+	}
+}
+
 body.page-user-chats {
 	overflow: hidden;
+	[data-widget-area="footer"] {
+		display: none;
+	}
+	height: 100%;
+	> .layout-container {
+		height: 100%;
+		> #panel {
+			height: 100%;
+			> .container {
+				height: 100%;
+			}
+		}
+	}
 }
 
-.expanded-chat, .chat-modal {
+[component="chat/recent"] {
+	.active .chat-room-btn {
+		background-color: $btn-ghost-hover-color;
+	}
+}
+
+[component="chat/nav-wrapper"] {
+	width: 300px;
+}
+
+.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(lg) {
+	.page-user-chats.chat-loaded  {
+		padding-bottom: 4.75rem;
+	}
+}
+
 @include media-breakpoint-down(md) {
-	.page-user-chats {
-		.chats-full {
-			padding-bottom: 8rem!important;
-		}
+	.page-user-chats.chat-loaded  {
+		padding-bottom: initial;
+	}
+	[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;
+	}
+
 }