Permalink
Browse files

Adds button for joining a channel without writing /join

Fixes issue #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.
  • Loading branch information...
1 parent f29aa5f commit b2199ea44e3f6b50dd3a30f6fe03722e2c1c62f7 @hermansc committed Feb 17, 2014
Showing with 63 additions and 2 deletions.
  1. +10 −1 assets/css/subway.css
  2. +42 −0 assets/js/views/add_channel_button.js
  3. +3 −1 assets/js/views/channel_list.js
  4. +8 −0 views/templates.jade
View
@@ -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 {
@@ -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;
+ }
+
+});
@@ -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) {
@@ -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")

0 comments on commit b2199ea

Please sign in to comment.