From c87d82dc488acd910f6f2760418cafbce6bfbcef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Thu, 12 May 2016 02:15:02 -0400 Subject: [PATCH] Replace color generation with CSS classes These colors were built using the current generation function to have similar style. --- client/css/style.css | 65 ++++++++++++++++++ client/js/libs/handlebars/colorClass.js | 13 ++++ client/js/libs/handlebars/stringcolor.js | 5 -- client/js/libs/stringcolor.js | 87 ------------------------ client/views/actions/action.tpl | 2 +- client/views/actions/ctcp.tpl | 2 +- client/views/actions/invite.tpl | 4 +- client/views/actions/join.tpl | 2 +- client/views/actions/kick.tpl | 4 +- client/views/actions/mode.tpl | 2 +- client/views/actions/nick.tpl | 4 +- client/views/actions/part.tpl | 2 +- client/views/actions/quit.tpl | 2 +- client/views/actions/topic.tpl | 2 +- client/views/actions/topic_set_by.tpl | 2 +- client/views/actions/whois.tpl | 12 ++-- client/views/msg.tpl | 2 +- client/views/user.tpl | 2 +- 18 files changed, 100 insertions(+), 114 deletions(-) create mode 100644 client/js/libs/handlebars/colorClass.js delete mode 100644 client/js/libs/handlebars/stringcolor.js delete mode 100644 client/js/libs/stringcolor.js diff --git a/client/css/style.css b/client/css/style.css index cd071a0c..d4d17811 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -752,6 +752,71 @@ button, color: #50a656 !important; } +#chat .user.color-1 { color: #1396cf; } +#chat .user.color-2 { color: #ffcf89; } +#chat .user.color-3 { color: #00dc5f; } +#chat .user.color-4 { color: #ff5bc8; } +#chat .user.color-5 { color: #ff0e1b; } +#chat .user.color-6 { color: #000094; } +#chat .user.color-7 { color: #006441; } +#chat .user.color-8 { color: #00566e; } +#chat .user.color-9 { color: #ff0078; } +#chat .user.color-10 { color: #15d5a3; } +#chat .user.color-11 { color: #006b3b; } +#chat .user.color-12 { color: #00c5ba; } +#chat .user.color-13 { color: #00465b; } +#chat .user.color-14 { color: #ffafce; } +#chat .user.color-15 { color: #ff3b12; } +#chat .user.color-16 { color: #16cc6a; } +#chat .user.color-17 { color: #ff0072; } +#chat .user.color-18 { color: #ff5877; } +#chat .user.color-19 { color: #ff1753; } +#chat .user.color-20 { color: #007a56; } +#chat .user.color-21 { color: #095092; } +#chat .user.color-22 { color: #000bde; } +#chat .user.color-23 { color: #00bca9; } +#chat .user.color-24 { color: #00367d; } +#chat .user.color-25 { color: #009ec4; } +#chat .user.color-26 { color: #006119; } +#chat .user.color-27 { color: #008bb8; } +#chat .user.color-28 { color: #469c00; } +#chat .user.color-29 { color: #ff0f95; } +#chat .user.color-30 { color: #ff7615; } +#chat .user.color-31 { color: #ff0eb2; } +#chat .user.color-32 { color: #ff199b; } +#chat .user.color-33 { color: #ffcd7d; } +#chat .user.color-34 { color: #009a47; } +#chat .user.color-35 { color: #ffa804; } +#chat .user.color-36 { color: #e100ad; } +#chat .user.color-37 { color: #ff9e6b; } +#chat .user.color-38 { color: #0001dc; } +#chat .user.color-39 { color: #007d86; } +#chat .user.color-40 { color: #ff00b1; } +#chat .user.color-41 { color: #ff2086; } +#chat .user.color-42 { color: #00bb72; } +#chat .user.color-43 { color: #ff9901; } +#chat .user.color-44 { color: #0d32d7; } +#chat .user.color-45 { color: #ff0b62; } +#chat .user.color-46 { color: #0057c4; } +#chat .user.color-47 { color: #001488; } +#chat .user.color-48 { color: #006f1c; } +#chat .user.color-49 { color: #1d2b16; } +#chat .user.color-50 { color: #00cb53; } +#chat .user.color-51 { color: #ff598b; } +#chat .user.color-52 { color: #0009e4; } +#chat .user.color-53 { color: #ff31b7; } +#chat .user.color-54 { color: #ff0290; } +#chat .user.color-55 { color: #1e79e4; } +#chat .user.color-56 { color: #ff76bc; } +#chat .user.color-57 { color: #1e9563; } +#chat .user.color-58 { color: #0000a4; } +#chat .user.color-59 { color: #ffd500; } +#chat .user.color-60 { color: #ff298f; } +#chat .user.color-61 { color: #2d960e; } +#chat .user.color-62 { color: #ff4846; } +#chat .user.color-63 { color: #0094c0; } +#chat .user.color-64 { color: #0000c4; } + #chat .text { padding-left: 10px; padding-right: 6px; diff --git a/client/js/libs/handlebars/colorClass.js b/client/js/libs/handlebars/colorClass.js new file mode 100644 index 00000000..966be252 --- /dev/null +++ b/client/js/libs/handlebars/colorClass.js @@ -0,0 +1,13 @@ +"use strict"; + +Handlebars.registerHelper( + // Generates a string from "color-1" to "color-64" based on an input string + "colorClass", function(str) { + var hash = 0; + for (var i = 0; i < str.length; i++) { + hash += str.charCodeAt(i); + } + + return "color-" + (1 + hash % 64); + } +); diff --git a/client/js/libs/handlebars/stringcolor.js b/client/js/libs/handlebars/stringcolor.js deleted file mode 100644 index 0a91a781..00000000 --- a/client/js/libs/handlebars/stringcolor.js +++ /dev/null @@ -1,5 +0,0 @@ -Handlebars.registerHelper( - "stringcolor", function(str) { - return window.stringcolor(str); - } -); diff --git a/client/js/libs/stringcolor.js b/client/js/libs/stringcolor.js deleted file mode 100644 index 4db91183..00000000 --- a/client/js/libs/stringcolor.js +++ /dev/null @@ -1,87 +0,0 @@ -/*! - * stringcolor - * Generate a consistent color from any string. - * - * Source: - * https://github.com/erming/stringcolor - * - * Version 0.2.0 - */ -(function($) { - /** - * Generate hex color code from a string. - * - * @param {String} string - */ - $.stringcolor = function(string) { - return "#" + stringcolor(string); - }; - - /** - * Set one or more CSS properties for the set of matched elements. - * - * @param {String|Array} property - * @param {String} string - */ - $.fn.stringcolor = function(property, string) { - if (!property || !string) { - throw new Error("$(selector).string_to_color() takes 2 arguments"); - } - return this.each(function() { - var props = [].concat(property); - var $this = $(this); - $.map(props, function(p) { - $this.css(p, $.stringcolor(string)); - }); - }); - }; -})(jQuery); - -/*! - * Name: string_to_color - * Author: Brandon Corbin [code@icorbin.com] - * Website: http://icorbin.com - */ -function string_to_color(str) { - // Generate a Hash for the String - var hash = function(word) { - var h = 0; - for (var i = 0; i < word.length; i++) { - h = word.charCodeAt(i) + ((h << 5) - h); - } - return h; - }; - - // Change the darkness or lightness - var shade = function(color, prc) { - var num = parseInt(color, 16), - amt = Math.round(2.55 * prc), - R = (num >> 16) + amt, - G = (num >> 8 & 0x00FF) + amt, - B = (num & 0x0000FF) + amt; - return (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + - (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + - (B < 255 ? B < 1 ? 0 : B : 255)) - .toString(16) - .slice(1); - }; - - // Convert init to an RGBA - var int_to_rgba = function(i) { - var color = ((i >> 24) & 0xFF).toString(16) + - ((i >> 16) & 0xFF).toString(16) + - ((i >> 8) & 0xFF).toString(16) + - (i & 0xFF).toString(16); - return color; - }; - - return shade( - int_to_rgba(hash(str)), - -10 - ); -} - -var cache = {}; -function stringcolor(str) { - return cache[str] = cache[str] || string_to_color(str); -} diff --git a/client/views/actions/action.tpl b/client/views/actions/action.tpl index f840a9ce..fa5eefb8 100644 --- a/client/views/actions/action.tpl +++ b/client/views/actions/action.tpl @@ -1,2 +1,2 @@ -{{mode}}{{from}} +{{mode}}{{from}} {{{parse text}}} diff --git a/client/views/actions/ctcp.tpl b/client/views/actions/ctcp.tpl index 444ffdef..9f02f804 100644 --- a/client/views/actions/ctcp.tpl +++ b/client/views/actions/ctcp.tpl @@ -1,2 +1,2 @@ -{{from}} +{{from}} {{ctcpType}} {{{parse ctcpMessage}}} diff --git a/client/views/actions/invite.tpl b/client/views/actions/invite.tpl index 74098399..4f710e82 100644 --- a/client/views/actions/invite.tpl +++ b/client/views/actions/invite.tpl @@ -1,9 +1,9 @@ -{{from}} +{{from}} invited {{#if invitedYou}} you {{else}} - {{invited}} + {{invited}} {{/if}} to {{{parse channel}}} diff --git a/client/views/actions/join.tpl b/client/views/actions/join.tpl index 5e3f48c3..265c361b 100644 --- a/client/views/actions/join.tpl +++ b/client/views/actions/join.tpl @@ -1,3 +1,3 @@ -{{mode}}{{from}} +{{mode}}{{from}} ({{hostmask}}) has joined the channel diff --git a/client/views/actions/kick.tpl b/client/views/actions/kick.tpl index 8dc44a29..e50aae12 100644 --- a/client/views/actions/kick.tpl +++ b/client/views/actions/kick.tpl @@ -1,6 +1,6 @@ -{{mode}}{{from}} +{{mode}}{{from}} has kicked -{{target}} +{{target}} {{#if text}} ({{{parse text}}}) {{/if}} diff --git a/client/views/actions/mode.tpl b/client/views/actions/mode.tpl index c162ac2a..28887c9b 100644 --- a/client/views/actions/mode.tpl +++ b/client/views/actions/mode.tpl @@ -1,3 +1,3 @@ -{{mode}}{{from}} +{{mode}}{{from}} sets mode {{{parse text}}} diff --git a/client/views/actions/nick.tpl b/client/views/actions/nick.tpl index dc168ffa..59f26e3a 100644 --- a/client/views/actions/nick.tpl +++ b/client/views/actions/nick.tpl @@ -1,3 +1,3 @@ -{{mode}}{{nick}} +{{mode}}{{nick}} is now known as -{{mode}}{{new_nick}} +{{mode}}{{new_nick}} diff --git a/client/views/actions/part.tpl b/client/views/actions/part.tpl index 36415248..157dcb4f 100644 --- a/client/views/actions/part.tpl +++ b/client/views/actions/part.tpl @@ -1,4 +1,4 @@ -{{mode}}{{from}} +{{mode}}{{from}} ({{hostmask}}) has left the channel {{#if text}} diff --git a/client/views/actions/quit.tpl b/client/views/actions/quit.tpl index a373f659..7249d1f6 100644 --- a/client/views/actions/quit.tpl +++ b/client/views/actions/quit.tpl @@ -1,4 +1,4 @@ -{{mode}}{{from}} +{{mode}}{{from}} ({{hostmask}}) has quit {{#if text}} diff --git a/client/views/actions/topic.tpl b/client/views/actions/topic.tpl index d79e3eb8..4aac391c 100644 --- a/client/views/actions/topic.tpl +++ b/client/views/actions/topic.tpl @@ -1,5 +1,5 @@ {{#if from}} - {{mode}}{{from}} + {{mode}}{{from}} has changed the topic to: {{else}} The topic is: diff --git a/client/views/actions/topic_set_by.tpl b/client/views/actions/topic_set_by.tpl index 9a31e293..516dce9e 100644 --- a/client/views/actions/topic_set_by.tpl +++ b/client/views/actions/topic_set_by.tpl @@ -1,3 +1,3 @@ Topic set by -{{mode}}{{nick}} +{{mode}}{{nick}} on {{localeDate when}} diff --git a/client/views/actions/whois.tpl b/client/views/actions/whois.tpl index 7f8f5112..40fe4cd8 100644 --- a/client/views/actions/whois.tpl +++ b/client/views/actions/whois.tpl @@ -1,35 +1,35 @@
- {{whois.nick}} + {{whois.nick}} ({{whois.user}}@{{whois.host}}): {{whois.real_name}}
{{#if whois.account}}
- {{whois.nick}} + {{whois.nick}} is logged in as {{whois.account}}
{{/if}} {{#if whois.channels}}
- {{whois.nick}} + {{whois.nick}} is on the following channels: {{{parse whois.channels}}}
{{/if}} {{#if whois.server}}
- {{whois.nick}} + {{whois.nick}} is connected to {{whois.server}} ({{whois.server_info}})
{{/if}} {{#if whois.secure}}
- {{whois.nick}} + {{whois.nick}} is using a secure connection
{{/if}} {{#if whois.away}}
- {{whois.nick}} + {{whois.nick}} is away ({{whois.away}})
{{/if}} diff --git a/client/views/msg.tpl b/client/views/msg.tpl index e605bd95..32bed856 100644 --- a/client/views/msg.tpl +++ b/client/views/msg.tpl @@ -4,7 +4,7 @@ {{#if from}} - {{mode}}{{from}} + {{mode}}{{from}} {{/if}} {{#equal type "toggle"}} diff --git a/client/views/user.tpl b/client/views/user.tpl index a96dd288..666fbd5e 100644 --- a/client/views/user.tpl +++ b/client/views/user.tpl @@ -13,7 +13,7 @@ {{/unless}}
{{/diff}} - + {{/each}}