From ff013bb54204410f95c4d1c70864d9a0c367e136 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Tue, 14 Mar 2017 16:07:02 +0100
Subject: [PATCH 1/4] Restyle details icon in table

---
 .../content/work_packages/_table_content.sass |  1 +
 config/locales/js-en.yml                      |  1 +
 .../components/routing/wp-list/wp.list.html   | 27 +++--------
 .../wp-details-view-button.directive.ts       | 47 +++++++++++++++----
 .../builders/details-link-builder.ts          |  2 +-
 5 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/content/work_packages/_table_content.sass b/app/assets/stylesheets/content/work_packages/_table_content.sass
index 946140c0b7..f905b81615 100644
--- a/app/assets/stylesheets/content/work_packages/_table_content.sass
+++ b/app/assets/stylesheets/content/work_packages/_table_content.sass
@@ -61,6 +61,7 @@
 // Show details view button when hovering
 .wp-table--details-link
   .issue:hover &,
+  .issue.-checked &,
   &:focus
     position: relative
     left: 0
diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml
index d4a2ea37bb..f6d9293cb1 100644
--- a/config/locales/js-en.yml
+++ b/config/locales/js-en.yml
@@ -57,6 +57,7 @@ en:
     button_more: "More"
     button_move: "Move"
     button_open_details: "Open details view"
+    button_close_details: "Close details view"
     button_open_fullscreen: "Open fullscreen view"
     button_quote: "Quote"
     button_save: "Save"
diff --git a/frontend/app/components/routing/wp-list/wp.list.html b/frontend/app/components/routing/wp-list/wp.list.html
index 388e894140..a3c09ded77 100644
--- a/frontend/app/components/routing/wp-list/wp.list.html
+++ b/frontend/app/components/routing/wp-list/wp.list.html
@@ -22,28 +22,13 @@
         </wp-filter-button>
       </li>
       <li class="toolbar-item hidden-for-mobile">
-        <ul id="work-packages-view-mode-selection" class="toolbar-button-group">
-          <li>
-            <wp-list-view-button
-                project-identifier="projectIdentifier">
-            </wp-list-view-button>
-          </li>
-          <li>
-            <wp-details-view-button
-                next-wp-func="nextAvailableWorkPackage">
-            </wp-details-view-button>
-          </li>
-          <li>
-            <wp-view-button
-                next-wp-func="nextAvailableWorkPackage">
-            </wp-view-button>
-          </li>
-        </ul>
+        <wp-details-view-button>
+        </wp-details-view-button>
+      </li>
+      <li class="toolbar-item hidden-for-mobile">
+        <wp-timeline-toggle-button>
+        </wp-timeline-toggle-button>
       </li>
-       <li class="toolbar-item">
-         <wp-timeline-toggle-button>
-         </wp-timeline-toggle-button>
-       </li>
       <li class="toolbar-item hidden-for-mobile">
         <button id="work-packages-settings-button"
                 ng-disabled="wpEditModeState.active"
diff --git a/frontend/app/components/wp-buttons/wp-details-view-button/wp-details-view-button.directive.ts b/frontend/app/components/wp-buttons/wp-details-view-button/wp-details-view-button.directive.ts
index b07e186b94..9aef7b0acb 100644
--- a/frontend/app/components/wp-buttons/wp-details-view-button/wp-details-view-button.directive.ts
+++ b/frontend/app/components/wp-buttons/wp-details-view-button/wp-details-view-button.directive.ts
@@ -27,17 +27,21 @@
 // ++
 
 import {wpButtonsModule} from '../../../angular-modules';
-import {WorkPackageNavigationButtonController, wpButtonDirective} from '../wp-buttons.module';
+import {WorkPackageButtonController, wpButtonDirective} from '../wp-buttons.module';
 import {KeepTabService} from '../../wp-panels/keep-tab/keep-tab.service';
 import {States} from '../../states.service';
 
-export class WorkPackageDetailsViewButtonController extends WorkPackageNavigationButtonController {
-  public projectIdentifier:number;
 
+export class WorkPackageDetailsViewButtonController extends WorkPackageButtonController {
+  public projectIdentifier:string;
   public accessKey:number = 8;
   public activeState:string = 'work-packages.list.details';
+  public listState: string = 'work-packages.list';
   public buttonId:string = 'work-packages-details-view-button';
-  public iconClass:string = 'icon-view-split';
+  public iconClass:string = 'icon-info2';
+
+  public activateLabel:string;
+  public deactivateLabel:string;
 
   constructor(
     public $state:ng.ui.IStateService,
@@ -46,16 +50,43 @@ export class WorkPackageDetailsViewButtonController extends WorkPackageNavigatio
     public loadingIndicator:any,
     public keepTab:KeepTabService) {
     'ngInject';
+    super(I18n);
+
+    this.activateLabel = I18n.t('js.button_open_details');
+    this.deactivateLabel = I18n.t('js.button_close_details');
+  }
 
-    super($state, I18n);
+  public get label():string {
+    if (this.isActive()) {
+      return this.deactivateLabel;
+    } else {
+      return this.activateLabel;
+    }
   }
 
-  public get labelKey():string {
-    return 'js.button_details_view';
+  public isToggle():boolean {
+    return true;
+  }
+
+  public isActive():boolean {
+    return this.$state.includes(this.activeState);
   }
 
   public performAction() {
-    this.openDetailsView();
+    if (this.isActive()) {
+      this.openListView();
+    } else {
+      this.openDetailsView();
+    }
+  }
+
+  public openListView() {
+    var params = {
+      projectPath: this.projectIdentifier
+    };
+
+    angular.extend(params, this.$state.params);
+    this.$state.go(this.listState, params);
   }
 
   public openDetailsView() {
diff --git a/frontend/app/components/wp-fast-table/builders/details-link-builder.ts b/frontend/app/components/wp-fast-table/builders/details-link-builder.ts
index 3223dfe6c6..0cfb7fc552 100644
--- a/frontend/app/components/wp-fast-table/builders/details-link-builder.ts
+++ b/frontend/app/components/wp-fast-table/builders/details-link-builder.ts
@@ -33,7 +33,7 @@ export class DetailsLinkBuilder {
 
     detailsLink.classList.add(detailsLinkClassName, 'hidden-for-sighted');
     let icon = document.createElement('i');
-    icon.classList.add('icon', 'icon-view-split');
+    icon.classList.add('icon', 'icon-info2');
     detailsLink.appendChild(icon);
 
     td.appendChild(detailsLink);

From 00af3e2d2239b75199ce62805116cdc89252fe76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 15 Mar 2017 10:37:47 +0100
Subject: [PATCH 2/4] Implement toggle icons

details -> full
full -> back button
---
 .../stylesheets/content/_work_packages.sass   |  2 ++
 .../details/_fullscreen_toggle.sass           | 24 +++++++++++++++++++
 .../fullscreen/_back_button.sass              |  8 +++++++
 .../single_view/_single_view.sass             | 16 +++++++++++--
 .../stylesheets/layout/_accessibility.sass    |  4 ++++
 .../wp-details/wp-details.controller.ts       | 15 +++++++++++-
 .../routing/wp-details/wp.list.details.html   | 13 +++++++++-
 .../routing/wp-show/wp-show.controller.ts     |  4 ++++
 .../components/routing/wp-show/wp.show.html   | 21 ++++++----------
 9 files changed, 89 insertions(+), 18 deletions(-)
 create mode 100644 app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass
 create mode 100644 app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass

diff --git a/app/assets/stylesheets/content/_work_packages.sass b/app/assets/stylesheets/content/_work_packages.sass
index 9dc08dbb9b..4fb9a7b1f2 100644
--- a/app/assets/stylesheets/content/_work_packages.sass
+++ b/app/assets/stylesheets/content/_work_packages.sass
@@ -41,6 +41,8 @@
 @import work_packages/single_view/attachments
 @import work_packages/single_view/inplace_esque_fields
 @import work_packages/_work_packages_show_view_overwrite
+@import work_packages/details/fullscreen_toggle
+@import work_packages/fullscreen/back_button
 
 // Tabs
 @import work_packages/tabs/_activities
diff --git a/app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass b/app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass
new file mode 100644
index 0000000000..5095428071
--- /dev/null
+++ b/app/assets/stylesheets/content/work_packages/details/_fullscreen_toggle.sass
@@ -0,0 +1,24 @@
+
+// Full screen toggle indicator on the
+// left side of the details container
+.wp--details--switch-fullscreen
+  width: 20px
+  height: 50px
+  position: absolute
+  left: -12px
+  top: calc(50% - 25px)
+  background: #eee
+  border: 1px solid $light-gray
+  color: $body-font-color
+  cursor: pointer
+
+  &:hover
+    background: #ddd
+
+  // Align icon
+  font-size: 10px
+  text-align: center
+  padding-top: 18px
+
+  span:before
+    padding: 0
\ No newline at end of file
diff --git a/app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass b/app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass
new file mode 100644
index 0000000000..a74806f488
--- /dev/null
+++ b/app/assets/stylesheets/content/work_packages/fullscreen/_back_button.sass
@@ -0,0 +1,8 @@
+.wp-show--back-button
+  width: 100px
+  padding: 0 10px
+
+  a
+    margin: 0
+    margin-top: 18px
+    width: 75px
diff --git a/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass b/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass
index 15a3ade013..c5f6305b64 100644
--- a/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass
+++ b/app/assets/stylesheets/content/work_packages/single_view/_single_view.sass
@@ -120,7 +120,7 @@ i
   height:      $work-package-details--tab-height
   overflow: hidden
   position: relative
-  width: 97.5%
+  width: 100%
   font-weight: bold
   text-transform: uppercase
 
@@ -131,15 +131,27 @@ i
     margin: 0
     padding: 0
     text-align: center
-    width: 23.25%
+    width: 22%
     cursor: pointer
   a
     color: #333
     text-decoration: none
     &:hover
       text-decoration: none
+  li.tab-icon
+    width: 8%
+    .icon-context:before
+      padding-top: 10px
   li.selected
     color: #999
     border-bottom: 2px solid $content-link-color
     a
       color: $content-link-color
+
+.work-packages--details-close-icon span
+  display: inline-block
+  padding-top: 2px
+  font-size: 0.9rem
+
+  &:before
+    @include varprop(color, $body-font-color)
\ No newline at end of file
diff --git a/app/assets/stylesheets/layout/_accessibility.sass b/app/assets/stylesheets/layout/_accessibility.sass
index 520c58a08f..c997ca7a4c 100644
--- a/app/assets/stylesheets/layout/_accessibility.sass
+++ b/app/assets/stylesheets/layout/_accessibility.sass
@@ -34,5 +34,9 @@
   height: 1px
   overflow: hidden
 
+body.accessibility-mode
+  .hidden-for-accessibility
+    display: none !important
+
 [hidden]
   display: none
diff --git a/frontend/app/components/routing/wp-details/wp-details.controller.ts b/frontend/app/components/routing/wp-details/wp-details.controller.ts
index bb36816e81..c7fdc20715 100644
--- a/frontend/app/components/routing/wp-details/wp-details.controller.ts
+++ b/frontend/app/components/routing/wp-details/wp-details.controller.ts
@@ -61,9 +61,22 @@ export class WorkPackageDetailsController extends WorkPackageViewController {
     });
   }
 
+  public close() {
+    this.$state.go('work-packages.list', this.$state.params);
+  }
+
+  public switchToFullscreen() {
+    this.$state.go('work-packages.show', this.$state.params);
+  }
+
   public onWorkPackageSave() {
     this.$rootScope.$emit('workPackagesRefreshInBackground');
-  };
+  }
+
+  protected initializeTexts() {
+    super.initializeTexts();
+    this.text.closeDetailsView = this.I18n.t('js.button_close_details');
+  }
 }
 
 wpControllersModule.controller('WorkPackageDetailsController', WorkPackageDetailsController);
diff --git a/frontend/app/components/routing/wp-details/wp.list.details.html b/frontend/app/components/routing/wp-details/wp.list.details.html
index 6fe4787cf2..8cbae44a0c 100644
--- a/frontend/app/components/routing/wp-details/wp.list.details.html
+++ b/frontend/app/components/routing/wp-details/wp.list.details.html
@@ -1,3 +1,7 @@
+<div class="wp--details--switch-fullscreen hidden-for-accessibility"
+     ng-click="$ctrl.switchToFullscreen()">
+  <span class="icon-context icon-double-arrow-left"></span>
+</div>
 <div class="work-packages--details loading-indicator--location"
       data-indicator-name="wpDetails">
   <div wp-edit-form="$ctrl.workPackage"
@@ -25,6 +29,13 @@
             ui-sref-active="selected">
           <a href="" ng-bind="::$ctrl.text.tabs.watchers"/>
         </li>
+        <li class="tab-icon">
+          <accessible-by-keyboard execute="$ctrl.close()"
+                                  link-aria-label="{{ ::$ctrl.text.closeDetailsView }}"
+                                  link-class="work-packages--details-close-icon"
+                                  span-class="icon-context icon-close">
+          </accessible-by-keyboard>
+        </li>
       </ul>
     </div>
     <div class="work-packages--details-content">
@@ -45,4 +56,4 @@
       ></edit-actions-bar>
     </div>
   </div>
-</div>
+</div
diff --git a/frontend/app/components/routing/wp-show/wp-show.controller.ts b/frontend/app/components/routing/wp-show/wp-show.controller.ts
index f19c56c1f7..c69fb78ee5 100644
--- a/frontend/app/components/routing/wp-show/wp-show.controller.ts
+++ b/frontend/app/components/routing/wp-show/wp-show.controller.ts
@@ -71,6 +71,10 @@ export class WorkPackageShowController extends WorkPackageViewController {
     this.setWorkPackageScopeProperties(this.workPackage);
   }
 
+  public backButton() {
+    this.$window.history.back();
+  }
+
   public deleteSelectedWorkPackage() {
     var promise = this.WorkPackageService.performBulkDelete([this.workPackage.id], true);
 
diff --git a/frontend/app/components/routing/wp-show/wp.show.html b/frontend/app/components/routing/wp-show/wp.show.html
index 96fd3abf7f..90429430d7 100644
--- a/frontend/app/components/routing/wp-show/wp.show.html
+++ b/frontend/app/components/routing/wp-show/wp.show.html
@@ -5,6 +5,13 @@
      ng-if="$ctrl.workPackage">
   <div class="toolbar-container">
     <div wp-toolbar id="toolbar">
+      <div class="wp-show--back-button">
+          <accessible-by-keyboard execute="$ctrl.backButton()"
+                          link-class="button -small"
+                          link-aria-label="{{ ::$ctrl.sectionTitle }}"
+                          span-class="button--icon icon-arrow-left1">
+        </accessible-by-keyboard>
+      </div>
       <ul id="toolbar-items" class="toolbar-items">
         <li class="toolbar-item">
           <wp-create-button project-identifier="$ctrl.projectIdentifier"
@@ -24,20 +31,6 @@
         <li class="toolbar-item" ng-if="$ctrl.displayWatchButton">
           <wp-watcher-button work-package="$ctrl.workPackage" disabled="$ctrl.wpEditModeState.active"></wp-watcher-button>
         </li>
-        <li class="toolbar-item hidden-for-mobile">
-          <ul id="work-packages-view-mode-selection" class="toolbar-button-group">
-            <li>
-            <wp-list-view-button edit-all="editAll"
-                                 project-identifier="$ctrl.projectIdentifier"></wp-list-view-button>
-            </li>
-            <li>
-              <wp-details-view-button project-identifier="$ctrl.projectIdentifier"></wp-details-view-button>
-            </li>
-            <li>
-              <wp-view-button work-package-id="$ctrl.workPackage.id"></wp-view-button>
-            </li>
-          </ul>
-        </li>
         <li class="toolbar-item action_menu_main" id="action-show-more-dropdown-menu">
           <button class="button dropdown-relative"
                   ng-disabled="!actionsAvailable || $ctrl.wpEditModeState.active"

From 4de294ed979489e673bf5d8ab70c3c54a5c5ea26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 15 Mar 2017 14:56:48 +0100
Subject: [PATCH 3/4] Always go back to list using fullscreen button

---
 frontend/app/components/routing/wp-show/wp-show.controller.ts | 4 ++--
 frontend/app/components/routing/wp-show/wp.show.html          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/routing/wp-show/wp-show.controller.ts b/frontend/app/components/routing/wp-show/wp-show.controller.ts
index c69fb78ee5..b1a2bc5521 100644
--- a/frontend/app/components/routing/wp-show/wp-show.controller.ts
+++ b/frontend/app/components/routing/wp-show/wp-show.controller.ts
@@ -71,8 +71,8 @@ export class WorkPackageShowController extends WorkPackageViewController {
     this.setWorkPackageScopeProperties(this.workPackage);
   }
 
-  public backButton() {
-    this.$window.history.back();
+  public goToList() {
+    this.$state.go('work-packages.list', this.$state.params);
   }
 
   public deleteSelectedWorkPackage() {
diff --git a/frontend/app/components/routing/wp-show/wp.show.html b/frontend/app/components/routing/wp-show/wp.show.html
index 90429430d7..51b876ea29 100644
--- a/frontend/app/components/routing/wp-show/wp.show.html
+++ b/frontend/app/components/routing/wp-show/wp.show.html
@@ -6,7 +6,7 @@
   <div class="toolbar-container">
     <div wp-toolbar id="toolbar">
       <div class="wp-show--back-button">
-          <accessible-by-keyboard execute="$ctrl.backButton()"
+          <accessible-by-keyboard execute="$ctrl.goToList()"
                           link-class="button -small"
                           link-aria-label="{{ ::$ctrl.sectionTitle }}"
                           span-class="button--icon icon-arrow-left1">

From 9866961c4c7bae47cf9304a53d2473c5648792e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20G=C3=BCnther?= <mail@oliverguenther.de>
Date: Wed, 15 Mar 2017 16:39:01 +0100
Subject: [PATCH 4/4] Fix tests

---
 .../components/routing/wp-details/wp-details.controller.ts | 4 +++-
 .../app/components/routing/wp-details/wp.list.details.html | 2 +-
 frontend/app/components/routing/wp-list/wp.list.new.html   | 4 ++++
 frontend/app/components/routing/wp-show/wp.show.html       | 2 +-
 frontend/app/components/wp-create/wp-create.controller.ts  | 6 +++++-
 spec/features/work_packages/cancel_editing_spec.rb         | 2 +-
 .../work_packages/details/details_relations_spec.rb        | 4 ++--
 spec/features/work_packages/navigation_spec.rb             | 4 ++--
 .../features/work_packages/select_work_package_row_spec.rb | 3 ++-
 spec/features/work_packages/tabs/keep_tab_spec.rb          | 6 +++---
 spec/support/pages/abstract_work_package.rb                | 4 ----
 spec/support/pages/split_work_package.rb                   | 5 +++++
 spec/support/pages/work_packages_table.rb                  | 7 -------
 spec/support/work_packages/table_work_package_field.rb     | 4 ++--
 14 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/frontend/app/components/routing/wp-details/wp-details.controller.ts b/frontend/app/components/routing/wp-details/wp-details.controller.ts
index c7fdc20715..f60a88f14c 100644
--- a/frontend/app/components/routing/wp-details/wp-details.controller.ts
+++ b/frontend/app/components/routing/wp-details/wp-details.controller.ts
@@ -30,6 +30,7 @@ import {wpControllersModule} from '../../../angular-modules';
 import {WorkPackageViewController} from '../wp-view-base/wp-view-base.controller';
 import {States} from '../../states.service';
 import {WorkPackageTableSelection} from '../../wp-fast-table/state/wp-table-selection.service';
+import {KeepTabService} from '../../wp-panels/keep-tab/keep-tab.service';
 
 export class WorkPackageDetailsController extends WorkPackageViewController {
 
@@ -37,6 +38,7 @@ export class WorkPackageDetailsController extends WorkPackageViewController {
               public $scope:ng.IScope,
               public $rootScope:ng.IRootScopeService,
               public states:States,
+              public keepTab:KeepTabService,
               public wpTableSelection:WorkPackageTableSelection,
               public $state:ng.ui.IStateService) {
     super($injector, $scope, $state.params['workPackageId']);
@@ -66,7 +68,7 @@ export class WorkPackageDetailsController extends WorkPackageViewController {
   }
 
   public switchToFullscreen() {
-    this.$state.go('work-packages.show', this.$state.params);
+    this.$state.go(this.keepTab.currentShowState, this.$state.params);
   }
 
   public onWorkPackageSave() {
diff --git a/frontend/app/components/routing/wp-details/wp.list.details.html b/frontend/app/components/routing/wp-details/wp.list.details.html
index 8cbae44a0c..58dec6224c 100644
--- a/frontend/app/components/routing/wp-details/wp.list.details.html
+++ b/frontend/app/components/routing/wp-details/wp.list.details.html
@@ -1,4 +1,4 @@
-<div class="wp--details--switch-fullscreen hidden-for-accessibility"
+<div class="work-packages-show-view-button wp--details--switch-fullscreen hidden-for-accessibility"
      ng-click="$ctrl.switchToFullscreen()">
   <span class="icon-context icon-double-arrow-left"></span>
 </div>
diff --git a/frontend/app/components/routing/wp-list/wp.list.new.html b/frontend/app/components/routing/wp-list/wp.list.new.html
index 3a08dcced3..e7972f2610 100644
--- a/frontend/app/components/routing/wp-list/wp.list.new.html
+++ b/frontend/app/components/routing/wp-list/wp.list.new.html
@@ -1,3 +1,7 @@
+<div class="work-packages-show-view-button wp--details--switch-fullscreen hidden-for-accessibility"
+     ng-click="$ctrl.switchToFullscreen()">
+  <span class="icon-context icon-double-arrow-left"></span>
+</div>
 <div
     class="work-packages--details"
     ng-if="$ctrl.newWorkPackage"
diff --git a/frontend/app/components/routing/wp-show/wp.show.html b/frontend/app/components/routing/wp-show/wp.show.html
index 51b876ea29..09920bb0e0 100644
--- a/frontend/app/components/routing/wp-show/wp.show.html
+++ b/frontend/app/components/routing/wp-show/wp.show.html
@@ -7,7 +7,7 @@
     <div wp-toolbar id="toolbar">
       <div class="wp-show--back-button">
           <accessible-by-keyboard execute="$ctrl.goToList()"
-                          link-class="button -small"
+                          link-class="work-packages-list-view-button button -small"
                           link-aria-label="{{ ::$ctrl.sectionTitle }}"
                           span-class="button--icon icon-arrow-left1">
         </accessible-by-keyboard>
diff --git a/frontend/app/components/wp-create/wp-create.controller.ts b/frontend/app/components/wp-create/wp-create.controller.ts
index 2460ac3e81..6ca360f580 100644
--- a/frontend/app/components/wp-create/wp-create.controller.ts
+++ b/frontend/app/components/wp-create/wp-create.controller.ts
@@ -1,4 +1,3 @@
-import {WorkPackageTableSelection} from '../wp-fast-table/state/wp-table-selection.service';
 // -- copyright
 // OpenProject is a project management system.
 // Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
@@ -37,6 +36,7 @@ import {WorkPackageCacheService} from "../work-packages/work-package-cache.servi
 import IRootScopeService = angular.IRootScopeService;
 import {WorkPackageEditModeStateService} from "../wp-edit/wp-edit-mode-state.service";
 import {WorkPackageNotificationService} from '../wp-edit/wp-notification.service';
+import {WorkPackageTableSelection} from '../wp-fast-table/state/wp-table-selection.service';
 import {States} from '../states.service';
 
 export class WorkPackageCreateController {
@@ -100,6 +100,10 @@ export class WorkPackageCreateController {
       .catch(error => this.wpNotificationsService.handleErrorResponse(error));
   }
 
+  public switchToFullscreen() {
+    this.$state.go('work-packages.new', this.$state.params);
+  }
+
   protected newWorkPackageFromParams(stateParams:any) {
     const type = parseInt(stateParams.type);
 
diff --git a/spec/features/work_packages/cancel_editing_spec.rb b/spec/features/work_packages/cancel_editing_spec.rb
index 28d04242e0..3ba51ca5bc 100644
--- a/spec/features/work_packages/cancel_editing_spec.rb
+++ b/spec/features/work_packages/cancel_editing_spec.rb
@@ -106,7 +106,7 @@ describe 'Cancel editing work package', js: true do
     find('#wp-new-inline-edit--field-subject').set 'foobar'
 
     # Expect editing works when moving to full screen
-    find('#work-packages-show-view-button').click
+    find('.work-packages-show-view-button').click
 
     expect(wp_page).not_to have_alert_dialog
     expect(page).to have_selector('.wp-edit-field.subject.-active')
diff --git a/spec/features/work_packages/details/details_relations_spec.rb b/spec/features/work_packages/details/details_relations_spec.rb
index 30d9bfec49..f50da92be4 100644
--- a/spec/features/work_packages/details/details_relations_spec.rb
+++ b/spec/features/work_packages/details/details_relations_spec.rb
@@ -256,7 +256,7 @@ describe 'Work package relations tab', js: true, selenium: true do
         add_relation('follows', relatable)
 
         # Switch to full view
-        find('#work-packages-show-view-button').click
+        find('.work-packages-show-view-button').click
 
         # Expect to have row
         created_row = find(".relation-row-#{relatable.id}", wait: 10)
@@ -268,7 +268,7 @@ describe 'Work package relations tab', js: true, selenium: true do
         expect(page).to have_no_selector('.wp-relations--subject-field', text: relatable.subject)
 
         # Back to split view
-        find('#work-packages-details-view-button').click
+        page.evaluate_script('window.history.back()')
         work_packages_page.expect_subject
 
         expect(page).to have_no_selector('.relation-group--header', text: 'FOLLOWS')
diff --git a/spec/features/work_packages/navigation_spec.rb b/spec/features/work_packages/navigation_spec.rb
index 0fd26901f8..a2dd295907 100644
--- a/spec/features/work_packages/navigation_spec.rb
+++ b/spec/features/work_packages/navigation_spec.rb
@@ -86,13 +86,13 @@ RSpec.feature 'Work package navigation', js: true, selenium: true do
     split_project_work_package.expect_current_path
 
     # open work package full screen by button
-    full_work_package = project_work_packages.open_full_screen_by_button(work_package)
+    full_work_package = split_project_work_package.switch_to_fullscreen
 
     full_work_package.expect_subject
     expect(current_path).to eq project_work_package_path(project, work_package, 'activity')
 
     # Back to table using the button
-    find('#work-packages-list-view-button').click
+    find('.work-packages-list-view-button').click
     global_work_packages.expect_work_package_listed(work_package)
     expect(current_path).to eq project_work_packages_path(project)
 
diff --git a/spec/features/work_packages/select_work_package_row_spec.rb b/spec/features/work_packages/select_work_package_row_spec.rb
index d3ef032f73..85c6fcd1ba 100644
--- a/spec/features/work_packages/select_work_package_row_spec.rb
+++ b/spec/features/work_packages/select_work_package_row_spec.rb
@@ -239,7 +239,8 @@ describe 'Select work package row', type: :feature, js:true, selenium: true do
       split_wp = Pages::SplitWorkPackage.new(work_package_2)
       split_wp.expect_attributes Subject: work_package_2.subject
 
-      find('#work-packages-list-view-button').click
+      find('#work-packages-details-view-button').click
+      expect(page).to have_no_selector('.work-packages--details')
     end
   end
 end
diff --git a/spec/features/work_packages/tabs/keep_tab_spec.rb b/spec/features/work_packages/tabs/keep_tab_spec.rb
index 2eb66cbf92..3817de5cca 100644
--- a/spec/features/work_packages/tabs/keep_tab_spec.rb
+++ b/spec/features/work_packages/tabs/keep_tab_spec.rb
@@ -62,17 +62,17 @@ RSpec.feature 'Keep current details tab', js: true, selenium: true do
     wp_split.expect_tab :relations
 
     # open work package full screen by button
-    wp_full = wp_table.open_full_screen_by_button(wp2)
+    wp_full = wp_split.switch_to_fullscreen
     wp_full.expect_tab :relations
 
-    wp_full.open_in_split_view
+    page.evaluate_script('window.history.back()')
     wp_split.expect_tab :relations
 
     # Assert that overview tab is mapped to activity in show
     wp_split.visit_tab! :overview
     wp_split.expect_tab :overview
 
-    wp_split.open_in_full_view
+    wp_split.switch_to_fullscreen
     wp_full.expect_tab :activity
     wp_full.ensure_page_loaded
   end
diff --git a/spec/support/pages/abstract_work_package.rb b/spec/support/pages/abstract_work_package.rb
index 2407283b05..5852753252 100644
--- a/spec/support/pages/abstract_work_package.rb
+++ b/spec/support/pages/abstract_work_package.rb
@@ -76,10 +76,6 @@ module Pages
       find('#work-packages-details-view-button').click
     end
 
-    def open_in_full_view
-      find('#work-packages-show-view-button').click
-    end
-
     def ensure_page_loaded
       expect(page).to have_selector('.work-package-details-activities-activity-contents .user',
                                     text: work_package.journals.last.user.name,
diff --git a/spec/support/pages/split_work_package.rb b/spec/support/pages/split_work_package.rb
index 913b46e386..c36c815af7 100644
--- a/spec/support/pages/split_work_package.rb
+++ b/spec/support/pages/split_work_package.rb
@@ -42,6 +42,11 @@ module Pages
       super(attribute, container)
     end
 
+    def switch_to_fullscreen
+      find('.work-packages-show-view-button').click
+      FullWorkPackage.new(work_package, project)
+    end
+
     def closed?
       expect(page).not_to have_selector(@selector)
     end
diff --git a/spec/support/pages/work_packages_table.rb b/spec/support/pages/work_packages_table.rb
index 8f477b4a41..78cbef6888 100644
--- a/spec/support/pages/work_packages_table.rb
+++ b/spec/support/pages/work_packages_table.rb
@@ -106,13 +106,6 @@ module Pages
       FullWorkPackage.new(work_package, project)
     end
 
-    def open_full_screen_by_button(work_package)
-      row(work_package).click
-      click_button(I18n.t('js.label_activate') + ' ' + I18n.t('js.button_show_view'))
-
-      FullWorkPackage.new(work_package, project)
-    end
-
     def open_full_screen_by_link(work_package)
       row(work_package).click_link(work_package.id)
     end
diff --git a/spec/support/work_packages/table_work_package_field.rb b/spec/support/work_packages/table_work_package_field.rb
index 5e90b6d53a..f7ef4e7c4b 100644
--- a/spec/support/work_packages/table_work_package_field.rb
+++ b/spec/support/work_packages/table_work_package_field.rb
@@ -162,10 +162,10 @@ class TableWorkPackageField
     if Capybara.current_driver == Capybara.javascript_driver
       extend ::Angular::DSL unless singleton_class.included_modules.include?(::Angular::DSL)
 
-      expect(page).to have_selector('#work-packages-list-view-button.-active,
+      expect(page).to have_selector(".wp-table--row,
         .work-packages--details--title,
         .work-package-details-activities-activity-contents,
-        #work-packages--edit-actions-save'.squish)
+        #work-packages--edit-actions-save".squish)
     end
   end