Normalize lightbox behavior and implementation (styles, partial filenames, blocking message...)

- Normalize style clases names.
- Normalize partials files names.
- Normalize lightbox settings buttons behavior and implementation.
- Normalize blocking message input handling on userstories and tasks.

app/coffee/modules/common/lightboxes.coffee

@@ -271,23 +271,6 @@ CreateEditUserstoryDirective = ($repo, $model, $rs, $rootScope, lightboxService,
                 if data._error_message
                     $confirm.notify("error", data._error_message)
 
-        $el.on "click", "label.blocked", (event) ->
-            event.preventDefault()
-            target = angular.element(event.currentTarget)
-            target.toggleClass("selected")
-            $scope.us.is_blocked = not $scope.us.is_blocked
-            $el.find(".blocked-note").toggle(400)
-
-        $el.on "click", "label.team-requirement", (event) ->
-            event.preventDefault()
-            angular.element(event.currentTarget).toggleClass("selected")
-            $scope.us.team_requirement = not $scope.us.team_requirement
-
-        $el.on "click", "label.client-requirement", (event) ->
-            event.preventDefault()
-            angular.element(event.currentTarget).toggleClass("selected")
-            $scope.us.client_requirement = not $scope.us.client_requirement
-
         $scope.$on "$destroy", ->
             $el.off()
 

app/coffee/modules/taskboard/lightboxes.coffee

@@ -51,14 +51,6 @@ CreateEditTaskDirective = ($repo, $model, $rs, $rootscope, lightboxService) ->
             $el.find(".title").html("Edit task  ") #TODO: i18n
             lightboxService.open($el)
 
-            # Update requirement info (team, client or blocked)
-            if task.is_blocked
-                $el.find(".blocked-note").show()
-                $el.find("label.blocked").addClass("selected")
-
-            if task.is_iocaine
-                $el.find("label.iocaine").addClass("selected")
-
         $el.on "click", ".button-green", (event) ->
             event.preventDefault()
 
@@ -78,18 +70,6 @@ CreateEditTaskDirective = ($repo, $model, $rs, $rootscope, lightboxService) ->
                 lightboxService.close($el)
                 $rootscope.$broadcast(broadcastEvent, data)
 
-        $el.on "click", "label.blocked", (event) ->
-            event.preventDefault()
-            target = angular.element(event.currentTarget)
-            target.toggleClass("selected")
-            $scope.task.is_blocked = not $scope.task.is_blocked
-            $el.find(".blocked-note").toggle(400)
-
-        $el.on "click", "label.iocaine", (event) ->
-            event.preventDefault()
-            angular.element(event.currentTarget).toggleClass("selected")
-            $scope.task.is_iocaine = not $scope.task.is_iocaine
-
         $scope.$on "$destroy", ->
             $el.off()
 

app/partials/backlog.jade

@@ -34,9 +34,12 @@ block content
                 a(href="", title+"Create a new US", ng-click="ctrl.addNewUs('standard')", tg-check-permission="tg-check-permission", permission="add_us") You may want to create a new user story
         sidebar.menu-secondary.sidebar
             include views/modules/sprints
-    div.lightbox.lightbox_add-new-us(tg-lb-create-edit-userstory)
+
-        include views/modules/lightbox_add-new-us
+    div.lightbox.lightbox-generic-form(tg-lb-create-edit-userstory)
-    div.lightbox.lightbox_add-bulk(tg-lb-create-bulk-userstories)
+        include views/modules/lightbox-us-create-edit
-        include views/modules/lightbox_add-bulk
+
-    div.lightbox.lightbox_add-sprint(tg-lb-create-edit-sprint)
+    div.lightbox.lightbox-generic-bulk(tg-lb-create-bulk-userstories)
-        include views/modules/lightbox_add-edit-sprint
+        include views/modules/lightbox-us-bulk
+
+    div.lightbox.lightbox-sprint-add-edit(tg-lb-create-edit-sprint)
+        include views/modules/lightbox-sprint-add-edit

app/partials/issues.jade

@@ -18,10 +18,10 @@ block content
             // Paginator is rended using js.
             div.paginator.issues-paginator
 
-        div.hidden.lightbox.lightbox_select_user(tg-lb-assignedto)
+        div.lightbox.lightbox-select-user(tg-lb-assignedto)
 
-        div.hidden.lightbox.lightbox_add-issue(tg-lb-create-issue)
+        div.lightbox.lightbox-create-issue(tg-lb-create-issue)
-            include views/modules/lightbox_add-issue
+            include views/modules/lightbox-create-issue
 
-        div.hidden.lightbox.lightbox_add-bulk(tg-lb-create-bulk-issues)
+        div.lightbox.lightbox-generic-bulk(tg-lb-create-bulk-issues)
-            include views/modules/lightbox_add-bulk
+            include views/modules/lightbox-issue-bulk

app/partials/kanban.jade

@@ -22,10 +22,10 @@ block content
             //-include views/modules/list-filters-kanban
             include views/modules/kanban-table
 
-        div.lightbox.lightbox_add-new-us.hidden(tg-lb-create-edit-userstory)
+        div.lightbox.lightbox-generic-form(tg-lb-create-edit-userstory)
-            include views/modules/lightbox_add-new-us
+            include views/modules/lightbox-us-create-edit
 
-        div.lightbox.lightbox_add-bulk.hidden(tg-lb-create-bulk-userstories)
+        div.lightbox.lightbox-generic-bulk(tg-lb-create-bulk-userstories)
-            include views/modules/lightbox_add-bulk
+            include views/modules/lightbox-us-bulk
 
-        div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
+        div.lightbox.lightbox-select-user.hidden(tg-lb-assignedto)

app/partials/taskboard.jade

@@ -19,9 +19,11 @@ block content
 
             include views/modules/taskboard-table
 
-        div.lightbox.lightbox_add-new-us.hidden(tg-lb-create-edit-task)
+        div.lightbox.lightbox-generic-form(tg-lb-create-edit-task)
-            include views/modules/lightbox_add-edit-task
+            include views/modules/lightbox-task-create-edit
-        div.lightbox.lightbox_add-bulk.hidden(tg-lb-create-bulk-tasks)
+
-            include views/modules/lightbox_add-task-bulk
+        div.lightbox.lightbox-generic-bulk.lightbox-task-bulk(tg-lb-create-bulk-tasks)
-        div.lightbox.lightbox_select_user.hidden(tg-lb-assignedto)
+            include views/modules/lightbox-task-bulk
+
+        div.lightbox.lightbox-select-user(tg-lb-assignedto)
             include views/modules/lightbox-assigned-to

app/partials/views/modules/lightbox-task-create-edit.jade

@@ -5,28 +5,34 @@ form
     fieldset
         input(type="text", ng-model="task.subject", placeholder="A task subject",
               data-required="true", data-maxlength="500")
+
     fieldset
         select(ng-model="task.status", ng-options="s.id as s.name for s in taskStatusList",
                placeholder="Task status")
+
     fieldset
         select(ng-model="task.assigned_to", ng-options="s.id as s.full_name_display for s in users",
                placeholder="Assigned to")
             option(value="") Unassigned
+
     fieldset
         input(type="text", placeholder="Tags", tg-tags, ng-model="task.tags")
+
     fieldset
         textarea.description(placeholder="Type a short description", ng-model="task.description")
-    div.new-us-settings
+
-        fieldset
+    div.settings
-            label.iocaine
+        fieldset.iocaine-flag
+            input(type="checkbox", ng-model="task.is_iocaine", name="iocaine-task", id="iocaine-task", ng-value="true")
+            label.iocaine(for="iocaine-task")
                 span.icon.icon-iocaine(for="iocaine-task icon-iocaine")
                 span Iocaine
-            input(type="checkbox", ng-model="task.is_iocaine", name="iocaine-task", id="iocaine-task")
+
-        fieldset
+        fieldset.blocking-flag
-            label.blocked(for="blocked-task") Blocked
+            input(type="checkbox", ng-model="task.is_blocked", name="blocked-task", id="blocked-task", ng-value="true")
-            input(type="checkbox", ng-model="task.is_blocked", name="blocked-task", id="blocked-task")
+            label.blocked(for="blocked-task", tg-i18n="common.blocked")
-    fieldset.blocked-note.hidden
+
-        textarea(placeholder="Why is this task blocked?", ng-model="task.blocked_note")
+    tg-blocking-message-input(watch="task.is_blocked", ng-model="task.blocked_note")
 
     a.button.button-green(href="", title="Save")
         span Create

app/partials/views/modules/lightbox-us-bulk.jade

@@ -0,0 +1,8 @@
+a.close(href="", title="close")
+    span.icon.icon-delete
+form
+    h2.title(tg-i18n="common.new-bulk")
+    fieldset
+        textarea(cols="200", wrap="off", tg-limit-line-length, tg-i18n="placeholder:common.one-item-line", ng-model="new.bulk", data-required="true", data-linewidth="200")
+    a.button.button-green(href="", tg-i18n="title:common.save")
+        span(tg-i18n="common.save")

app/partials/views/modules/lightbox-us-create-edit.jade

@@ -10,24 +10,26 @@ form
                tg-i18n="placeholder:common.status")
     fieldset
         input(type="text", name="tags", placeholder="Tags", tg-tags, ng-model="us.tags")
+
     fieldset
         textarea.description(name="description", ng-model="us.description",
                              placeholder="Please add descriptive text to help others better understand this US")
-    div.new-us-settings
+    div.settings
-        fieldset
+        fieldset.team-requirement
-            label.requirement.team-requirement(for="team-requirement", tg-i18n="us.team-requirement")
             input(type="checkbox", name="team_requirement", ng-model="us.team_requirement",
-                  id="team-requirement")
+                  id="team-requirement", ng-value="true")
-        fieldset
+            label.requirement(for="team-requirement", tg-i18n="us.team-requirement")
-            label.requirement.client-requirement(for="client-requirement", tg-i18n="us.client-requirement")
-            input(type="checkbox", name="client_requirement", ng-model="us.client_requirement",
-                  id="client-requirement")
-        fieldset
-            label.blocked(for="blocked-us", tg-i18n="common.blocked")
-            input(type="checkbox", name="is_blocked", ng-model="us.is_blocked", id="blocked-us")
 
-    fieldset.blocked-note.hidden
+        fieldset.client-requirement
-        textarea(name="blocked_note", placeholder="Why is this user story blocked?", ng-model="us.blocked_note")
+            input(type="checkbox", name="client_requirement", ng-model="us.client_requirement",
+                  id="client-requirement", ng-value="true")
+            label.requirement(for="client-requirement", tg-i18n="us.client-requirement")
+
+        fieldset.blocking-flag
+            input(type="checkbox", name="is_blocked", ng-model="us.is_blocked", id="blocked-us" ng-value="true")
+            label.blocked(for="blocked-us", tg-i18n="common.blocked")
+
+    tg-blocking-message-input(watch="us.is_blocked", ng-model="us.blocked_note")
 
     a.button.button-green(href="", title="Save")
         span Create

app/styles/modules/common/lightbox.scss

@@ -59,18 +59,21 @@
     }
 }
 
-.lightbox_add-new-us {
+.lightbox-generic-form {
     form {
         @include table-flex-child(0, 600px, 0, 600px);
     }
+
     fieldset {
         position: relative;
     }
+
     textarea {
         margin-bottom: 1rem;
         max-height: 9rem;
         min-height: 7rem;
     }
+
     label {
         @extend %button;
         @include transition(all .2s ease-in);
@@ -89,7 +92,8 @@
             vertical-align: middle;
         }
     }
-    .new-us-settings {
+
+    .settings {
         align-content: flex-start;
         align-items: stretch;
         display: flex;
@@ -97,6 +101,7 @@
         flex-wrap: wrap;
         justify-content: flex-start;
         margin-bottom: 1rem;
+
         fieldset {
             flex-basis: 30%;
             flex-grow: 1;
@@ -107,6 +112,7 @@
                 margin: 0;
             }
         }
+
         .requirement,
         .iocaine {
             &:hover {
@@ -116,15 +122,8 @@
                 color: $white;
 
             }
-            &.selected {
-                @include transition(all .2s ease-in);
-                background: $fresh-taiga;
-                border: 1px solid $green-taiga;
-                span {
-                    color: $white;
-                }
-            }
         }
+
         .blocked {
             padding: 8px 30px;
             &:hover {
@@ -133,20 +132,40 @@
                 border: 1px solid $red-light;
                 color: $white;
             }
-            &.selected {
+        }
-                @include transition(all .2s ease-in);
+
-                background: $red;
+
-                border: 1px solid $red;
+        .client-requirement,
-                color: $white;
+        .team-requirement,
+        .iocaine-flag {
+            input {
+                &:checked {
+                    +label {
+                        background: $fresh-taiga;
+                        color: $white;
+                    }
+                }
             }
         }
+
+        .blocking-flag {
+            input {
+                &:checked {
+                    +label {
+                        background: $red;
+                        color: $white;
+                    }
+                }
+            }
+        }
+
         input[type="checkbox"] {
             display: none;
         }
     }
 }
 
-.lightbox_add-bulk {
+.lightbox-generic-bulk {
     form {
         @include table-flex-child(0, 600px, 0, 600px);
     }
@@ -208,7 +227,7 @@
     }
 }
 
-.lightbox_add-sprint {
+.lightbox-sprint-add-edit {
     form {
         @include table-flex-child(0, 600px, 0, 600px);
     }
@@ -409,10 +428,11 @@
     }
 }
 
-.lightbox_add-issue {
+.lightbox-create-issue {
     form {
         @include table-flex-child(0, 600px, 0, 600px);
     }
+
     .fieldset-row {
         @include table-flex();
         fieldset {
@@ -423,12 +443,12 @@
             }
         }
     }
+
     textarea {
         margin-bottom: 1rem;
         max-height: 12rem;
         min-height: 8rem;
     }
-
 }
 
 .lightbox_block {
@@ -442,7 +462,7 @@
     }
 }
 
-.lightbox_select_user {
+.lightbox-select-user {
     .form {
         @include table-flex-child(0, 600px, 0, 600px);
     }