diff --git a/public/language/en-GB/admin/manage/groups.json b/public/language/en-GB/admin/manage/groups.json index 4b7275f7a3..814eebaa0f 100644 --- a/public/language/en-GB/admin/manage/groups.json +++ b/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.", diff --git a/public/language/en-GB/groups.json b/public/language/en-GB/groups.json index c18335bb5e..00019c35d6 100644 --- a/public/language/en-GB/groups.json +++ b/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", diff --git a/public/src/admin/manage/group.js b/public/src/admin/manage/group.js index 9b38c0300f..7d205dd065 100644 --- a/public/src/admin/manage/group.js +++ b/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 () { - iconSelect.init(groupIcon); + $('#group-icon, #group-icon-label').on('click', function () { + 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'), diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js index 10704698ac..6051d21173 100644 --- a/public/src/client/groups/details.js +++ b/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 colorValueEl = settingsFormEl.find('[name="labelColor"]'); + var labelColorBtn = settingsFormEl.find('[data-action="label-color-select"]'); + 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({ - color: colorValueEl.val() || '#000', + labelColorBtn.ColorPicker({ + 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 () { diff --git a/src/groups/data.js b/src/groups/data.js index 21fcc7911e..7d85624f34 100644 --- a/src/groups/data.js +++ b/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; diff --git a/src/groups/update.js b/src/groups/update.js index 2f1d5dcd65..11cd0b81d6 100644 --- a/src/groups/update.js +++ b/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')) { diff --git a/src/posts/user.js b/src/posts/user.js index 5af1f8a094..13a4ac9c53 100644 --- a/src/posts/user.js +++ b/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, }; diff --git a/src/views/admin/manage/group.tpl b/src/views/admin/manage/group.tpl index 30c7220a58..273acde7d3 100644 --- a/src/views/admin/manage/group.tpl +++ b/src/views/admin/manage/group.tpl @@ -12,22 +12,34 @@
-
- -
-
- -
-
-
-
- -
- - {group.userTitle} -
-
+
+
+
+ + {group.userTitle} +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+