From b4731ad47bf3db9ed12c879decf3dac185e4d7b2 Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Fri, 9 Jan 2015 13:51:27 -0500 Subject: [PATCH] added colorpicker to frontend, badge colour changes for groups, #2588 --- public/language/en_GB/groups.json | 4 +- public/src/client/groups/details.js | 68 ++++++++++++++++++++++- public/vendor/colorpicker/colorpicker.css | 24 ++++---- src/groups.js | 3 +- src/meta/css.js | 4 +- src/socket.io/admin/groups.js | 1 + src/socket.io/groups.js | 14 +++++ src/views/admin/header.tpl | 1 - 8 files changed, 102 insertions(+), 17 deletions(-) diff --git a/public/language/en_GB/groups.json b/public/language/en_GB/groups.json index 8abfdbec4e..1dafb41ed6 100644 --- a/public/language/en_GB/groups.json +++ b/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" } \ No newline at end of file diff --git a/public/src/client/groups/details.js b/public/src/client/groups/details.js index 15291cb9d8..1d6cb4141c 100644 --- a/public/src/client/groups/details.js +++ b/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; }); \ No newline at end of file diff --git a/public/vendor/colorpicker/colorpicker.css b/public/vendor/colorpicker/colorpicker.css index b5b2158534..5ee96ba682 100644 --- a/public/vendor/colorpicker/colorpicker.css +++ b/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; diff --git a/src/groups.js b/src/groups.js index 50b5bc5c8d..333b823396 100644 --- a/src/groups.js +++ b/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); diff --git a/src/meta/css.js b/src/meta/css.js index 5021e9b302..9c00ba8633 100644 --- a/src/meta/css.js +++ b/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([ diff --git a/src/socket.io/admin/groups.js b/src/socket.io/admin/groups.js index 0bcf60ab7b..b78380428e 100644 --- a/src/socket.io/admin/groups.js +++ b/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]]')); diff --git a/src/socket.io/groups.js b/src/socket.io/groups.js index 039ad42b89..fe401a4d15 100644 --- a/src/socket.io/groups.js +++ b/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; diff --git a/src/views/admin/header.tpl b/src/views/admin/header.tpl index dfa2dc9c89..9bd680936a 100644 --- a/src/views/admin/header.tpl +++ b/src/views/admin/header.tpl @@ -5,7 +5,6 @@ -