Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-05-07 18:46:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: #7358

Browse Source
This commit is contained in:
Baris Usakli
2019-03-09 12:35:36 -05:00
parent 756dfd8ae6
commit 7211dde7b9
8 changed files with 65 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/language/en-GB/admin/manage/groups.json
View File

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

3
public/language/en-GB/groups.json
View File

@@ -41,7 +41,8 @@
"details.description": "Description", "details.description": "Description",
"details.badge_preview": "Badge Preview", "details.badge_preview": "Badge Preview",
"details.change_icon": "Change Icon", "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.badge_text": "Badge Text",
"details.userTitleEnabled": "Show Badge", "details.userTitleEnabled": "Show Badge",
"details.private_help": "If enabled, joining of groups requires approval from a group owner", "details.private_help": "If enabled, joining of groups requires approval from a group owner",

16
public/src/admin/manage/group.js
View File

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

23
public/src/client/groups/details.js
View File

@@ -132,8 +132,10 @@ define('forum/groups/details', [
Details.prepareSettings = function () { Details.prepareSettings = function () {
var settingsFormEl = components.get('groups/settings'); 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 iconBtn = settingsFormEl.find('[data-action="icon-select"]');
var previewEl = settingsFormEl.find('.label'); var previewEl = settingsFormEl.find('.label');
var previewIcon = previewEl.find('i'); var previewIcon = previewEl.find('i');
@@ -142,10 +144,10 @@ define('forum/groups/details', [
var iconValueEl = settingsFormEl.find('[name="icon"]'); var iconValueEl = settingsFormEl.find('[name="icon"]');
// Add color picker to settings form // Add color picker to settings form
colorBtn.ColorPicker({ labelColorBtn.ColorPicker({
color: colorValueEl.val() || '#000', color: labelColorValueEl.val() || '#000',
onChange: function (hsb, hex) { onChange: function (hsb, hex) {
colorValueEl.val('#' + hex); labelColorValueEl.val('#' + hex);
previewEl.css('background-color', '#' + hex); previewEl.css('background-color', '#' + hex);
}, },
onShow: function (colpkr) { 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 // Add icon selection interface
iconBtn.on('click', function () { iconBtn.on('click', function () {
iconSelect.init(previewIcon, function () { iconSelect.init(previewIcon, function () {

1
src/groups/data.js
View File

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

1
src/groups/update.js
View File

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

1
src/posts/user.js
View File

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

42
src/views/admin/manage/group.tpl
View File

@@ -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 /> <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>
<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> <fieldset>
<div class="checkbox"> <div class="checkbox">
<label> <label>