4 files changed, 75 insertions, 70 deletions
diff --git a/app/Template/column/create.php b/app/Template/column/create.php
new file mode 100644
index 00000000..747b1529
--- /dev/null
+++ b/app/Template/column/create.php
@@ -0,0 +1,41 @@
+<div class="page-header">
+    <h2><?= t('Add a new column') ?></h2>
+</div>
+<form class="popover-form" method="post" action="<?= $this->url->href('Column', 'save', array('project_id' => $project['id'])) ?>" autocomplete="off">
+
+    <?= $this->form->csrf() ?>
+
+    <?= $this->form->hidden('project_id', $values) ?>
+
+    <?= $this->form->label(t('Title'), 'title') ?>
+    <?= $this->form->text('title', $values, $errors, array('autofocus', 'required', 'maxlength="50"')) ?>
+
+    <?= $this->form->label(t('Task limit'), 'task_limit') ?>
+    <?= $this->form->number('task_limit', $values, $errors) ?>
+
+    <?= $this->form->label(t('Description'), 'description') ?>
+
+    <div class="form-tabs">
+        <div class="write-area">
+          <?= $this->form->textarea('description', $values, $errors) ?>
+        </div>
+        <div class="preview-area">
+            <div class="markdown"></div>
+        </div>
+        <ul class="form-tabs-nav">
+            <li class="form-tab form-tab-selected">
+                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
+            </li>
+            <li class="form-tab">
+                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
+            </li>
+        </ul>
+    </div>
+    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
+
+    <div class="form-actions">
+        <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
+        <?= t('or') ?>
+        <?= $this->url->link(t('cancel'), 'column', 'index', array('project_id' => $project['id']), false, 'close-popover') ?>
+    </div>
+</form>
+\ No newline at end of file
diff --git a/app/Template/column/edit.php b/app/Template/column/edit.php
index a17affd8..206322cd 100644
--- a/app/Template/column/edit.php
+++ b/app/Template/column/edit.php
@@ -2,7 +2,7 @@
     <h2><?= t('Edit column "%s"', $column['title']) ?></h2>
 </div>
 
-<form method="post" action="<?= $this->url->href('column', 'update', array('project_id' => $project['id'], 'column_id' => $column['id'])) ?>" autocomplete="off">
+<form class="popover-form" method="post" action="<?= $this->url->href('column', 'update', array('project_id' => $project['id'], 'column_id' => $column['id'])) ?>" autocomplete="off">
 
     <?= $this->form->csrf() ?>
 
@@ -37,8 +37,8 @@
     <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
 
     <div class="form-actions">
-        <input type="submit" value="<?= t('Save') ?>" class="btn btn-blue"/>
+        <button type="submit" class="btn btn-blue"><?= t('Save') ?></button>
         <?= t('or') ?>
-        <?= $this->url->link(t('cancel'), 'column', 'index', array('project_id' => $project['id'])) ?>
+        <?= $this->url->link(t('cancel'), 'column', 'index', array('project_id' => $project['id']), false, 'close-popover') ?>
     </div>
 </form>
 \ No newline at end of file
diff --git a/app/Template/column/index.php b/app/Template/column/index.php
index 17651d46..eef176f3 100644
--- a/app/Template/column/index.php
+++ b/app/Template/column/index.php
@@ -1,92 +1,56 @@
 <div class="page-header">
     <h2><?= t('Edit the board for "%s"', $project['name']) ?></h2>
+    <ul>
+        <li>
+            <i class="fa fa-plus fa-fw"></i>
+            <?= $this->url->link(t('Add a new column'), 'Column', 'create', array('project_id' => $project['id']), false, 'popover') ?>
+        </li>
+    </ul>
 </div>
 
-<?php if (! empty($columns)): ?>
-
-    <?php $first_position = $columns[0]['position']; ?>
-    <?php $last_position = $columns[count($columns) - 1]['position']; ?>
-
-    <h3><?= t('Change columns') ?></h3>
-    <table>
+<?php if (empty($columns)): ?>
+    <p class="alert alert-error"><?= t('Your board doesn\'t have any column!') ?></p>
+<?php else: ?>
+    <table
+        class="columns-table table-stripped"
+        data-save-position-url="<?= $this->url->href('Column', 'move', array('project_id' => $project['id'])) ?>">
+        <thead>
         <tr>
             <th class="column-70"><?= t('Column title') ?></th>
             <th class="column-25"><?= t('Task limit') ?></th>
             <th class="column-5"><?= t('Actions') ?></th>
         </tr>
+        </thead>
+        <tbody>
         <?php foreach ($columns as $column): ?>
-        <tr>
-            <td><?= $this->e($column['title']) ?>
-             <?php if (! empty($column['description'])): ?>
-                <span class="tooltip" title='<?= $this->e($this->text->markdown($column['description'])) ?>'>
-                    <i class="fa fa-info-circle"></i>
-                </span>
-            <?php endif ?>
+        <tr data-column-id="<?= $column['id'] ?>">
+            <td>
+                <i class="fa fa-arrows-alt draggable-row-handle" title="<?= t('Change column position') ?>"></i>
+                <?= $this->text->e($column['title']) ?>
+                <?php if (! empty($column['description'])): ?>
+                    <span class="tooltip" title='<?= $this->text->e($this->text->markdown($column['description'])) ?>'>
+                        <i class="fa fa-info-circle"></i>
+                    </span>
+                <?php endif ?>
+            </td>
+            <td>
+                <?= $this->text->e($column['task_limit']) ?>
             </td>
-            <td><?= $this->e($column['task_limit']) ?></td>
             <td>
                 <div class="dropdown">
                 <a href="#" class="dropdown-menu dropdown-menu-link-icon"><i class="fa fa-cog fa-fw"></i><i class="fa fa-caret-down"></i></a>
                 <ul>
                     <li>
-                        <?= $this->url->link(t('Edit'), 'column', 'edit', array('project_id' => $project['id'], 'column_id' => $column['id'])) ?>
-                    </li>
-                    <?php if ($column['position'] != $first_position): ?>
-                    <li>
-                        <?= $this->url->link(t('Move Up'), 'column', 'move', array('project_id' => $project['id'], 'column_id' => $column['id'], 'direction' => 'up'), true) ?>
-                    </li>
-                    <?php endif ?>
-                    <?php if ($column['position'] != $last_position): ?>
-                    <li>
-                        <?= $this->url->link(t('Move Down'), 'column', 'move', array('project_id' => $project['id'], 'column_id' => $column['id'], 'direction' => 'down'), true) ?>
+                        <?= $this->url->link(t('Edit'), 'column', 'edit', array('project_id' => $project['id'], 'column_id' => $column['id']), false, 'popover') ?>
                     </li>
-                    <?php endif ?>
                     <li>
-                        <?= $this->url->link(t('Remove'), 'column', 'confirm', array('project_id' => $project['id'], 'column_id' => $column['id'])) ?>
+                        <?= $this->url->link(t('Remove'), 'column', 'confirm', array('project_id' => $project['id'], 'column_id' => $column['id']), false, 'popover') ?>
                     </li>
                 </ul>
                 </div>
             </td>
         </tr>
         <?php endforeach ?>
+        </tbody>
     </table>
-
 <?php endif ?>
-
-<h3><?= t('Add a new column') ?></h3>
-<form method="post" action="<?= $this->url->href('column', 'create', array('project_id' => $project['id'])) ?>" autocomplete="off">
-
-    <?= $this->form->csrf() ?>
-
-    <?= $this->form->hidden('project_id', $values) ?>
-
-    <?= $this->form->label(t('Title'), 'title') ?>
-    <?= $this->form->text('title', $values, $errors, array('required', 'maxlength="50"')) ?>
-
-    <?= $this->form->label(t('Task limit'), 'task_limit') ?>
-    <?= $this->form->number('task_limit', $values, $errors) ?>
-
-    <?= $this->form->label(t('Description'), 'description') ?>
-
-    <div class="form-tabs">
-        <div class="write-area">
-          <?= $this->form->textarea('description', $values, $errors) ?>
-        </div>
-        <div class="preview-area">
-            <div class="markdown"></div>
-        </div>
-        <ul class="form-tabs-nav">
-            <li class="form-tab form-tab-selected">
-                <i class="fa fa-pencil-square-o fa-fw"></i><a id="markdown-write" href="#"><?= t('Write') ?></a>
-            </li>
-            <li class="form-tab">
-                <a id="markdown-preview" href="#"><i class="fa fa-eye fa-fw"></i><?= t('Preview') ?></a>
-            </li>
-        </ul>
-    </div>
-    <div class="form-help"><?= $this->url->doc(t('Write your text in Markdown'), 'syntax-guide') ?></div>
-
-    <div class="form-actions">
-        <input type="submit" value="<?= t('Add this column') ?>" class="btn btn-blue"/>
-    </div>
-</form>
-\ No newline at end of file
diff --git a/app/Template/column/remove.php b/app/Template/column/remove.php
index 28d0928f..ccab889d 100644
--- a/app/Template/column/remove.php
+++ b/app/Template/column/remove.php
@@ -10,6 +10,6 @@
 
     <div class="form-actions">
         <?= $this->url->link(t('Yes'), 'column', 'remove', array('project_id' => $project['id'], 'column_id' => $column['id'], 'remove' => 'yes'), true, 'btn btn-red') ?>
-        <?= t('or') ?> <?= $this->url->link(t('cancel'), 'column', 'index', array('project_id' => $project['id'])) ?>
+        <?= t('or') ?> <?= $this->url->link(t('cancel'), 'column', 'index', array('project_id' => $project['id']), false, 'close-popover') ?>
     </div>
 </div>
 \ No newline at end of file