initial home panel dragging

3 files changed, 201 insertions, 5 deletions

diff --git a/src/guff/views/pages/admin.cr b/src/guff/views/pages/admin.cr
index 5ed95db..7113fbc 100644
--- a/src/guff/views/pages/admin.cr
+++ b/src/guff/views/pages/admin.cr
@@ -20,6 +20,7 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView
     assets/ckeditor-4.5.8-custom/ckeditor.js
     assets/js/search-field.js
     assets/js/dropdown.js
+    assets/js/admin/tabs/home.js
     assets/js/admin/tabs/posts.js
     assets/js/admin/tabs/files.js
     assets/js/admin/tabs/import.js
diff --git a/src/guff/views/panes/admin/home.cr b/src/guff/views/panes/admin/home.cr
index b5be8c2..d7d1596 100644
--- a/src/guff/views/panes/admin/home.cr
+++ b/src/guff/views/panes/admin/home.cr
@@ -1,5 +1,108 @@
 require "./pane"
 
 class Guff::Views::Panes::Admin::Home < Guff::Views::Panes::Admin::Pane
+  TEMPLATES = Template::Cache.new({
+    "col" => %{
+      <li class='%{css|h}' role='presentation'>
+        <a
+          href='#'
+          title='Show %{i} column%{s}.'
+          data-id='%{i}'
+          data-name='%{i} Column%{s}'
+        >
+          %{i} Column%{s}
+        </a>
+      </li>
+    }.strip,
+
+    "old-panel-edit" => %{
+      <div class='panel-heading home-editing hidden'>
+        <div class='btn-toolbar'>
+          <div class='btn-group btn-group-sm'>
+            <a
+              href='#'
+              class='btn btn-default home-panel-edit'
+              title='Edit this panel.'
+              data-id='edit'
+            >
+              <i class='fa fa-cog'></i>
+            </a>
+          </div><!-- btn-group -->
+
+          <div class='btn-group btn-group-sm pull-right'>
+            <a
+              href='#'
+              class='btn btn-default home-panel-edit'
+              title='Remove this panel.'
+              data-id='remove'
+            >
+              <i class='fa fa-trash'></i>
+            </a>
+          </div><!-- btn-group -->
+        </div><!-- btn-toolbar -->
+      </div><!-- panel-heading -->
+    }.strip,
+
+    "panel-edit" => %{
+      <a
+        href='#'
+        class='btn btn-default btn-xs home-editing hidden'
+        title='Edit panel.'
+        data-toggle='dropdown'
+      >
+        <i class='fa fa-cog'></i>
+        <i class='fa fa-caret-down'></i>
+      </a>
+
+      <ul class='dropdown-menu home-panel-edit'>
+        <li role='presentation'>
+          <a
+            href='#'
+            title='Configure this panel.'
+            data-id='edit'
+          >
+            <i class='fa fa-list-alt'></i>
+            Configure...
+          </a>
+        </li>
+
+        <li role='presentation'>
+          <a
+            href='#'
+            title='Remove this panel.'
+            data-id='remove'
+          >
+            <i class='fa fa-trash'></i>
+            Remove
+          </a>
+        </li>
+      </ul>
+    }.strip,
+  })
+
+  private def add_menu
+    # TODO
+    ""
+  end
+
+  private def cols_menu
+    t = TEMPLATES["col"]
+    num_cols = 3
+
+    (1..4).map { |i|
+      t.run({
+        "i"   => i.to_s,
+        "s"   => (i == 1) ? "" : "s",
+        "css" => (i == num_cols) ? "active" : "",
+      })
+    }.join
+  end
+
+  PANEL_EDIT = TEMPLATES["panel-edit"].run({} of String => String)
+
+  private def panel_edit : String
+    PANEL_EDIT
+  end
+
   ECR.def_to_s("src/views/panes/admin/home.ecr")
 end
diff --git a/src/views/panes/admin/home.ecr b/src/views/panes/admin/home.ecr
index af19b78..df0c7ec 100644
--- a/src/views/panes/admin/home.ecr
+++ b/src/views/panes/admin/home.ecr
@@ -6,16 +6,108 @@
   <div class='panel panel-default'>
     <div class='panel-heading'>
       <div class='btn-toolbar'>
-        <div class='btn-group btn-group-sm'><%=
+        <div class='btn-group btn-group-sm home-not-editing'><%=
           new_post_button
         %></div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm home-editing hidden'>
+          <a
+            href='#'
+            class='btn btn-primary'
+            title='Add new panel.'
+            data-toggle='dropdown'
+          >
+            <i class='fa fa-plus-circle'></i>
+            Add Panel
+            <i class='fa fa-caret-down'></i>
+          </a>
+
+          <ul id='home-add' class='dropdown-menu'><%=
+            add_menu
+          %></ul><!-- dropdown-menu -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm home-editing hidden'>
+          <a
+            href='#'
+            class='btn btn-default'
+            title='Set column count.'
+            data-toggle='dropdown'
+          >
+            <i class='fa fa-columns'></i>
+            Width: <span>3 Columns</span>
+            <i class='fa fa-caret-down'></i>
+          </a>
+
+          <ul id='home-cols' class='dropdown-menu'><%=
+            cols_menu
+          %></ul><!-- dropdown-menu -->
+        </div><!-- btn-group -->
+
+        <div class='btn-group btn-group-sm pull-right'>
+          <a
+            href='#'
+            id='home-edit-toggle'
+            class='btn btn-default'
+            title='Toggle panel home-editing mode.'
+          >
+            <i class='fa fa-cog'></i>
+          </a>
+        </div><!-- btn-group -->
       </div><!-- btn-toolbar -->
     </div><!-- panel-heading -->
 
-    <div class='panel-body'>
-      <p>
-        TODO: home
-      </p>
+    <div id='home' class='panel-body'>
+      <div class='row'>
+        <div class='col-md-4 drop'>
+          <div id='p-1' class='panel panel-default'>
+            <div class='panel-heading'>
+              <%= panel_edit %>
+
+              <b>
+                Some Panel
+              </b>
+            </div><!-- panel-heading -->
+
+            <div class='panel-body'>
+              <p>Some panel.</p>
+            </div><!-- panel-body -->
+          </div><!-- panel -->
+        </div><!-- col-md-4 -->
+
+        <div class='col-md-4 drop'>
+          <div id='p-2' class='panel panel-default'>
+            <div class='panel-heading'>
+              <%= panel_edit %>
+
+              <b>
+                Another Panel
+              </b>
+            </div><!-- panel-heading -->
+
+            <div class='panel-body'>
+              <p>Another panel.</p>
+            </div><!-- panel-body -->
+          </div><!-- panel -->
+        </div><!-- col-md-4 -->
+
+        <div class='col-md-4 drop'>
+          <div id='p-3' class='panel panel-default'>
+
+            <div class='panel-heading'>
+              <%= panel_edit %>
+
+              <b>
+                Third Panel
+              </b>
+            </div><!-- panel-heading -->
+
+            <div class='panel-body'>
+              <p>Third panel.</p>
+            </div><!-- panel-body -->
+          </div><!-- panel -->
+        </div><!-- col-md-4 -->
+      </div><!-- row -->
     </div><!-- panel-body -->
   </div><!-- panel -->
 </div><!-- tab-pane -->