Refactor CSS.

diff --git a/js/irc/ircclient.js b/js/irc/ircclient.js
index 82991cb9cefb900ae0eb143c50cb50cd95cb3f3a..2c8d8221c782c5484182905a63fac8cd55cb25cb 100644 (file)
--- a/js/irc/ircclient.js
+++ b/js/irc/ircclient.js
@@ -353,7 +353,6 @@ var IRCClient = new Class({
 \r
       this.modeprefixes = value.substr(1, l);\r
       this.prefixes = value.substr(l + 2, l);\r
-      alert(this.prefixes);\r
     }\r
   },\r
   connected: function() {\r

diff --git a/js/ui/colour.js b/js/ui/colour.js
index 572107110b25bc5fa00d5c41624a37f41a28f435..47daba7dc94720f5bbe74c45abffbbbefd628ecc 100644 (file)
--- a/js/ui/colour.js
+++ b/js/ui/colour.js
@@ -8,6 +8,8 @@ function Colourise(line, entity) {
   var xline = line.split("");\r
   var element = document.createElement("span");\r
 \r
+  entity.addClass("colourline");\r
+  \r
   function isNum(x) {\r
     return x >= '0' && x <= '9';\r
   }\r

diff --git a/js/ui/uglyui.js b/js/ui/uglyui.js
index a1474dc7061260d03f310bacef2554778df172bf..5b609f1b78e4c6e8cac09e16e840efd8d8f2a671 100644 (file)
--- a/js/ui/uglyui.js
+++ b/js/ui/uglyui.js
@@ -4,26 +4,36 @@ var UglyUIWindow = new Class({
   initialize: function(parentObject, client, type, name) {\r
     this.parent(parentObject, client, type, name);\r
         \r
-    this.outerContainer = new Element("div", { "styles": { "display": "none", "font-family": "Lucida Console" } });\r
+    this.outerContainer = new Element("div");\r
+    this.outerContainer.addClass("outercontainer");\r
+    this.outerContainer.addClass("tab-invisible");\r
+    \r
     parentObject.container.appendChild(this.outerContainer);\r
     \r
     if(type == WINDOW_CHANNEL) {\r
-      this.nicklist = new Element("div", {"styles": { "border-left": "1px solid black", "width": "125px", "float": "right", "height": "480px", "clear": "both", "overflow": "auto", "background": "white"} });\r
+      this.nicklist = new Element("div");\r
+      this.nicklist.addClass("nicklist");\r
+      \r
       this.outerContainer.appendChild(this.nicklist);\r
     }\r
     \r
-    var innerContainer = new Element("div", {"styles": { "height": "480px" }});\r
+    var innerContainer = new Element("div");\r
+    innerContainer.addClass("innercontainer");\r
     this.outerContainer.appendChild(innerContainer);\r
     \r
     if(type == WINDOW_CHANNEL) {\r
-      this.topic = new Element("div", {"styles": { "background": "#fef", "height": "20px" } });\r
+      this.topic = new Element("div");\r
+      this.topic.addClass("topic");\r
       innerContainer.appendChild(this.topic);\r
     }\r
     \r
-    this.lines = new Element("div", {"styles": { "height": "460px", "overflow": "auto", "word-wrap": "break-word" }});\r
+    this.lines = new Element("div");\r
+    this.lines.addClass("lines");\r
     innerContainer.appendChild(this.lines);\r
     \r
-    this.tab = new Element("span", {"styles": { "border": "1px black solid", "padding": "2px", "cursor": "default", "margin-right": "2px", "background": "#eee", "clear": "both" } });\r
+    this.tab = new Element("span");\r
+    this.tab.addClass("tab");\r
+    \r
     this.tab.appendText(name);\r
     this.tab.addEvent("click", function() {\r
       parentObject.selectWindow(this);\r
@@ -32,7 +42,8 @@ var UglyUIWindow = new Class({
     parentObject.tabs.appendChild(this.tab);\r
     \r
     if(type != WINDOW_STATUS) {\r
-      tabclose = new Element("span", {"styles": { "border": "1px black solid", "margin-left": "5px", "padding": "2px", "font-size": "0.5em" } });\r
+      tabclose = new Element("span");\r
+      tabclose.addClass("tabclose");\r
       tabclose.addEvent("click", function(e) {\r
         new Event(e).stop();\r
         \r
@@ -71,15 +82,17 @@ var UglyUIWindow = new Class({
   select: function() {\r
     this.parent();\r
     \r
-    this.outerContainer.setStyle("display", "block");\r
-    this.tab.setStyle("background", "#dff");\r
-    this.tab.setStyle("color", "");\r
+    this.outerContainer.removeClass("tab-invisible");\r
+    this.tab.removeClass("tab-unselected");\r
+    this.tab.removeClass("tab-highlighted");\r
+    this.tab.addClass("tab-selected");\r
   },\r
   deselect: function() {\r
     this.parent();\r
     \r
-    this.outerContainer.setStyle("display", "none");\r
-    this.tab.setStyle("background", "#eee");\r
+    this.outerContainer.addClass("tab-invisible");\r
+    this.tab.removeClass("tab-selected");\r
+    this.tab.addClass("tab-unselected");\r
   },\r
   close: function() {\r
     this.parent();\r
@@ -90,16 +103,16 @@ var UglyUIWindow = new Class({
   addLine: function(type, line, colour) {\r
     this.parent(type, line, colour);\r
     \r
-    var c;\r
+    var e = new Element("div");\r
+\r
     if(colour) {\r
-      c = colour;\r
+      e.addStyle("background", colour);\r
     } else if(this.lastcolour) {\r
-      c = "#efefef";\r
+      e.addClass("linestyle1");\r
     } else {\r
-      c = "#eeffff";\r
+      e.addClass("linestyle2");\r
     }\r
     \r
-    var e = new Element("div", { "styles": { "background": c } });\r
     if(type)\r
       line = this.parentObject.theme.message(type, line);\r
     \r
@@ -116,26 +129,30 @@ var UglyUIWindow = new Class({
       this.lines.scrollTo(prev.x, this.lines.getScrollSize().y);\r
       \r
     if(!this.active)\r
-      this.tab.setStyle("color", "red");\r
+      this.tab.addClass("tab-highlighted");\r
   }\r
 });\r
 \r
 var UglyUI = new Class({\r
   Extends: UI,\r
   initialize: function(parentElement, theme) {\r
-    this.parent(UglyUIWindow);\r
+    this.parent(parentElement, UglyUIWindow, "uglyui");\r
     \r
-    this.parentElement = parentElement;\r
     this.theme = theme;\r
     \r
-    this.tabs = new Element("div", {"styles": { "border": "1px solid black", "padding": "4px", "font-family": "Lucida Console" } });\r
+    this.tabs = new Element("div");\r
+    this.tabs.addClass("tabbar");\r
+    \r
     parentElement.appendChild(this.tabs);\r
     \r
-    this.container = new Element("div", {"styles": { "border": "1px solid black", "margin": "2px 0px 0px 0px", "height": "480px" } });\r
+    this.container = new Element("div");\r
+    this.container.addClass("container");\r
+    \r
     parentElement.appendChild(this.container);\r
   \r
     var form = new Element("form");\r
-    var inputbox = new Element("input", {"styles": { "width": "400px", "border": "1px solid black", "margin": "2px 0px 0px 0px"} });\r
+    var inputbox = new Element("input");\r
+    inputbox.addClass("input");\r
   \r
     form.addEvent("submit", function(e) {\r
       new Event(e).stop();\r

diff --git a/js/ui/uibase.js b/js/ui/uibase.js
index 7c08eaf49ab639ef4c9d1f6d7193ab579df1ef9d..02a1d9a601cf0a3e23bdee9de3011924a2c60c7b 100644 (file)
--- a/js/ui/uibase.js
+++ b/js/ui/uibase.js
@@ -35,10 +35,13 @@ var UIWindow = new Class({
 });\r
 \r
 var UI = new Class({\r
-  initialize: function(windowClass) {\r
+  initialize: function(parentElement, windowClass, uiName) {\r
     this.windows = {};\r
     this.windowArray = [];\r
     this.windowClass = windowClass;\r
+    this.parentElement = parentElement;\r
+    this.parentElement.addClass("qwebirc");\r
+    this.parentElement.addClass("qwebirc-" + uiName);\r
   },\r
   newClient: function(client) {\r
     this.windows[client] = {}\r
@@ -75,7 +78,7 @@ var UI = new Class({
         this.windowArray = [];\r
       } else {\r
         var index = this.windowArray.indexOf(window);\r
-        if(i == 0) {\r
+        if(index == 0) {\r
           this.selectWindow(this.windowArray[1]);\r
         } else {\r
           this.selectWindow(this.windowArray[index - 1]);\r

diff --git a/static/css/colours.css b/static/css/colours.css
index 5aa9c9275027ffa4bd007b397204589b69744746..e567ea1f5bc115c62ab26c814219222a54b7a232 100644 (file)
--- a/static/css/colours.css
+++ b/static/css/colours.css
@@ -1,102 +1,102 @@
-.qwebircline .Xc0 {\r
+.qwebirc .colourline .Xc0 {\r
   color: white;\r
 }\r
-.qwebircline .Xc1 {\r
+.qwebirc .colourline .Xc1 {\r
   color: black;\r
 }\r
-.qwebircline .Xc2 {\r
+.qwebirc .colourline .Xc2 {\r
   color: darkBlue;\r
 }\r
-.qwebircline .Xc3 {\r
+.qwebirc .colourline .Xc3 {\r
   color: darkGreen;\r
 }\r
-.qwebircline .Xc4 {\r
+.qwebirc .colourline .Xc4 {\r
   color: red;\r
 }\r
-.qwebircline .Xc5 {\r
+.qwebirc .colourline .Xc5 {\r
   color: darkRed;\r
 }\r
-.qwebircline .Xc6 {\r
+.qwebirc .colourline .Xc6 {\r
   color: purple;\r
 }\r
-.qwebircline .Xc7 {\r
+.qwebirc .colourline .Xc7 {\r
   color: orange;\r
 }\r
-.qwebircline .Xc8 {\r
+.qwebirc .colourline .Xc8 {\r
   color: yellow;\r
 }\r
-.qwebircline .Xc9 {\r
+.qwebirc .colourline .Xc9 {\r
   color: green;\r
 }\r
-.qwebircline .Xc10 {\r
+.qwebirc .colourline .Xc10 {\r
   color: teal;\r
 }\r
-.qwebircline .Xc11 {\r
+.qwebirc .colourline .Xc11 {\r
   color: cyan;\r
 }\r
-.qwebircline .Xc12 {\r
+.qwebirc .colourline .Xc12 {\r
   color: blue;\r
 }\r
-.qwebircline .Xc13 {\r
+.qwebirc .colourline .Xc13 {\r
   color: fuchsia;\r
 }\r
-.qwebircline .Xc14 {\r
+.qwebirc .colourline .Xc14 {\r
   color: darkGray;\r
 }\r
-.qwebircline .Xc15 {\r
+.qwebirc .colourline .Xc15 {\r
   color: gray;\r
 }\r
-.qwebircline .Xbc0 {\r
+.qwebirc .colourline .Xbc0 {\r
   background-color: white;\r
 }\r
-.qwebircline .Xbc1 {\r
+.qwebirc .colourline .Xbc1 {\r
   background-color: black;\r
 }\r
-.qwebircline .Xbc2 {\r
+.qwebirc .colourline .Xbc2 {\r
   background-color: darkBlue;\r
 }\r
-.qwebircline .Xbc3 {\r
+.qwebirc .colourline .Xbc3 {\r
   background-color: darkGreen;\r
 }\r
-.qwebircline .Xbc4 {\r
+.qwebirc .colourline .Xbc4 {\r
   background-color: red;\r
 }\r
-.qwebircline .Xbc5 {\r
+.qwebirc .colourline .Xbc5 {\r
   background-color: darkRed;\r
 }\r
-.qwebircline .Xbc6 {\r
+.qwebirc .colourline .Xbc6 {\r
   background-color: purple;\r
 }\r
-.qwebircline .Xbc7 {\r
+.qwebirc .colourline .Xbc7 {\r
   background-color: orange;\r
 }\r
-.qwebircline .Xbc8 {\r
+.qwebirc .colourline .Xbc8 {\r
   background-color: yellow;\r
 }\r
-.qwebircline .Xbc9 {\r
+.qwebirc .colourline .Xbc9 {\r
   background-color: green;\r
 }\r
-.qwebircline .Xbc10 {\r
+.qwebirc .colourline .Xbc10 {\r
   background-color: teal;\r
 }\r
-.qwebircline .Xbc11 {\r
+.qwebirc .colourline .Xbc11 {\r
   background-color: cyan;\r
 }\r
-.qwebircline .Xbc12 {\r
+.qwebirc .colourline .Xbc12 {\r
   background-color: blue;\r
 }\r
-.qwebircline .Xbc13 {\r
+.qwebirc .colourline .Xbc13 {\r
   background-color: fuchsia;\r
 }\r
-.qwebircline .Xbc14 {\r
+.qwebirc .colourline .Xbc14 {\r
   background-color: darkGray;\r
 }\r
-.qwebircline .Xbc15 {\r
+.qwebirc .colourline .Xbc15 {\r
   background-color: gray;\r
 }\r
-.qwebircline .Xb {\r
+.qwebirc .colourline .Xb {\r
   font-weight: bold;\r
 }\r
-.qwebircline .Xu {\r
+.qwebirc .colourline .Xu {\r
   text-decoration: underline;\r
 }\r

diff --git a/static/css/uglyui.css b/static/css/uglyui.css
new file mode 100644 (file)
index 0000000..6857baf
--- /dev/null
+++ b/static/css/uglyui.css
@@ -0,0 +1,86 @@
+.qwebirc-uglyui .tabbar {\r
+  border: 1px solid black;\r
+  padding: 4px;\r
+  font-family: "Lucida Console", sans-serif;\r
+}\r
+\r
+.qwebirc-uglyui .tab {\r
+  border: 1px black solid;\r
+  padding: 2px;\r
+  cursor: default;\r
+  margin-right: 2px;\r
+  background: #eee;\r
+  clear: both;\r
+}\r
+\r
+.qwebirc-uglyui .container {\r
+  border: 1px solid black;\r
+  margin: 2px 0px 0px 0px;\r
+  height: 480px;\r
+}\r
+\r
+.qwebirc-uglyui .input {\r
+  width: 400px;\r
+  border: 1px solid black;\r
+  margin: 2px 0px 0px 0px;\r
+}\r
+\r
+.qwebirc-uglyui .tabclose {\r
+  border: 1px black solid;\r
+  margin-left: 5px;\r
+  padding: 2px;\r
+  font-size: 0.5em;\r
+}\r
+\r
+.qwebirc-uglyui .nicklist {\r
+  border-left: 1px solid black;\r
+  width: 125px;\r
+  float: right;\r
+  height: 480px;\r
+  clear: both;\r
+  overflow: auto;\r
+  background: white;\r
+}\r
+\r
+.qwebirc-uglyui .tab-invisible {\r
+  display: none;\r
+}\r
+\r
+.qwebirc-uglyui .outercontainer {\r
+  font-family: Lucida Console;\r
+}\r
+\r
+.qwebirc-uglyui .innercontainer {\r
+  height: 480px;\r
+}\r
+\r
+.qwebirc-uglyui .topic {\r
+  background: #fef;\r
+  height: 20px;\r
+}\r
+\r
+.qwebirc-uglyui .tab-selected {\r
+  background: #eff;\r
+}\r
+\r
+.qwebirc-uglyui .tab-unselected {\r
+  background: #eee;\r
+}\r
+\r
+.qwebirc-uglyui .tab-highlighted {\r
+  color: red;\r
+}\r
+\r
+.qwebirc-uglyui .lines {\r
+  height: 460px;\r
+  overflow: auto;\r
+  word-wrap: break-word;\r
+}\r
+\r
+.qwebirc-uglyui .linestyle1 {\r
+  background: #efefef;\r
+}\r
+\r
+.qwebirc-uglyui .linestyle2 {\r
+  background: #eeffff;\r
+}\r

diff --git a/static/uitest.html b/static/uitest.html
index 473ca7563cf5d6a6776876649dde46e3935afd7a..0b94dd1d2bfb1791fd1ddbbcfe38cc8a497e180a 100644 (file)
--- a/static/uitest.html
+++ b/static/uitest.html
@@ -4,11 +4,11 @@
 <head>\r
   <title>QuakeNet Web IRC</title>\r
   <link rel="stylesheet" href="css/colours.css" type="text/css">\r
+  <link rel="stylesheet" href="css/uglyui.css" type="text/css">\r
   <script type="text/javascript" src="js/mootools-1.2-core.js"></script>\r
-  <!--\r
   <script type="text/javascript" src="js/debug/version.js"></script>\r
   <script type="text/javascript" src="js/debug/jslib.js"></script>\r
-  <script type="text/javascript" src="js/debug/irc/ircconn.js"></script>\r
+  <script type="text/javascript" src="js/debug/irc/ircconnection.js"></script>\r
   <script type="text/javascript" src="js/debug/irc/irclib.js"></script>\r
   <script type="text/javascript" src="js/debug/irc/baseirc.js"></script>\r
   <script type="text/javascript" src="js/debug/irc/irctracker.js"></script>\r
@@ -17,15 +17,14 @@
   <script type="text/javascript" src="js/debug/ui/uibase.js"></script>\r
   <script type="text/javascript" src="js/debug/ui/colour.js"></script>\r
   <script type="text/javascript" src="js/debug/ui/theme.js"></script>\r
-  <script type="text/javascript" src="js/debug/ui/uglyui.js"></script>-->\r
-  <script type="text/javascript" src="js/qwebirc.js"></script>\r
+  <script type="text/javascript" src="js/debug/ui/uglyui.js"></script>\r
+  <!--<script type="text/javascript" src="js/qwebirc.js"></script>-->\r
   <script type="text/javascript">  \r
     window.addEvent("domready", function() {\r
       var theme = new Theme();\r
       var ui = new UglyUI($("ircui"), theme);\r
 \r
       var IRC = new IRCClient({nickname: "mcgoogle"}, ui);\r
-      \r
       IRC.connect();\r
     });\r
   </script>\r