taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improving us statuses for admin

stable
Alejandro Alonso 2014-07-22 14:46:42 +02:00
parent 0c01020eaa
commit 69da3f1703
4 changed files with 64 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/coffee/modules/admin/project-values.coffee
View File

@ -110,7 +110,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
itemEl.remove() itemEl.remove()
tdom.sortable({ tdom.sortable({
handle: ".project-values-row.visualization", handle: ".row.table-main.visualization",
dropOnEmpty: true dropOnEmpty: true
connectWith: ".project-values-body" connectWith: ".project-values-body"
revert: 400 revert: 400
@ -187,7 +187,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
event.preventDefault() event.preventDefault()
target = angular.element(event.currentTarget) target = angular.element(event.currentTarget)
row = target.parents(".project-values-row") row = target.parents(".row.table-main")
row.hide() row.hide()
row.siblings(".edition").css("display": "flex") row.siblings(".edition").css("display": "flex")
@ -200,7 +200,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
status = target.scope().status status = target.scope().status
promise = $repo.save(status) promise = $repo.save(status)
promise.then => promise.then =>
row = target.parents(".project-values-row") row = target.parents(".row.table-main")
row.hide() row.hide()
row.siblings(".visualization").css("display": "flex") row.siblings(".visualization").css("display": "flex")
@ -210,7 +210,7 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
$el.on "click", ".cancel", (event) -> $el.on "click", ".cancel", (event) ->
event.preventDefault() event.preventDefault()
target = angular.element(event.currentTarget) target = angular.element(event.currentTarget)
row = target.parents(".project-values-row") row = target.parents(".row.table-main")
row.hide() row.hide()
row.siblings(".visualization").css("display": "flex") row.siblings(".visualization").css("display": "flex")
@ -226,6 +226,25 @@ ProjectUsStatusDirective = ($log, $repo, $confirm, $location) ->
$repo.remove(status).then => $repo.remove(status).then =>
$ctrl.loadUsStatus() $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) -> link = ($scope, $el, $attrs) ->
linkDragAndDrop($scope, $el, $attrs) linkDragAndDrop($scope, $el, $attrs)
linkStatus($scope, $el, $attrs) linkStatus($scope, $el, $attrs)

4
app/partials/views/components/select-color.jade
View File

@ -2,5 +2,5 @@ div.popover.select-color
ul ul
- for (var z = 0; z < 21; z++) - for (var z = 0; z < 21; z++)
li.color 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 }}")

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

@ -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 form.sortable
div(ng-repeat="status in usStatuses") div(ng-repeat="status in usStatuses")
div.project-values-row.visualization div.row.table-main.visualization
span.icon.icon-drag-v 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 }} span {{ status.name }}
div.project-values-isclosed div.is-closed-column
span {{ status.is_closed|yesNo }} span {{ status.is_closed|yesNo }}
div.project-values-settings div.options-column
a.edit-us-status.icon.icon-edit(href="", title="Edit value") a.edit-us-status.icon.icon-edit(href="", title="Edit value")
a.delete-us-status.icon.icon-delete(href="", title="Delete 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") 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") 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.save.icon.icon-floppy(href="", title="Add")
a.cancel.icon.icon-delete(href="", title="Delete") a.cancel.icon.icon-delete(href="", title="Delete")
form 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") 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") 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.add-new.icon.icon-floppy(href="", title="Add")
a.delete-new.icon.icon-delete(href="", title="Delete") a.delete-new.icon.icon-delete(href="", title="Delete")

11
app/styles/modules/colors-table.scss
View File

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