Replace color generation with CSS classes

These colors were built using the current generation function to have
similar style.
This commit is contained in:
Jérémie Astori 2016-05-12 02:15:02 -04:00
parent e6990e0fc7
commit c87d82dc48
18 changed files with 100 additions and 114 deletions

View File

@ -752,6 +752,71 @@ button,
color: #50a656 !important; 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 { #chat .text {
padding-left: 10px; padding-left: 10px;
padding-right: 6px; padding-right: 6px;

View File

@ -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);
}
);

View File

@ -1,5 +0,0 @@
Handlebars.registerHelper(
"stringcolor", function(str) {
return window.stringcolor(str);
}
);

View File

@ -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);
}

View File

@ -1,2 +1,2 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
<span class="action-text">{{{parse text}}}</span> <span class="action-text">{{{parse text}}}</span>

View File

@ -1,2 +1,2 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{from}}</a>
<b>{{ctcpType}}</b> {{{parse ctcpMessage}}} <b>{{ctcpType}}</b> {{{parse ctcpMessage}}}

View File

@ -1,9 +1,9 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{from}}</a>
invited invited
{{#if invitedYou}} {{#if invitedYou}}
you you
{{else}} {{else}}
<a href="#" class="user" data-name="{{invited}}" style="color:#{{stringcolor invited}}">{{invited}}</a> <a href="#" class="user {{colorClass invited}}" data-name="{{invited}}">{{invited}}</a>
{{/if}} {{/if}}
to to
{{{parse channel}}} {{{parse channel}}}

View File

@ -1,3 +1,3 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
<i class="hostmask">({{hostmask}})</i> <i class="hostmask">({{hostmask}})</i>
has joined the channel has joined the channel

View File

@ -1,6 +1,6 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
has kicked has kicked
<a href="#" class="user" data-name="{{target}}" style="color:#{{stringcolor target}}">{{target}}</a> <a href="#" class="user {{colorClass target}}" data-name="{{target}}">{{target}}</a>
{{#if text}} {{#if text}}
<i class="part-reason">({{{parse text}}})</i> <i class="part-reason">({{{parse text}}})</i>
{{/if}} {{/if}}

View File

@ -1,3 +1,3 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
sets mode sets mode
{{{parse text}}} {{{parse text}}}

View File

@ -1,3 +1,3 @@
<a href="#" class="user" data-name="{{nick}}" style="color:#{{stringcolor nick}}">{{mode}}{{nick}}</a> <a href="#" class="user {{colorClass nick}}" data-name="{{nick}}">{{mode}}{{nick}}</a>
is now known as is now known as
<a href="#" class="user" data-name="{{new_nick}}" style="color:#{{stringcolor new_nick}}">{{mode}}{{new_nick}}</a> <a href="#" class="user {{colorClass new_nick}}" data-name="{{new_nick}}">{{mode}}{{new_nick}}</a>

View File

@ -1,4 +1,4 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
<i class="hostmask">({{hostmask}})</i> <i class="hostmask">({{hostmask}})</i>
has left the channel has left the channel
{{#if text}} {{#if text}}

View File

@ -1,4 +1,4 @@
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
<i class="hostmask">({{hostmask}})</i> <i class="hostmask">({{hostmask}})</i>
has quit has quit
{{#if text}} {{#if text}}

View File

@ -1,5 +1,5 @@
{{#if from}} {{#if from}}
<a href="#" class="user" data-name="{{from}}" style="color:#{{stringcolor from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
has changed the topic to: has changed the topic to:
{{else}} {{else}}
The topic is: The topic is:

View File

@ -1,3 +1,3 @@
Topic set by Topic set by
<a href="#" class="user" data-name="{{nick}}" style="color:#{{stringcolor nick}}">{{mode}}{{nick}}</a> <a href="#" class="user {{colorClass nick}}" data-name="{{nick}}">{{mode}}{{nick}}</a>
on {{localeDate when}} on {{localeDate when}}

View File

@ -1,35 +1,35 @@
<div> <div>
<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a> <a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
<i class="hostmask">({{whois.user}}@{{whois.host}})</i>: <i class="hostmask">({{whois.user}}@{{whois.host}})</i>:
<b>{{whois.real_name}}</b> <b>{{whois.real_name}}</b>
</div> </div>
{{#if whois.account}} {{#if whois.account}}
<div> <div>
<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a> <a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
is logged in as <b>{{whois.account}}</b> is logged in as <b>{{whois.account}}</b>
</div> </div>
{{/if}} {{/if}}
{{#if whois.channels}} {{#if whois.channels}}
<div> <div>
<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a> <a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
is on the following channels: {{{parse whois.channels}}} is on the following channels: {{{parse whois.channels}}}
</div> </div>
{{/if}} {{/if}}
{{#if whois.server}} {{#if whois.server}}
<div> <div>
<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a> <a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
is connected to {{whois.server}} <i>({{whois.server_info}})</i> is connected to {{whois.server}} <i>({{whois.server_info}})</i>
</div> </div>
{{/if}} {{/if}}
{{#if whois.secure}} {{#if whois.secure}}
<div> <div>
<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a> <a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
is using a secure connection is using a secure connection
</div> </div>
{{/if}} {{/if}}
{{#if whois.away}} {{#if whois.away}}
<div> <div>
<a href="#" class="user" data-name="{{whois.nick}}" style="color:#{{stringcolor whois.nick}}">{{whois.nick}}</a> <a href="#" class="user {{colorClass whois.nick}}" data-name="{{whois.nick}}">{{whois.nick}}</a>
is away <i>({{whois.away}})</i> is away <i>({{whois.away}})</i>
</div> </div>
{{/if}} {{/if}}

View File

@ -4,7 +4,7 @@
</span> </span>
<span class="from"> <span class="from">
{{#if from}} {{#if from}}
<a href="#" class="user" style="color: #{{stringcolor from}}" data-name="{{from}}">{{mode}}{{from}}</a> <a href="#" class="user {{colorClass from}}" data-name="{{from}}">{{mode}}{{from}}</a>
{{/if}} {{/if}}
</span> </span>
{{#equal type "toggle"}} {{#equal type "toggle"}}

View File

@ -13,7 +13,7 @@
{{/unless}} {{/unless}}
<div class="user-mode {{modes mode}}"> <div class="user-mode {{modes mode}}">
{{/diff}} {{/diff}}
<button class="user" style="color: #{{stringcolor name}}" data-name="{{name}}">{{mode}}{{name}}</button> <button class="user {{colorClass name}}" data-name="{{name}}">{{mode}}{{name}}</button>
{{/each}} {{/each}}
</div> </div>
</div> </div>