Disable some ui elements when in edit mode

frontend/app/templates/work_packages.list.html

@@ -8,11 +8,11 @@
 
     <ul class="toolbar-items">
       <li class="toolbar-item">
-        <button class="button -alt-highlight"
+        <button class="button -alt-highlight add-work-package"
                 has-dropdown-menu
                 target="TasksDropdownMenu"
                 locals="availableTypes,projectIdentifier"
-                ng-disabled="cannot('work_package', 'create')">
+                ng-disabled="cannot('work_package', 'create') || editAll.state">
           <i class="button--icon icon-add"></i>
           <span class="button--text" ng-bind="::I18n.t('js.toolbar.unselected_title')"></span>
           <i class="button--dropdown-indicator"></i>
@@ -23,6 +23,7 @@
           {{ getToggleActionLabel(showFiltersOptions) + ' ' + I18n.t('js.button_filter') }}
         </label>
         <button id="work-packages-filter-toggle-button"
+                ng-disabled="editAll.state"
                 class="button"
                 title="{{ getToggleActionLabel(showFiltersOptions) + ' ' + I18n.t('js.button_filter') }}"
                 ng-click="toggleShowFilterOptions()"
@@ -41,6 +42,7 @@
               {{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}
             </label>
             <button id="work-packages-list-view-button"
+                    ng-disabled="editAll.state"
                     class="button"
                     title="{{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}"
                     ng-click="closeDetailsView()"
@@ -85,6 +87,7 @@
           {{ I18n.t('js.button_settings') }}
         </label>
         <button id="work-packages-settings-button"
+                ng-disabled="editAll.state"
                 title="{{ I18n.t('js.button_settings') }}"
                 class="button last work-packages-settings-button"
                 has-dropdown-menu

frontend/app/templates/work_packages.show.html

@@ -3,11 +3,11 @@
     <div toolbar id="toolbar">
       <ul id="toolbar-items">
         <li class="toolbar-item" ng-hide="true">
-          <button class="button -alt-highlight"
+          <button class="button -alt-highlight add-work-package"
                   has-dropdown-menu
                   target="TasksDropdownMenu"
                   locals="availableTypes,projectIdentifier"
-                  ng-disabled="cannot('work_package', 'create')">
+                  ng-disabled="cannot('work_package', 'create') || editAll.state">
             <i class="button--icon icon-add"></i>
             <span class="button--text" ng-bind="::I18n.t('js.toolbar.unselected_title')"></span>
             <i class="button--dropdown-indicator"></i>
@@ -24,6 +24,7 @@
         <li class="toolbar-item" ng-if="isWatched && displayWatchButton">
           <button class="button"
                   ng-click="unwatch()"
+                  ng-disabled="editAll.state"
                   title="{{I18n.t('js.label_unwatch_work_package')}}"
                   id="unwatch-button">
             <i class="button--icon icon-watch-1"></i>
@@ -32,6 +33,7 @@
         <li class="toolbar-item" ng-if="!isWatched && displayWatchButton">
           <button class="button"
                   ng-click="watch()"
+                  ng-disabled="editAll.state"
                   title="{{I18n.t('js.label_watch_work_package')}}"
                   id="watch-button">
             <i class="button--icon icon-not-watch"></i>
@@ -46,6 +48,7 @@
                 {{ getActivationActionLabel(isDetailsViewActive()) + ' ' + I18n.t('js.button_list_view') }}
               </label>
               <button id="work-packages-list-view-button"
+                      ng-disabled="editAll.state"
                       class="button"
                       title="{{ getActivationActionLabel(!isListViewActive()) + ' ' + I18n.t('js.button_list_view') }}"
                       ng-click="closeShowView()"
@@ -87,7 +90,7 @@
         </li>
         <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
           <button class="button dropdown-relative"
-                  ng-disabled="!actionsAvailable"
+                  ng-disabled="!actionsAvailable || editAll.state"
                   has-dropdown-menu
                   target="ShowMoreDropdownMenu"
                   locals="permittedActions,actionsAvailable,triggerMoreMenuAction">

frontend/app/work_packages/controllers/index.js

@@ -174,6 +174,7 @@ angular.module('openproject.workPackages.controllers')
     'Query',
     'OPERATORS_AND_LABELS_BY_FILTER_TYPE',
     'NotificationsService',
+    'EditableFieldsState',
     require('./work-packages-list-controller')
   ])
   .factory('columnsModal', ['btfModal', function(btfModal) {

frontend/app/work_packages/controllers/work-packages-list-controller.js

@@ -30,7 +30,7 @@ module.exports = function($scope, $rootScope, $state, $stateParams, $location, l
       I18n, WorkPackagesTableService,
       WorkPackageService, ProjectService, QueryService, PaginationService,
       AuthorisationService, UrlParamsHelper, PathHelper, Query,
-      OPERATORS_AND_LABELS_BY_FILTER_TYPE, NotificationsService) {
+      OPERATORS_AND_LABELS_BY_FILTER_TYPE, NotificationsService, EditableFieldsState) {
 
   $scope.projectIdentifier = $stateParams.projectPath || null;
 
@@ -236,6 +236,8 @@ module.exports = function($scope, $rootScope, $state, $stateParams, $location, l
   $scope.can = AuthorisationService.can;
   $scope.cannot = AuthorisationService.cannot;
 
+  $scope.editAll = EditableFieldsState.editAll;
+
   $scope.$watch(QueryService.getQueryName, function(queryName){
     $scope.selectedTitle = queryName || I18n.t('js.toolbar.unselected_title');
   });

frontend/tests/integration/pages/work-package-show-page.js

@@ -31,10 +31,8 @@ function WorkPackageShowPage() {}
 WorkPackageShowPage.prototype = {
 
   wpId: 819,
-  editButton: $('.button[title="Edit"]'),
   focusElement: $('#work-package-subject .focus-input'),
   focusElementValue: $('#work-package-subject span.inplace-edit--read-value > span:first-child'),
-  overviewButton: $('#work-packages-details-view-button'),
   editableFields: $$('.focus-input'),
 
   editActions: {
@@ -42,6 +40,17 @@ WorkPackageShowPage.prototype = {
     cancel: $('.work-packages--edit-actions .button:last-child')
   },
 
+  toolBar: {
+    edit: $('.button.icon-edit'),
+    overview: $('#work-packages-details-view-button'),
+    watch: $('[id*="watch"]'),
+    dropDown: $('#action-show-more-dropdown-menu > button'),
+    filter: $('#work-packages-filter-toggle-button'),
+    settings: $('#work-packages-settings-button'),
+    addWorkPackage: $('.button.add-work-package'),
+    listView: $('#work-packages-list-view-button')
+  },
+
   get: function() {
     browser.get('/work_packages/' + this.wpId + '/activity');
   }

frontend/tests/integration/specs/work-packages/work-package-edit-spec.js

@@ -34,15 +34,27 @@ describe('Work package edit', function() {
       expectFocusEquals = function (id) {
         var activeId = browser.driver.switchTo().activeElement().getId();
         expect(activeId).to.eventually.deep.equal(id);
-      }, val;
+      }, val = 'my_value';
 
   describe('when clicking edit button on show page', function () {
-    beforeEach(function () {
-      val = 'my_value';
+    var expectBetweenViews = function () {
+      it('should show the edit actions', function () {
+        expect(page.editActions.container.isDisplayed()).to.eventually.be.true;
+      });
+
+      it('should disable the add-work-package button', function () {
+        expect(page.toolBar.addWorkPackage.isEnabled()).to.eventually.be.false;
+      });
+
+      it('should disable the list view button', function () {
+        expect(page.toolBar.listView.isEnabled()).to.eventually.be.false;
+      });
+    };
 
+    beforeEach(function () {
       page.get();
-      page.editButton.isPresent().then(function () {
-        page.editButton.click();
+      page.toolBar.edit.isPresent().then(function () {
+        page.toolBar.edit.click();
         page.focusElement.sendKeys(val);
       })
     });
@@ -55,16 +67,40 @@ describe('Work package edit', function() {
       expect(page.editableFields.count()).to.eventually.be.above(1);
     });
 
-    it('should show the edit actions', function () {
-      expect(page.editActions.container.isDisplayed()).to.eventually.be.true;
+    it('should hide the edit button', function () {
+      expect(page.toolBar.edit.isDisplayed()).to.eventually.be.false;
+    });
+
+    it('should disable the watch/unwatch button button', function () {
+      expect(page.toolBar.watch.isEnabled()).to.eventually.be.false;
+    });
+
+    it('should disable the drop-down-menu button', function () {
+      expect(page.toolBar.dropDown.isEnabled()).to.eventually.be.false;
     });
 
-    it('should keep the user input when switching to overview mode', function () {
-      page.overviewButton.click().then(function () {
+    expectBetweenViews();
+
+    describe('when switching to overview mode', function () {
+      beforeEach(function () {
+        browser.wait(page.toolBar.overview.click);
+      });
+
+      it('should keep the user input when switching to overview mode', function () {
         page.focusElement.isPresent().then(function () {
           expect(page.focusElement.getAttribute('value')).to.eventually.equal(val);
         });
       });
+
+      it('should disable the filter-toggle button', function () {
+        expect(page.toolBar.filter.isEnabled()).to.eventually.be.false;
+      });
+
+      it('should disable the settings button', function () {
+        expect(page.toolBar.settings.isEnabled()).to.eventually.be.false;
+      });
+
+      expectBetweenViews();
     });
 
     describe('when triggering the cancel action', function () {