Support colors in nick list

css/glowingbear.css

@@ -192,6 +192,16 @@ input[type=text], input[type=password], .badge {
     padding: 0;
     margin: 0;
 }
+#nicklist li,
+#nicklist a {
+    display: block;
+}
+#nicklist a {
+    text-decoration: none;
+}
+#nicklist a:hover {
+    background: #3b3b3b;
+}
 
 #connection-infos {
     float: left;

css/style.css

@@ -269,13 +269,13 @@
 .cwf-darkgray {
     color: #5d5d5d;
 }
-.cwf-darkred {
+.cwf-red {
     color: #c75646;
 }
 .cwf-lightred {
     color: #e09690;
 }
-.cwf-darkgreen {
+.cwf-green {
     color: #8eb33b;
 }
 .cwf-lightgreen {
@@ -287,19 +287,19 @@
 .cwf-yellow {
     color: #ffe377;
 }
-.cwf-darkblue {
+.cwf-blue {
     color: #72b3cc;
 }
 .cwf-lightblue {
     color: #9cd9f0;
 }
-.cwf-darkmagenta {
+.cwf-magenta {
     color: #c8a0d1;
 }
 .cwf-lightmagenta {
     color: #fbb1f9;
 }
-.cwf-darkcyan {
+.cwf-cyan {
     color: #218693;
 }
 .cwf-lightcyan {
@@ -322,13 +322,13 @@
 .cwb-darkgray {
     background-color: #5d5d5d;
 }
-.cwb-darkred {
+.cwb-red {
     background-color: #c75646;
 }
 .cwb-lightred {
     background-color: #e09690;
 }
-.cwb-darkgreen {
+.cwb-green {
     background-color: #8eb33b;
 }
 .cwb-lightgreen {
@@ -340,19 +340,19 @@
 .cwb-yellow {
     background-color: #ffe377;
 }
-.cwb-darkblue {
+.cwb-blue {
     background-color: #72b3cc;
 }
 .cwb-lightblue {
     background-color: #9cd9f0;
 }
-.cwb-darkmagenta {
+.cwb-magenta {
     background-color: #c8a0d1;
 }
 .cwb-lightmagenta {
     background-color: #fbb1f9;
 }
-.cwb-darkcyan {
+.cwb-cyan {
     background-color: #218693;
 }
 .cwb-lightcyan {

index.html

@@ -229,7 +229,7 @@ $ openssl req -nodes -newkey rsa:2048 -keyout relay.pem -x509 -days 365 -out rel
         <div id="nicklist" ng-hide="nonicklist" class="vertical-line-left">
           <ul class="nicklistgroup list-unstyled" ng-repeat="group in activeBuffer().nicklist">
             <li class="" ng-repeat="nick in group.nicks|orderBy:'nick.name'">
-              <a ng-click="nickAction(nick)"><span ng-class="nick.prefix_color">{{nick.prefix}}</span><span ng-class="color">{{nick.name}}</span></a>
+              <a ng-click="nickAction(nick)"><span ng-class="nick.prefixClasses">{{nick.prefix}}</span><span ng-class="nick.nameClasses">{{nick.name}}</span></a>
             </li>
           </ul>
         </div>

js/models.js

@@ -169,6 +169,38 @@ models.service('models', ['$rootScope', '$filter', function($rootScope, $filter)
         }
 
     }
+
+    function nickGetColorClasses(nickMsg, propName) {
+        if (propName in nickMsg && nickMsg[propName] && nickMsg[propName].length > 0) {
+            var color = nickMsg[propName];
+            if (color.match(/^weechat/)) {
+                // color option
+                var colorName = color.match(/[a-zA-Z0-9_]+$/)[0];
+                return [
+                    'cof-' + colorName,
+                    'cob-' + colorName,
+                    'coa-' + colorName
+                ];
+            } else if (color.match(/^[a-zA-Z]+$/)) {
+                // WeeChat color name
+                return [
+                    'cwf-' + color
+                ];
+            }
+        }
+
+        return [
+            'cwf-default'
+        ];
+    }
+
+    function nickGetClasses(nickMsg) {
+        return {
+            'name': nickGetColorClasses(nickMsg, 'color'),
+            'prefix': nickGetColorClasses(nickMsg, 'prefix_color')
+        };
+    }
+
     /*
      * Nick class
      */
@@ -176,17 +208,14 @@ models.service('models', ['$rootScope', '$filter', function($rootScope, $filter)
         var prefix = message['prefix'];
         var visible = message['visible'];
         var name = message['name'];
-        /* TODO translate color to CSS value */
+        var colorClasses = nickGetClasses(message);
-        var prefix_color = message['prefix_color'];
-        /* TODO translate color to CSS value */
-        var color = message['color'];
 
         return {
             prefix: prefix,
             visible: visible,
             name: name,
-            prefix_color: prefix_color,
+            prefixClasses: colorClasses.prefix,
-            color: color
+            nameClasses: colorClasses.name
         }
     }
     /*

js/weechat.js

@@ -44,17 +44,17 @@
         'default',
         'black',
         'darkgray',
-        'darkred',
+        'red',
         'lightred',
-        'darkgreen',
+        'green',
         'lightgreen',
         'brown',
         'yellow',
-        'darkblue',
+        'blue',
         'lightblue',
-        'darkmagenta',
+        'magenta',
         'lightmagenta',
-        'darkcyan',
+        'cyan',
         'lightcyan',
         'gray',
         'white'