Adds button for joining a channel without writing /join

Fixes issue thedjpetersen#123 and adds a button under the channel list for easily inputing a
channel name and pressing enter. This should make it more easy for new users to
IRC, joining channels. Someone with a better feel for UI may want to look at
how to make this prettier and even simpler.

assets/css/subway.css

@@ -162,7 +162,8 @@ html { overflow: hidden; }
   width: 100%;
 }
 
-#channels > .channel {
+#channels > .channel,
+#add-channel-button {
   padding: 5% 5% 5% 20%;
   color: #333333;
   border-bottom: 1px solid #CCCCCC;
@@ -243,6 +244,14 @@ html { overflow: hidden; }
   margin-top: 10px;
 }
 
+#add-channel-button #channelname {
+  width: 110px;
+  margin: 0;
+  font-size: 12px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 /* Here are the styles for the chat window */
 
 #chat-window  {

assets/js/views/add_channel_button.js

@@ -0,0 +1,42 @@
+var AddChannelView = Backbone.View.extend({
+  el: '#add-channel-button',
+
+  inputOn: false,
+
+  events: {
+    'click': 'enableButtonInput',
+    'keyup :input': 'processKey',
+    'blur :input': 'disableButtonInput',
+  },
+
+  initialize: function() {
+    this.render();
+  },
+
+  enableButtonInput: function() {
+    if (!this.inputOn) {
+      $(this.el).html(ich.add_new_channel_form());
+      this.inputOn = true;
+    }
+  },
+
+  disableButtonInput: function() {
+    if (this.inputOn) {
+      this.render();
+      this.inputOn = false;
+    }
+  },
+
+  processKey: function (event) {
+    if (event.which == 13) { // enter key
+      irc.socket.emit('join', event.target.value);
+    }
+    return false;
+  },
+
+  render: function(){
+    $(this.el).html(ich.add_new_channel());
+    return this;
+  }
+
+});

assets/js/views/channel_list.js

@@ -6,13 +6,15 @@ var ChannelListView = Backbone.View.extend({
 
   events: {
     'click #slide-prev': 'slidePrev',
-    'click #slide-next': 'slideNext'
+    'click #slide-next': 'slideNext',
   },
 
   initialize: function() {
     irc.chatWindows.bind('add', this.addChannel, this);
     $('.slide').css('display', 'inline-block');
     this.channelTabs = []
+    var new_channel_btn = new AddChannelView;
+    $(this.el).after(new_channel_btn);
   },
 
   addChannel: function(chatWindow) {

views/templates.jade

@@ -9,8 +9,16 @@ script(id="chat_application", type="text/html")
     #channels
       #slide-prev.slide
       #slide-next.slide
+    #add-channel-button
   .content
 
+script(id="add_new_channel", type="text/html")
+  i(class="icon-plus-sign spacing-right")
+  Add new channel 
+
+script(id="add_new_channel_form", type="text/html")
+  input#channelname(type="text", placeholder="#channelname")
+
 script(id="load_image", type="text/html")
   img(id="loading_image", src="/assets/images/loading.gif")