Merge pull request #119 from taigaio/bug/1397/rename-role

Bug/1397/rename role

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

@@ -260,12 +260,13 @@ ProjectValuesDirective = ($log, $repo, $confirm, $location, animationFrame) ->
                     choices[option.id] = option.name
 
             #TODO: i18n
-            title = "Delete"
+            title = "Delete value"
             subtitle = value.name
+            replacement = "All items with this value will be changed to"
             if _.keys(choices).length == 0
                 return $confirm.error("You can't delete all values.")
 
-            return $confirm.askChoice(title, subtitle, choices).then (response) ->
+            return $confirm.askChoice(title, subtitle, choices, replacement).then (response) ->
                 onSucces = ->
                     $ctrl.loadValues().finally ->
                         response.finish()

app/coffee/modules/admin/roles.coffee

@@ -89,8 +89,10 @@ class RolesController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fil
 
     delete: ->
         # TODO: i18n
-        title = "Delete Role"
+        title = "Delete Role" # TODO: i18n
         subtitle = @scope.role.name
+        replacement = "All the users with this role will be moved to" # TODO: i18n
+        warning = "<strong>Be careful, all role estimations will be removed</strong>" # TODO: i18n
 
         choices = {}
         for role in @scope.roles
@@ -98,9 +100,9 @@ class RolesController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fil
                 choices[role.id] = role.name
 
         if _.keys(choices).length == 0
-            return @confirm.error("You can't delete all values.")
+            return @confirm.error("You can't delete all values.") # TODO: i18n
 
-        return @confirm.askChoice(title, subtitle, choices).then (response) =>
+        return @confirm.askChoice(title, subtitle, choices, replacement, warning).then (response) =>
             promise = @repo.remove(@scope.role, {moveTo: response.selected})
             promise.then =>
                 @.loadProject()
@@ -123,6 +125,47 @@ class RolesController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fil
 
 module.controller("RolesController", RolesController)
 
+EditRoleDirective = ($repo, $confirm) ->
+    link = ($scope, $el, $attrs) ->
+        toggleView = ->
+            $el.find('.total').toggle()
+            $el.find('.edit-role').toggle()
+
+        submit = () ->
+            $scope.role.name = $el.find("input").val()
+
+            promise = $repo.save($scope.role)
+
+            promise.then ->
+                $confirm.notify("success")
+
+            promise.then null, (data) ->
+                $confirm.notify("error")
+
+            toggleView()
+
+        $el.on "click", "a.icon-edit", ->
+            toggleView()
+            $el.find("input").focus()
+
+        $el.on "click", "a.save", submit
+
+        $el.on "keyup", "input", ->
+            if event.keyCode == 13  # Enter key
+                submit()
+            else if event.keyCode == 27  # ESC key
+                toggleView()
+
+        $scope.$on "role:changed", ->
+            if $el.find('.edit-role').is(":visible")
+                toggleView()
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+    return {link:link}
+
+module.directive("tgEditRole", ["$tgRepo", "$tgConfirm", EditRoleDirective])
 
 RolesDirective =  ->
     link = ($scope, $el, $attrs) ->

app/coffee/modules/common/confirm.coffee

@@ -82,13 +82,24 @@ class ConfirmService extends taiga.Service
     askOnDelete: (title, message) ->
         return @.ask(title, "Are you sure you want to delete?", message) #TODO: i18n
 
-    askChoice: (title, subtitle, choices, lightboxSelector=".lightbox-ask-choice") ->
+    askChoice: (title, subtitle, choices, replacement, warning, lightboxSelector=".lightbox-ask-choice") ->
         el = angular.element(lightboxSelector)
 
         # Render content
-        el.find("h2.title").html(title)
+        el.find(".title").html(title)
-        el.find("span.subtitle").html(subtitle)
+        el.find(".subtitle").html(subtitle)
-        choicesField = el.find("select.choices")
+
+        if replacement
+            el.find(".replacement").html(replacement)
+        else
+            el.find(".replacement").remove()
+
+        if warning
+            el.find(".warning").html(warning)
+        else
+            el.find(".warning").remove()
+
+        choicesField = el.find(".choices")
         choicesField.html('')
         _.each choices, (value, key) ->
             choicesField.append(angular.element("<option value='#{key}'>#{value}</option>"))

app/partials/admin-roles.jade

@@ -17,9 +17,15 @@ block content
                 .action-buttons
                     a.button.button-red.delete-role(href="", title="Delete", ng-click="ctrl.delete()") Delete
 
+
+            div(tg-edit-role)
+                .edit-role.hidden
+                    input(type="text", value="{{ role.name }}")
+                    a.save.icon.icon-floppy(href="", title="Save")
+
                 p.total
-                | {{ role.name }}
+                    span.role-name(title="{{ role.members_count }} members with this role") {{ role.name }}
-                span ({{ role.members_count }} members with this role)
+                    a.edit-value.icon.icon-edit
 
             div.any-computable-role(ng-hide="anyComputableRole") Be careful, no role in your project will be able to estimate the point value for user stories
 

app/partials/views/modules/lightbox-ask-choice.jade

@@ -1,12 +1,13 @@
 a.close(href="", title="close")
     span.icon.icon-delete
 form
-    h2.title Delete User Story
+    h2.title
-    p
+    p.question
-        span.question Are you sure you want to delete?
+    p.subtitle
-        span.subtitle #125 Crear el perfil de usuario senior en el admin
+    p.replacement
-        span.replacement What value do you want to use as replacement?
     select.choices
+    p.warning
+
     div.options
         a.button.button-green(href="", title="Accept")
             span Accept

app/styles/layout/base.scss

@@ -129,7 +129,17 @@ body {
     margin-bottom: 1rem;
     .action-buttons {
         @include flex-shrink(0);
-        padding-left: 1rem;
+    }
+    .button {
+        color: $white;
+        float: right;
+        margin-left: 10px;
+        &:first-child {
+            margin-left: 0;
+        }
+        &:hover {
+            color: $white;
+        }
     }
     h1 {
         margin-bottom: 0;

app/styles/layout/wiki.scss

@@ -1,13 +1,3 @@
 .wiki-content {
     margin-bottom: 2rem;
 }
-.action-buttons {
-    .button {
-        color: $white;
-        float: right;
-        margin-left: 10px;
-        &:hover {
-            color: $white;
-        }
-    }
-}

app/styles/modules/admin/admin-roles.scss

@@ -4,11 +4,44 @@
         @extend %title;
         background-color: $whitish;
         color: $grayer;
-        padding: .5rem 1rem;
+        padding: 1rem;
-        span {
+        &:hover {
+            .edit-value {
+                @include transition(opacity .3s linear);
+                opacity: 1;
+            }
+        }
+    }
+    .role-name {
+        @extend %xlarge;
+        @extend %title;
+        color: $grayer;
+    }
+    .edit-value {
+        @include transition(opacity .3s linear);
         @extend %medium;
-            @extend %text;
+        color: $gray-light;
-            padding-left: .5rem;
+        cursor: pointer;
+        margin-left: .5rem;
+        opacity: 0;
+    }
+    .edit-role {
+        @include table-flex(stretch, left, center, row, wrap);
+        background-color: $whitish;
+        margin-bottom: 1rem;
+        padding: .5rem;
+        input {
+            background-color: $white;
+            width: 50%;
+        }
+        .icon-floppy {
+            @include transition(color.3s linear);
+            color: $gray-light;
+            margin-left: .5rem;
+            &:hover {
+                @include transition(color.3s linear);
+                color: $green-taiga;
+            }
         }
     }
     .any-computable-role {

app/styles/modules/common/lightbox.scss

@@ -311,13 +311,14 @@
 }
 
 .lightbox-ask-choice {
+    text-align: center;
     form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        @include table-flex-child(0, 420px, 0);
     }
     .question,
     .subtitle {
         display: block;
-        line-height: 2rem;
+        line-height: 1.5rem;
         text-align: center;
     }
     .subtitle {
@@ -326,7 +327,9 @@
     }
     .replacement {
         display: block;
-        text-align: center;
+        span {
+            display: block;
+        }
     }
     .options {
         @include table-flex();