Remove inactived buttons in read mode

app/coffee/modules/tasks/detail.coffee

@@ -293,17 +293,32 @@ module.directive("tgTaskStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "
 
 
 TaskIsIocaineButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
-    template = """
+    template = _.template("""
       <fieldset title="Feeling a bit overwhelmed by a task? Make sure others know about it by clicking on Iocaine when editing a task. It's possible to become immune to this (fictional) deadly poison by consuming small amounts over time just as it's possible to get better at what you do by occasionally taking on extra challenges!">
-        <label for="is-iocaine" class="button button-gray is-iocaine">Iocaine</label>
+        <label for="is-iocaine"
+              class="button button-gray is-iocaine <% if(isEditable){ %>editable<% }; %> <% if(isIocaine){ %>active<% }; %>">
+              Iocaine
+        </label>
         <input type="checkbox" id="is-iocaine" name="is-iocaine"/>
       </fieldset>
-    """
+    """)
 
     link = ($scope, $el, $attrs, $model) ->
         isEditable = ->
             return $scope.project.my_permissions.indexOf("modify_task") != -1
 
+        render = (task) ->
+            if not isEditable() and not task.is_iocaine
+                $el.html("")
+                return
+
+            ctx = {
+                isIocaine: task.is_iocaine
+                isEditable: isEditable()
+            }
+            html = template(ctx)
+            $el.html(html)
+
         $el.on "click", ".is-iocaine", (event) ->
             return if not isEditable()
 
@@ -318,23 +333,15 @@ TaskIsIocaineButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
                 $rootscope.$broadcast("history:reload")
 
             promise.then null, ->
+                task.revert()
+                $model.$setViewValue(task)
                 $confirm.notify("error")
 
             promise.finally ->
                 $loading.finish($el.find('label'))
 
         $scope.$watch $attrs.ngModel, (task) ->
-            return if not task
+            render(task) if task
-
-            if isEditable()
-                $el.find('.is-iocaine').addClass('editable')
-            else
-                $el.find('.is-iocaine').removeClass('editable')
-
-            if task.is_iocaine
-                $el.find('.is-iocaine').addClass('active')
-            else
-                $el.find('.is-iocaine').removeClass('active')
 
         $scope.$on "$destroy", ->
             $el.off()
@@ -343,7 +350,6 @@ TaskIsIocaineButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
         link: link
         restrict: "EA"
         require: "ngModel"
-        template: template
     }
 
 module.directive("tgTaskIsIocaineButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", TaskIsIocaineButtonDirective])

app/coffee/modules/userstories/detail.coffee

@@ -526,28 +526,29 @@ module.directive("tgUsStatusButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$t
 #############################################################################
 
 UsTeamRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
-    template = """
+    template = _.template("""
-      <label for="team-requirement" class="button button-gray team-requirement">Team requirement</label>
+    <label for="team-requirement"
-      <input type="checkbox" id="team-requirement" name="team-requirement"/>
+           class="button button-gray team-requirement <% if(canEdit){ %>editable<% }; %> <% if(isRequired){ %>active<% }; %>">
-    """
+        Team requirement
+    </label>
+    <input type="checkbox" id="team-requirement" name="team-requirement"/>
+    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         canEdit = ->
             return $scope.project.my_permissions.indexOf("modify_us") != -1
 
-        $scope.$watch $attrs.ngModel, (us) ->
+        render = (us) ->
-            return if not us
+            if not canEdit() and not us.team_requirement
+                $el.html("")
+                return
 
-            if canEdit()
+            ctx = {
-                $el.find('label').addClass('editable')
+                canEdit: canEdit()
-
+                isRequired: us.team_requirement
-            if us.team_requirement
+            }
-                $el.find('.team-requirement').addClass('active')
+            html = template(ctx)
-            else
+            $el.html(html)
-                $el.find('.team-requirement').removeClass('active')
-
-        $scope.$on "$destroy", ->
-            $el.off()
 
         $el.on "click", ".team-requirement", (event) ->
             return if not canEdit()
@@ -567,11 +568,16 @@ UsTeamRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
                 us.revert()
                 $model.$setViewValue(us)
 
+        $scope.$watch $attrs.ngModel, (us) ->
+            render(us) if us
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
     return {
         link: link
         restrict: "EA"
         require: "ngModel"
-        template: template
     }
 
 module.directive("tgUsTeamRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading", UsTeamRequirementButtonDirective])
@@ -581,28 +587,29 @@ module.directive("tgUsTeamRequirementButton", ["$rootScope", "$tgRepo", "$tgConf
 #############################################################################
 
 UsClientRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) ->
-    template = """
+    template = _.template("""
-      <label for="client-requirement" class="button button-gray client-requirement">Client requirement</label>
+    <label for="client-requirement"
-      <input type="checkbox" id="client-requirement" name="client-requirement"/>
+           class="button button-gray client-requirement <% if(canEdit){ %>editable<% }; %> <% if(isRequired){ %>active<% }; %>">
-    """
+        Client requirement
+    </label>
+    <input type="checkbox" id="client-requirement" name="client-requirement"/>
+    """) #TODO: i18n
 
     link = ($scope, $el, $attrs, $model) ->
         canEdit = ->
             return $scope.project.my_permissions.indexOf("modify_us") != -1
 
-        $scope.$watch $attrs.ngModel, (us) ->
+        render = (us) ->
-            return if not us
+            if not canEdit() and not us.client_requirement
+                $el.html("")
+                return
 
-            if canEdit()
+            ctx = {
-                $el.find('label').addClass('editable')
+                canEdit: canEdit()
-
+                isRequired: us.client_requirement
-            if us?.client_requirement
+            }
-                $el.find('.client-requirement').addClass('active')
+            html = template(ctx)
-            else
+            $el.html(html)
-                $el.find('.client-requirement').removeClass('active')
-
-        $scope.$on "$destroy", ->
-            $el.off()
 
         $el.on "click", ".client-requirement", (event) ->
             return if not canEdit()
@@ -622,11 +629,16 @@ UsClientRequirementButtonDirective = ($rootscope, $tgrepo, $confirm, $loading) -
                 us.revert()
                 $model.$setViewValue(us)
 
+        $scope.$watch $attrs.ngModel, (us) ->
+            render(us) if us
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
     return {
         link: link
         restrict: "EA"
         require: "ngModel"
-        template: template
     }
 
 module.directive("tgUsClientRequirementButton", ["$rootScope", "$tgRepo", "$tgConfirm", "$tgLoading",