Fix panel toggle when switching tabs on embedded details pane

app/assets/javascripts/angular/work_packages/controllers/work-packages-controller.js

@@ -30,12 +30,14 @@ angular.module('openproject.workPackages.controllers')
 
 .controller('WorkPackagesController', [
     '$scope',
+    '$state',
     '$stateParams',
     'QueryService',
     'ProjectService',
-    function($scope, $stateParams, QueryService, ProjectService) {
+    function($scope, $state, $stateParams, QueryService, ProjectService) {
 
   // Setup
+  $scope.$state = $state;
   $scope.selectedTitle = I18n.t('js.toolbar.unselected_title');
 
   if ($stateParams.projectPath.indexOf('/projects') === 0) {

karma/tests/controllers/work-packages-controller-test.js

@@ -47,6 +47,7 @@ describe('WorkPackagesController', function() {
       ctrl = $controller("WorkPackagesController", {
         $scope:  scope,
         $window: win,
+        $state: {},
         $stateParams: testParams,
         project: {},
         availableTypes: {}

public/templates/work_packages.list.html

@@ -34,8 +34,8 @@
           </li>
           <li feature-flag="detailsView">
             <button class="button"
-                    ui-sref="work-packages.list.details.overview({workPackageId: preselectedWorkPackageId})"
-                    ui-sref-active="active">
+                    ng-class="{ active: $state.includes('work-packages.list.details') }"
+                    ui-sref="work-packages.list.details.overview({workPackageId: preselectedWorkPackageId})">
               <i class="icon-table-detail-view icon-buttons"></i>
             </button>
           </li>