Merge pull request #448 from RocketChat/colors-2

Process colors in messages

.meteor/packages

@@ -79,3 +79,4 @@ todda00:friendly-slugs
 underscorestring:underscore.string
 yasaricli:slugify
 yasinuslu:blaze-meta
+rocketchat:colors

.meteor/versions

@@ -111,6 +111,7 @@ reactive-var@1.0.5
 reload@1.1.3
 retry@1.0.3
 rocketchat:autolinker@0.0.1
+rocketchat:colors@0.0.1
 rocketchat:emojione@0.0.1
 rocketchat:favico@0.0.1
 rocketchat:file@0.0.1

packages/rocketchat-colors/client.coffee

@@ -0,0 +1,17 @@
+###
+# Colors is a named function that will process Colors
+# @param {Object} message - The message object
+###
+
+class ColorsClient
+	constructor: (message) ->
+		if _.trim message.html
+			msg = message.html
+
+			msg = msg.replace /(?:^|\s|\n)(#[A-Fa-f0-9]{3}([A-Fa-f0-9]{3})?)\b/g, (match, completeColor) ->
+				return match.replace completeColor, "<div class=\"message-color\"><div class=\"message-color-sample\" style=\"background-color: #{completeColor}\"></div>#{completeColor.toUpperCase()}</div>"
+
+			message.html = msg
+		return message
+
+RocketChat.callbacks.add 'renderMessage', ColorsClient, RocketChat.callbacks.priority.HIGH

packages/rocketchat-colors/package.js

@@ -0,0 +1,22 @@
+Package.describe({
+	name: 'rocketchat:colors',
+	version: '0.0.1',
+	summary: 'Message pre-processor that will process colors',
+	git: ''
+});
+
+Package.onUse(function(api) {
+	api.versionsFrom('1.0');
+
+	api.use([
+		'coffeescript',
+		'rocketchat:lib@0.0.1'
+	]);
+
+	api.addFiles('client.coffee', 'client');
+	api.addFiles('style.css', 'client');
+});
+
+Package.onTest(function(api) {
+
+});

packages/rocketchat-colors/style.css

@@ -0,0 +1,16 @@
+.message-color {
+    display: inline-block;
+    font-weight: 100;
+}
+
+.message-color-sample {
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    border-radius: 3px;
+    margin-right: 3px;
+    margin-left: 2px;
+    border: 1px solid rgba(0,0,0,.2);
+    position: relative;
+    top: 2px;
+}