From 99471345d33651d8db969b1c295b247d873fa528 Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@woozle.org>
Date: Fri, 31 Oct 2014 16:09:52 -0600
Subject: [PATCH] Prettier and hidable left hand side

---
 app/message_style.css | 66 +++++++++++++++++++++----------------------
 app/style.css         | 30 ++------------------
 app/wirc.js           | 11 ++++++++
 3 files changed, 46 insertions(+), 61 deletions(-)

diff --git a/app/message_style.css b/app/message_style.css
index bc03844..163113e 100644
--- a/app/message_style.css
+++ b/app/message_style.css
@@ -1,5 +1,5 @@
-.message.system {
-  color: #505053;
+.message.mode, .message.nick, .message.join {
+  color: #606043;
 }
 
 .message.notice {
@@ -41,125 +41,125 @@
   color: #ea0d68;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='0'] {
+.message:not(.self) .source-content-container .source[colornumber='0'] {
   color: #0080ff;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='1'] {
+.message:not(.self) .source-content-container .source[colornumber='1'] {
   color: #059005;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='2'] {
+.message:not(.self) .source-content-container .source[colornumber='2'] {
   color: #a80054;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='3'] {
+.message:not(.self) .source-content-container .source[colornumber='3'] {
   color: #9b0db1;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='4'] {
+.message:not(.self) .source-content-container .source[colornumber='4'] {
   color: #108860;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='5'] {
+.message:not(.self) .source-content-container .source[colornumber='5'] {
   color: #7F4FFF;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='6'] {
+.message:not(.self) .source-content-container .source[colornumber='6'] {
   color: #58701a;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='7'] {
+.message:not(.self) .source-content-container .source[colornumber='7'] {
   color: #620a8e;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='8'] {
+.message:not(.self) .source-content-container .source[colornumber='8'] {
   color: #BB0008;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='9'] {
+.message:not(.self) .source-content-container .source[colornumber='9'] {
   color: #44345f;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='10'] {
+.message:not(.self) .source-content-container .source[colornumber='10'] {
   color: #2f5353;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='11'] {
+.message:not(.self) .source-content-container .source[colornumber='11'] {
   color: #904000;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='12'] {
+.message:not(.self) .source-content-container .source[colornumber='12'] {
   color: #808000;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='13'] {
+.message:not(.self) .source-content-container .source[colornumber='13'] {
   color: #57797e;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='14'] {
+.message:not(.self) .source-content-container .source[colornumber='14'] {
   color: #3333dd;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='15'] {
+.message:not(.self) .source-content-container .source[colornumber='15'] {
   color: #5f4d22;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='16'] {
+.message:not(.self) .source-content-container .source[colornumber='16'] {
   color: #706616;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='17'] {
+.message:not(.self) .source-content-container .source[colornumber='17'] {
   color: #46799c;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='18'] {
+.message:not(.self) .source-content-container .source[colornumber='18'] {
   color: #80372e;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='19'] {
+.message:not(.self) .source-content-container .source[colornumber='19'] {
   color: #8F478E;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='20'] {
+.message:not(.self) .source-content-container .source[colornumber='20'] {
   color: #5b9e4c;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='21'] {
+.message:not(.self) .source-content-container .source[colornumber='21'] {
   color: #13826c;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='22'] {
+.message:not(.self) .source-content-container .source[colornumber='22'] {
   color: #b13637;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='23'] {
+.message:not(.self) .source-content-container .source[colornumber='23'] {
   color: #e45d59;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='24'] {
+.message:not(.self) .source-content-container .source[colornumber='24'] {
   color: #1b51ae;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='25'] {
+.message:not(.self) .source-content-container .source[colornumber='25'] {
   color: #4855ac;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='26'] {
+.message:not(.self) .source-content-container .source[colornumber='26'] {
   color: #7f1d86;
 }
-.message.privmsg:not(.self) .source-content-container .source[colornumber='27'] {
+.message:not(.self) .source-content-container .source[colornumber='27'] {
   color: #73643f;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='28'] {
+.message:not(.self) .source-content-container .source[colornumber='28'] {
   color: #0b9578;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='29'] {
+.message:not(.self) .source-content-container .source[colornumber='29'] {
   color: #569c96;
 }
 
-.message.privmsg:not(.self) .source-content-container .source[colornumber='30'] {
+.message:not(.self) .source-content-container .source[colornumber='30'] {
   color: #08465f;
 }
diff --git a/app/style.css b/app/style.css
index d04e089..d14ef05 100644
--- a/app/style.css
+++ b/app/style.css
@@ -362,7 +362,7 @@ ul {
 
 .source-content-container {
   display: table-cell;
-  padding: 4px 10px 4px 15px;
+  padding: 1px 10px 1px 15px;
   width: 100%;
 }
 
@@ -384,6 +384,7 @@ ul {
   display: inline;
   white-space: pre-wrap;
   cursor: text;
+  word-break: break-word;
 }
 
 #messages-container .messages .message:first-child .source-content-container {
@@ -394,33 +395,6 @@ ul {
   padding-bottom: 8px;
 }
 
-.message:not(.privmsg) + .message.privmsg .source-content-container {
-  padding-top: 4px;
-  padding-bottom: 1px;
-}
-.message.privmsg + .message.privmsg .source-content-container {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.message:not(.group) + .message.group .source-content-container {
-  padding-top: 4px;
-  padding-bottom: 0px;
-}
-.message.group + .message.group .source-content-container {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-.message:not(.notice-group) + .message.notice-group .source-content-container {
-  padding-top: 4px;
-  padding-bottom: 0px;
-}
-.message.notice-group + .message.notice-group .source-content-container {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .message.list {
   /* empty style for now */
 }
diff --git a/app/wirc.js b/app/wirc.js
index 03a69df..33dfc91 100644
--- a/app/wirc.js
+++ b/app/wirc.js
@@ -65,6 +65,16 @@ function handleInput(oEvent) {
 	return false;
 }
 
+function hideChannels(oEvent) {
+  var lhs = document.getElementById("rooms-and-nicks");
+
+  if (lhs.classList.contains("hidden")) {
+    lhs.classList.remove("hidden");
+  } else {
+    lhs.classList.add("hidden");
+  }
+}
+
 function restore(items) {
 	storedConnections = items["connections"];
 
@@ -78,6 +88,7 @@ function restore(items) {
 function init() {
 	chrome.storage.sync.get(["connections"], restore);
 	document.getElementById("input").addEventListener("change", handleInput);
+	document.getElementById("hide-channels").addEventListener("click", hideChannels);
 
 	templates = document.getElementById("templates");
 	rooms = document.getElementById("rooms-container").getElementsByClassName("rooms")[0];