feat: #9705, use radio buttons for flag reasons

public/language/en-GB/flags.json

@@ -77,9 +77,6 @@
 	"modal-reason-custom": "Reason for reporting this content...",
 	"modal-submit": "Submit Report",
 	"modal-submit-success": "Content has been flagged for moderation.",
-	"modal-submit-confirm": "Confirm Submission",
-	"modal-submit-confirm-text": "You have a custom reason specified already. Are you sure you wish to submit via quick-report?",
-	"modal-submit-confirm-text-help": "Submitting a quick report will overwrite any custom reasons defined.",
 
 	"bulk-actions": "Bulk Actions",
 	"bulk-resolve": "Resolve Flag(s)",

public/src/modules/flags.js

@@ -17,33 +17,28 @@ define('flags', ['hooks', 'components', 'api'], function (hooks, components, api
 			flagCommit = flagModal.find('#flag-post-commit');
 			flagReason = flagModal.find('#flag-reason-custom');
 
-			// Quick-report buttons
+			flagModal.on('click', 'input[name="flag-reason"]', function () {
-			flagModal.on('click', '.flag-reason', function () {
+				if ($(this).attr('id') === 'flag-reason-other') {
-				var reportText = $(this).text();
+					flagReason.removeAttr('disabled');
-
+					if (!flagReason.val().length) {
-				if (flagReason.val().length === 0) {
+						flagCommit.attr('disabled', true);
-					return createFlag(data.type, data.id, reportText);
 					}
-
+				} else {
-				// Custom reason has text, confirm submission
+					flagReason.attr('disabled', true);
-				bootbox.confirm({
+					flagCommit.removeAttr('disabled');
-					title: '[[flags:modal-submit-confirm]]',
-					message: '<p>[[flags:modal-submit-confirm-text]]</p><p class="help-block">[[flags:modal-submit-confirm-text-help]]</p>',
-					callback: function (result) {
-						if (result) {
-							createFlag(data.type, data.id, reportText);
 				}
-					},
-				});
 			});
 
-			// Custom reason report submission
 			flagCommit.on('click', function () {
-				createFlag(data.type, data.id, flagModal.find('#flag-reason-custom').val());
+				var selected = $('input[name="flag-reason"]:checked');
+				var reason = selected.val();
+				if (selected.attr('id') === 'flag-reason-other') {
+					reason = flagReason.val();
+				}
+				createFlag(data.type, data.id, reason);
 			});
 
-			flagModal.on('click', '.toggle-custom', function () {
+			flagModal.on('click', '#flag-reason-other', function () {
-				flagReason.prop('disabled', false);
 				flagReason.focus();
 			});