nodebb-theme-harmony 0.0.1 → 0.0.3

package/languages/en-GB/harmony.json

@@ -0,0 +1,5 @@
+{
+	"skins": "Skins",
+	"collapse": "Collapse",
+	"login-register-to-search": "Login or register to search."
+}

package/library.js

@@ -1,5 +1,9 @@
 'use strict';
 
+const meta = require.main.require('./src/meta');
+const _ = require.main.require('lodash');
+const user = require.main.require('./src/user');
+
 const controllers = require('./lib/controllers');
 
 const library = module.exports;
@@ -21,31 +25,102 @@ library.addAdminNavigation = async function (header) {
 };
 
 library.defineWidgetAreas = async function (areas) {
-	// const locations = ['header', 'sidebar', 'footer'];
-	// const templates = [
-	// 	'categories.tpl', 'category.tpl', 'topic.tpl', 'users.tpl',
-	// 	'unread.tpl', 'recent.tpl', 'popular.tpl', 'top.tpl', 'tags.tpl', 'tag.tpl',
-	// 	'login.tpl', 'register.tpl',
-	// ];
-	// function capitalizeFirst(str) {
-	// 	return str.charAt(0).toUpperCase() + str.slice(1);
-	// }
-	// templates.forEach((template) => {
-	// 	locations.forEach((location) => {
-	// 		areas.push({
-	// 			name: `${capitalizeFirst(template.split('.')[0])} ${capitalizeFirst(location)}`,
-	// 			template: template,
-	// 			location: location,
-	// 		});
-	// 	});
-	// });
-
-	// areas = areas.concat([
-	// 	{
-	// 		name: 'Account Header',
-	// 		template: 'account/profile.tpl',
-	// 		location: 'header',
-	// 	},
-	// ]);
+	const locations = ['header', 'sidebar', 'footer'];
+	const templates = [
+		'categories.tpl', 'category.tpl', 'topic.tpl', 'users.tpl',
+		'unread.tpl', 'recent.tpl', 'popular.tpl', 'top.tpl', 'tags.tpl', 'tag.tpl',
+		'login.tpl', 'register.tpl',
+	];
+	function capitalizeFirst(str) {
+		return str.charAt(0).toUpperCase() + str.slice(1);
+	}
+	templates.forEach((template) => {
+		locations.forEach((location) => {
+			areas.push({
+				name: `${capitalizeFirst(template.split('.')[0])} ${capitalizeFirst(location)}`,
+				template: template,
+				location: location,
+			});
+		});
+	});
+
+	areas = areas.concat([
+		{
+			name: 'Sidebar Footer',
+			template: 'global',
+			location: 'sidebar-footer',
+		},
+	]);
+
 	return areas;
 };
+
+library.getThemeConfig = async function (config) {
+	const { enableQuickReply, centerHeaderElements } = await meta.settings.get('harmony');
+	config.enableQuickReply = enableQuickReply === 'on';
+	config.centerHeaderElements = centerHeaderElements === 'on';
+	return config;
+};
+
+library.addUserToTopic = async function (hookData) {
+	const { enableQuickReply } = await meta.settings.get('harmony');
+	if (enableQuickReply === 'on') {
+		if (hookData.req.user) {
+			const userData = await user.getUserData(hookData.req.user.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);
+
+	const lightSkins = [
+		'default', 'cerulean', 'cosmo', 'flatly', 'journal', 'litera',
+		'lumen', 'lux', 'materia', 'minty', 'morph', 'pulse', 'quartz', 'sandstone',
+		'simplex', 'sketchy', 'spacelab', 'united', 'yeti', 'zephyr',
+	];
+	const darkSkins = [
+		'cyborg', 'darkly', 'slate', 'solar', 'superhero', 'vapor',
+	];
+	function parseSkins(skins) {
+		skins = skins.map(skin => ({
+			name: _.capitalize(skin),
+			value: skin === 'default' ? '' : skin,
+		}));
+		skins.forEach((skin) => {
+			skin.selected = skin.value === userSettings.bootswatchSkin;
+		});
+		return skins;
+	}
+
+	hookData.templateData.bootswatchSkinOptions = {
+		light: parseSkins(lightSkins),
+		dark: parseSkins(darkSkins),
+	};
+	hookData.templateData.currentBSSkin = _.capitalize(hookData.templateData.bootswatchSkin);
+	return hookData;
+};
+
+library.removeFinalBreadcrumb = async (hookData) => {
+	const { templateData } = hookData;
+	const { breadcrumbs } = templateData;
+
+	const applyTo = ['category', 'topic'];
+
+	// Remove the last breadcrumb (the current page) as it is not part of Harmony's design
+	if (applyTo.includes(hookData.templateData.template.name) && breadcrumbs && breadcrumbs.length) {
+		breadcrumbs.pop();
+	}
+
+	return hookData;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },
@@ -36,7 +36,10 @@
   "bugs": {
     "url": "https://github.com/NodeBB/nodebb-theme-harmony/issues"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@fontsource/inter": "^4.5.14",
+    "@fontsource/poppins": "^4.5.10"
+  },
   "devDependencies": {
     "eslint": "^8.0.0",
     "eslint-config-nodebb": "^0.2.0",

package/plugin.json

@@ -3,9 +3,21 @@
 	"hooks": [
 		{ "hook": "static:app.load", "method": "init" },
 		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
-		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" }
+		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" },
+		{ "hook": "filter:config.get", "method": "getThemeConfig" },
+		{ "hook": "filter:topic.build", "method": "addUserToTopic" },
+		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" },
+		{ "hook": "filter:middleware.render", "method": "removeFinalBreadcrumb" }
+	],
+	"scripts": [
+		"public/harmony.js"
 	],
 	"modules": {
 		"../admin/plugins/harmony.js": "public/admin.js"
-	}
+	},
+	"staticDirs": {
+		"inter": "node_modules/@fontsource/inter/files",
+		"poppins": "node_modules/@fontsource/poppins/files"
+	},
+	"languages": "languages"
 }

package/public/harmony.js

@@ -0,0 +1,101 @@
+'use strict';
+
+$(document).ready(function () {
+	setupMobileMenu();
+	setupSearch();
+	setupDrafts();
+
+	$('[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);
+		});
+	});
+
+	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),
+				width: $('#panel').width(),
+			});
+		});
+	});
+
+	function setupMobileMenu() {
+		$('[component="sidebar/toggle"]').on('click', function () {
+			$('.sidebar').toggleClass('open');
+			$(window).trigger('action:sidebar.toggle');
+		});
+	}
+
+	function setupSearch() {
+		$('[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) {
+			function updateBadgeCount() {
+				const count = drafts.getAvailableCount();
+				$('[component="drafts/count"]').toggleClass('hidden', count <= 0).text(count);
+			}
+
+			async function renderDraftList() {
+				const draftListEl = $('[component="drafts/list"]');
+				draftListEl.find('[data-save-id]').remove();
+
+				const draftItems = drafts.listAvailable();
+				if (!draftItems.length) {
+					draftListEl.find('.no-drafts').removeClass('hidden');
+					return;
+				}
+				const html = await app.parseAndTranslate('partials/sidebar/drafts', 'drafts', { drafts: draftItems });
+				draftListEl.find('.no-drafts').addClass('hidden');
+				draftListEl.append(html).find('.timeago').timeago();
+			}
+
+			const draftsEl = $('[component="sidebar/drafts"]');
+			draftsEl.on('shown.bs.dropdown', renderDraftList);
+
+			draftsEl.on('click', '[component="drafts/open"]', function () {
+				drafts.open($(this).attr('data-save-id'));
+			});
+
+			draftsEl.on('click', '[component="drafts/delete"]', function () {
+				drafts.removeDraft($(this).attr('data-save-id'));
+			});
+
+			$(window).on('action:composer.drafts.save', updateBadgeCount);
+			$(window).on('action:composer.drafts.remove', updateBadgeCount);
+			updateBadgeCount();
+		});
+	}
+});

package/scss/account.scss

@@ -0,0 +1,38 @@
+.page-user #panel {
+	margin-top: 0px!important;
+}
+.account {
+	margin-top: 200px;
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+	.breadcrumb {
+		justify-content: start!important;
+	}
+
+	.avatar-wrapper {
+		border: 4px solid white;
+		border-radius: 50%;
+	}
+
+	@include media-breakpoint-up(md) {
+		margin-top: 300px;
+	}
+
+	.categories {
+		[component="categories/category"] {
+			.depth-1 {
+				padding-left: 50px;
+			}
+			.depth-2 {
+				padding-left: 100px;
+			}
+			.depth-3 {
+				padding-left: 150px;
+			}
+			.depth-4 {
+				padding-left: 150px;
+			}
+		}
+	}
+}

package/scss/chats.scss

@@ -0,0 +1,72 @@
+// chats need a bit of css
+
+.page-user-chats #content {
+	max-width: 100%;
+}
+body.page-user-chats {
+	overflow: hidden;
+}
+
+/* Styles common to both full chat and chat modal */
+.chats-full, .chat-modal {
+	height: calc(100vh - var(--panel-offset) - $spacer)!important;
+}
+
+.expanded-chat, .chat-modal {
+	// 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 .chat-message.deleted {
+		.message-body-wrapper .controls {
+			[data-action] {
+				display: none;
+			}
+
+			[data-action="restore"] {
+				display: inline;
+			}
+		}
+
+		.message-body {
+			opacity: 0.3;
+		}
+	}
+}
+
+/* Mobile handling of chat page */
+@include media-breakpoint-down(sm) {
+	.page-user-chats {
+		padding-bottom: 0;
+
+		[component="chat/nav-wrapper"][data-loaded="1"] {
+			display: none!important;
+		}
+
+		[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
+			display: none!important;
+		}
+
+		[component="chat/messages"] {
+			width: calc(100vw - $grid-gutter-width);
+		}
+	}
+
+	[data-action="pop-out"] {
+		display: none!important;
+	}
+}
+
+/* Mobile handling of chat modal */
+@include media-breakpoint-down(sm) {
+	.chat-modal {
+		z-index: $zindex-popover + 10;
+	}
+}

package/scss/common.scss

@@ -0,0 +1,65 @@
+
+body {
+	overflow-y: scroll;
+}
+.ff-secondary {
+	font-family: $font-family-secondary;
+}
+.tracking-tight { letter-spacing: -0.025em; }
+
+.text-md { font-size: 1.125rem!important; } // 18px
+.text-sm { font-size: 0.875rem!important; } // 14px
+.text-xs { font-size: 0.75rem!important; } // 12px
+
+.btn-link:hover {
+	text-decoration: none;
+}
+
+.sticky-tools {
+	position: sticky;
+	z-index: 3;
+	top: calc($spacer * 0.5);
+	background-color: $body-bg;
+}
+// quartz doesn't need body-bg for tool background
+.skin-quartz .sticky-tools {
+	background-color: initial;
+}
+
+.skin-noskin {
+	.sticky-tools .btn-link {
+		color: $dark;
+	}
+}
+
+@mixin btn-ghost-base {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: ($spacer * 0.5);
+	border-radius: $border-radius-sm;
+	border-width: 1px;
+	border-color: transparent;
+	background-color: transparent;
+	padding: ($spacer * 0.25) ($spacer * 0.5);
+	text-align: left;
+	--bs-text-opacity: 1;
+	color: inherit !important;
+	$hover-color: mix($light, $dark, 90);
+	cursor: pointer;
+	&:hover, &.active {
+		background-color: $hover-color;
+		text-decoration: none;
+	}
+}
+
+.btn-ghost {
+	@include btn-ghost-base();
+	line-height: 1.5rem;
+}
+
+.btn-ghost-sm {
+	@include btn-ghost-base();
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+}

package/scss/fonts.scss

@@ -0,0 +1,17 @@
+@use "@fontsource/inter/scss/mixins" as Inter;
+@use "@fontsource/poppins/scss/mixins" as Poppins;
+
+$weights: $font-weight-light, $font-weight-normal, $font-weight-semibold, $font-weight-bold;
+
+@each $weight in $weights {
+	@include Inter.fontFace(
+		$weight: $weight,
+		$display: fallback,
+		$fontDir: "./plugins/nodebb-theme-harmony/inter"
+	);
+	@include Poppins.fontFace(
+	  $weight: $weight,
+	  $display: fallback,
+	  $fontDir: "./plugins/nodebb-theme-harmony/poppins"
+	);
+}

package/scss/groups.scss

@@ -0,0 +1,30 @@
+.template-groups-details #panel {
+	margin-top: 0px!important;
+}
+
+.group-hover-bg {
+	$hover-color: mix($light, $dark, 97);
+	$border-color: mix($light, $dark, 90);
+	.card-body {
+		border-color: $border-color!important;
+	}
+	&:hover {
+		background-color: $hover-color;
+	}
+}
+
+.groups.details {
+	margin-top: 200px;
+
+	[component="groups/members"] {
+		tbody {
+			max-height: 500px;
+			display: block;
+			overflow-y: auto;
+		}
+	}
+
+	@include media-breakpoint-up(md) {
+		margin-top: 300px;
+	}
+}

package/scss/harmony.scss

@@ -1,3 +1,23 @@
-// @import "variables";
-// @import "style";
-// @import "mixins";
+@import "fonts";
+@import "mixins";
+@import "common";
+
+@import "header";
+@import "topic";
+@import "chats";
+@import "sidebar";
+@import "status";
+@import "account";
+@import "groups";
+@import "modals";
+
+@import "modules/breadcrumbs";
+@import "modules/tags";
+@import "modules/user-menu";
+@import "modules/bottom-sheet";
+@import "modules/topic-navigator";
+@import "modules/composer";
+@import "modules/topics-list";
+@import "modules/cover";
+
+@import "skins";

package/scss/header.scss

@@ -0,0 +1,16 @@
+// hide brand/title on user and group details pages so it doesnt break covers
+.page-user, .template-groups-details {
+	.brand-container {
+		display: none;
+	}
+}
+[component="brand/wrapper"] {
+	&:hover {
+		background-color: $card-cap-bg;
+	}
+}
+
+[component="brand/logo"] {
+	max-height: 48px;
+	width: auto;
+}