app: add ability to change color of your nick

An input has been added on the global settings page for this. Accepts
css color styles

Author: evanlucas

app.js

@@ -33,6 +33,7 @@ const defaultSettings = new Map([
 , ['invites.accept.auto', false]
 , ['sounds.enabled', true]
 , ['userbar.hidden', false]
+, ['user.color', '#fb73fa']
 ])
 
 function App(el, currentWindow) {
@@ -302,6 +303,10 @@ App.prototype._addHandlers = function _addHandlers() {
   this.newConnectionTip = addConnTooltip
 
   this.settings.on('settingChanged', (key, orig, val) => {
+    // TODO(evanlucas) if key is user.color, maybe go through
+    // and call the messageFormatter on all messages?
+    // Not sure if it is worth it to keep the color in sync for previous
+    // messages though
     this.db.settings.put(key, val, (err) => {
       if (err) {
         console.error('Unable to persist setting changed', key, val, err)
@@ -408,7 +413,7 @@ App.prototype._checkAuth = function _checkAuth() {
 
     // we have saved connections
     var active
-
+    const settings = this.settings
     for (var i = 0; i < len; i++) {
       const opts = connections[i]
       const user = opts.user
@@ -423,8 +428,8 @@ App.prototype._checkAuth = function _checkAuth() {
         }
 
         const chan = msg.channel || {}
-
-        return utils.processMessage(msg.message, chan.colorMap, chan.conn)
+        const uc = settings.get('user.color')
+        return utils.processMessage(msg.message, chan.colorMap, chan.conn, uc)
       }
 
       const conn = new Connection(opts, this)

client/less/theme.less

@@ -216,4 +216,8 @@ irc-settings {
       background-color: darken(@dusk, 10%);
     }
   }
+
+  .input-group-addon {
+    border: 1px solid @dusklight;
+  }
 }

lib/utils.js

@@ -88,13 +88,22 @@ exports.decodeConnection = function decodeConnection(str) {
   return str.replace('#server_____', '')
 }
 
-exports.processMessage = function processMessage(msg, colorMap, conn) {
+exports.processMessage = function processMessage(msg, colorMap, conn, uc) {
   let m = exports.encode(msg)
   // This sucks :/
   m = m.replace('\u0002', '<strong>').replace('\u0002', '</strong>')
   for (const item of colorMap.entries()) {
     const username = item[0]
-    const color = item[1]
+    const color = conn && uc && username === conn.nick
+      ? uc
+      : item[1]
+
+    let mycol
+    if (conn && uc && username === conn.nick) {
+      console.log('ME', uc, msg)
+      mycol = uc
+    }
+
     const unRE = username
       .replace(/\|/g, '\\|')
       .replace(/\[/g, '\\[')
@@ -107,6 +116,10 @@ exports.processMessage = function processMessage(msg, colorMap, conn) {
         return match
       }
 
+      if (mycol) {
+        return `<span class="mention" style="color: ${mycol};">${match}</span>`
+      }
+
       return `<span class="mention ${color || ''}">${match}</span>`
     })
   }

lib/views/message-log.js

@@ -15,14 +15,31 @@ inherits(Log, Base)
 // These are message logs
 Log.prototype.render = function render(log, channel) {
   const d = utils.date(log.ts)
-  const color = channel.colorMap.get(log.from.toLowerCase()) || ''
+  const lower = (log.from || '').toLowerCase()
+  let mycol
+  if (channel.conn) {
+    const connNick = channel.conn.nick
+    if (connNick && connNick.toLowerCase() === lower) {
+      mycol = this.target.settings.get('user.color')
+    }
+  }
+
+  const color = mycol || channel.colorMap.get((log.from || '').toLowerCase())
   const from = log.from
   const m = log.formatted
   const cl = log.mention ? 'mention' : log.type
   if (from) {
+    const formattedName = utils.formatNameForType(from, log.type)
+    const un = mycol
+      ? h('span.username', {
+          style: {
+            color: mycol
+          }
+        }, formattedName)
+      : h(`span.username.${color}`, formattedName)
     return h(`li.${cl}`, [
       h('span.ts', `[${d}]`)
-    , h(`span.username.${color}`, utils.formatNameForType(from, log.type))
+    , un
     , h('span.content', {
         innerHTML: m
       })

lib/views/settings.js

@@ -51,10 +51,18 @@ Settings.prototype.reloadThemes = function reloadThemes(e) {
   e.target.blur()
 }
 
+Settings.prototype.onUserColorChanged = function onUserColorChanged(e) {
+  const val = e.target.value
+  debug('user.color changed to %s', val)
+  this.target.settings.set('user.color', val)
+  this.target.needsLayout()
+}
+
 const notes = {
-  'playSounds': 'Sounds will be played for things like receiving' +
+  playSounds: 'Sounds will be played for things like receiving' +
     ' a new message.'
-, 'autoAcceptInvites': 'Auto join channel when invited.'
+, autoAcceptInvites: 'Auto join channel when invited.'
+, userColor: 'Set the color of your nickname in all chats'
 }
 
 Settings.prototype.render = function render() {
@@ -111,6 +119,9 @@ Settings.prototype.render = function render() {
       , checkbox('autoAcceptInvites', (e) => {
           this.onAutoAcceptInvite(e)
         }, ' Auto Accept Invites', settings, notes.autoAcceptInvites)
+      , colorPicker('user.color', (e) => {
+          this.onUserColorChanged(e)
+        }, 'Nickname Color', settings, notes.userColor)
       ])
     ])
   ])
@@ -132,3 +143,25 @@ function checkbox(id, onchange, title, settings, note) {
     ])
   ])
 }
+
+function colorPicker(id, onkeyup, title, settings, note) {
+  return h('.form-group', [
+    h('label.control-label', {
+      for: id
+    }, title)
+  , h('.input-group', [
+      h('span.input-group-addon', {
+        style: {
+          backgroundColor: settings.get(id)
+        }
+      })
+    , h('input.form-control', {
+        type: 'text'
+      , id: id
+      , onkeyup: onkeyup
+      , value: settings.get(id)
+      })
+    ])
+  , h('p.form-control-static', note)
+  ])
+}