nodebb-theme-harmony 0.0.9 → 0.0.11

package/languages/en-GB/harmony.json

@@ -1,5 +1,9 @@
 {
 	"skins": "Skins",
 	"collapse": "Collapse",
-	"login-register-to-search": "Login or register to search."
+	"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"
 }

package/lib/controllers.js

@@ -2,6 +2,21 @@
 
 const Controllers = module.exports;
 
+const accountHelpers = require.main.require('./src/controllers/accounts/helpers');
+const helpers = require.main.require('./src/controllers/helpers');
+
 Controllers.renderAdminPage = (req, res) => {
 	res.render('admin/plugins/harmony', {});
 };
+
+Controllers.renderThemeSettings = async (req, res, next) => {
+	const userData = await accountHelpers.getUserDataByUserSlug(req.params.userslug, req.uid, req.query);
+	if (!userData) {
+		return next();
+	}
+
+	userData.title = '[[harmony:settings.title]]';
+	userData.breadcrumbs = helpers.buildBreadcrumbs([{ text: userData.username, url: `/user/${userData.userslug}` }, { text: '[[harmony:settings.title]]' }]);
+
+	res.render('account/theme', userData);
+};

package/library.js

@@ -8,11 +8,24 @@ const controllers = require('./lib/controllers');
 
 const library = module.exports;
 
+const defaults = {
+	enableQuickReply: 'on',
+	centerHeaderElements: 'off',
+	stickyToolbar: 'on',
+};
+
 library.init = async function (params) {
-	const { router } = params;
+	const { router, middleware } = params;
 	const routeHelpers = require.main.require('./src/routes/helpers');
 
 	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/harmony', [], controllers.renderAdminPage);
+
+	routeHelpers.setupPageRoute(router, '/user/:userslug/theme', [
+		middleware.exposeUid,
+		middleware.ensureLoggedIn,
+		middleware.canViewUsers,
+		middleware.checkAccountPermissions,
+	], controllers.renderThemeSettings);
 };
 
 library.addAdminNavigation = async function (header) {
@@ -24,6 +37,24 @@ library.addAdminNavigation = async function (header) {
 	return header;
 };
 
+library.addProfileItem = async (data) => {
+	data.links.push({
+		id: 'theme',
+		route: 'theme',
+		icon: 'fa-paint-brush',
+		name: '[[harmony:settings.title]]',
+		visibility: {
+			self: true,
+			other: false,
+			moderator: false,
+			globalMod: false,
+			admin: false,
+		},
+	});
+
+	return data;
+};
+
 library.defineWidgetAreas = async function (areas) {
 	const locations = ['header', 'sidebar', 'footer'];
 	const templates = [
@@ -55,18 +86,44 @@ library.defineWidgetAreas = async function (areas) {
 	return areas;
 };
 
+async function loadThemeConfig(uid) {
+	const [themeConfig, userConfig] = await Promise.all([
+		meta.settings.get('harmony'),
+		user.getSettings(uid),
+	]);
+	return { ...defaults, ...themeConfig, ...userConfig };
+}
+
 library.getThemeConfig = async function (config) {
-	const { enableQuickReply, centerHeaderElements } = await meta.settings.get('harmony');
-	config.enableQuickReply = enableQuickReply === 'on';
-	config.centerHeaderElements = centerHeaderElements === 'on';
+	const themeConfig = await loadThemeConfig(config.uid);
+	config.enableQuickReply = themeConfig.enableQuickReply === 'on';
+	config.centerHeaderElements = themeConfig.centerHeaderElements === 'on';
+	config.stickyToolbar = themeConfig.stickyToolbar === 'on';
 	return config;
 };
 
+library.getAdminSettings = async function (hookData) {
+	if (hookData.plugin === 'harmony') {
+		hookData.values = {
+			...defaults,
+			...hookData.values,
+		};
+	}
+	return hookData;
+};
+
+library.saveUserSettings = async function (hookData) {
+	Object.keys(defaults).forEach((key) => {
+		hookData.settings[key] = hookData.data[key] || undefined;
+	});
+	return hookData;
+};
+
 library.addUserToTopic = async function (hookData) {
-	const { enableQuickReply } = await meta.settings.get('harmony');
+	const { enableQuickReply } = await loadThemeConfig(hookData.req.uid);
 	if (enableQuickReply === 'on') {
 		if (hookData.req.user) {
-			const userData = await user.getUserData(hookData.req.user.uid);
+			const userData = await user.getUserData(hookData.req.uid);
 			hookData.templateData.loggedInUser = userData;
 		} else {
 			hookData.templateData.loggedInUser = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/plugin.json

@@ -5,6 +5,9 @@
 		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
 		{ "hook": "filter:widgets.getAreas", "method": "defineWidgetAreas" },
 		{ "hook": "filter:config.get", "method": "getThemeConfig" },
+		{ "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" }
@@ -13,7 +16,8 @@
 		"public/harmony.js"
 	],
 	"modules": {
-		"../admin/plugins/harmony.js": "public/admin.js"
+		"../admin/plugins/harmony.js": "public/admin.js",
+		"../client/account/theme.js": "public/settings.js"
 	},
 	"staticDirs": {
 		"inter": "node_modules/@fontsource/inter/files",

package/public/settings.js

@@ -0,0 +1,28 @@
+'use strict';
+
+define('forum/account/theme', ['forum/account/header', 'api', 'settings', 'alerts'], function (header, api, settings, alerts) {
+	const Theme = {};
+
+	Theme.init = () => {
+		header.init();
+		Theme.setupForm();
+	};
+
+	Theme.setupForm = () => {
+		const saveEl = document.getElementById('save');
+		if (saveEl) {
+			const formEl = document.getElementById('theme-settings');
+			saveEl.addEventListener('click', async () => {
+				const themeSettings = settings.helper.serializeForm($(formEl));
+				await api.put(`/users/${app.user.uid}/settings`, {
+					settings: {
+						...themeSettings,
+					},
+				});
+				alerts.success('[[success:settings-saved]]');
+			});
+		}
+	};
+
+	return Theme;
+});

package/scss/account.scss

@@ -6,9 +6,6 @@
 	width: 100%;
 	margin-left: auto;
 	margin-right: auto;
-	.breadcrumb {
-		justify-content: start!important;
-	}
 
 	.avatar-wrapper {
 		border: 4px solid white;

package/scss/common.scss

@@ -75,3 +75,9 @@ body {
 	font-size: 0.875rem;
 	line-height: 1.25rem;
 }
+
+.flex-basis-md-200 {
+	@include media-breakpoint-up(md) {
+		flex-basis: 200px!important;
+	}
+}

package/scss/modules/bottom-sheet.scss

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

package/scss/modules/topic-navigator.scss

@@ -16,7 +16,6 @@
 			}
 
 			.meta {
-				display: none;
 				top: -8px;
 				left: calc($spacer + 8px);
 				font-size: 13px;
@@ -38,7 +37,6 @@
 			transition: $transition-base;
 
 			.meta {
-				display: none;
 				left: calc($spacer + 8px);
 				font-size: 13px;
 			}
@@ -54,8 +52,4 @@
 	[component="topic/navigator"].d-sm-flex.mt-auto + .mt-auto {
 		margin-top: 0 !important;
 	}
-
-	.handle .meta, .unread .meta {
-		display: block;
-	}
 }

package/scss/sidebar.scss

@@ -1,6 +1,6 @@
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
-	.sidebar, .bottombar {
+	nav.sidebar, .bottombar {
 		color: $secondary !important;
 		background-color: $light !important;
 	}
@@ -15,22 +15,24 @@
 .sidebar {
 	$hover-color: mix($light, $dark, 90);
 
-	&.open {
-		min-width: 200px;
-		max-width: 200px;
-		width: 200px;
+	@include media-breakpoint-up(lg) {
+		&.open {
+			min-width: 200px;
+			max-width: 200px;
+			width: 200px;
 
-		.sidebar-toggle {
-			.fa-angles-right { display: none; }
-			.fa-angles-left { display: inline-block; }
-		}
-		.visible-open { display: initial; }
-		.visible-closed { display: none; }
-		hr.visible-open { display: block; }
-		.truncate-open {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
+			.sidebar-toggle {
+				.fa-angles-right { display: none; }
+				.fa-angles-left { display: inline-block; }
+			}
+			.visible-open { display: initial; }
+			.visible-closed { display: none; }
+			hr.visible-open { display: block; }
+			.truncate-open {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
 		}
 	}
 	.visible-open {	display: none; }

package/templates/account/blocks.tpl

@@ -1,8 +1,8 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<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">

package/templates/account/categories.tpl

@@ -1,28 +1,34 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row">
-		<h3 class="fw-semibold fs-4">{title}</h3>
-		<div class="col-lg-12 mb-2">
-			<div class="btn-group bottom-sheet" component="category/watch/all">
-				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-					<span>[[user:change_all]]</span>
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu">
-					<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
-					<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-					<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
-				</ul>
+	<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;">
+			<h3 class="fw-semibold fs-5">{title}</h3>
+
+			<div class="row">
+				<div class="col-lg-12 mb-2">
+					<div class="btn-group bottom-sheet" component="category/watch/all">
+						<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
+							<span>[[user:change_all]]</span>
+							<span class="caret"></span>
+						</button>
+						<ul class="dropdown-menu">
+							<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+							<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+							<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+						</ul>
+					</div>
+				</div>
+				<div class="col-lg-12">
+					<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+						{{{each categories}}}
+						<!-- IMPORT partials/account/category-item.tpl -->
+						{{{end}}}
+					</ul>
+					<!-- IMPORT partials/paginator.tpl -->
+				</div>
 			</div>
 		</div>
-		<div class="col-lg-12">
-			<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
-				{{{each categories}}}
-				<!-- IMPORT partials/account/category-item.tpl -->
-				{{{end}}}
-			</ul>
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
 	</div>
 </div>

package/templates/account/consent.tpl

@@ -1,71 +1,17 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<h2>[[user:consent.title]]</h2>
-	<p class="lead">[[user:consent.lead]]</p>
-	<p>[[user:consent.intro]]</p>
 
-	<hr />
+	<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;">
+			<h3 class="fw-semibold fs-5">[[user:consent.title]]</h3>
 
-	<div class="row">
-		<div class="col-sm-6">
-			<!-- IF gdpr_consent -->
-			<div class="alert alert-success">
-				<i class="fa fa-check float-end fa-3x"></i>
-				[[user:consent.received]]
-			</div>
-			<!-- ELSE -->
-			<div class="alert alert-warning">
-				[[user:consent.not_received]]
-				<br /><br />
-				<div class="text-center">
-					<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
-				</div>
-			</div>
-			<!-- END -->
-			<div class="card">
-				<div class="card-body">
-					<p>[[user:consent.email_intro]]</p>
-					<!-- IF digest.enabled -->
-					<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
-					<!-- ELSE -->
-					[[user:consent.digest_off]]
-					<!-- END -->
+			<p class="lead">[[user:consent.lead]]</p>
+			<p>[[user:consent.intro]]</p>
 
-					<div class="text-center">
-						<a class="btn btn-outline-secondary" href="./settings">
-							<i class="fa fa-cog"></i>
-							[[pages:account/settings]]
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="col-sm-6">
-			<div class="card">
-				<div class="card-body">
-					<p><strong>[[user:consent.right_of_access]]</strong></p>
-					<p>[[user:consent.right_of_access_description]]</p>
-					<p><strong>[[user:consent.right_to_rectification]]</strong></p>
-					<p>[[user:consent.right_to_rectification_description]]</p>
-					<p><strong>[[user:consent.right_to_erasure]]</strong></p>
-					<p>[[user:consent.right_to_erasure_description]]</p>
-					<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
-					<p>[[user:consent.right_to_data_portability_description]]</p>
+			<hr />
 
-					<div class="btn-group-vertical d-grid">
-						<a data-action="export-profile" class="btn btn-outline-secondary">
-							<i class="fa fa-download"></i> [[user:consent.export_profile]]
-						</a>
-						<a data-action="export-posts" class="btn btn-outline-secondary">
-							<i class="fa fa-download"></i> [[user:consent.export_posts]]
-						</a>
-						<a data-action="export-uploads" class="btn btn-outline-secondary">
-							<i class="fa fa-download"></i> [[user:consent.export_uploads]]
-						</a>
-					</div>
-				</div>
-			</div>
+			<div class="row">
+		</div>
 	</div>
-</div>
+</div>

package/templates/account/edit/password.tpl

@@ -1,32 +1,37 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<form class="edit-form">
-		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+	<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;">
+			<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_password]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
-		<!-- IF isSelf -->
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
-			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-		</div>
-		<!-- ENDIF isSelf -->
+			<form class="edit-form">
+				<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputNewPassword">[[user:new_password]]</label>
-			<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
-			<span class="form-feedback" id="password-notify"></span>
-		</div>
+				{{{ if isSelf }}}
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current_password]]</label>
+					<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+				</div>
+				{{{ end }}}
 
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
-			<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
-			<span class="form-feedback" id="password-confirm-notify"></span>
-		</div>
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-xm" for="inputNewPassword">[[user:new_password]]</label>
+					<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+					<span class="form-feedback" id="password-notify"></span>
+				</div>
+
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-xm" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+					<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+					<span class="form-feedback" id="password-confirm-notify"></span>
+				</div>
 
-		<div class="form-actions">
-			<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
+				<div class="form-actions">
+					<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
+				</div>
+			</form>
 		</div>
-	</form>
-</div>
+	</div>
+</div>

package/templates/account/edit/username.tpl

@@ -1,28 +1,33 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<form class="form-horizontal edit-form">
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputNewUsername">[[user:username]]</label>
-			<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
-		</div>
+	<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;">
+			<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_username]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
-		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+			<form class="form-horizontal edit-form">
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-sm" for="inputNewUsername">[[user:username]]</label>
+					<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
+				</div>
 
-		<!-- IF isSelf -->
-		<div class="mb-2">
-			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
-			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-		</div>
-		<!-- ENDIF isSelf -->
+				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+
+				{{{ if isSelf }}}
+				<div class="mb-2">
+					<label class="form-label fw-semibold text-sm" for="inputCurrentPassword">[[user:current_password]]</label>
+					<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""{{{ if !hasPassword }}} disabled{{{ end }}}>
+				</div>
+				{{{ end }}}
 
-		<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+				<input type="hidden" name="uid" id="inputUID" value="{uid}" />
 
-		<br/>
-		<div class="form-actions">
-			<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
+				<br/>
+				<div class="form-actions">
+					<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
+				</div>
+			</form>
 		</div>
-	</form>
-</div>
+	</div>
+</div>