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

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.31",
   "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

@@ -1,45 +1,39 @@
-<div class="account">
-	<!-- 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="d-flex justify-content-between mb-3">
-				<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
-				<div class="justify-content-end">
-					<div class="dropdown">
-						<div class="input-group">
-							<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
-							<button class="btn btn-primary btn-sm" type="button">
-								<i class="fa fa-search"></i>
-							</button>
-						</div>
+<!-- IMPORT partials/account/header.tpl -->
+<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">
+		<div class="dropdown">
+			<div class="input-group">
+				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
+				<button class="btn btn-primary btn-sm" type="button">
+					<i class="fa fa-search"></i>
+				</button>
+			</div>
 
-						<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
-							<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-							{{{ each edit }}}
-							<li class="">
-								<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
-									<div class="text-truncate">
-										<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
-									</div>
-									<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
+			<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
+				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+				{{{ each edit }}}
+				<li class="">
+					<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+						<div class="text-truncate">
+							<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
+						</div>
+						<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
 					</div>
-				</div>
-			</div>
-			<div class="users">
-				<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
-					{{{ each users }}}
-					<!-- IMPORT partials/users/item.tpl -->
-					{{{ end }}}
-				</div>
-				<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
-				<!-- IMPORT partials/paginator.tpl -->
-			</div>
+				</li>
+				{{{ end }}}
+			</ul>
 		</div>
-
 	</div>
-</div>
+</div>
+<div class="users">
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+		{{{ each users }}}
+		<!-- IMPORT partials/users/item.tpl -->
+		{{{ end }}}
+	</div>
+	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/categories.tpl

@@ -1,34 +1,27 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- 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;">
-			<h3 class="fw-semibold fs-5">{title}</h3>
+<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="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>
+		</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>
+
+<!-- IMPORT partials/account/footer.tpl -->