breaking: move some modals to core

public/language/en-GB/topic.json

@@ -140,7 +140,7 @@
 	"post_moved": "Post moved!",
 	"fork_topic": "Fork Topic",
 	"enter-new-topic-title": "Enter new topic title",
-	"fork_topic_instruction": "Click the posts you want to fork",
+	"fork_topic_instruction": "Click the posts you want to fork, enter a title for the new topic and click fork topic",
 	"fork_no_pids": "No posts selected!",
 	"no-posts-selected": "No posts selected!",
 	"x-posts-selected": "%1 post(s) selected",
@@ -155,6 +155,7 @@
 	"merge-new-title-for-topic": "New title for topic",
 	"topic-id": "Topic ID",
 	"move_posts_instruction": "Click the posts you want to move then enter a topic ID or go to the target topic",
+	"move_topic_instruction": "Select the target category and then click move",
 	"change_owner_instruction": "Click the posts you want to assign to another user",
 
 	"composer.title_placeholder": "Enter your topic title here...",

public/scss/generics.scss

@@ -3,18 +3,29 @@
 	@include pointer;
 }
 
-#move_thread_modal .category-list {
-	height: 500px;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
 .topic-watch-dropdown {
 	.help-text {
 		margin-left: 20px;
 	}
 }
 
+[component="category-selector"], .category-dropdown-container {
+	#category-dropdown-check:checked + .dropdown-menu {
+		display: block;
+	}
+}
+
+.category-dropdown-container.right .category-dropdown-menu {
+	--bs-position: end;
+}
+
+.category-dropdown-menu {
+	max-height: 500px;
+	min-height: 300px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
 .category-list {
 	padding: 0;
 

public/src/client/topic/change-owner.js

@@ -15,14 +15,14 @@ define('forum/topic/change-owner', [
 		if (modal) {
 			return;
 		}
-		app.parseAndTranslate('partials/change_owner_modal', {}, function (html) {
+		app.parseAndTranslate('modals/change-owner', {}, function (html) {
 			modal = html;
 
 			commit = modal.find('#change_owner_commit');
 
 			$('body').append(modal);
 
-			modal.find('.close,#change_owner_cancel').on('click', closeModal);
+			modal.find('#change_owner_cancel').on('click', closeModal);
 			modal.find('#username').on('keyup', checkButtonEnable);
 			postSelect.init(onPostToggled, {
 				allowMainPostSelect: true,

public/src/client/topic/delete-posts.js

@@ -18,7 +18,7 @@ define('forum/topic/delete-posts', [
 			return;
 		}
 
-		app.parseAndTranslate('partials/delete_posts_modal', {}, function (html) {
+		app.parseAndTranslate('modals/delete-posts', {}, function (html) {
 			modal = html;
 
 			$('body').append(modal);
@@ -26,7 +26,7 @@ define('forum/topic/delete-posts', [
 			deleteBtn = modal.find('#delete_posts_confirm');
 			purgeBtn = modal.find('#purge_posts_confirm');
 
-			modal.find('.close,#delete_posts_cancel').on('click', closeModal);
+			modal.find('#delete_posts_cancel').on('click', closeModal);
 
 			postSelect.init(function () {
 				checkButtonEnable();

public/src/client/topic/fork.js

@@ -16,14 +16,14 @@ define('forum/topic/fork', ['components', 'postSelect', 'alerts'], function (com
 			return;
 		}
 
-		app.parseAndTranslate('partials/fork_thread_modal', {}, function (html) {
+		app.parseAndTranslate('modals/fork-topic', {}, function (html) {
 			forkModal = html;
 
 			forkCommit = forkModal.find('#fork_thread_commit');
 
 			$('body').append(forkModal);
 
-			forkModal.find('.close,#fork_thread_cancel').on('click', closeForkModal);
+			forkModal.find('#fork_thread_cancel').on('click', closeForkModal);
 			forkModal.find('#fork-title').on('keyup', checkForkButtonEnable);
 
 			postSelect.init(function () {

public/src/client/topic/merge.js

@@ -13,14 +13,14 @@ define('forum/topic/merge', ['search', 'alerts', 'api'], function (search, alert
 		if (modal) {
 			return;
 		}
-		app.parseAndTranslate('partials/merge_topics_modal', {}, function (html) {
+		app.parseAndTranslate('modals/merge-topic', {}, function (html) {
 			modal = html;
 
 			$('body').append(modal);
 
 			mergeBtn = modal.find('#merge_topics_confirm');
 
-			modal.find('.close,#merge_topics_cancel').on('click', closeModal);
+			modal.find('#merge_topics_cancel').on('click', closeModal);
 
 			$('#content').on('click', '[component="topic/select"]', onTopicClicked);
 
@@ -111,7 +111,7 @@ define('forum/topic/merge', ['search', 'alerts', 'api'], function (search, alert
 		});
 
 		if (tids.length) {
-			app.parseAndTranslate('partials/merge_topics_modal', {
+			app.parseAndTranslate('modals/merge-topic', {
 				config: config,
 				topics: topics,
 			}, function (html) {

public/src/client/topic/move-post.js

@@ -22,7 +22,7 @@ define('forum/topic/move-post', [
 
 			$('body').append(moveModal);
 
-			moveModal.find('.close,#move_posts_cancel').on('click', closeMoveModal);
+			moveModal.find('#move_posts_cancel').on('click', closeMoveModal);
 			moveModal.find('#topicId').on('keyup', utils.debounce(checkMoveButtonEnable, 200));
 			postSelect.init(onPostToggled);
 			showPostsSelected();

public/src/client/topic/move.js

@@ -1,12 +1,17 @@
 'use strict';
 
 
-define('forum/topic/move', ['categorySelector', 'alerts', 'hooks'], function (categorySelector, alerts, hooks) {
+define('forum/topic/move', [
+	'categorySelector', 'alerts', 'hooks',
+], function (categorySelector, alerts, hooks) {
 	const Move = {};
 	let modal;
 	let selectedCategory;
 
 	Move.init = function (tids, currentCid, onComplete) {
+		if (modal) {
+			return;
+		}
 		Move.tids = tids;
 		Move.currentCid = currentCid;
 		Move.onComplete = onComplete;
@@ -16,16 +21,12 @@ define('forum/topic/move', ['categorySelector', 'alerts', 'hooks'], function (ca
 	};
 
 	function showModal() {
-		app.parseAndTranslate('partials/move_thread_modal', {}, function (html) {
+		app.parseAndTranslate('modals/move-topic', {}, function (html) {
 			modal = html;
-			modal.on('hidden.bs.modal', function () {
-				modal.remove();
-			});
-
-			modal.find('#move-confirm').addClass('hide');
+			$('body').append(modal);
 
 			if (Move.moveAll || (Move.tids && Move.tids.length > 1)) {
-				modal.find('.modal-header h3').translateText('[[topic:move_topics]]');
+				modal.find('.card-header').translateText('[[topic:move_topics]]');
 			}
 
 			categorySelector.init(modal.find('[component="category-selector"]'), {
@@ -34,8 +35,7 @@ define('forum/topic/move', ['categorySelector', 'alerts', 'hooks'], function (ca
 			});
 
 			modal.find('#move_thread_commit').on('click', onCommitClicked);
-
-			modal.modal('show');
+			modal.find('#move_topic_cancel').on('click', closeMoveModal);
 		});
 	}
 
@@ -49,8 +49,7 @@ define('forum/topic/move', ['categorySelector', 'alerts', 'hooks'], function (ca
 
 		if (!commitEl.prop('disabled') && selectedCategory && selectedCategory.cid) {
 			commitEl.prop('disabled', true);
-
-			modal.modal('hide');
+			closeMoveModal();
 			let message = '[[topic:topic_move_success, ' + selectedCategory.name + ']]';
 			if (Move.tids && Move.tids.length > 1) {
 				message = '[[topic:topic_move_multiple_success, ' + selectedCategory.name + ']]';
@@ -98,5 +97,12 @@ define('forum/topic/move', ['categorySelector', 'alerts', 'hooks'], function (ca
 		});
 	}
 
+	function closeMoveModal() {
+		if (modal) {
+			modal.remove();
+			modal = null;
+		}
+	}
+
 	return Move;
 });

public/src/modules/search.js

@@ -171,7 +171,7 @@ define('search', ['translator', 'storage', 'hooks', 'alerts'], function (transla
 		}, 500));
 
 		let mousedownOnResults = false;
-		quickSearchResults.on('mousedown', function () {
+		quickSearchResults.on('mousedown', '.quick-search-results > *', function () {
 			$(window).one('mouseup', function () {
 				quickSearchResults.addClass('hidden');
 			});

src/topics/events.js

@@ -28,7 +28,7 @@ Events._types = {
 		text: '[[topic:pinned-by]]',
 	},
 	unpin: {
-		icon: 'fa-thumb-tack',
+		icon: 'fa-thumb-tack fa-rotate-90',
 		text: '[[topic:unpinned-by]]',
 	},
 	lock: {

src/views/modals/change-owner.tpl

@@ -0,0 +1,24 @@
+<div class="card tool-modal shadow">
+	<h5 class="card-header">[[topic:thread_tools.change_owner]]</h5>
+	<div class="card-body">
+		<p>
+			[[topic:change_owner_instruction]]
+		</p>
+		<div class="mb-3">
+			<label class="form-label" for="username"><strong>[[user:username]]</strong></label>
+			<div class="input-group">
+				<input id="username" type="text" class="form-control">
+				<span class="input-group-text" type="button">
+					<i class="fa fa-search"></i>
+				</span>
+			</div>
+		</div>
+		<p>
+			<strong><span id="pids"></span></strong>
+		</p>
+	</div>
+	<div class="card-footer text-end">
+		<button class="btn btn-link btn-sm" id="change_owner_cancel">[[global:buttons.close]]</button>
+		<button class="btn btn-primary btn-sm" id="change_owner_commit" disabled>[[topic:change-owner]]</button>
+	</div>
+</div>

src/views/modals/delete-posts.tpl

@@ -0,0 +1,16 @@
+<div class="card tool-modal shadow">
+	<h5 class="card-header">
+		[[topic:thread_tools.delete-posts]]
+	</h5>
+	<div class="card-body">
+		<p>
+			[[topic:delete_posts_instruction]]
+		</p>
+		<p><strong><span id="pids"></span></strong></p>
+	</div>
+	<div class="card-footer text-end">
+		<button class="btn btn-link btn-sm" id="delete_posts_cancel">[[global:buttons.close]]</button>
+		<button class="btn btn-primary btn-sm" id="delete_posts_confirm" disabled>[[topic:delete]]</button>
+		<button class="btn btn-danger btn-sm" id="purge_posts_confirm" disabled>[[topic:purge]]</button>
+	</div>
+</div>

src/views/modals/fork-topic.tpl

@@ -0,0 +1,19 @@
+<div class="card tool-modal shadow">
+	<h5 class="card-header">
+		[[topic:fork_topic]]
+	</h5>
+	<div class="card-body">
+		<p>
+			[[topic:fork_topic_instruction]]
+		</p>
+		<div class="mb-3">
+			<label class="form-label" for="fork-title"><strong>[[topic:title]]</strong></label>
+			<input id="fork-title" type="text" class="form-control" placeholder="[[topic:enter-new-topic-title]]">
+		</div>
+		<strong><span id="fork-pids"></span></strong>
+	</div>
+	<div class="card-footer text-end">
+		<button class="btn btn-link btn-sm" id="fork_thread_cancel">[[global:buttons.close]]</button>
+		<button class="btn btn-primary btn-sm" id="fork_thread_commit" disabled>[[topic:fork_topic]]</button>
+	</div>
+</div>

src/views/modals/merge-topic.tpl

@@ -0,0 +1,55 @@
+<div class="tool-modal d-flex">
+	<div class="position-relative">
+		<div class="quick-search-container dropdown-menu d-block hidden p-2 hidden" style="right: 10px;">
+			<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
+			<div class="quick-search-results-container"></div>
+		</div>
+	</div>
+
+	<div class="card shadow">
+		<h5 class="card-header">[[topic:thread_tools.merge_topics]]</h5>
+		<div class="card-body">
+			<p>
+				[[topic:merge_topics_instruction]]
+			</p>
+			<p>
+				<div class="input-group">
+					<input class="form-control topic-search-input" type="text">
+					<span class="input-group-text"><i class="fa fa-search"></i></span>
+				</div>
+			</p>
+
+			<p><strong>[[topic:merge-topic-list-title]]</strong></p>
+			<ul class="topics-section">
+				{{{each topics}}}
+				<li><a href="{config.relative_path}/topic/{topics.tid}"><strong>{topics.title}</strong></a></li>
+				{{{end}}}
+			</ul>
+			<p>
+				<strong>[[topic:merge-options]]</strong>
+			</p>
+			<form>
+				<p>
+					<input class="merge-main-topic-radio" type="radio" name="merge-topic-option" checked="true"> [[topic:merge-select-main-topic]]
+				</p>
+				<p>
+					<select class="form-select merge-main-topic-select">
+						{{{each topics}}}
+						<option value="{topics.tid}">{topics.title}</option>
+						{{{end}}}
+					</select>
+				</p>
+				<p>
+					<input class="merge-new-title-radio" type="radio" name="merge-topic-option"> [[topic:merge-new-title-for-topic]]
+				</p>
+				<p>
+					<input class="merge-new-title-input form-control" type="text">
+				</p>
+			</form>
+		</div>
+		<div class="card-footer text-end">
+			<button class="btn btn-link btn-sm" id="merge_topics_cancel">[[global:buttons.close]]</button>
+			<button class="btn btn-primary btn-sm" id="merge_topics_confirm" disabled>[[topic:thread_tools.merge]]</button>
+		</div>
+	</div>
+</div>

src/views/modals/move-post.tpl

@@ -3,21 +3,19 @@
 		[[topic:thread_tools.move-posts]]
 	</h5>
 	<div class="card-body">
+		<p>
+            [[topic:move_posts_instruction]]
+        </p>
 		<div>
-			<label class="form-label" for="topicId">[[topic:topic-id]]</label>
+			<label class="form-label" for="topicId"><strong>[[topic:topic-id]]</strong></label>
 			<input id="topicId" type="text" class="form-control"><br/>
 		</div>
 		<p>
     		<strong><span id="pids"></span></strong>
         </p>
-        <p class="form-text">
-            [[topic:move_posts_instruction]]
-        </p>
 	</div>
 	<div class="card-footer text-end">
-		<div class="btn-group">
-			<button class="btn btn-link btn-sm" id="move_posts_cancel">[[global:buttons.close]]</button>
-			<button class="btn btn-primary btn-sm" id="move_posts_confirm" disabled>[[topic:move]]</button>
-		</div>
+		<button class="btn btn-link btn-sm" id="move_posts_cancel">[[global:buttons.close]]</button>
+		<button class="btn btn-primary btn-sm" id="move_posts_confirm" disabled>[[topic:move]]</button>
 	</div>
 </div>

src/views/modals/move-topic.tpl

@@ -0,0 +1,15 @@
+<div class="card tool-modal shadow">
+	<h5 class="card-header">
+		[[topic:move_topic]]
+	</h5>
+	<div class="card-body">
+		<p>
+			[[topic:move_topic_instruction]]
+		</p>
+		<!-- IMPORT partials/category-selector-right.tpl -->
+	</div>
+	<div class="card-footer text-end">
+		<button type="button" class="btn btn-sm btn-outline-secondary" id="move_topic_cancel">[[global:buttons.close]]</button>
+		<button type="button" class="btn btn-sm btn-primary" id="move_thread_commit" disabled>[[topic:confirm_move]]</button>
+	</div>
+</div>