Improve hierarchy styling

Adds column button to toggle hierarchy

app/assets/stylesheets/content/work_packages/_table_hierarchy.sass

@@ -19,14 +19,17 @@
   .wp-table--hierarchy-indicator-collapsed
     display: inline
 
+.wp-table--hierarchy-span
+  text-align: center
+  display: inline-block
 
 .wp-table--hierarchy-indicator-icon
   @include icon-common
-  @extend .icon-arrow-down2
-  font-size: 0.75rem
+  @extend .icon-arrow-down1
+  font-size: 0.6rem
 
   .-hierarchy-collapsed &
-    @extend .icon-arrow-right7
+    @extend .icon-arrow-right2
 
 .wp-table--row[class*="__collapsed-group-"]
   display: none
@@ -37,4 +40,20 @@
 // Highlight the additional hierarchy
 // so it becomes clear they're not part of the sort
 .wp-table--hierarchy-aditional-row
-  @include varprop(background, gray-light)
+  @include varprop(background, gray-light)
+
+// Style hierarchy column differently
+.generic-table--hierarchy-header > a
+  width: calc(100% - 48px)
+
+// Padding for the hierarchy mode
+.wp-table--cell-td.subject:not(.-with-hierarchy)
+  padding-left: 25px !important
+
+.hierarchy-header--icon
+  display: inline-block
+  width: 20px
+
+  span:before
+    padding: 0 !important
+    @include varprop(color, body-font-color)

app/assets/stylesheets/content/work_packages/inplace_editing/_edit_fields.sass

@@ -30,12 +30,6 @@
   padding-left: 0
   line-height: 1
 
-  // Avoid jumping subject field
-  &:first-of-type
-    padding: 0
-  &.-active
-    padding: 0
-
   &.-error,
   .wp-table--cell-td.-error &
     .wp-table--cell-span,

config/locales/js-en.yml

@@ -435,6 +435,7 @@ en:
         header_with_parent: 'New %{type} (Child of %{parent_type} #%{id})'
         button: 'Create'
       hierarchy:
+        toggle_button: 'Click to toggle hierarchy mode.'
         leaf: 'Work package leaf at level %{level}.'
         children_collapsed: 'Hierarchy level %{level}, collapsed. Click to show the filtered children'
         children_expanded: 'Hierarchy level %{level}, expanded. Click to collapse the filtered children'

frontend/app/components/wp-fast-table/builders/rows/hierarchy-rows-builder.ts

@@ -101,7 +101,9 @@ export class HierarchyRowsBuilder extends PlainRowsBuilder {
     });
 
     element.classList.add(`__hierarchy-root-${row.object.id}`);
-    jQuery(element).find('td.subject').prepend(hierarchyIndicator);
+    jQuery(element).find('td.subject')
+                   .prepend(hierarchyIndicator)
+                   .addClass('-with-hierarchy');
     return element;
   }
 
@@ -112,8 +114,7 @@ export class HierarchyRowsBuilder extends PlainRowsBuilder {
       const hierarchyIndicator = document.createElement('span');
       const collapsed = this.wpTableHierarchy.collapsed(workPackage.id);
       hierarchyIndicator.classList.add(hierarchyCellClassName);
-      hierarchyIndicator.style.width = 10 + (10 * level) + 'px';
-      hierarchyIndicator.style.paddingLeft = (20 * level) + 'px';
+      hierarchyIndicator.style.width = 25 + (15 * level) + 'px';
 
       if (workPackage.$loaded && workPackage.isLeaf) {
         hierarchyIndicator.innerHTML = `

frontend/app/components/wp-fast-table/state/wp-table-hierarchy.service.ts

@@ -27,6 +27,13 @@ export class WorkPackageTableHierarchyService {
      this.hierarchyState.put(state);
    }
 
+   /**
+    * Toggle the hierarchy state
+    */
+   public toggleState() {
+    this.setEnabled(!this.isEnabled);
+   }
+
   /**
    * Return whether the given wp ID is collapsed.
    */

frontend/app/components/wp-table/sort-header/sort-header.directive.html

@@ -1,12 +1,29 @@
 <div class="generic-table--sort-header-outer">
-  <span class="generic-table--sort-header">
+  <span class="hierarchy-header--outer-span" ng-if="isHierarchyColumn">
+    <accessible-by-keyboard execute="toggleHierarchy($event)"
+                            aria-label="{{ ::I18n.t('js.work_packages.hierarchy.toggle_button') }}"
+                            link-class="hierarchy-header--icon"
+                            span-class="icon icon-show-more">
+    </accessible-by-keyboard>
     <a href="javascript://"
        ng-if="sortable"
        ng-class="[currentSortDirection && 'sort', currentSortDirection]"
        lang-attribute
        lang="{{locale}}"
-       id="{{ headerName }}"
-       onclick="setTimeout(function(){ $(document).getElementsByClassName('menu-item')[0].focus(); }, 100);">{{headerTitle}}</a>
+       id="{{ headerName }}">{{headerTitle}}</a>
+    <a ng-if="!sortable">{{headerTitle}}</a>
+    <label class="hidden-for-sighted" aria-hidden="true" for="{{ headerTitle }}"> {{ fullTitle }} </label>
+    <icon-wrapper css-class="dropdown-indicator icon-small"
+                  icon-name="pulldown"
+                  title="{{I18n.t('js.label_open_menu')}}"></icon-wrapper>
+  </span>
+  <span class="generic-table--sort-header" ng-if="!isHierarchyColumn">
+    <a href="javascript://"
+       ng-if="sortable"
+       ng-class="[currentSortDirection && 'sort', currentSortDirection]"
+       lang-attribute
+       lang="{{locale}}"
+       id="{{ headerName }}">{{headerTitle}}</a>
     <a ng-if="!sortable">{{headerTitle}}</a>
     <label class="hidden-for-sighted" aria-hidden="true" for="{{ headerTitle }}"> {{ fullTitle }} </label>
     <icon-wrapper css-class="dropdown-indicator icon-small"

frontend/app/components/wp-table/sort-header/sort-header.directive.ts

@@ -26,11 +26,13 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
+import {WorkPackageTableHierarchyService} from '../../wp-fast-table/state/wp-table-hierarchy.service';
+
 angular
   .module('openproject.workPackages.directives')
   .directive('sortHeader', sortHeader);
 
-function sortHeader(){
+function sortHeader(wpTableHierarchy: WorkPackageTableHierarchyService){
   return {
     restrict: 'A',
     templateUrl: '/components/wp-table/sort-header/sort-header.directive.html',
@@ -43,8 +45,8 @@ function sortHeader(){
       locale: '='
     },
 
-    link: function(scope, element) {
-      scope.$watch('query.sortation.sortElements', function(sortElements){
+    link: function(scope: any, element: ng.IAugmentedJQuery) {
+      scope.$watch('query.sortation.sortElements', function(sortElements:any){
         var latestSortElement = sortElements[0];
 
         if (scope.headerName !== latestSortElement.field) {
@@ -58,6 +60,14 @@ function sortHeader(){
 
       scope.$watch('currentSortDirection', setActiveColumnClass);
 
+      // Place the hierarchy icon left to the subject column
+      scope.isHierarchyColumn = scope.headerName === 'subject';
+      scope.toggleHierarchy = function(evt:JQueryEventObject) {
+        wpTableHierarchy.toggleState();
+        evt.stopPropagation();
+        return false;
+      }
+
       function setFullTitleAndSummary() {
         scope.fullTitle = scope.headerTitle;
 

frontend/app/templates/components/accessible_by_keyboard.html

@@ -1,4 +1,4 @@
-<a data-ng-click='isDisabled || execute()'
+<a data-ng-click='isDisabled || execute({ "$event": $event })'
    role="link"
    class='{{ linkClass }}'
    ng-disabled="isDisabled"

spec/features/accessibility/work_packages/work_package_query_spec.rb

@@ -135,7 +135,7 @@ describe 'Work package index accessibility', type: :feature, selenium: true do
     describe 'subject column' do
       let(:link_caption) { 'Subject' }
       let(:column_header_selector) { '.work-package-table--container th:nth-of-type(2)' }
-      let(:column_header_link_selector) { column_header_selector + ' a' }
+      let(:column_header_link_selector) { column_header_selector + ' #subject' }
 
       it_behaves_like 'sortable column'
     end
@@ -252,7 +252,7 @@ describe 'Work package index accessibility', type: :feature, selenium: true do
 
     describe 'column header drop down menu', js: true do
       it_behaves_like 'context menu' do
-        let(:source_link) { '.work-package-table--container th:nth-of-type(2) a' }
+        let(:source_link) { '.work-package-table--container th #subject' }
         let(:target_link) { '#column-context-menu .dropdown-menu li:first-of-type a' }
         let(:keys) { :enter }
         let(:sets_focus) { true }