Styles the file list. WIP

Signed-off-by: Akash Manohar J <[email protected]>
kandanapp · Mar 28, 2012 · 552f761 · 552f761
1 parent 81310a9
commit 552f761
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 20 deletions.
diff --git a/app/assets/javascripts/backbone/plugins/attachments.js.coffee b/app/assets/javascripts/backbone/plugins/attachments.js.coffee
@@ -3,16 +3,24 @@ class Kandan.Plugins.Attachments
   @widget_title: "Media"
   @plugin_namespace: "Kandan.Plugins.Attachments"
 
-  @template: _.template('''
-    <form accept-charset="UTF-8" action="/channels/<%= channel_id %>/attachments.json" data-remote="true" html="{:multipart=&gt;true}" id="file_upload" method="post">
-      <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
-        <input name="<%=csrf_param %>" type="hidden" value="<%= csrf_token %>"/>
+
+  @templates:
+    no_files: _.template '''
+      <div style="text-align:center; text-transform: uppercase; font-size: 11px; color: #999; padding: 10px;">
+        Amigo, Why you no upload?
       </div>
-      <input id="channel_id_<%= channel_id %>" name="channel_id[<%= channel_id %>]" type="hidden"/>
-      <input id="file" name="file" type="file"/>
-      <div class="dropzone">Drop files here to upload</div>
-   </form>
-  ''')
+    '''
+
+    dropzone: _.template '''
+      <form accept-charset="UTF-8" action="/channels/<%= channel_id %>/attachments.json" data-remote="true" html="{:multipart=&gt;true}" id="file_upload" method="post">
+          <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓">
+            <input name="<%=csrf_param %>" type="hidden" value="<%= csrf_token %>"/>
+          </div>
+          <input id="channel_id_<%= channel_id %>" name="channel_id[<%= channel_id %>]" type="hidden"/>
+          <input id="file" name="file" type="file"/>
+          <div class="dropzone">Drop files here to upload</div>
+      </form>
+    '''
 
   @supports_drop_upload: ()->
     !!(window.File && window.FileList && window.FileReader)
@@ -27,12 +35,12 @@ class Kandan.Plugins.Attachments
     $('meta[name=csrf-token]').attr('content')
 
   @file_item_template: _.template '''
-    <li><a href="<%= url %>"><%= file_name %></a></li>
+    <div class="file_item"><a href="<%= url %>"><%= file_name %></a></div>
   '''
 
   # TODO this part is very bad for APIs! shoudnt be exposing a backbone collection in a plugin.
   @render: ($widget_el)->
-    $upload_form = @template({
+    $upload_form = @templates.dropzone({
       channel_id: @channel_id(),
       csrf_param: @csrf_param(),
       csrf_token: @csrf_token()
@@ -42,15 +50,21 @@ class Kandan.Plugins.Attachments
     @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)=>
-      for model in collection.models
-        $file_list.append(@file_item_template({
-          file_name: model.get('file_file_name'),
-          url: model.get('url')
-        }))
-      $widget_el.html($file_list)
+    attachments.fetch({
+      success: (collection)=>
+
+        if collection.models.length > 0
+          $file_list = $("<div class='file_list'></div>")
+          for model in collection.models
+            $file_list.append(@file_item_template({
+              file_name: model.get('file_file_name'),
+              url: model.get('url')
+            }))
+        else
+          $file_list = @templates.no_files()
+        $widget_el.html($file_list)
     })
 
 

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
@@ -36,6 +36,7 @@ body {
   background: $page-bg;
   height: 90%;
   min-height: 90%;
+  font-size: 13px;
 }
 
 
@@ -349,6 +350,7 @@ body {
       margin-top: 5px;
       font-weight: bold;
       color: #585D5F;
+      font-size: 12px;
     }
   }
 }
@@ -361,6 +363,25 @@ body {
   display: none;
 }
 
+.file_list {
+  float: left;
+  clear: both;
+  width: 100%;
+
+  .file_item {
+    clear: both;
+    float: left;
+    line-height: 25px;
+    color: #585D5F;
+    a {
+      font-size: 12px;
+      text-decoration: none;
+      font-weight: bold;
+      color: #585D5F;
+    }
+  }
+}
+
 .action_bar {
   form {
     width: 100%;
@@ -379,4 +400,3 @@ body {
     }
   }
 }
-