Merge branch 'ui_work'

app/assets/javascripts/backbone/kandan.js.coffee

@@ -36,12 +36,6 @@ window.Kandan =
     window.broadcaster = new Kandan.Broadcasters.FayeBroadcaster()
     window.broadcaster.subscribe "/channels/*"
 
-
-  initChatbox: ()->
-    chatbox = new Kandan.Views.Chatbox()
-    $(".main-area").append(chatbox.render().el)
-
-
   initTabs: ()->
     $('#channels').tabs({
       select: (event, ui)->
@@ -74,7 +68,6 @@ window.Kandan =
       Kandan.registerPlugins()
       Kandan.Plugins.initAll()
       Kandan.initChatArea(channels)
-      Kandan.initChatbox()
       Kandan.initTabs()
       Kandan.Widgets.initAll()
 

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

@@ -0,0 +1,15 @@
+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')
+    @

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

@@ -10,7 +10,7 @@ class Kandan.Views.ChatArea extends Backbone.View
   render: ->
     $(@el).html(@template({channels: @options.channels}))
     for channel in @options.channels.models
-      view = new Kandan.Views.ListActivities({channel: channel})
+      view = new Kandan.Views.ChannelPane({channel: channel})
       $(@el).append(view.render().el)
     $(@el).attr('id', 'channels')
     @

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

@@ -2,30 +2,31 @@ class Kandan.Views.Chatbox extends Backbone.View
 
   template: JST['chatbox']
   tagName: 'div'
-  className: 'chatbox-area'
+  className: 'chatbox'
 
 
   events:
-    "keypress    .chatbox": 'post_message_on_enter'
-    "click   .post-button": 'post_message'
+    "keypress textarea": 'postMessageOnEnter'
+    "click    button"  : 'postMessage'
 
 
-  post_message_on_enter: (event)->
-    @post_message() if event.keyCode== 13
+  postMessageOnEnter: (event)->
+    @postMessage() if event.keyCode== 13
 
 
-  post_message: (event)->
-    $chatbox = $(".chatbox")
+  postMessage: (event)->
+    $chatbox = $(@el).find('textarea')
     activity = new Kandan.Models.Activity({
       'content':    $chatbox.val(),
       'action':     'message',
-      'channel_id': Kandan.Helpers.Channels.getActiveChannelId()
+      'channel_id': @channel.get('id')
     })
 
     activity.save({},{success: ()->
-      $(".chatbox").val("")
+      $chatbox = $(@el).find('textarea')
     })
 
   render: ()->
+    @channel = @options.channel
     $(@el).html(@template())
     @

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

@@ -1,45 +1,18 @@
 class Kandan.Views.ListActivities extends Backbone.View
   tagName: 'div'
-  # className: 'activities'
-
-  events: {
-    "click .pagination": "load_more_activities"
-  }
+  className: 'channel-activities'
 
   render: ()->
     @channel = @options.channel
-    $activities_list = $("<div class='channel-activities'></div>").attr('id', "channel-activities-#{@channel.get('id')}")
+    $(@el).attr('id', "channel-activities-#{@channel.get('id')}")
     oldest = 0
 
     if @channel.activities
       console.log "channel has activities"
       for activity in @channel.activities.models
-        activity_view = new Kandan.Views.ShowActivity({activity: activity, state: Kandan.Helpers.Activities.HISTORY_STATE})
-        $activities_list.append(activity_view.render().el)
-      oldest = @channel.activities.toJSON()[0].id if @channel.activities.toJSON()[0]
-
-    $pagination = $("<div class='pagination'>previous messages</div>")
+        activityView = new Kandan.Views.ShowActivity({activity: activity, state: Kandan.Helpers.Activities.HISTORY_STATE})
+        $(@el).append(activityView.render().el)
 
-    $pagination.data('oldest', oldest)
-    $(@el).append($pagination)
-    $(@el).find(".pagination").hide() if @channel.more_activities != true
-    $(@el).append($activities_list)
-    $(@el).attr('id', "channels-#{@channel.get('id')}")
-    $(@el).data('channel_id', @channel.get('id'))
+    $(@el).prev().hide() if @channel.more_activities != true
     @
 
-  load_more_activities: ()->
-    oldest = $(@el).find(".pagination").data('oldest')
-    activities = new Kandan.Collections.Activities([], {channel_id: @channel.get('id')})
-    activities.fetch({
-      data: { oldest: oldest },
-      success: (collection)=>
-        _.each collection.models.reverse(), (activity)=>
-          activity_view = new Kandan.Views.ShowActivity({activity: activity})
-          $(@el).find(".channel-activities").prepend(activity_view.render().el)
-        Kandan.Helpers.Channels.set_pagination_state(
-          collection.channel_id,
-          collection.more_activities,
-          _.last(collection.models).get('id')
-        )
-    })

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

@@ -0,0 +1,44 @@
+class Kandan.Views.PaginatedActivities extends Backbone.View
+
+  tagName: 'div'
+  className: 'paginated-activities'
+  template: JST['paginated_activities']
+
+  events:
+    "click .pagination": "load_more_activities"
+
+  setPagination: ()->
+    oldestActivityId = 0
+    if @channel.activities and @channel.activities.models.length > 0
+      oldestActivityId = _.last(@channel.activities.models).get('id')
+
+    $(@el).find(".pagination").data('oldest', oldestActivityId)
+
+
+  render: ()->
+    @channel = @options.channel
+    $(@el).html @template()
+    @setPagination()
+
+    listActivitiesView = new Kandan.Views.ListActivities({channel: @channel})
+    $(@el).append listActivitiesView.render().el
+    @
+
+
+  load_more_activities: ()->
+    oldest = $(@el).find(".pagination").data('oldest')
+    activities = new Kandan.Collections.Activities([], {channel_id: @channel.get('id')})
+    activities.fetch({
+      data: { oldest: oldest },
+      success: (collection)=>
+        for activity in collection.models.reverse()
+          activityView = new Kandan.Views.ShowActivity({activity: activity})
+          $(@el).find(".channel-activities").prepend(activityView.render().el)
+
+        Kandan.Helpers.Channels.set_pagination_state(
+          collection.channel_id,
+          collection.more_activities,
+          _.last(collection.models).get('id')
+        )
+    })
+

app/assets/stylesheets/_activity.scss

@@ -0,0 +1,64 @@
+.activity {
+  float: left;
+  width: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #DEE6E8;
+  background: #FFF;
+
+  .avatar {
+    float: left;
+    width: 5%;
+    img {
+      width: 30px;
+      height: 30px;
+    }
+  }
+
+  .readable {
+    float: left;
+    width: 95%;
+
+    .user {
+      color: #AEB9BD;
+      font-weight: bold;
+      float: left;
+      width: 100%;
+      margin-bottom: 4px;
+    }
+
+    .content {
+      float: left;
+      width: 80%;
+      color: #797D7F;
+
+      .image-preview, .youtube-preview {
+        a { width: 100%; }
+        @include border-radius(4px);
+        @include box-shadow(0px 1px 5px 0px #CCC);
+        padding: 10px;
+        background: #F3F8F9;
+        float: left;
+        .name {
+          color: #878D8F;
+          font-weight: bold;
+          margin-top: 5px;
+        }
+      }
+
+    }
+
+    .posted_at {
+      float: left;
+      width: 20%;
+      text-align: right;
+
+      span {
+        @include border-radius(4px);
+        padding: 4px;
+        background: #F3F8F9;
+        color: #BDC6CA;
+      }
+    }
+  }
+}

app/assets/stylesheets/_base.scss

@@ -0,0 +1,27 @@
+@mixin full-height {
+  min-height: 100%;
+  height: 100%;
+}
+
+* {
+  @include box-sizing(border-box);
+}
+
+html {
+  @include full-height;
+}
+
+body {
+  background: $page-bg;
+  height: 90%;
+  min-height: 90%;
+  font-size: 13px;
+  font-family: 'PT Sans', sans-serif;
+}
+
+
+.main-area {
+  @include full-height;
+  width: $main-area-width;
+  float: left;
+}

app/assets/stylesheets/_chat_area.scss

@@ -0,0 +1,120 @@
+#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-tabs {
+  padding: 0px;
+  margin-top: 0px;
+  @include border-radius(0px);
+  border: none;
+
+  .ui-tabs-nav {
+    border-right: 1px solid #404A4D;
+    position: fixed;
+    width: 100%
+  }
+
+  .ui-tabs-panel {
+    margin-top: $header-height + 10;
+    margin-right: 20px;
+    margin-left: 20px;
+    padding: 0px;
+  }
+
+  .ui-widget-content {
+    margin-top: 20px;
+    bottom: 80px;
+    height: 100%;
+  }
+
+  .ui-tabs-nav
+  {
+    position: relative;
+    width: 100%;
+    top: 0px;
+    li a {
+      padding: 3px;
+    }
+  }
+}
+
+.ui-corner-all .ui-corner-bottom, .ui-corner-bottom, .ui-corner-left, .ui-corner-right, .ui-corner-bl, .ui-corner-br {
+  @include border-radius(none);
+}
+
+.ui-state-default {
+  font-size: 14px;
+}
+
+
+.ui-widget-content {
+  @include full-height;
+  background: $panel-bg;
+  font-size: 13px;
+}
+
+.paginated-activities {
+  @include box-shadow(5px 0px 5px -3px #CCC, -5px 0px 5px -3px #CCC, 5px 10px 5px -3px #CCC, -5px 10px 5px -3px #CCC);
+  @include border-top-radius(4px);
+  overflow-y: scroll;
+  float: left;
+  width: 100%;
+  min-height: 88%;
+  height: 88%;
+  background: #FFF;
+  padding: 10px;
+
+  .pagination {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .channel-activities {
+    width: 100%;
+  }
+}
+
+.chatbox {
+  @include border-bottom-radius(4px);
+  @include background-image(linear-gradient($chatbox-bg-1, $chatbox-bg-2));
+  @include box-shadow(5px 0px 5px -3px #CCC, -5px 0px 5px -3px #CCC, 0px 5px 5px 0px #CCC);
+  float: left;
+  border-top: 1px solid #EBEFF1;
+  padding: 10px 0px 10px 10px;
+  width: 100%;
+
+  textarea {
+    @include border-top-left-radius(4px);
+    @include border-bottom-left-radius(4px);
+    border: 1px solid #AEB9BD;
+    width: 92%;
+    padding: 0px;
+    margin: 0px;
+    height: 40px;
+    resize: none;
+  }
+
+  button {
+    @include background-image(linear-gradient(#C8ECF6, #9FDFF4));
+    @include border-top-right-radius(4px);
+    @include border-bottom-right-radius(4px);
+    position: relative;
+    left: -5px;
+    border: 1px solid #AEB9BD;
+    color: #59808B;
+    width: 7%;
+    padding: 0px;
+    margin: 0px;
+    height: 40px;
+  }
+}
+
+