make upload a dropdown, add consistent button divider

4 files changed, 56 insertions, 11 deletions

diff --git a/data/assets/js/admin/tabs/files.js b/data/assets/js/admin/tabs/files.js
index 1c01476..d378b46 100644
--- a/data/assets/js/admin/tabs/files.js
+++ b/data/assets/js/admin/tabs/files.js
@@ -96,8 +96,18 @@ jQuery(function($) {
         "</a>",
       "</li>",
     ],
+
+    divider: [
+      "<div class='btn-group btn-group-sm'>",
+        "<span>&nbsp;&nbsp;</span>",
+      "</div>",
+    ],
   });
 
+  // cache templates
+  var NO_FILES = TEMPLATES.run('no_files'),
+      DIVIDER  = TEMPLATES.run('divider');
+
   function get_selected_site() {
     var site_id = $('#files').data('site_id');
 
@@ -134,8 +144,6 @@ jQuery(function($) {
     return r;
   }
 
-  var NO_FILES = TEMPLATES.run('no_files');
-
   function reload() {
     var btns = $('#files-reload, #files-crumbs .btn'),
         list = $('#files');
@@ -159,7 +167,8 @@ jQuery(function($) {
       // draw crumbs
       var crumbs = get_crumbs($('#files').data('path'));
       $('#files-crumbs').html([
-        make_site_dropdown()
+        make_site_dropdown(),
+        // DIVIDER,
       ].concat($.map(crumbs, function(crumb) {
         return TEMPLATES.run('crumb', {
           path: crumb,
@@ -292,7 +301,10 @@ jQuery(function($) {
     return false;
   });
 
-  $('#files-upload').click(function() {
+  $('#files-upload').on('click', 'a', function() {
+    // hide dropdown
+    $('body').trigger('click');
+
     alert('TODO: upload');
 
     // stop event
diff --git a/src/guff/views/panes/admin/pane.cr b/src/guff/views/panes/admin/pane.cr
index 483badd..3da48da 100644
--- a/src/guff/views/panes/admin/pane.cr
+++ b/src/guff/views/panes/admin/pane.cr
@@ -24,7 +24,7 @@ class Guff::Views::Panes::Admin::Pane < Guff::Views::HTMLView
     >
       <i class='fa fa-plus-circle'></i>
       Create
-      <i class='fa fa-fw fa-caret-down'></i>
+      <i class='fa fa-caret-down'></i>
     </a>
 
     <ul class='dropdown-menu'>" + %i{blog page project}.map { |id|
@@ -38,4 +38,14 @@ class Guff::Views::Panes::Admin::Pane < Guff::Views::HTMLView
   protected def new_post_button
     NEW_POST_BUTTON
   end
+
+  DIVIDER = "
+    <div class='btn-group btn-group-sm'>
+      <span>&nbsp;&nbsp;</span>
+    </div><!-- btn-group -->
+  "
+
+  protected def divider
+    DIVIDER
+  end
 end
diff --git a/src/views/panes/admin/files.ecr b/src/views/panes/admin/files.ecr
index d5c4f0d..f0fe602 100644
--- a/src/views/panes/admin/files.ecr
+++ b/src/views/panes/admin/files.ecr
@@ -9,15 +9,40 @@
         <div class='btn-group btn-group-sm'>
           <a
             href='#'
-            id='files-upload'
             class='btn btn-primary'
-            title='Upload file to current directory.'
+            title='Upload file(s) to current directory.'
+            data-toggle='dropdown'
           >
             <i class='fa fa-upload'></i>
-            Upload File...
+            Upload
+            <i class='fa fa-caret-down'></i>
           </a><!-- btn -->
+
+          <ul id='files-upload' class='dropdown-menu'>
+            <li role='presentation'>
+              <a
+                href='#'
+                title='Upload file to current directory.'
+                data-id='file'
+              >
+                Upload File...
+              </a>
+            </li>
+
+            <li role='presentation'>
+              <a
+                href='#'
+                title='Upload multiple files as a zip file.'
+                data-id='zip'
+              >
+                Bulk Upload...
+              </a>
+            </li>
+          </ul><!-- dropdown-menu -->
         </div><!-- btn-group -->
 
+        <%= divider %>
+
         <div class='btn-group btn-group-sm'>
           <a
             href='#'
diff --git a/src/views/panes/admin/posts.ecr b/src/views/panes/admin/posts.ecr
index 5b8e669..7e5adb9 100644
--- a/src/views/panes/admin/posts.ecr
+++ b/src/views/panes/admin/posts.ecr
@@ -10,9 +10,7 @@
           new_post_button
         %></div><!-- btn-group -->
 
-        <div class='btn-group btn-group-sm'>
-          <span>&nbsp;&nbsp;</span>
-        </div><!-- btn-group -->
+        <%= divider %>
 
         <div class='btn-group btn-group-sm'><%=
           dropdown(