nodebb-theme-persona 11.3.40 → 11.4.2

package/languages/en-GB/persona.json

@@ -1,3 +1,10 @@
-{
-    "mobile-menu-side": "Switch which side each mobile menu is on"
+{
+    "settings.title": "Theme settings",
+    "settings.intro": "You can customise your theme settings here. Settings are stored on a per-device basis, so you are able to have different settings on different devices (phone, tablet, desktop, etc.)",
+    "settings.mobile-menu-side": "Switch which side each mobile menu is on",
+    "settings.autoHidingNavbar": "Automatically hide the navbar on scroll",
+    "settings.autoHidingNavbar-xs": "Very small screens (e.g. phones in portrait mode)",
+    "settings.autoHidingNavbar-sm": "Smaller screens (e.g. phones, some tablets)",
+    "settings.autoHidingNavbar-md": "Medium sized screens (e.g. tablets in landscape mode)",
+    "settings.autoHidingNavbar-lg": "Larger screens (e.g. desktop computers)"
 }

package/less/account.less

@@ -32,7 +32,7 @@
 		margin-bottom: 1em;
 		background-origin: content-box;
 		width: 100%;
-		top: calc(var(--panel-offset) + @navbar-height);
+		top: calc(var(--panel-offset) - 20px);
 		position: absolute;
 		left: auto;
 		right: 0px;
@@ -166,6 +166,12 @@
 		}
 	}
 
+	@media (min-width: @screen-lg-min) {
+		.cover {
+			top: calc(var(--panel-offset) + @navbar-height);
+		}
+	}
+
 	@media (min-width: @screen-md-min) {
 		margin-top: 300px;
 

package/less/header.less

@@ -1,4 +1,8 @@
 .header, .slideout-menu {
+	.notifications .dropdown-menu {
+		padding: 0;
+	}
+
 	.notification-list {
 		overflow-x: hidden;
 		overflow-y: auto;
@@ -173,14 +177,12 @@
 	}
 
 	.notif-dropdown-link {
-		// margin-top: 1em;
 		border-top: 1px solid rgba(163, 163, 163, 0.5);
-		padding: 0 5px 0 5px;
 
 		a {
 			display: block;
 			text-align: center;
-			padding: 0.5em 0;
+			padding: 0.5em 0.5em;
 			font-weight: 600;
 		}
 	}

package/lib/controllers.js

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

package/library.js

@@ -2,15 +2,23 @@
 
 const meta = require.main.require('./src/meta');
 const user = require.main.require('./src/user');
+const translator = require.main.require('./src/translator');
+
+const controllers = require('./lib/controllers');
 
 const library = module.exports;
 
 library.init = async function (params) {
 	const { router, middleware } = params;
 	const routeHelpers = require.main.require('./src/routes/helpers');
-	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/persona', middleware, [], (req, res) => {
-		res.render('admin/plugins/persona', {});
-	});
+	routeHelpers.setupAdminPageRoute(router, '/admin/plugins/persona', middleware, [], controllers.renderAdminPage);
+
+	routeHelpers.setupPageRoute(router, '/user/:userslug/theme', middleware, [
+		middleware.exposeUid,
+		middleware.ensureLoggedIn,
+		middleware.canViewUsers,
+		middleware.checkAccountPermissions,
+	], controllers.renderThemeSettings);
 };
 
 library.addAdminNavigation = async function (header) {
@@ -22,6 +30,24 @@ library.addAdminNavigation = async function (header) {
 	return header;
 };
 
+library.addProfileItem = async (data) => {
+	data.links.push({
+		id: 'theme',
+		route: 'theme',
+		icon: 'fa-paint-brush',
+		name: await translator.translate('[[persona: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 = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "11.3.40",
+  "version": "11.4.2",
   "nbbpm": {
     "compatibility": "^1.18.0"
   },

package/plugin.json

@@ -5,10 +5,12 @@
 		{ "hook": "filter:config.get", "method": "getThemeConfig" },
 		{ "hook": "static:app.load", "method": "init" },
 		{ "hook": "filter:admin.header.build", "method": "addAdminNavigation" },
+		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" },
 		{ "hook": "filter:topic.build", "method": "addUserToTopic" }
 	],
 	"scripts": [
 		"public/persona.js",
+		"public/settings.js",
 		"public/modules/autohidingnavbar.js",
 		"public/modules/quickreply.js"
 	],

package/public/persona.js

@@ -46,7 +46,14 @@ $(document).ready(function () {
 			return;
 		}
 
-		require(['hooks'], (hooks) => {
+		require(['hooks', 'storage'], (hooks, Storage) => {
+			let preference = ['xs', 'sm'];
+
+			try {
+				preference = JSON.parse(Storage.getItem('persona:navbar:autohide')) || preference;
+			} catch (e) {
+				console.warn('[persona/settings] Unable to parse value for navbar autohiding');
+			}
 			var env = utils.findBootstrapEnvironment();
 			// if env didn't change don't destroy and recreate
 			if (env === lastBSEnv) {
@@ -58,7 +65,7 @@ $(document).ready(function () {
 			navbarEl.css('top', '');
 
 			hooks.fire('filter:persona.configureNavbarHiding', {
-				resizeEnvs: ['xs', 'sm'],
+				resizeEnvs: preference,
 			}).then(({ resizeEnvs }) => {
 				if (resizeEnvs.includes(env)) {
 					navbarEl.autoHidingNavbar({
@@ -372,33 +379,6 @@ $(document).ready(function () {
 					in: config.searchDefaultInQuick,
 				},
 			});
-
-
-			// add a checkbox in the user settings page
-			// so users can swap the sides the menus appear on
-
-			function setupSetting() {
-				if (ajaxify.data.template['account/settings'] && !document.getElementById('persona:menus:legacy-layout')) {
-					require(['translator'], function (translator) {
-						translator.translate('[[persona:mobile-menu-side]]', function (translated) {
-							$('<div class="well checkbox"><label><input type="checkbox" id="persona:menus:legacy-layout"/><strong>' + translated + '</strong></label></div>')
-								.appendTo('#content .account > .row > div:first-child')
-								.find('input')
-								.prop('checked', Storage.getItem('persona:menus:legacy-layout', 'true'))
-								.change(function (e) {
-									if (e.target.checked) {
-										Storage.setItem('persona:menus:legacy-layout', 'true');
-									} else {
-										Storage.removeItem('persona:menus:legacy-layout');
-									}
-								});
-						});
-					});
-				}
-			}
-
-			$(window).on('action:ajaxify.end', setupSetting);
-			setupSetting();
 		});
 	}
 

package/public/settings.js

@@ -0,0 +1,53 @@
+'use strict';
+
+define('forum/account/theme', ['forum/account/header', 'storage', 'settings', 'alerts'], function (header, Storage, settings, alerts) {
+	const Theme = {};
+
+	Theme.init = () => {
+		header.init();
+		Theme.setupForm();
+	};
+
+	Theme.setupForm = () => {
+		const saveEl = document.getElementById('save');
+		const formEl = document.getElementById('theme-settings');
+		const [sidebarSwapped, autohideNavbarEnvs] = [
+			!!Storage.getItem('persona:menus:legacy-layout'),
+			Storage.getItem('persona:navbar:autohide'),
+		];
+
+		document.getElementById('persona:menus:legacy-layout').checked = sidebarSwapped;
+		try {
+			const parsed = JSON.parse(autohideNavbarEnvs);
+			parsed.forEach((env) => {
+				const optionEl = document.getElementById('persona:navbar:autohide').querySelector(`option[value="${env}"]`);
+				optionEl.selected = true;
+			});
+		} catch (e) {
+			console.warn(e);
+		}
+
+		if (saveEl) {
+			saveEl.addEventListener('click', () => {
+				const themeSettings = settings.helper.serializeForm($(formEl));
+				Object.keys(themeSettings).forEach((key) => {
+					if (key === 'persona:menus:legacy-layout') {
+						if (themeSettings[key] === 'on') {
+							Storage.setItem('persona:menus:legacy-layout', 'true');
+						} else {
+							Storage.removeItem('persona:menus:legacy-layout');
+						}
+
+						return;
+					}
+
+					Storage.setItem(key, themeSettings[key]);
+				});
+
+				alerts.success('[[success:settings-saved]]');
+			});
+		}
+	};
+
+	return Theme;
+});

package/templates/account/theme.tpl

@@ -0,0 +1,27 @@
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<p>[[persona:settings.intro]]</p>
+
+	<hr />
+
+	<form id="theme-settings" role="form">
+		<div class="checkbox">
+			<label>
+				<input type="checkbox" id="persona:menus:legacy-layout" name="persona:menus:legacy-layout"> <strong>[[persona:settings.mobile-menu-side]]</strong>
+			</label>
+		</div><br />
+
+		<div class="form-group">
+			<label for="persona:navbar:autohide">[[persona:settings.autoHidingNavbar]]</label>
+			<select multiple class="form-control" name="persona:navbar:autohide" id="persona:navbar:autohide">
+				<option value="xs">[[persona:settings.autoHidingNavbar-xs]]</option>
+				<option value="sm">[[persona:settings.autoHidingNavbar-sm]]</option>
+				<option value="md">[[persona:settings.autoHidingNavbar-md]]</option>
+				<option value="lg">[[persona:settings.autoHidingNavbar-lg]]</option>
+			</select>
+		</div>
+
+		<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
+	</form>
+</div>

package/templates/footer.tpl

@@ -1,18 +1,18 @@
-		</div><!-- /.container#content -->
-	</main>
-	<!-- IF !isSpider -->
-	<div component="toaster/tray" class="alert-window">
-		<div id="reconnect-alert" class="alert alert-dismissable alert-warning clearfix hide" component="toaster/toast">
-			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
-			<p>[[global:reconnecting-message, {config.siteTitle}]]</p>
-		</div>
-	</div>
-	<!-- ENDIF !isSpider -->
-
-	<div class="hide">
-	<!-- IMPORT 500-embed.tpl -->
-	</div>
-
-	<!-- IMPORT partials/footer/js.tpl -->
-</body>
-</html>
+		</div><!-- /.container#content -->
+	</main>
+	<!-- IF !isSpider -->
+	<div component="toaster/tray" class="alert-window">
+		<div id="reconnect-alert" class="alert alert-dismissable alert-warning clearfix hide" component="toaster/toast">
+			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+			<p>[[global:reconnecting-message, {config.siteTitle}]]</p>
+		</div>
+	</div>
+	<!-- ENDIF !isSpider -->
+
+	<div class="hide">
+	<!-- IMPORT 500-embed.tpl -->
+	</div>
+
+	<!-- IMPORT partials/footer/js.tpl -->
+</body>
+</html>

package/templates/partials/chats/dropdown.tpl

@@ -1,34 +1,34 @@
-<!-- IF rooms.length -->
-{{{each rooms}}}
-<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomid="{rooms.roomId}">
-	<strong class="room-name">
-		<!-- IF !rooms.lastUser.uid -->
-		<span>[[modules:chat.no-users-in-room]]</span>
-		<!-- ELSE -->
-		<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
-		<!-- ENDIF !rooms.lastUser.uid -->
-	</strong>
-	<div class="avatar-placeholder"></div>
-	{{{each rooms.users}}}
-	<!-- IF @first -->
-	<div class="main-avatar">
-		<!-- IMPORT partials/chats/user.tpl -->
-	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
-
-	<ul class="members">
-		{{{each rooms.users}}}
-		<li>
-			<!-- IMPORT partials/chats/user.tpl -->
-		</li>
-		{{{end}}}
-	</ul>
-
-	<span class="teaser-content"><strong class="teaser-username">{rooms.teaser.user.username}:</strong> {rooms.teaser.content}</span>
-	<span class="teaser-timestamp pull-right">{rooms.teaser.timeago}</span>
-</li>
-{{{end}}}
-<!-- ELSE -->
-<li class="no_active"><a href="#">[[modules:chat.no_active]]</a></li>
+<!-- IF rooms.length -->
+{{{each rooms}}}
+<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomid="{rooms.roomId}">
+	<strong class="room-name">
+		<!-- IF !rooms.lastUser.uid -->
+		<span>[[modules:chat.no-users-in-room]]</span>
+		<!-- ELSE -->
+		<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
+		<!-- ENDIF !rooms.lastUser.uid -->
+	</strong>
+	<div class="avatar-placeholder"></div>
+	{{{each rooms.users}}}
+	<!-- IF @first -->
+	<div class="main-avatar">
+		<!-- IMPORT partials/chats/user.tpl -->
+	</div>
+	<!-- ENDIF @first -->
+	{{{end}}}
+
+	<ul class="members">
+		{{{each rooms.users}}}
+		<li>
+			<!-- IMPORT partials/chats/user.tpl -->
+		</li>
+		{{{end}}}
+	</ul>
+
+	<span class="teaser-content"><strong class="teaser-username">{rooms.teaser.user.username}:</strong> {rooms.teaser.content}</span>
+	<span class="teaser-timestamp pull-right">{rooms.teaser.timeago}</span>
+</li>
+{{{end}}}
+<!-- ELSE -->
+<li class="no_active"><a href="#">[[modules:chat.no_active]]</a></li>
 <!-- ENDIF rooms.length -->

package/templates/partials/chats/recent_room.tpl

@@ -1,25 +1,25 @@
-<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
-	<strong class="room-name">
-		<!-- IF !rooms.lastUser.uid -->
-		<span>[[modules:chat.no-users-in-room]]</span>
-		<!-- ELSE -->
-		<span component="chat/title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
-		<!-- ENDIF !rooms.lastUser.uid -->
-	</strong>
-	<div class="avatar-placeholder"></div>
-	{{{each rooms.users}}}
-	<!-- IF @first -->
-	<div class="main-avatar">
-		<!-- IMPORT partials/chats/user.tpl -->
-	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
-
-	<ul class="members">
-		{{{each rooms.users}}}
-		<li>
-			<!-- IMPORT partials/chats/user.tpl -->
-		</li>
-		{{{end}}}
-	</ul>
+<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
+	<strong class="room-name">
+		<!-- IF !rooms.lastUser.uid -->
+		<span>[[modules:chat.no-users-in-room]]</span>
+		<!-- ELSE -->
+		<span component="chat/title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
+		<!-- ENDIF !rooms.lastUser.uid -->
+	</strong>
+	<div class="avatar-placeholder"></div>
+	{{{each rooms.users}}}
+	<!-- IF @first -->
+	<div class="main-avatar">
+		<!-- IMPORT partials/chats/user.tpl -->
+	</div>
+	<!-- ENDIF @first -->
+	{{{end}}}
+
+	<ul class="members">
+		{{{each rooms.users}}}
+		<li>
+			<!-- IMPORT partials/chats/user.tpl -->
+		</li>
+		{{{end}}}
+	</ul>
 </li>

package/templates/partials/users_list.tpl

@@ -9,28 +9,34 @@
 		</span>
 		<br/>
 
+		<!-- IF section_online -->
+		<div class="lastonline">
+			<span class="timeago" title="{users.lastonlineISO}"></span>
+		</div>
+		<!-- ENDIF section_online -->
+
 		<!-- IF section_joindate -->
-		<div title="joindate" class="joindate">
+		<div class="joindate">
 			<span class="timeago" title="{users.joindateISO}"></span>
 		</div>
 		<!-- ENDIF section_joindate -->
 
 		<!-- IF section_sort-reputation -->
-		<div title="reputation" class="reputation">
+		<div class="reputation">
 			<i class="fa fa-star"></i>
 			<span class="formatted-number">{users.reputation}</span>
 		</div>
 		<!-- ENDIF section_sort-reputation -->
 
 		<!-- IF section_sort-posts -->
-		<div title="post count" class="post-count">
+		<div class="post-count">
 			<i class="fa fa-pencil"></i>
 			<span class="formatted-number">{users.postcount}</span>
 		</div>
 		<!-- ENDIF section_sort-posts -->
 
 		<!-- IF section_flagged -->
-		<div title="flag count" class="flag-count">
+		<div class="flag-count">
 			<i class="fa fa-flag"></i>
 			<span><a class="formatted-number" href="{config.relative_path}/flags?targetUid={users.uid}">{users.flags}</a></span>
 		</div>