Assignee change from the board is now a popover

assets/css/app.css

@@ -20,7 +20,7 @@ body {
     margin-left: 10px;
     margin-right: 10px;
     color: #333;
-    font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
@@ -883,3 +883,23 @@ tr td.task-orange,
     max-width: 700px;
     font-size: 1.1em;
 }
+
+/* modal box */
+#popover-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+}
+
+#popover-content {
+    position: fixed;
+    width: 70%;
+    margin: 0 0 0 -35%;
+    left: 50%;
+    top: 5%;
+    padding: 15px;
+    background: #fff;
+}

assets/js/board.js

@@ -14,6 +14,19 @@
             }
         });
 
+        // Open assignee popover
+        $(".task-user a").click(function(e) {
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            var taskId = $(this).parent().parent().attr("data-task-id");
+
+            $.get("?controller=board&action=assign&task_id=" + taskId, function(data) {
+                popover_show(data);
+            });
+        });
+
         // Redirect to the task details page
         $("[data-task-id]").each(function() {
             $(this).click(function() {
@@ -137,6 +150,20 @@
         });
     }
 
+    // Show popup
+    function popover_show(content)
+    {
+        $("body").append('<div id="popover-container"><div id="popover-content">' + content + '</div></div>');
+
+        $("#popover-container").click(function() {
+            $(this).remove();
+        });
+
+        $("#popover-content").click(function(e) {
+            e.stopPropagation();
+        });
+    }
+
     // Initialization
     $(function() {
         board_load_events();

controllers/board.php

@@ -60,16 +60,30 @@ class Board extends Base
         if (! $project) $this->notfound();
         $this->checkProjectPermissions($project['id']);
 
-        $this->response->html($this->template->layout('board_assign', array(
-            'errors' => array(),
-            'values' => $task,
-            'users_list' => $this->project->getUsersList($project['id']),
-            'projects' => $projects,
-            'current_project_id' => $project['id'],
-            'current_project_name' => $project['name'],
-            'menu' => 'boards',
-            'title' => t('Change assignee').' - '.$task['title'],
-        )));
+        if ($this->request->isAjax()) {
+
+            $this->response->html($this->template->load('board_assign', array(
+                'errors' => array(),
+                'values' => $task,
+                'users_list' => $this->project->getUsersList($project['id']),
+                'projects' => $projects,
+                'current_project_id' => $project['id'],
+                'current_project_name' => $project['name'],
+            )));
+        }
+        else {
+
+            $this->response->html($this->template->layout('board_assign', array(
+                'errors' => array(),
+                'values' => $task,
+                'users_list' => $this->project->getUsersList($project['id']),
+                'projects' => $projects,
+                'current_project_id' => $project['id'],
+                'current_project_name' => $project['name'],
+                'menu' => 'boards',
+                'title' => t('Change assignee').' - '.$task['title'],
+            )));
+        }
     }
 
     /**

core/request.php

@@ -48,4 +48,9 @@ class Request
     {
         return isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] === 'POST';
     }
+
+    public function isAjax()
+    {
+        return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
+    }
 }

templates/board_show.php

@@ -72,4 +72,4 @@
     </td>
     <?php endforeach ?>
 </tr>
-</table>
+</table>