From e5aad68555b3ca2cec4cee200064eb54e2d8aa23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20G=C3=BCnther?= Date: Tue, 28 Feb 2017 14:59:01 +0100 Subject: [PATCH] Improve hierarchy styling Adds column button to toggle hierarchy --- .../work_packages/_table_hierarchy.sass | 27 ++++++++++++++++--- .../inplace_editing/_edit_fields.sass | 6 ----- config/locales/js-en.yml | 1 + .../builders/rows/hierarchy-rows-builder.ts | 7 ++--- .../state/wp-table-hierarchy.service.ts | 7 +++++ .../sort-header/sort-header.directive.html | 23 +++++++++++++--- ....directive.js => sort-header.directive.ts} | 16 ++++++++--- .../components/accessible_by_keyboard.html | 2 +- .../work_packages/work_package_query_spec.rb | 4 +-- 9 files changed, 71 insertions(+), 22 deletions(-) rename frontend/app/components/wp-table/sort-header/{sort-header.directive.js => sort-header.directive.ts} (82%) diff --git a/app/assets/stylesheets/content/work_packages/_table_hierarchy.sass b/app/assets/stylesheets/content/work_packages/_table_hierarchy.sass index 8321e8a1be..45ff9f3e16 100644 --- a/app/assets/stylesheets/content/work_packages/_table_hierarchy.sass +++ b/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) \ No newline at end of file + @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) \ No newline at end of file diff --git a/app/assets/stylesheets/content/work_packages/inplace_editing/_edit_fields.sass b/app/assets/stylesheets/content/work_packages/inplace_editing/_edit_fields.sass index ca6bc76a5a..6c945085a2 100644 --- a/app/assets/stylesheets/content/work_packages/inplace_editing/_edit_fields.sass +++ b/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, diff --git a/config/locales/js-en.yml b/config/locales/js-en.yml index 869e9a2733..0ceae4cda4 100644 --- a/config/locales/js-en.yml +++ b/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' diff --git a/frontend/app/components/wp-fast-table/builders/rows/hierarchy-rows-builder.ts b/frontend/app/components/wp-fast-table/builders/rows/hierarchy-rows-builder.ts index a154c66411..cd1047bb1e 100644 --- a/frontend/app/components/wp-fast-table/builders/rows/hierarchy-rows-builder.ts +++ b/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 = ` diff --git a/frontend/app/components/wp-fast-table/state/wp-table-hierarchy.service.ts b/frontend/app/components/wp-fast-table/state/wp-table-hierarchy.service.ts index b379ab7671..48d33873a9 100644 --- a/frontend/app/components/wp-fast-table/state/wp-table-hierarchy.service.ts +++ b/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. */ diff --git a/frontend/app/components/wp-table/sort-header/sort-header.directive.html b/frontend/app/components/wp-table/sort-header/sort-header.directive.html index 7a9e6a5d67..a5de761b70 100644 --- a/frontend/app/components/wp-table/sort-header/sort-header.directive.html +++ b/frontend/app/components/wp-table/sort-header/sort-header.directive.html @@ -1,12 +1,29 @@
- + + + {{headerTitle}} + id="{{ headerName }}">{{headerTitle}} + {{headerTitle}} + + + + + {{headerTitle}} {{headerTitle}}