nodebb-theme-harmony 1.0.0-beta.3 → 1.0.0-beta.30

package/languages/en-GB/harmony.json

@@ -1,6 +1,7 @@
 {
 	"skins": "Skins",
 	"collapse": "Collapse",
+	"toggle-sidebars": "Toggle sidebars",
 	"login-register-to-search": "Login or register to search.",
 	"settings.title": "Theme settings",
 	"settings.enableQuickReply": "Enable quick reply",

package/library.js

@@ -77,6 +77,16 @@ 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',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.30",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/public/harmony.js

@@ -5,6 +5,8 @@ $(document).ready(function () {
 	setupMobileMenu();
 	setupSearch();
 	setupDrafts();
+	handleMobileNavigator();
+	setupNavTooltips();
 
 	$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
 		const skin = $(this).attr('data-value');
@@ -36,7 +38,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 +50,9 @@ $(document).ready(function () {
 					});
 				}
 				$(window).trigger('action:sidebar.toggle');
+				if (ajaxify.data.template.topic) {
+					hooks.fire('action:navigator.update', { newIndex: navigator.getIndex() });
+				}
 			});
 		});
 	}
@@ -56,32 +61,17 @@ $(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) {
+			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);
 			}
 
@@ -96,7 +86,9 @@ $(document).ready(function () {
 				}
 				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>')
+						);
 					}
 				});
 
@@ -105,7 +97,7 @@ $(document).ready(function () {
 				draftListEl.append(html).find('.timeago').timeago();
 			}
 
-			const draftsEl = $('[component="sidebar/drafts"]');
+
 			draftsEl.on('shown.bs.dropdown', renderDraftList);
 
 			draftsEl.on('click', '[component="drafts/open"]', function () {
@@ -123,6 +115,7 @@ $(document).ready(function () {
 			updateBadgeCount();
 		});
 	}
+
 	function setupNProgress() {
 		require(['nprogress'], function (NProgress) {
 			window.nprogress = NProgress;
@@ -137,4 +130,38 @@ $(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');
+		});
+	}
 });

package/scss/chats.scss

@@ -6,8 +6,10 @@
 body.page-user-chats {
 	overflow: hidden;
 }
-
-.expanded-chat, .chat-modal {
+[component="chat/nav-wrapper"] {
+	width: 300px;
+}
+.expanded-chat {
 	// no taskbar so hide minimize button
 	[data-action="minimize"] {
 		display: none!important;
@@ -38,6 +40,9 @@ body.page-user-chats {
 
 /* Mobile handling of chat page */
 @include media-breakpoint-down(md) {
+	[component="chat/nav-wrapper"] {
+		width: 100%;
+	}
 	.page-user-chats {
 		.chats-full {
 			padding-bottom: 8rem!important;

package/scss/common.scss

@@ -14,8 +14,33 @@ body {
 .text-sm { font-size: 0.875rem!important; } // 14px
 .text-xs { font-size: 0.75rem!important; } // 12px
 
-.btn-link:hover {
-	text-decoration: none;
+.caret {
+	&::after {
+		border: none;
+		font-family: "FontAwesome";
+		content: "\f078";
+		color: tint-color($primary, 40%);
+	}
+}
+
+body:not(.page-user) {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying {
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
+}
+.page-user {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying .account-content {
+			transition: opacity 150ms linear;
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
 }
 
 .sticky-tools {
@@ -35,6 +60,13 @@ body {
 	}
 }
 
+.btn-link {
+	&:hover, &.active {
+		background-color: $btn-ghost-hover-color;
+		text-decoration: none;
+	}
+}
+
 @mixin btn-ghost-base {
 	display: flex;
 	align-items: center;
@@ -48,10 +80,10 @@ body {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-	$hover-color: mix($light, $dark, 90);
+
 	cursor: pointer;
 	&:hover, &.active {
-		background-color: $hover-color;
+		background-color: $btn-ghost-hover-color;
 		text-decoration: none;
 	}
 }

package/scss/harmony.scss

@@ -9,6 +9,7 @@
 @import "status";
 @import "account";
 @import "groups";
+@import "search";
 @import "modals";
 
 @import "modules/breadcrumbs";
@@ -20,5 +21,6 @@
 @import "modules/topics-list";
 @import "modules/cover";
 @import "modules/nprogress";
+@import "modules/paginator";
 
 @import "skins";

package/scss/mixins.scss

@@ -124,9 +124,13 @@
 			display: none;
 		}
 
-		.timeline-event {
-			.timeline-text.timeago {
-				display: none;
+
+		[component="topic/event"], [component="topic/necro-post"] {
+			&.timeline-event {
+				.timeline-text {
+					line-height: 16px;
+					font-size: 0.75rem;
+				}
 			}
 		}
 	}

package/scss/modules/composer.scss

@@ -6,10 +6,6 @@ $composer-bg: $body-bg !default;
 	background-color: $bg !important;
 }
 
-.composer {
-	z-index: 3 !important;
-}
-
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
 	$composer-color: $secondary;

package/scss/modules/cover.scss

@@ -12,12 +12,11 @@
 
 	&:hover {
 		.controls {
-			opacity: 0.8;
+			opacity: 1;
 		}
 	}
 
 	.controls {
-		text-align: center;
 		height: 200px;
 		line-height: 200px;
 		opacity: 0;
@@ -28,15 +27,6 @@
 		> * {
 			pointer-events: all;
 		}
-
-		.fa {
-			color: white;
-			background-color: #333;
-			opacity: 1;
-			margin: 15px;
-			padding: 5px;
-			border-radius: 4px;
-		}
 	}
 
 	&.active {

package/scss/modules/paginator.scss

@@ -0,0 +1,24 @@
+.skin-noskin [component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $body-color;
+		background-color: $gray-300;
+		border-color: $gray-300;
+	}
+
+	.page-item:not(.disabled):hover .page-link {
+		color: $body-color;
+	}
+}
+
+[component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $pagination-active-color;
+	}
+	.page-item:not(.disabled):hover .page-link {
+		color: $pagination-hover-color;
+		background-color: $pagination-hover-bg;
+	}
+	.page-item:not(.disabled) .page-link {
+		color: $body-color;
+	}
+}

package/scss/overrides.scss

@@ -39,6 +39,8 @@ $text-muted: $gray-600 !default;
 $border-color: $gray-200 !default;
 $link-color: shade-color($blue, 20%) !default;
 
+$btn-ghost-hover-color: mix($light, $dark, 90);
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 

package/scss/search.scss

@@ -0,0 +1,8 @@
+[component="search/filters"] {
+	.filter-btn {
+		border-color: $gray-300!important;
+		&.active-filter {
+			border-color: $primary!important;
+		}
+	}
+}

package/scss/sidebar.scss

@@ -113,7 +113,32 @@
 		font-size: 9px;
 		line-height: 12px;
 	}
-	.search.bottom-sheet .dropdown-menu {
-		max-height: 100%;
+
+	.navigation-dropdown, .user-dropdown {
+		> li {
+			> a, .dropdown-item {
+				padding: 10px 20px!important;
+			}
+		}
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		max-height: 60vh!important;
+		overflow: auto!important;
+	}
+	.search-dropdown .quick-search-results {
+		max-height: 225px!important;
+		overflow-y: auto!important;
+	}
+	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		ul {
+			max-height: 60vh!important;
+			overflow-y: auto!important;
+		}
 	}
 }

package/scss/topic.scss

@@ -1,3 +1,5 @@
+.pagination-block { display: none; }
+
 .page-topic {
 	[component="topic/title"] {
 		font-size: 28px;
@@ -14,18 +16,6 @@
 		line-height: 20px;
 	}
 
-	.action-bar {
-		.dropdown-toggle::after {
-			border: none;
-			font-family: "FontAwesome";
-			content: "\f078";
-			color: tint-color($primary, 40%);
-
-			position: relative;
-			top: 2px;
-		}
-	}
-
 	.topic {
 		.posts {
 			max-width: 960px;
@@ -67,6 +57,17 @@
 			[component="post/reply-count"] {
 				font-size: $font-size-base * .75;
 			}
+
+			[component="post/upvote"], [component="post/downvote"] {
+				&.upvoted, &.downvoted {
+					background-color: lighten($btn-ghost-hover-color, 5%);
+
+					&:hover {
+					background-color: $btn-ghost-hover-color;
+
+					}
+				}
+			}
 		}
 	}
 
@@ -106,6 +107,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {

package/templates/account/blocks.tpl

@@ -2,7 +2,7 @@
 	<!-- IMPORT partials/account/header.tpl -->
 	<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;">
+		<div class="account-content 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

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">{title}</h3>
 
 			<div class="row">
@@ -11,7 +11,6 @@
 					<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>

package/templates/account/consent.tpl

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[user:consent.title]]</h3>
 
 			<p class="lead">[[user:consent.lead]]</p>
@@ -12,6 +12,68 @@
 			<hr />
 
 			<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 }}}
+							<p>[[user:consent.digest_off]]</p>
+							{{{ end }}}
+
+							<div class="d-grid">
+								<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>
+			</div>
 		</div>
 	</div>
 </div>

package/templates/account/edit/password.tpl

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content 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>
 
 			<form class="edit-form">

package/templates/account/edit/username.tpl

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content 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>
 
 			<form class="form-horizontal edit-form">

package/templates/account/edit.tpl

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content 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">{{{ if isSelf }}}[[user:edit-profile]]{{{ else }}}[[pages:account/edit, {username}]]{{{ end }}}</h3>
 				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>
@@ -74,7 +74,7 @@
 					<div class="text-center">
 						<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>
+							<a component="profile/change/picture" 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>

package/templates/account/followers.tpl

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			{{{ if !users.length }}}

package/templates/account/following.tpl

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			{{{ if !users.length }}}

package/templates/account/groups.tpl

@@ -3,7 +3,7 @@
 
 	<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;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			<div class="groups">

package/templates/account/info.tpl

@@ -3,29 +3,12 @@
 
 	<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;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			{{{ if sessions.length }}}
 			<div class="mb-3">
 				<h4>[[global:sessions]]</h4>
 				<ul class="list-group" component="user/sessions">
-					{{{each sessions}}}
-					<li class="list-group-item" data-uuid="{../uuid}">
-						<div class="float-end">
-							<!-- IF isSelfOrAdminOrGlobalModerator -->
-							<!-- IF !../current -->
-							<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">Revoke Session</button>
-							<!-- ENDIF !../current -->
-							<!-- ENDIF isSelfOrAdminOrGlobalModerator -->
-							{function.userAgentIcons}
-							<i class="fa fa-circle text-<!-- IF ../current -->success<!-- ELSE -->muted<!-- ENDIF ../current -->"></i>
-						</div>
-						{../browser} {../version} on {../platform}<br />
-						<small class="timeago text-muted" title="{../datetimeISO}"></small>
-						<ul>
-							<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
-						</ul>
-					</li>
-					{{{end}}}
+					<!-- IMPORT partials/account/session-list.tpl -->
 				</ul>
 			</div>
 			{{{ end }}}