supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #325 from thelounge/astorije/color-classes

Browse Source 
CSS classes in themes for nick colors
This commit is contained in:
Alistair McKinlay 2016-05-17 08:15:25 +01:00
commit 304314d9c6
23 changed files with 153 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
client/css/style.css
View File

@ -746,12 +746,45 @@ button,
color: #50a656;
}
#chat.no-colors .from .user,
#chat.no-colors .text .user,
#chat.no-colors .sidebar .user {
color: #50a656 !important;
/* Nicknames */
#chat .user {
color: #50a656;
}
#chat.colored-nicks .user.color-1 { color: #1396cf; }
#chat.colored-nicks .user.color-2 { color: #ffcf89; }
#chat.colored-nicks .user.color-3 { color: #00dc5f; }
#chat.colored-nicks .user.color-4 { color: #ff5bc8; }
#chat.colored-nicks .user.color-5 { color: #ff0e1b; }
#chat.colored-nicks .user.color-6 { color: #000094; }
#chat.colored-nicks .user.color-7 { color: #006441; }
#chat.colored-nicks .user.color-8 { color: #00566e; }
#chat.colored-nicks .user.color-9 { color: #ff0078; }
#chat.colored-nicks .user.color-10 { color: #15d5a3; }
#chat.colored-nicks .user.color-11 { color: #006b3b; }
#chat.colored-nicks .user.color-12 { color: #00c5ba; }
#chat.colored-nicks .user.color-13 { color: #00465b; }
#chat.colored-nicks .user.color-14 { color: #ffafce; }
#chat.colored-nicks .user.color-15 { color: #ff3b12; }
#chat.colored-nicks .user.color-16 { color: #16cc6a; }
#chat.colored-nicks .user.color-17 { color: #ff0072; }
#chat.colored-nicks .user.color-18 { color: #ff5877; }
#chat.colored-nicks .user.color-19 { color: #ff1753; }
#chat.colored-nicks .user.color-20 { color: #007a56; }
#chat.colored-nicks .user.color-21 { color: #095092; }
#chat.colored-nicks .user.color-22 { color: #000bde; }
#chat.colored-nicks .user.color-23 { color: #00bca9; }
#chat.colored-nicks .user.color-24 { color: #00367d; }
#chat.colored-nicks .user.color-25 { color: #009ec4; }
#chat.colored-nicks .user.color-26 { color: #006119; }
#chat.colored-nicks .user.color-27 { color: #008bb8; }
#chat.colored-nicks .user.color-28 { color: #469c00; }
#chat.colored-nicks .user.color-29 { color: #ff0f95; }
#chat.colored-nicks .user.color-30 { color: #ff7615; }
#chat.colored-nicks .user.color-31 { color: #ff4846; }
#chat.colored-nicks .user.color-32 { color: #ff199b; }
#chat .text {
padding-left: 10px;
padding-right: 6px;

4
client/index.html
View File

@ -41,7 +41,7 @@
</footer>
<div id="main">
<div id="windows">
<div id="chat" class="no-colors"></div>
<div id="chat"></div>
<div id="sign-in" class="window">
<div class="header">
<button class="lt" aria-label="Toggle channel list"></button>
@ -211,7 +211,7 @@
</div>
<div class="col-sm-12">
<label class="opt">
<input type="checkbox" name="colors">
<input type="checkbox" name="coloredNicks">
Enable colored nicknames
</label>
</div>

13
client/js/libs/handlebars/colorClass.js Normal file
View File

@ -0,0 +1,13 @@
"use strict";
Handlebars.registerHelper(
// Generates a string from "color-1" to "color-32" 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 % 32);
}
);

5
client/js/libs/handlebars/stringcolor.js
View File

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

87
client/js/libs/stringcolor.js
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);
}

6
client/js/lounge.js
View File

@ -437,7 +437,7 @@ $(function() {
var settings = $("#settings");
var options = $.extend({
desktopNotifications: false,
colors: false,
coloredNicks: true,
join: true,
links: true,
mode: true,
@ -487,8 +487,8 @@ $(function() {
].indexOf(name) !== -1) {
chat.toggleClass("hide-" + name, !self.prop("checked"));
}
if (name === "colors") {
chat.toggleClass("no-colors", !self.prop("checked"));
if (name === "coloredNicks") {
chat.toggleClass("colored-nicks", self.prop("checked"));
}
if (name === "userStyles") {
$(document.head).find("#user-specified-css").html(options[name]);

6
client/themes/crypto.css
View File

@ -112,10 +112,8 @@ a:hover,
top: 48px;
}
#chat.no-colors .from .user,
#chat.no-colors .text .user,
#chat.no-colors .sidebar .user {
color: #000 !important;
#chat .user {
color: black;
font-weight: bold;
}

45
client/themes/morning.css
View File

@ -92,18 +92,47 @@ QUIT #d0907d
}
/* Nicknames */
#chat.no-colors .from .user,
#chat.no-colors .text .user,
#chat.no-colors .sidebar .user {
color: #b0bacf !important;
#chat .user {
color: #b0bacf;
}
#chat.no-colors .from .user:hover,
#chat.no-colors .text .user:hover,
#chat.no-colors .sidebar .user:hover {
color: #fefefe !important;
#chat .user:hover {
color: #fefefe;
}
#chat.colored-nicks .user.color-1 { color: #f7adf7; }
#chat.colored-nicks .user.color-2 { color: #abf99f; }
#chat.colored-nicks .user.color-3 { color: #86efdc; }
#chat.colored-nicks .user.color-4 { color: #b76ee5; }
#chat.colored-nicks .user.color-5 { color: #f9a4b3; }
#chat.colored-nicks .user.color-6 { color: #f7999a; }
#chat.colored-nicks .user.color-7 { color: #f497b9; }
#chat.colored-nicks .user.color-8 { color: #f9a9d7; }
#chat.colored-nicks .user.color-9 { color: #7fa2e2; }
#chat.colored-nicks .user.color-10 { color: #a8b8ff; }
#chat.colored-nicks .user.color-11 { color: #ad88fc; }
#chat.colored-nicks .user.color-12 { color: #f4aead; }
#chat.colored-nicks .user.color-13 { color: #fc71ab; }
#chat.colored-nicks .user.color-14 { color: #ff72e0; }
#chat.colored-nicks .user.color-15 { color: #8cb6ea; }
#chat.colored-nicks .user.color-16 { color: #f9857c; }
#chat.colored-nicks .user.color-17 { color: #ed9b82; }
#chat.colored-nicks .user.color-18 { color: #8df484; }
#chat.colored-nicks .user.color-19 { color: #ffcce3; }
#chat.colored-nicks .user.color-20 { color: #efcc81; }
#chat.colored-nicks .user.color-21 { color: #90a1ed; }
#chat.colored-nicks .user.color-22 { color: #f4d484; }
#chat.colored-nicks .user.color-23 { color: #97ea70; }
#chat.colored-nicks .user.color-24 { color: #fcbbba; }
#chat.colored-nicks .user.color-25 { color: #eef975; }
#chat.colored-nicks .user.color-26 { color: #c7ff93; }
#chat.colored-nicks .user.color-27 { color: #ffade1; }
#chat.colored-nicks .user.color-28 { color: #98ecf2; }
#chat.colored-nicks .user.color-29 { color: #7187f2; }
#chat.colored-nicks .user.color-30 { color: #9676e2; }
#chat.colored-nicks .user.color-31 { color: #f2a4eb; }
#chat.colored-nicks .user.color-32 { color: #85f27d; }
#chat a {
color: #428bca;
}

45
client/themes/zenburn.css
View File

@ -122,18 +122,47 @@ body {
}
/* Nicknames */
#chat.no-colors .from .user,
#chat.no-colors .text .user,
#chat.no-colors .sidebar .user {
color: #bc8cbc !important;
#chat .user {
color: #bc8cbc;
}
#chat.no-colors .from .user:hover,
#chat.no-colors .text .user:hover,
#chat.no-colors .sidebar .user:hover {
color: #dcdccc !important;
#chat .user:hover {
color: #dcdccc;
}
#chat.colored-nicks .user.color-1 { color: #f7adf7; }
#chat.colored-nicks .user.color-2 { color: #abf99f; }
#chat.colored-nicks .user.color-3 { color: #86efdc; }
#chat.colored-nicks .user.color-4 { color: #b76ee5; }
#chat.colored-nicks .user.color-5 { color: #f9a4b3; }
#chat.colored-nicks .user.color-6 { color: #f7999a; }
#chat.colored-nicks .user.color-7 { color: #f497b9; }
#chat.colored-nicks .user.color-8 { color: #f9a9d7; }
#chat.colored-nicks .user.color-9 { color: #7fa2e2; }
#chat.colored-nicks .user.color-10 { color: #a8b8ff; }
#chat.colored-nicks .user.color-11 { color: #ad88fc; }
#chat.colored-nicks .user.color-12 { color: #f4aead; }
#chat.colored-nicks .user.color-13 { color: #fc71ab; }
#chat.colored-nicks .user.color-14 { color: #ff72e0; }
#chat.colored-nicks .user.color-15 { color: #8cb6ea; }
#chat.colored-nicks .user.color-16 { color: #f9857c; }
#chat.colored-nicks .user.color-17 { color: #ed9b82; }
#chat.colored-nicks .user.color-18 { color: #8df484; }
#chat.colored-nicks .user.color-19 { color: #ffcce3; }
#chat.colored-nicks .user.color-20 { color: #efcc81; }
#chat.colored-nicks .user.color-21 { color: #90a1ed; }
#chat.colored-nicks .user.color-22 { color: #f4d484; }
#chat.colored-nicks .user.color-23 { color: #97ea70; }
#chat.colored-nicks .user.color-24 { color: #fcbbba; }
#chat.colored-nicks .user.color-25 { color: #eef975; }
#chat.colored-nicks .user.color-26 { color: #c7ff93; }
#chat.colored-nicks .user.color-27 { color: #ffade1; }
#chat.colored-nicks .user.color-28 { color: #98ecf2; }
#chat.colored-nicks .user.color-29 { color: #7187f2; }
#chat.colored-nicks .user.color-30 { color: #9676e2; }
#chat.colored-nicks .user.color-31 { color: #f2a4eb; }
#chat.colored-nicks .user.color-32 { color: #85f27d; }
#chat a {
color: #8c8cbc;
}

2
client/views/actions/action.tpl
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>

2
client/views/actions/ctcp.tpl
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}}}

4
client/views/actions/invite.tpl
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
{{#if invitedYou}}
you
{{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}}
to
{{{parse channel}}}

2
client/views/actions/join.tpl
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>
has joined the channel

4
client/views/actions/kick.tpl
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
<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}}
<i class="part-reason">({{{parse text}}})</i>
{{/if}}

2
client/views/actions/mode.tpl
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
{{{parse text}}}

4
client/views/actions/nick.tpl
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
<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>

2
client/views/actions/part.tpl
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>
has left the channel
{{#if text}}

2
client/views/actions/quit.tpl
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>
has quit
{{#if text}}

2
client/views/actions/topic.tpl
View File

@ -1,5 +1,5 @@
{{#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:
{{else}}
The topic is:

2
client/views/actions/topic_set_by.tpl
View File

@ -1,3 +1,3 @@
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}}

12
client/views/actions/whois.tpl
View File

@ -1,35 +1,35 @@
<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>:
<b>{{whois.real_name}}</b>
</div>
{{#if whois.account}}
<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>
</div>
{{/if}}
{{#if whois.channels}}
<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}}}
</div>
{{/if}}
{{#if whois.server}}
<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>
</div>
{{/if}}
{{#if whois.secure}}
<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
</div>
{{/if}}
{{#if whois.away}}
<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>
</div>
{{/if}}

2
client/views/msg.tpl
View File

@ -4,7 +4,7 @@
</span>
<span class="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}}
</span>
{{#equal type "toggle"}}

2
client/views/user.tpl
View File

@ -13,7 +13,7 @@
{{/unless}}
<div class="user-mode {{modes mode}}">
{{/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}}
</div>
</div>