Refactor readonly templates

app/coffee/modules/common/lightboxes.coffee

@@ -703,7 +703,7 @@ AssignedUsersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNaviga
     link = ($scope, $el, $attrs) ->
         selectedUsers = []
         selectedItem = null
-        usersTemplate = $template.get("common/lightbox/lightbox-assigned-to-users.html", true)
+        usersTemplate = $template.get("common/lightbox/lightbox-assigned-users-users.html", true)
 
         normalizeString = (string) ->
             normalizedString = string

app/partials/common/components/assigned-users.jade

@@ -12,7 +12,7 @@
             //- .iocaine-symbol(ng-if="isIocaine" title="{{ 'TASK.TITLE_ACTION_IOCAINE' | translate }}")
             //- tg-svg(svg-icon="icon-iocaine")
         .assigned-to
-            .assigned-users-options
+            .assigned-users-options(ng-if="isEditable")
                 a(
                     href=""
                     title="{{ 'COMMON.ASSIGNED_TO.TITLE_ACTION_EDIT_ASSIGNMENT'|translate }}"
@@ -22,14 +22,15 @@
                 )
                     span.assigned-name {{ "COMMON.ASSIGNED_TO.ASSIGN" | translate }}
 
-                span(translate="COMMON.OR")
+                span(ng-if="!isAssigned")
-                |  
+                    span(translate="COMMON.OR")
-                a.assign-to-me(
+                    |  
-                    href="#"
+                    a.assign-to-me(
-                    title="{{'COMMON.ASSIGNED_TO.SELF' | translate}}"
+                        href="#"
-                    ng-click="assignToMe()"
+                        title="{{'COMMON.ASSIGNED_TO.SELF' | translate}}"
-                )
+                        ng-click="assignToMe()"
-                    span {{ "COMMON.ASSIGNED_TO.SELF" | translate }}
+                    )
+                        span {{ "COMMON.ASSIGNED_TO.SELF" | translate }}
 
     .user-list-single(ng-repeat="assignedUser in assignedUsers")
         .user-list-avatar
@@ -51,7 +52,8 @@
                 title="{{'COMMON.ASSIGNED_TO.DELETE_ASSIGNMENT' | translate}}"
             )
 
-.tg-add-assigned(ng-if="isAssigned")
+
+.tg-add-assigned(ng-if="isAssigned && isEditable")
     tg-svg.add-assigned(
                 ng-if="isEditable",
                 data-assigned-user-id="{{assignedUser.id}}",

app/partials/common/lightbox/lightbox-assigned-to-users.jade

@@ -1,27 +1,25 @@
-//- <% if (selected) { %>
+<% if (selected) { %>
-<% _.each(selected, function(user) { %>
+.user-list-single.is-active
-.user-list-multiple.is-active(data-user-id!="<%- user.id %>")
     .user-list-avatar
         a(
             href=""
             title="{{'COMMON.ASSIGNED_TO' | translate}}"
         )
             img(
-                style!="background: <%- user.avatar.bg %>"
+                style!="background: <%- selected.avatar.bg %>"
-                src!="<%- user.avatar.url %>"
+                src!="<%- selected.avatar.url %>"
             )
     a.user-list-name(
         href=""
-        title!="<%- user.full_name_display %>"
+        title!="<%- selected.full_name_display %>"
         ng-non-bindable
     )
-        | <%-user.full_name_display %>
+        | <%-selected.full_name_display %>
     tg-svg.remove-assigned-to(
         svg-icon="icon-close",
-        svg-title-translate="COMMON.ASSIGNED_TO.REMOVE_ASSIGNED",
+        svg-title-translate="COMMON.ASSIGNED_TO.REMOVE_ASSIGNED"
-        data-user-id!="<%- user.id %>"
     )
-<% }) %>
+<% } %>
 
 <% _.each(users, function(user) { %>
 .user-list-single(data-user-id!="<%- user.id %>")

app/partials/common/lightbox/lightbox-assigned-users-users.jade

@@ -0,0 +1,48 @@
+//- <% if (selected) { %>
+<% _.each(selected, function(user) { %>
+.user-list-multiple.is-active(data-user-id!="<%- user.id %>")
+    .user-list-avatar
+        a(
+            href=""
+            title="{{'COMMON.ASSIGNED_TO' | translate}}"
+        )
+            img(
+                style!="background: <%- user.avatar.bg %>"
+                src!="<%- user.avatar.url %>"
+            )
+    a.user-list-name(
+        href=""
+        title!="<%- user.full_name_display %>"
+        ng-non-bindable
+    )
+        | <%-user.full_name_display %>
+    tg-svg.remove-assigned-to(
+        svg-icon="icon-close",
+        svg-title-translate="COMMON.ASSIGNED_TO.REMOVE_ASSIGNED",
+        data-user-id!="<%- user.id %>"
+    )
+<% }) %>
+
+<% _.each(users, function(user) { %>
+.user-list-single(data-user-id!="<%- user.id %>")
+    .user-list-avatar
+        a(
+            href="#"
+            title="{{'COMMON.ASSIGNED_TO.TITLE' | translate}}"
+        )
+            img(
+                style!="background: <%- user.avatar.bg %>"
+                src!="<%- user.avatar.url %>"
+            )
+    a.user-list-name(
+        href=""
+        title!="<%- user.full_name_display %>"
+        ng-non-bindable
+    )
+        | <%- user.full_name_display %>
+<% }) %>
+
+<% if (showMore) { %>
+.more-watchers
+    span(translate="COMMON.ASSIGNED_TO.TOO_MANY")
+<% } %>