Merge branch 'ui_work'

app/assets/javascripts/backbone/broadcasters/faye.js.coffee

@@ -28,13 +28,11 @@ class Kandan.Broadcasters.FayeBroadcaster
 
     @faye_client.subscribe "/app/channel_activities", (data)=>
       # TODO action makes way for channel rename to be added later
-      console.log data
       Kandan.Helpers.Channels.deleteChannelById(data.channel.id) if data.action == "delete"
 
 
   subscribe: (channel)->
     subscription = @faye_client.subscribe channel, (data)=>
-      console.log "faye", data
       Kandan.Helpers.Channels.add_activity(data)
     subscription.errback(()->
       alert "Oops! could not connect to the server"

app/assets/javascripts/backbone/helpers/channels.js.coffee

@@ -2,7 +2,7 @@ class Kandan.Helpers.Channels
 
   @options:
     autoScrollThreshold: 0.90
-    maxActivities: 10
+    maxActivities: 5
 
   @replaceCreateButton: ()->
     $tabNav = $(".create_channel").parent().parent()
@@ -17,25 +17,17 @@ class Kandan.Helpers.Channels
     scrollPercentage > @options.autoScrollThreshold
 
   @scrollToLatestMessage: (channelId)->
-    $("#channels-#{channelId}").scrollTop(100000)
+    @channel_activities_el(channelId).parent().scrollTop(100000)
 
   @currentScrollPosition: (channelId)->
-    $("#channels-#{channelId}").scrollTop()
+    @channel_activities_el(channelId).parent().scrollTop()
 
   @channel_activities_el: (channelId)->
     $("#channel-activities-#{channelId}")
 
   @channel_pagination_el: (channelId)->
     $("#channels-#{channelId} .pagination")
 
-  @getTabIndexByChannelId: (channelId)->
-    $("#channels-#{channelId}").prev("div").length
-
-  @getChannelIdByTabIndex: (tabIndex)->
-    $("#channels .ui-tabs-panel")
-      .eq(tabIndex)
-      .data('channel_id')
-
   @selected_tab: ()->
     $('#channels').tabs('option', 'selected')
 
@@ -47,37 +39,51 @@ class Kandan.Helpers.Channels
     else
       return $(document).data('active_channel_id')
 
+
   @confirmDeletion: ()->
-    confirmDeletion = confirm("Really delete the channel?")
-    return false if confirmDeletion == false
-    confirmAgain = confirm("Are you damn sure?")
-    return confirmAgain
+    reply = confirm("Really delete the channel?")
+    return reply
+
 
   @flushActivities: (channelId)->
     $channelActivities = $("#channel-activities-#{channelId}")
-    if $channelActivities.children().length > @options.maxActivities
+    if $channelActivities.children().length == @options.maxActivities + 1
       oldest = $channelActivities.children().first().data("activity_id")
       $channelActivities.children().first().remove()
       $channelActivities.prev().data("oldest", oldest)
 
-  @deleteChannelById: (channelId)->
-    if @channelExists(channelId)
-      tabIndex = @getTabIndexByChannelId(channelId)
-      @deleteChannelByTabIndex(tabIndex, true)
 
   @confirmAndDeleteChannel: (channel, tabIndex)->
     return false if @confirmDeletion() == false
     channel.destroy({success: ()=>
       $("#channels").tabs("remove", tabIndex)
     })
 
+
+  @getChannelIdByTabIndex: (tabIndex)->
+    $("#channels .ui-tabs-panel")
+      .eq(tabIndex)
+      .data('channel_id')
+
+  @getTabIndexByChannelId: (channelId)->
+    $("#channels-#{channelId}").prevAll("div").length
+
+  @deleteChannelById: (channelId)->
+    if @channelExists(channelId)
+      tabIndex = @getTabIndexByChannelId(channelId)
+      @deleteChannelByTabIndex(tabIndex, true)
+
   @deleteChannelByTabIndex: (tabIndex, deleted)->
     deleted = deleted || false
+    console.log "try deleting #{tabIndex}"
     channelId = @getChannelIdByTabIndex(tabIndex)
+    console.log "d ", channelId
     channel = new Kandan.Models.Channel({id: channelId})
     return @confirmAndDeleteChannel(channel, tabIndex) if not deleted
+    console.log "TAB INDEX", tabIndex
     $("#channels").tabs("remove", tabIndex)
 
+
   @channelExists: (channelId)->
     return true if $("#channels-#{channelId}").length > 0
     false
@@ -89,8 +95,8 @@ class Kandan.Helpers.Channels
 
     $("#channels").tabs('add', channelArea, "#{channel.get("name")}", totalTabs)
     Kandan.Helpers.Channels.replaceCreateButton()
-    view = new Kandan.Views.ListActivities({channel: channel})
-    $(channelArea).html $(view.render().el).html()
+    view = new Kandan.Views.ChannelPane({channel: channel})
+    view.render $(channelArea)
     $(channelArea).data('channel_id', channel.get('id'))
 
 
@@ -99,28 +105,28 @@ class Kandan.Helpers.Channels
     activityView  = new Kandan.Views.ShowActivity({activity: activity})
     return activityView
 
+  @createChannelIfNotExists: (activityAttributes)->
+    if activityAttributes.channel && (not @channelExists(activityAttributes.channel_id))
+      @createChannelArea(new Kandan.Models.Channel(activityAttributes.channel))
 
-  @add_activity: (activity_attributes, state)->
-    if activity_attributes.channel!=undefined && (not @channelExists(activity_attributes.channel_id))
-      @createChannelArea(new Kandan.Models.Channel(activity_attributes.channel))
 
-    if activity_attributes.channel_id
-      @add_message(activity_attributes, state)
-    else
-      @add_notification(activity_attributes)
+  @add_activity: (activityAttributes, state)->
+    @createChannelIfNotExists(activityAttributes)
 
-    if activity_attributes.channel_id
-      channelId = activity_attributes.channel_id
+    if activityAttributes.channel_id
+      @add_message(activityAttributes, state)
     else
-      channelId = @getActiveChannelId()
+      @add_notification(activityAttributes)
+
+    channelId = activityAttributes.channel_id || @getActiveChannelId()
     @scrollToLatestMessage(channelId) if @pastAutoScrollThreshold(channelId)
 
 
   @add_message: (activityAttributes, state)->
     @channel_activities_el(activityAttributes.channel_id)
       .append(@new_activity_view(activityAttributes).render().el)
     @set_pagination_data(activityAttributes.channel_id)
-    # @flushActivities($(el).parent().data("channel_id"))
+    @flushActivities(activityAttributes.channel_id)
 
 
   @add_notification: (activityAttributes)->
@@ -130,6 +136,7 @@ class Kandan.Helpers.Channels
       $(el).append(@new_activity_view(activityAttributes).render().el)
       @flushActivities($(el).parent().data("channel_id"))
 
+
   @set_pagination_state: (channelId, moreActivities, oldest)->
     @channel_pagination_el(channelId).data('oldest', oldest)
     if moreActivities == true

app/assets/javascripts/backbone/plugins/attachments.js.coffee

@@ -48,7 +48,6 @@ class Kandan.Plugins.Attachments
 
     $widget_el.next().html($upload_form)
     @init_dropzone @channel_id()
-    console.log $widget_el.next()
     $widget_el.next(".action_block").html($upload_form)
 
     attachments = new Kandan.Collections.Attachments([], {channel_id: @channel_id()})

app/assets/javascripts/backbone/plugins/user_list.js.coffee

@@ -13,6 +13,7 @@ class Kandan.Plugins.UserList
 
   @render: ($el)->
     $users = $("<div class='user_list'></div>")
+    $el.next().hide();
 
     for user in Kandan.Data.ActiveUsers.all()
       console.log "hash", user.gravatar_hash

app/assets/javascripts/backbone/views/channel_pane.js.coffee

@@ -1,15 +1,21 @@
 class Kandan.Views.ChannelPane extends Backbone.View
   tagName: 'div'
 
-  render: ()->
-    @channel = @options.channel
-
-    paginatedActivitiesView = new Kandan.Views.PaginatedActivities({channel: @channel})
-    $(@el).html paginatedActivitiesView.render().el
-
-    chatbox = new Kandan.Views.Chatbox({channel: @channel})
-    $(@el).append chatbox.render().el
-
-    $(@el).attr "id", "channels-#{@channel.get("id")}"
-    $(@el).data "channel_id", @channel.get('id')
-    @
+  render: (container)->
+    container = container || $(@el)
+    $(container).html @paginatedActivitiesView()
+    $(container).append @chatboxView()
+    @setIdAndData(container)
+    @
+
+  setIdAndData: (container)->
+    $(container).attr "id", "channels-#{@options.channel.get("id")}"
+    $(container).data "channel_id", @options.channel.get('id')
+
+  paginatedActivitiesView: ()->
+    view = new Kandan.Views.PaginatedActivities({channel: @options.channel})
+    view.render().el
+
+  chatboxView: ()->
+    view = new Kandan.Views.Chatbox({channel: @options.channel})
+    view.render().el

app/assets/javascripts/backbone/views/chatarea.js.coffee

@@ -27,5 +27,6 @@ class Kandan.Views.ChatArea extends Backbone.View
       console.log "create channel: #{channelName}"
 
   deleteChannel: (event)->
-    channelIndex = $(event.target).parent().prev().length
-    Kandan.Helpers.Channels.deleteChannelByTabIndex channelIndex if channelIndex != 0
+    channelIndex = $(event.target).parent().prevAll().length
+    console.log "request for deletion", channelIndex
+    Kandan.Helpers.Channels.deleteChannelByTabIndex(channelIndex) if channelIndex != 0

app/assets/javascripts/backbone/views/chatbox.js.coffee

@@ -1,29 +1,29 @@
 class Kandan.Views.Chatbox extends Backbone.View
 
-  template: JST['chatbox']
-  tagName: 'div'
+  template:  JST['chatbox']
+  tagName:   'div'
   className: 'chatbox'
 
 
   events:
-    "keypress textarea": 'postMessageOnEnter'
-    "click    button"  : 'postMessage'
+    "keypress .chat-input": 'postMessageOnEnter'
+    "click    .post"      : 'postMessage'
 
 
   postMessageOnEnter: (event)->
-    @postMessage() if event.keyCode== 13
+    @postMessage(event) if event.keyCode== 13
 
 
   postMessage: (event)->
-    $chatbox = $(@el).find('textarea')
+    $chatbox = $(event.target).parent().find(".chat-input")
     activity = new Kandan.Models.Activity({
       'content':    $chatbox.val(),
       'action':     'message',
       'channel_id': @channel.get('id')
     })
 
-    activity.save({},{success: ()->
-      $chatbox = $(@el).find('textarea')
+    activity.save({},{success: ()=>
+      $chatbox.val("")
     })
 
   render: ()->

app/assets/stylesheets/_base.scss

@@ -7,14 +7,21 @@
   @include box-sizing(border-box);
 }
 
+.logo {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+}
+
 html {
   @include full-height;
 }
 
 body {
   background: $page-bg;
-  height: 90%;
-  min-height: 90%;
+  height: 100%;
+  min-height: 100%;
   font-size: 13px;
   font-family: 'PT Sans', sans-serif;
 }

app/assets/stylesheets/_chat_area.scss

@@ -1,15 +1,23 @@
 #channels {
-  border-right: 1px solid #CDD1D4;
   margin-top: 0px;
 }
 
 .ui-widget-header {
   @include background-image(linear-gradient($header-bg-1, $header-bg-2));
   @include border-radius(0px);
-  height: $header-height;
   border: none;
+
+  .ui-state-active {
+    background: $active-tab-bg;
+    border: none;
+
+    a {
+      color: $active-tab-color;        
+    }
+  }
 }
 
+
 .ui-tabs {
   padding: 0px;
   margin-top: 0px;
@@ -19,31 +27,37 @@
   .ui-tabs-nav {
     border-right: 1px solid #404A4D;
     position: fixed;
-    width: 100%
-  }
+    width: 100%;
+    padding-top: 6px;
+    top: 0px;
 
-  .ui-tabs-panel {
-    margin-top: $header-height + 10;
-    margin-right: 20px;
-    margin-left: 20px;
-    padding: 0px;
-  }
+    li:first-child {
+      margin-left: 50px;
+    }
 
-  .ui-widget-content {
-    margin-top: 20px;
-    bottom: 80px;
-    height: 100%;
-  }
+    .ui-tab-selected {
+      background: $active-tab-bg;
+      border: none;
+
+      a {
+        color: $active-tab-color;        
+      }
+    }
 
-  .ui-tabs-nav
-  {
-    position: relative;
-    width: 100%;
-    top: 0px;
     li a {
       padding: 3px;
     }
   }
+
+  .ui-tabs-panel {
+    padding-right: 20px;
+    padding-left: 20px;
+    border-right: 1px solid #CDD1D4;
+  }
+
+  .ui-widget-content {
+    height: 95%;
+  }
 }
 
 .ui-corner-all .ui-corner-bottom, .ui-corner-bottom, .ui-corner-left, .ui-corner-right, .ui-corner-bl, .ui-corner-br {
@@ -71,6 +85,7 @@
   height: 88%;
   background: #FFF;
   padding: 10px;
+  margin-top: 37px;
 
   .pagination {
     text-decoration: underline;
@@ -116,5 +131,3 @@
     height: 40px;
   }
 }
-
-