Project values lightbox refactor

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

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/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.question Are you sure you want to delete?
+    p.question
-    p.subtitle #125 Crear el perfil de usuario senior en el admin
+    p.subtitle
-    p.replacement What value do you want to use as replacement?
+    p.replacement
     select.choices
-    p if the role is deleted all role estimates will be deleted
+    p.warning
+
     div.options
         a.button.button-green(href="", title="Accept")
             span Accept

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