File widget update to style dropzone

Signed-off-by: Akash Manohar J <akash@akash.im>
kandanapp · Mar 28, 2012 · 81310a9 · 81310a9
1 parent e13cd8b
commit 81310a9
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 12 deletions.
diff --git a/app/assets/javascripts/backbone/plugins/attachments.js.coffee b/app/assets/javascripts/backbone/plugins/attachments.js.coffee
@@ -10,8 +10,7 @@ class Kandan.Plugins.Attachments
       </div>
       <input id="channel_id_<%= channel_id %>" name="channel_id[<%= channel_id %>]" type="hidden"/>
       <input id="file" name="file" type="file"/>
-      <input name="commit" type="submit" value="Upload"/>
-      <div class="dropzone" style="height: 100px;background-color: #000;"></div>
+      <div class="dropzone">Drop files here to upload</div>
    </form>
   ''')
 
@@ -27,9 +26,9 @@ class Kandan.Plugins.Attachments
   @csrf_token: ->
     $('meta[name=csrf-token]').attr('content')
 
-  @file_item_template: _.template('''
-      <li><a href="<%= url %>"><%= file_name %></a></li>
-    ''')
+  @file_item_template: _.template '''
+    <li><a href="<%= url %>"><%= file_name %></a></li>
+  '''
 
   # TODO this part is very bad for APIs! shoudnt be exposing a backbone collection in a plugin.
   @render: ($widget_el)->
@@ -38,8 +37,11 @@ class Kandan.Plugins.Attachments
       csrf_param: @csrf_param(),
       csrf_token: @csrf_token()
     })
-    $widget_el.html($upload_form)
+
+    $widget_el.next().html($upload_form)
     @init_dropzone @channel_id()
+    console.log $widget_el.next()
+    $widget_el.next(".action_block").html($upload_form)
     $file_list = $("<ul></ul>")
     attachments = new Kandan.Collections.Attachments([], {channel_id: @channel_id()})
     attachments.fetch({success: (collection)=>
@@ -48,17 +50,23 @@ class Kandan.Plugins.Attachments
           file_name: model.get('file_file_name'),
           url: model.get('url')
         }))
-      $widget_el.append($file_list)
+      $widget_el.html($file_list)
     })
 
 
   @init_dropzone: (channel_id)->
     $(".dropzone").filedrop({
-      fallback_id: "file",
-      url: "/channels/#{channel_id}/attachments.json",
-      paramname: 'file',
+      fallback_id: "file"
+      url        : "/channels/#{channel_id}/attachments.json",
+      paramname  : "file"
+
+      uploadStarted: =>
+        $(".dropzone").text("Uploading...")
+
       uploadFinished: (i, file, response, time)->
-        console.log "upload complete"
+        $(".dropzone").text("Drop files here to upload")
+        Kandan.Widgets.render "Kandan.Plugins.Attachments"
+
       dragOver: ->
         console.log "reached dropzone!"
     })

diff --git a/app/assets/javascripts/backbone/widgets.js.coffee b/app/assets/javascripts/backbone/widgets.js.coffee
@@ -15,6 +15,7 @@ class Kandan.Widgets
     <div class="widget" id="widget_<%= element_id %>">
       <div class="title"><%= title %></div>
       <div class="content" id="<%= element_id %>"></div>
+      <div class="action_bar"></div>
     </div>
   '''
 

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -120,12 +120,27 @@ body {
       }
 
       .content {
-        @include border-bottom-radius(7px);
         float: left;
         width: 100%;
+        clear: both;
         background: #F3F8F9;
         padding-left: 10px;
       }
+
+      .action_bar {
+        @include border-bottom-radius(7px);
+        font-size: 13px;
+        text-align: center;
+        line-height: 20px;
+        color: #808789;
+        float: left;
+        width: 100%;
+        clear: both;
+        height: 40px;
+        min-height: 40px;
+        border-top: 2px solid #D2D8D8;
+        background: #E9EFF0;
+      }
     }
   }
 }
@@ -293,6 +308,8 @@ body {
     .posted_at {
       float: left;
       width: 20%;
+      text-align: right;
+
       span {
         @include border-radius(4px);
         padding: 4px;
@@ -335,3 +352,31 @@ body {
     }
   }
 }
+
+//
+// Attachments plugin
+//
+
+#file {
+  display: none;
+}
+
+.action_bar {
+  form {
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    float: left;
+
+    .dropzone {
+      display: block;
+      float: left;
+      width: 100%;
+      min-height: 100%;
+      height: 100%;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+}
+