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();