added colorpicker to frontend, badge colour changes for groups, #2588

public/language/en_GB/groups.json

@@ -9,5 +9,7 @@
 	"details.has_no_posts": "This group's members have not made any posts.",
 	"details.latest_posts": "Latest Posts",
 	"details.private": "Private Group",
-	"details.public": "Public Group"
+	"details.public": "Public Group",
+
+	"details.owner_options": "Group Administration"
 }

public/src/client/groups/details.js

@@ -5,7 +5,10 @@ define('forum/groups/details', function() {
 	var Details = {};
 
 	Details.init = function() {
-		var detailsPage = $('.groups');
+		var detailsPage = $('.groups'),
+			settingsFormEl = detailsPage.find('form');
+
+		Details.prepareSettings();
 
 		$('.latest-posts .content img').addClass('img-responsive');
 
@@ -31,6 +34,10 @@ define('forum/groups/details', function() {
 					});
 					break;
 
+				case 'update':
+					Details.update();
+					break;
+
 				case 'join':	// intentional fall-throughs!
 				case 'leave':
 				case 'accept':
@@ -50,5 +57,64 @@ define('forum/groups/details', function() {
 		});
 	};
 
+	Details.prepareSettings = function() {
+		var settingsFormEl = $('.groups form'),
+			colorBtn = settingsFormEl.find('[data-action="color-select"]'),
+			colorValueEl = settingsFormEl.find('[name="labelColor"]'),
+			previewEl = settingsFormEl.find('.label');
+
+		if (settingsFormEl.length) {
+			// Add color picker to settings form
+			require(['vendor/colorpicker/colorpicker'], function() {
+				console.log(colorBtn, colorBtn.ColorPicker);
+				colorBtn.ColorPicker({
+					color: colorValueEl.val() || '#000',
+					onChange: function(hsb, hex) {
+						colorValueEl.val('#' + hex);
+						previewEl.css('background-color', '#' + hex);
+					},
+					onShow: function(colpkr) {
+						$(colpkr).css('z-index', 1051);
+					}
+				});
+			});
+		}
+	};
+
+	Details.update = function() {
+		var settingsFormEl = $('.groups form');
+
+		if (settingsFormEl.length) {
+			require(['vendor/jquery/serializeObject/jquery.ba-serializeobject.min'], function() {
+				var settings = settingsFormEl.serializeObject(),
+					keys = Object.keys(settings),
+					inputEl;
+
+				// Fix checkbox values
+				keys.forEach(function(key) {
+					inputEl = settingsFormEl.find('input[type="checkbox"][name="' + key + '"]');
+					if (inputEl.length) {
+						settings[key] = settings[key] === 'on' ? true : false;
+					}
+				});
+
+				socket.emit('groups.update', {
+					groupName: ajaxify.variables.get('group_name'),
+					values: settings
+				}, function(err) {
+					if (err) {
+						return app.alertError(err.message);
+					}
+
+					if (settings.name) {
+						ajaxify.go('groups/' + encodeURIComponent(settings.name));
+					} else {
+						ajaxify.refresh();
+					}
+				});
+			});
+		}
+	};
+
 	return Details;
 });

public/vendor/colorpicker/colorpicker.css

@@ -3,7 +3,7 @@
 	height: 176px;
 	overflow: hidden;
 	position: absolute;
-	background: url(./images/custom_background.png);
+	background: url(./vendor/colorpicker/images/custom_background.png);
 	font-family: Arial, Helvetica, sans-serif;
 	display: none;
 }
@@ -23,7 +23,7 @@
 	left: 0;
 	width: 150px;
 	height: 150px;
-	background: url(./images/colorpicker_overlay.png);
+	background: url(./vendor/colorpicker/images/colorpicker_overlay.png);
 }
 .colorpicker_color div div {
 	position: absolute;
@@ -32,7 +32,7 @@
 	width: 11px;
 	height: 11px;
 	overflow: hidden;
-	background: url(./images/colorpicker_select.gif);
+	background: url(./vendor/colorpicker/images/colorpicker_select.gif);
 	margin: -5px 0 0 -5px;
 }
 .colorpicker_hue {
@@ -48,7 +48,7 @@
 	width: 35px;
 	height: 9px;
 	overflow: hidden;
-	background: url(./images/custom_indic.gif) left top;
+	background: url(./vendor/colorpicker/images/custom_indic.gif) left top;
 	margin: -4px 0 0 0;
 	left: 0px;
 }
@@ -86,7 +86,7 @@
 	position: absolute;
 	width: 72px;
 	height: 22px;
-	background: url(./images/custom_hex.png) top;
+	background: url(./vendor/colorpicker/images/custom_hex.png) top;
 	left: 212px;
 	top: 142px;
 }
@@ -109,32 +109,32 @@
 	cursor: n-resize;
 }
 .colorpicker_rgb_r {
-	background-image: url(./images/custom_rgb_r.png);
+	background-image: url(./vendor/colorpicker/images/custom_rgb_r.png);
 	top: 52px;
 	left: 212px;
 }
 .colorpicker_rgb_g {
-	background-image: url(./images/custom_rgb_g.png);
+	background-image: url(./vendor/colorpicker/images/custom_rgb_g.png);
 	top: 82px;
 	left: 212px;
 }
 .colorpicker_rgb_b {
-	background-image: url(./images/custom_rgb_b.png);
+	background-image: url(./vendor/colorpicker/images/custom_rgb_b.png);
 	top: 112px;
 	left: 212px;
 }
 .colorpicker_hsb_h {
-	background-image: url(./images/custom_hsb_h.png);
+	background-image: url(./vendor/colorpicker/images/custom_hsb_h.png);
 	top: 52px;
 	left: 282px;
 }
 .colorpicker_hsb_s {
-	background-image: url(./images/custom_hsb_s.png);
+	background-image: url(./vendor/colorpicker/images/custom_hsb_s.png);
 	top: 82px;
 	left: 282px;
 }
 .colorpicker_hsb_b {
-	background-image: url(./images/custom_hsb_b.png);
+	background-image: url(./vendor/colorpicker/images/custom_hsb_b.png);
 	top: 112px;
 	left: 282px;
 }
@@ -143,7 +143,7 @@
 	position: absolute;
 	width: 22px;
 	height: 22px;
-	background: url(./images/custom_submit.png) top;
+	background: url(./vendor/colorpicker/images/custom_submit.png) top;
 	left: 322px;
 	top: 142px;
 	overflow: hidden;

src/groups.js

@@ -423,7 +423,8 @@ var async = require('async'),
 				description: values.description || '',
 				icon: values.icon || '',
 				labelColor: values.labelColor || '#000000',
-				hidden: values.hidden || '0'
+				hidden: values.hidden || '0',
+				'private': values.private === false ? '0' : '1'
 			}, function(err) {
 				if (err) {
 					return callback(err);

src/meta/css.js

@@ -49,9 +49,11 @@ module.exports = function(Meta) {
 
 				source += '\n@import (inline) "..' + path.sep + '..' + path.sep + 'public/vendor/jquery/css/smoothness/jquery-ui-1.10.4.custom.min.css";';
 				source += '\n@import (inline) "..' + path.sep + '..' + path.sep + 'public/vendor/jquery/bootstrap-tagsinput/bootstrap-tagsinput.css";';
-
+				source += '\n@import (inline) "..' + path.sep + '..' + path.sep + 'public/vendor/colorpicker/colorpicker.css";';
 
 				acpSource = '\n@import "..' + path.sep + 'public/less/admin/admin";\n' + source;
+				acpSource += '\n@import (inline) "..' + path.sep + 'public/vendor/colorpicker/colorpicker.css";';
+
 				source = '@import "./theme";\n' + source;
 
 				async.parallel([

src/socket.io/admin/groups.js

@@ -41,6 +41,7 @@ Groups.leave = function(socket, data, callback) {
 	groups.leave(data.groupName, data.uid, callback);
 };
 
+// Possibly remove this and call SocketGroups.update instead
 Groups.update = function(socket, data, callback) {
 	if(!data) {
 		return callback(new Error('[[error:invalid-data]]'));

src/socket.io/groups.js

@@ -87,4 +87,18 @@ SocketGroups.reject = function(socket, data, callback) {
 	});
 };
 
+SocketGroups.update = function(socket, data, callback) {
+	if(!data) {
+		return callback(new Error('[[error:invalid-data]]'));
+	}
+
+	groups.ownership.isOwner(socket.uid, data.groupName, function(err, isOwner) {
+		if (!isOwner) {
+			return callback(new Error('[[error:no-privileges]]'));
+		}
+
+		groups.update(data.groupName, data.values, callback);
+	});
+};
+
 module.exports = SocketGroups;

src/views/admin/header.tpl

@@ -5,7 +5,6 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<link rel="stylesheet" href="{relative_path}/vendor/jquery/css/smoothness/jquery-ui-1.10.4.custom.min.css?{cache-buster}">
-	<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/colorpicker/colorpicker.css?{cache-buster}">
 	<link rel="stylesheet" type="text/css" href="{relative_path}/vendor/nanoscroller/nanoscroller.css?{cache-buster}">
 	<link rel="stylesheet" type="text/css" href="{relative_path}/admin.css?{cache-buster}" />