From 69da3f170329bb1863b71c18b2bf20a2ccb21e6d Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 22 Jul 2014 14:46:42 +0200 Subject: [PATCH] Improving us statuses for admin --- .../modules/admin/project-values.coffee | 27 ++++++++-- .../views/components/select-color.jade | 4 +- .../modules/admin/project-us-status.jade | 49 +++++++++++-------- app/styles/modules/colors-table.scss | 11 +++++ 4 files changed, 64 insertions(+), 27 deletions(-) diff --git a/app/coffee/modules/admin/project-values.coffee b/app/coffee/modules/admin/project-values.coffee index e011ae28..ee541440 100644 --- a/app/coffee/modules/admin/project-values.coffee +++ b/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) diff --git a/app/partials/views/components/select-color.jade b/app/partials/views/components/select-color.jade index 9fc3db61..0944fc32 100644 --- a/app/partials/views/components/select-color.jade +++ b/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") - div.selected-color(style="background-color: red") + input(type="text", placeholder="personalized colors", ng-model="status.color") + div.selected-color(style="background-color: {{ status.color }}") diff --git a/app/partials/views/modules/admin/project-us-status.jade b/app/partials/views/modules/admin/project-us-status.jade index 38913d90..cc33b6bf 100644 --- a/app/partials/views/modules/admin/project-us-status.jade +++ b/app/partials/views/modules/admin/project-us-status.jade @@ -1,40 +1,47 @@ -section.project-values-table - div.project-values-header - div.project-values-row - div.project-values-name - span Name - div.project-values-isclosed - span Is closed? - div.project-values-settings +section.colors-table + div.table-header + div.row + div.color-column Color + div.status-name Name + div.is-closed-column Is closed? + div.options-column - 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.project-values-name + div.row.table-main.edition.hidden + 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.project-values-name + div.row.table-main.new-us-status.hidden + 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") diff --git a/app/styles/modules/colors-table.scss b/app/styles/modules/colors-table.scss index 2954d079..0d4b456f 100644 --- a/app/styles/modules/colors-table.scss +++ b/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;