feat: #7358

public/language/en-GB/admin/manage/groups.json

@@ -21,6 +21,7 @@
 	"edit.user-title": "Title of Members",
 	"edit.icon": "Group Icon",
 	"edit.label-color": "Group Label Color",
+	"edit.text-color": "Group Text Color",
 	"edit.show-badge": "Show Badge",
 	"edit.private-details": "If enabled, joining of groups requires approval from a group owner.",
 	"edit.private-override": "Warning: Private groups is disabled at system level, which overrides this option.",

public/language/en-GB/groups.json

@@ -41,7 +41,8 @@
 	"details.description": "Description",
 	"details.badge_preview": "Badge Preview",
 	"details.change_icon": "Change Icon",
-	"details.change_colour": "Change Colour",
+	"details.change_label_colour": "Change Label Colour",
+	"details.change_text_colour": "Change Text Colour",
 	"details.badge_text": "Badge Text",
 	"details.userTitleEnabled": "Show Badge",
 	"details.private_help": "If enabled, joining of groups requires approval from a group owner",

public/src/admin/manage/group.js

@@ -12,6 +12,7 @@ define('admin/manage/group', [
 		var groupIcon = $('#group-icon');
 		var changeGroupUserTitle = $('#change-group-user-title');
 		var changeGroupLabelColor = $('#change-group-label-color');
+		var changeGroupTextColor = $('#change-group-text-color');
 		var groupLabelPreview = $('#group-label-preview');
 
 		var groupName = ajaxify.data.group.name;
@@ -30,6 +31,10 @@ define('admin/manage/group', [
 			groupLabelPreview.css('background', changeGroupLabelColor.val() || '#000000');
 		});
 
+		changeGroupTextColor.keyup(function () {
+			groupLabelPreview.css('color', changeGroupTextColor.val() || '#ffffff');
+		});
+
 		$('[component="groups/members"]').on('click', '[data-action]', function () {
 			var btnEl = $(this);
 			var userRow = btnEl.parents('[data-uid]');
@@ -72,14 +77,20 @@ define('admin/manage/group', [
 			}
 		});
 
-		$('#group-icon').on('click', function () {
+		$('#group-icon, #group-icon-label').on('click', function () {
-			iconSelect.init(groupIcon);
+			iconSelect.init(groupIcon, function () {
+				$('#group-icon-preview').attr('class', 'fa fa-fw ' + (groupIcon.attr('value') || 'hidden'));
+			});
 		});
 
 		colorpicker.enable(changeGroupLabelColor, function (hsb, hex) {
 			groupLabelPreview.css('background-color', '#' + hex);
 		});
 
+		colorpicker.enable(changeGroupTextColor, function (hsb, hex) {
+			groupLabelPreview.css('color', '#' + hex);
+		});
+
 		$('#save').on('click', function () {
 			socket.emit('admin.groups.update', {
 				groupName: groupName,
@@ -89,6 +100,7 @@ define('admin/manage/group', [
 					description: $('#change-group-desc').val(),
 					icon: groupIcon.attr('value'),
 					labelColor: changeGroupLabelColor.val(),
+					textColor: changeGroupTextColor.val(),
 					userTitleEnabled: $('#group-userTitleEnabled').is(':checked'),
 					private: $('#group-private').is(':checked'),
 					hidden: $('#group-hidden').is(':checked'),

public/src/client/groups/details.js

@@ -132,8 +132,10 @@ define('forum/groups/details', [
 
 	Details.prepareSettings = function () {
 		var settingsFormEl = components.get('groups/settings');
-		var colorBtn = settingsFormEl.find('[data-action="color-select"]');
+		var labelColorBtn = settingsFormEl.find('[data-action="label-color-select"]');
-		var colorValueEl = settingsFormEl.find('[name="labelColor"]');
+		var textColorBtn = settingsFormEl.find('[data-action="text-color-select"]');
+		var labelColorValueEl = settingsFormEl.find('[name="labelColor"]');
+		var textColorValueEl = settingsFormEl.find('[name="textColor"]');
 		var iconBtn = settingsFormEl.find('[data-action="icon-select"]');
 		var previewEl = settingsFormEl.find('.label');
 		var previewIcon = previewEl.find('i');
@@ -142,10 +144,10 @@ define('forum/groups/details', [
 		var iconValueEl = settingsFormEl.find('[name="icon"]');
 
 		// Add color picker to settings form
-		colorBtn.ColorPicker({
+		labelColorBtn.ColorPicker({
-			color: colorValueEl.val() || '#000',
+			color: labelColorValueEl.val() || '#000',
 			onChange: function (hsb, hex) {
-				colorValueEl.val('#' + hex);
+				labelColorValueEl.val('#' + hex);
 				previewEl.css('background-color', '#' + hex);
 			},
 			onShow: function (colpkr) {
@@ -153,6 +155,17 @@ define('forum/groups/details', [
 			},
 		});
 
+		textColorBtn.ColorPicker({
+			color: textColorValueEl.val() || '#fff',
+			onChange: function (hsb, hex) {
+				textColorValueEl.val('#' + hex);
+				previewEl.css('color', '#' + hex);
+			},
+			onShow: function (colpkr) {
+				$(colpkr).css('z-index', 1051);
+			},
+		});
+
 		// Add icon selection interface
 		iconBtn.on('click', function () {
 			iconSelect.init(previewIcon, function () {

src/groups/data.js

@@ -88,6 +88,7 @@ function modifyGroup(group, fields) {
 		escapeGroupData(group);
 		group.userTitleEnabled = ([null, undefined].includes(group.userTitleEnabled)) ? 1 : group.userTitleEnabled;
 		group.labelColor = validator.escape(String(group.labelColor || '#000000'));
+		group.textColor = validator.escape(String(group.textColor || '#ffffff'));
 		group.icon = validator.escape(String(group.icon || ''));
 		group.createtimeISO = utils.toISOString(group.createtime);
 		group.private = ([null, undefined].includes(group.private)) ? 1 : group.private;

src/groups/update.js

@@ -33,6 +33,7 @@ module.exports = function (Groups) {
 					description: values.description || '',
 					icon: values.icon || '',
 					labelColor: values.labelColor || '#000000',
+					textColor: values.textColor || '#ffffff',
 				};
 
 				if (values.hasOwnProperty('userTitle')) {

src/posts/user.js

@@ -53,6 +53,7 @@ module.exports = function (Posts) {
 							name: group.name,
 							slug: group.slug,
 							labelColor: group.labelColor,
+							textColor: group.textColor,
 							icon: group.icon,
 							userTitle: group.userTitle,
 						};

src/views/admin/manage/group.tpl

@@ -12,22 +12,34 @@
 					<input type="text" class="form-control" id="change-group-desc" placeholder="A short description about your group" value="{group.description}" maxlength="255" /><br />
 				</fieldset>
 
-				<fieldset>
+				<div class="row">
-					<label for="change-group-user-title">[[admin/manage/groups:edit.user-title]]</label>
+					<div class="col-md-4">
-					<input type="text" class="form-control" id="change-group-user-title" placeholder="The title of users if they are a member of this group" value="{group.userTitle}" maxlength="{maximumGroupTitleLength}" /><br />
+						<fieldset>
-				</fieldset>
+							<label for="change-group-user-title">[[admin/manage/groups:edit.user-title]]</label>
-
+							<span id="group-label-preview" class="label label-default" style="color:<!-- IF group.textColor -->{group.textColor}<!-- ELSE -->#ffffff<!-- ENDIF group.textColor -->; background:<!-- IF group.labelColor -->{group.labelColor}<!-- ELSE -->#000000<!-- ENDIF group.labelColor -->;"><i id="group-icon-preview" class="fa fa-fw {group.icon} <!-- IF !group.icon -->hidden<!-- ENDIF -->"></i> {group.userTitle}</span>
-				<fieldset>
+							<input type="text" class="form-control" id="change-group-user-title" placeholder="The title of users if they are a member of this group" value="{group.userTitle}" maxlength="{maximumGroupTitleLength}" /><br />
-					<label for="change-group-icon">[[admin/manage/groups:edit.icon]]</label><br/>
+						</fieldset>
-					<i id="group-icon" class="fa fa-2x <!-- IF group.icon -->{group.icon}<!-- ELSE -->fa-shield<!-- ENDIF group.icon -->" value="{group.icon}"></i><br />
+					</div>
-				</fieldset>
+					<div class="col-md-2">
-
+						<fieldset>
-				<fieldset>
+							<label id="group-icon-label" for="change-group-icon">[[admin/manage/groups:edit.icon]]</label><br/>
-					<label for="change-group-label-color">[[admin/manage/groups:edit.label-color]]</label>
+							<i id="group-icon" class="fa fa-2x <!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->" value="{group.icon}"></i><br />
-					<span id="group-label-preview" class="label label-default" style="background:<!-- IF group.labelColor -->{group.labelColor}<!-- ELSE -->#000000<!-- ENDIF group.labelColor -->;">{group.userTitle}</span>
+						</fieldset>
-					<input id="change-group-label-color" placeholder="#0059b2" data-name="bgColor" value="{group.labelColor}" class="form-control" /><br />
+					</div>
-				</fieldset>
+					<div class="col-md-3">
+						<fieldset>
+							<label for="change-group-label-color">[[admin/manage/groups:edit.label-color]]</label>
 
+							<input id="change-group-label-color" placeholder="#0059b2" data-name="bgColor" value="{group.labelColor}" class="form-control" /><br />
+						</fieldset>
+					</div>
+					<div class="col-md-3">
+						<fieldset>
+							<label for="change-group-text-color">[[admin/manage/groups:edit.text-color]]</label>
+							<input id="change-group-text-color" placeholder="#ffffff" data-name="textColor" value="{group.textColor}" class="form-control" /><br />
+						</fieldset>
+					</div>
+				</div>
 				<fieldset>
 					<div class="checkbox">
 						<label>