Improving us statuses for admin

app/coffee/modules/admin/project-values.coffee

@@ -110,7 +110,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
             itemEl.remove()
 
         tdom.sortable({
-            handle: ".project-values-row.visualization",
+            handle: ".row.table-main.visualization",
             dropOnEmpty: true
             connectWith: ".project-values-body"
             revert: 400
@@ -187,7 +187,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
 
-            row = target.parents(".project-values-row")
+            row = target.parents(".row.table-main")
             row.hide()
             row.siblings(".edition").css("display": "flex")
 
@@ -200,7 +200,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
             status = target.scope().status
             promise = $repo.save(status)
             promise.then =>
-                row = target.parents(".project-values-row")
+                row = target.parents(".row.table-main")
                 row.hide()
                 row.siblings(".visualization").css("display": "flex")
 
@@ -210,7 +210,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
         $el.on "click", ".cancel", (event) ->
             event.preventDefault()
             target = angular.element(event.currentTarget)
-            row = target.parents(".project-values-row")
+            row = target.parents(".row.table-main")
             row.hide()
             row.siblings(".visualization").css("display": "flex")
 
@@ -226,6 +226,25 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
                 $repo.remove(status).then =>
                     $ctrl.loadUsStatus()
 
+        $el.on "click", ".edition .current-color", (event) ->
+            # Showing the color selector
+            event.preventDefault()
+            event.stopPropagation()
+            target = angular.element(event.currentTarget)
+            status = target.scope().status
+            $el.find(".select-color").hide()
+            target.siblings(".select-color").show()
+            #body = angular.element("body")
+            #body.one "click", (event) ->
+            #    $el.find(".select-color").hide()
+
+        $el.on "click", ".select-color .color", (event) ->
+            # Selecting one color on color selector
+            event.preventDefault()
+            target = angular.element(event.currentTarget)
+            console.log "TODO", target.data("color")
+            $el.find(".select-color").hide()
+
     link = ($scope, $el, $attrs) ->
         linkDragAndDrop($scope, $el, $attrs)
         linkStatus($scope, $el, $attrs)

app/partials/views/components/select-color.jade

@@ -2,5 +2,5 @@ div.popover.select-color
     ul
         - for (var z = 0; z < 21; z++)
             li.color
-    input(type="text", placeholder="personalized colors")
+    input(type="text", placeholder="personalized colors", ng-model="status.color")
-    div.selected-color(style="background-color: red")
+    div.selected-color(style="background-color: {{ status.color }}")

app/partials/views/modules/admin/project-us-status.jade

@@ -1,40 +1,47 @@
-section.project-values-table
+section.colors-table
-    div.project-values-header
+    div.table-header
-        div.project-values-row
+        div.row
-            div.project-values-name
+            div.color-column Color
-                span Name
+            div.status-name Name
-            div.project-values-isclosed
+            div.is-closed-column Is closed?
-                span Is closed?
+            div.options-column
-            div.project-values-settings
 
-    div.project-values-body
+    div.table-main
         form.sortable
             div(ng-repeat="status in usStatuses")
-                div.project-values-row.visualization
+                div.row.table-main.visualization
                     span.icon.icon-drag-v
-                    div.project-values-name
+                    div.color-column
+                        div.current-color(style="background: {{ status.color }}")
+                    div.status-name
                         span {{ status.name }}
-                    div.project-values-isclosed
+                    div.is-closed-column
                         span {{ status.is_closed|yesNo }}
-                    div.project-values-settings
+                    div.options-column
                         a.edit-us-status.icon.icon-edit(href="", title="Edit value")
                         a.delete-us-status.icon.icon-delete(href="", title="Delete value")
 
-                div.project-values-row.edition.hidden
+                div.row.table-main.edition.hidden
-                    div.project-values-name
+                    div.color-column
+                        div.current-color(style="background: {{ status.color }}")
+                        include ../../components/select-color
+                    div.status-name
                         input(name="name", type="text", placeholder="Write a name for the new status", ng-model="status.name", data-required="true", data-maxlength="255")
-                    div.project-values-isclosed
+                    div.is-closed-column
                         select(name="is_closed", ng-model="status.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
-                    div.project-values-settings
+                    div.options-column
                         a.save.icon.icon-floppy(href="", title="Add")
                         a.cancel.icon.icon-delete(href="", title="Delete")
 
         form
-            div.project-values-row.new-us-status.hidden
+            div.row.table-main.new-us-status.hidden
-                div.project-values-name
+                div.color-column
+                    div.current-color(style="background: {{ status.color }}")
+                    include ../../components/select-color
+                div.status-name
                     input(name="name", type="text", placeholder="Write a name for the new status", ng-model="newUs.name", data-required="true", data-maxlength="255")
-                div.project-values-isclosed
+                div.is-closed-column
                     select(name="is_closed", ng-model="newUs.is_closed", ng-options="e.id as e.name for e in [{'id':true, 'name':'Yes'},{'id':false, 'name': 'No'}]", data-required="true")
-                div.project-values-settings
+                div.options-column
                     a.add-new.icon.icon-floppy(href="", title="Add")
                     a.delete-new.icon.icon-delete(href="", title="Delete")

app/styles/modules/colors-table.scss

@@ -6,10 +6,16 @@
         &:hover {
             background: transparent;
         }
+        .row {
+            padding-left: 50px;
+        }
     }
     .row {
         @include table-flex(stretch, center, flex, row, wrap, center);
         padding: 1rem;
+        &.edition {
+            padding-left: 50px;
+        }
         &:hover {
             background: lighten($green-taiga, 60%);
             @include transition (background .2s ease-in);
@@ -17,6 +23,10 @@
                 @include transition (opacity .3s linear);
                 opacity: 1;
             }
+            cursor: move;
+        }
+        &.hidden {
+            display: none;
         }
         .color-column,
         .is-closed-column,
@@ -29,6 +39,7 @@
         }
         .status-name {
             @include table-flex-child(6, 300px, 0);
+            padding: 0 10px;
         }
         .options-column {
             max-width: 100px;