nodebb-theme-harmony 0.0.9 → 0.0.10

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.10",
   "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/templates/account/edit.tpl

@@ -1,137 +1,142 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<!-- IF sso.length --><div><!-- ENDIF sso.length -->
-		<div class="row">
-			<div class="col-md-3 col-sm-4">
-				<div class="account-picture-block text-center">
-					<div class="row mb-3">
-						<div class="col-12 hidden-xs">
-							<!-- IF picture -->
-							<img id="user-current-picture" class="avatar avatar-rounded" style="--avatar-size: 128px;" src="{picture}" />
-							<!-- ELSE -->
-							<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;">{icon:text}</div>
-							<!-- ENDIF picture -->
-						</div>
-					</div>
-					<ul class="list-group mb-3">
-						<!-- IF allowProfilePicture -->
-						<a id="changePictureBtn" href="#" class="list-group-item">[[user:change_picture]]</a>
-						<!-- ENDIF allowProfilePicture -->
-						<!-- IF !username:disableEdit -->
-						<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item">[[user:change_username]]</a>
-						<!-- ENDIF !username:disableEdit -->
-						<!-- IF !email:disableEdit -->
-						<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item">[[user:change_email]]</a>
-						<!-- ENDIF !email:disableEdit -->
-						<!-- IF canChangePassword -->
-						<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item">[[user:change_password]]</a>
-						<!-- ENDIF canChangePassword -->
-						{{{each editButtons}}}
-						<a href="{config.relative_path}{editButtons.link}" class="list-group-item">{editButtons.text}</a>
-						{{{end}}}
-					</ul>
-
-					<!-- IF config.requireEmailConfirmation -->
-					<!-- IF email -->
-					<!-- IF isSelf -->
-					<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
-					<!-- ENDIF isSelf -->
-					<!-- ENDIF email -->
-					<!-- ENDIF config.requireEmailConfirmation -->
-
-					<!-- IF allowAccountDelete -->
-					<!-- IF isSelf -->
-					<a id="deleteAccountBtn" href="#" class="btn btn-danger">[[user:delete_account]]</a><br/><br/>
-					<!-- ENDIF isSelf -->
-					<!-- ENDIF allowAccountDelete -->
 
-				</div>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			<div class="d-flex justify-content-end mb-3 sticky-lg-top" style="top: 1rem;">
+				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>
 			</div>
+			<div class="row">
+				<div class="col-xl-2 col-12">
+					<div class="account-picture-block text-center">
+						<div class="row mb-3">
+							<div class="col-12 hidden-xs">
+								<!-- IF picture -->
+								<img id="user-current-picture" class="avatar avatar-rounded" style="--avatar-size: 128px;" src="{picture}" />
+								<!-- ELSE -->
+								<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 128px;">{icon:text}</div>
+								<!-- ENDIF picture -->
+							</div>
+						</div>
+						<ul class="list-group mb-3 text-sm text-nowrap">
+							<!-- IF allowProfilePicture -->
+							<a id="changePictureBtn" href="#" class="list-group-item px-1 text-decoration-none">[[user:change_picture]]</a>
+							<!-- ENDIF allowProfilePicture -->
+							<!-- IF !username:disableEdit -->
+							<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item px-1 text-decoration-none">[[user:change_username]]</a>
+							<!-- ENDIF !username:disableEdit -->
+							<!-- IF !email:disableEdit -->
+							<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item px-1 text-decoration-none">[[user:change_email]]</a>
+							<!-- ENDIF !email:disableEdit -->
+							<!-- IF canChangePassword -->
+							<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item px-1 text-decoration-none">[[user:change_password]]</a>
+							<!-- ENDIF canChangePassword -->
+							{{{each editButtons}}}
+							<a href="{config.relative_path}{editButtons.link}" class="list-group-item px-1 text-decoration-none">{editButtons.text}</a>
+							{{{end}}}
+						</ul>
 
-			<div class="<!-- IF !sso.length -->col-md-9 col-sm-8<!-- ELSE -->col-md-5 col-sm-4<!-- ENDIF !sso.length -->">
-				<form role="form" component="profile/edit/form">
-					<div class="mb-2">
-						<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
-						<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
-					</div>
-					<!-- IF allowWebsite -->
-					<div class="mb-2">
-						<label class="form-label fw-bold" for="website">[[user:website]]</label>
-						<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
-					</div>
-					<!-- ENDIF allowWebsite -->
+						<!-- IF config.requireEmailConfirmation -->
+						<!-- IF email -->
+						<!-- IF isSelf -->
+						<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
+						<!-- ENDIF isSelf -->
+						<!-- ENDIF email -->
+						<!-- ENDIF config.requireEmailConfirmation -->
 
-					<div class="mb-2">
-						<label class="form-label fw-bold" for="location">[[user:location]]</label>
-						<input class="form-control" type="text" id="location" name="location" placeholder="[[user:location]]" value="{location}">
-					</div>
+						<!-- IF allowAccountDelete -->
+						<!-- IF isSelf -->
+						<a id="deleteAccountBtn" href="#" class="btn btn-danger">[[user:delete_account]]</a><br/><br/>
+						<!-- ENDIF isSelf -->
+						<!-- ENDIF allowAccountDelete -->
 
-					<div class="mb-2">
-						<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
-						<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
 					</div>
+				</div>
 
-					<div class="mb-2">
-						<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
+				<div class="col-xl-5 col-12">
+					<form role="form" component="profile/edit/form">
+						<div class="mb-2">
+							<label class="form-label fw-bold" for="fullname">[[user:fullname]]</label>
+							<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
+						</div>
+						<!-- IF allowWebsite -->
+						<div class="mb-2">
+							<label class="form-label fw-bold" for="website">[[user:website]]</label>
+							<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
+						</div>
+						<!-- ENDIF allowWebsite -->
 
-						<select class="form-select" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
-							<option value="">[[user:no-group-title]]</option>
-							{{{each groups}}}
-							<!-- IF groups.userTitleEnabled -->
-							<option value="{groups.displayName}" <!-- IF groups.selected -->selected<!-- ENDIF groups.selected -->>{groups.userTitle}</option>
-							<!-- ENDIF groups.userTitleEnabled -->
-							{{{end}}}
-						</select>
-						<!-- IF allowMultipleBadges -->
-						<span>[[user:group-order-help]]</span>
-						<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
-						<!-- ENDIF -->
-					</div>
+						<div class="mb-2">
+							<label class="form-label fw-bold" for="location">[[user:location]]</label>
+							<input class="form-control" type="text" id="location" name="location" placeholder="[[user:location]]" value="{location}">
+						</div>
 
-					<!-- IF allowAboutMe -->
-					<div class="mb-2">
-						<label class="form-label fw-bold" for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
-						<textarea class="form-control" id="aboutme" name="aboutme" rows="5">{aboutme}</textarea>
-					</div>
-					<!-- ENDIF allowAboutMe -->
+						<div class="mb-2">
+							<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
+							<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
+						</div>
 
-					<!-- IF allowSignature -->
-					<!-- IF !disableSignatures -->
-					<div class="mb-2">
-						<label class="form-label fw-bold" for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
-						<textarea class="form-control" id="signature" name="signature" rows="5">{signature}</textarea>
-					</div>
-					<!-- ENDIF !disableSignatures -->
-					<!-- ENDIF allowSignature -->
+						<div class="mb-2">
+							<label class="form-label fw-bold" for="groupTitle">[[user:grouptitle]]</label>
 
-					<a id="submitBtn" href="#" class="btn btn-primary">[[global:save_changes]]</a>
-				</form>
+							<select class="form-select" id="groupTitle" name="groupTitle" <!-- IF allowMultipleBadges --> size="{groupSelectSize}" multiple<!-- ENDIF allowMultipleBadges -->>
+								<option value="">[[user:no-group-title]]</option>
+								{{{each groups}}}
+								<!-- IF groups.userTitleEnabled -->
+								<option value="{groups.displayName}" <!-- IF groups.selected -->selected<!-- ENDIF groups.selected -->>{groups.userTitle}</option>
+								<!-- ENDIF groups.userTitleEnabled -->
+								{{{end}}}
+							</select>
+							<!-- IF allowMultipleBadges -->
+							<span>[[user:group-order-help]]</span>
+							<i role="button" component="group/order/up" class="fa fa-chevron-up"></i> <i role="button" component="group/order/down" class="fa fa-chevron-down"></i>
+							<!-- ENDIF -->
+						</div>
 
-				<hr class="visible-xs visible-sm"/>
-			</div>
+						<!-- IF allowAboutMe -->
+						<div class="mb-2">
+							<label class="form-label fw-bold" for="aboutme">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
+							<textarea class="form-control" id="aboutme" name="aboutme" rows="5">{aboutme}</textarea>
+						</div>
+						<!-- ENDIF allowAboutMe -->
 
-			<!-- IF sso.length -->
-			<div class="col-md-4 col-sm-4">
-				<label>[[user:sso.title]]</label>
-				<div class="list-group">
-					{{{each sso}}}
-					<div class="list-group-item">
-						<!-- IF ../deauthUrl -->
-						<a data-component="{../component}" class="btn btn-outline-secondary btn-sm float-end" href="{../deauthUrl}">[[user:sso.dissociate]]</a>
-						<!-- END -->
-						<a data-component="{../component}" href="{../url}" target="<!-- IF ../associated -->_blank<!-- ELSE -->_top<!-- ENDIF ../associated -->">
-							<!-- IF ../icon --><i class="fa {../icon}"></i><!-- ENDIF ../icon -->
-							<!-- IF ../associated -->[[user:sso.associated]]<!-- ELSE -->[[user:sso.not-associated]]<!-- ENDIF ../associated -->
-							{../name}
-						</a>
+						<!-- IF allowSignature -->
+						<!-- IF !disableSignatures -->
+						<div class="mb-2">
+							<label class="form-label fw-bold" for="signature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
+							<textarea class="form-control" id="signature" name="signature" rows="5">{signature}</textarea>
+						</div>
+						<!-- ENDIF !disableSignatures -->
+						<!-- ENDIF allowSignature -->
+					</form>
+
+					<hr class="visible-xs visible-sm"/>
+				</div>
+
+				{{{ if sso.length }}}
+				<div class="col-xl-5 col-12">
+					<label class="form-label text-sm fw-semibold">[[user:sso.title]]</label>
+					<div class="list-group">
+						{{{each sso}}}
+						<div class="list-group-item d-flex justify-content-between">
+							<a class="text-sm text-reset text-decoration-none" data-component="{../component}" href="{../url}" target="<!-- IF ../associated -->_blank<!-- ELSE -->_top<!-- ENDIF ../associated -->">
+								<!-- IF ../icon --><i class="fa {../icon}"></i><!-- ENDIF ../icon -->
+								<!-- IF ../associated -->[[user:sso.associated]]<!-- ELSE -->[[user:sso.not-associated]]<!-- ENDIF ../associated -->
+								{../name}
+							</a>
+							<!-- IF ../deauthUrl -->
+							<a data-component="{../component}" class="btn btn-outline-secondary btn-sm" href="{../deauthUrl}">[[user:sso.dissociate]]</a>
+							<!-- END -->
+						</div>
+						{{{end}}}
 					</div>
-					{{{end}}}
 				</div>
+				{{{ end }}}
 			</div>
-			<!-- ENDIF sso.length -->
 		</div>
-	<!-- IF sso.length --></div><!-- ENDIF sso.length -->
+	</div>
 </div>
 
+