Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Table column reordering + always render sort icons #1479

Merged
merged 3 commits into from
Sep 28, 2021
Merged

Fix: Table column reordering + always render sort icons #1479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
607e9c1
Fix: Table column reordering, always render sort icons
daniellevinson Sep 24, 2021
6855464
Fix: Role button
daniellevinson Sep 24, 2021
086433c
Update packages/core/addon/components/navi-table-sort-icon.hbs
daniellevinson Sep 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/core/addon/components/navi-table-sort-icon.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{!-- Copyright 2021, Yahoo Holdings Inc. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. --}}
<span class="navi-table-sort-icon {{this.sortClass}}" ...attributes>
<NaviIcon @icon="sort-asc" class="navi-table-sort-icon__caret sort-icon__caret-up" />
<NaviIcon @icon="sort-desc" class="navi-table-sort-icon__caret sort-icon__caret-down" />
<span class="navi-table-sort-icon {{this.sortClass}} flex flex-column p-l-3" ...attributes>
<DenaliIcon @icon="arrowhead-up-solid" @size="extrasmall" class="navi-table-sort-icon__caret navi-table-sort-icon__caret-up" />
<DenaliIcon @icon="arrowhead-down-solid" @size="extrasmall" class="navi-table-sort-icon__caret navi-table-sort-icon__caret-down" />
</span>
13 changes: 9 additions & 4 deletions packages/core/addon/components/navi-visualizations/table.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,12 +290,17 @@ export default class Table extends Component<Args> {
}

/**
* sends sort action when timeDimension header is clicked
* @param column clicked table column
* sends sort action when column header is clicked
*/
@action
headerClicked(column: TableColumn): void {
if (!column.fragment.columnMetadata.isSortable) {
headerClicked({ target }: { target: HTMLElement }): void {
const columnId = target.closest('li')?.getAttribute('data-column-id');
if (!columnId) {
return;
}

const column = this.columns.find((c) => c.columnId === columnId);
if (!column?.fragment.columnMetadata.isSortable) {
return;
}

Expand Down
5 changes: 2 additions & 3 deletions packages/core/addon/templates/components/table-renderer-vertical-collection.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@
<div class={{this.tableHeadersClass}}>
{{#unless @isEditingMode}}
{{#let "table-renderer-vc" as |groupName|}}
<ol class="table-header-row-vc table-header-row-vc--view" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}}>
<ol role="button" class="table-header-row-vc table-header-row-vc--view" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}} {{on "click" @headerClicked}}>
{{#each @columns as |column|}}
<li
class="table-header-cell {{column.fragment.type}}"
data-name={{column.fragment.canonicalName}}
role="button"
data-column-id={{column.columnId}}
{{sortable-handle}}
{{on "click" (fn @headerClicked column)}}
{{sortable-item groupName=groupName model=column isDraggingDisabled=@isDraggingDisabled onDragStart=(set this "isDragged" true) onDragStop=(set this "isDragged" false)}}
>
<span
Expand Down
5 changes: 2 additions & 3 deletions packages/core/addon/templates/components/table-renderer.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,13 @@
</div>
{{else}}
{{#let "table-renderer" as |groupName|}}
<ol class="table-header-row" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}}>
<ol role="button" class="table-header-row" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}} {{on "click" @headerClicked}}>
{{#each @columns as |column|}}
<li
class="table-header-cell {{column.fragment.type}}"
role="button"
{{on "click" (fn @headerClicked column)}}
{{sortable-item groupName=groupName model=column isDraggingDisabled=@isDraggingDisabled}}
data-name={{column.fragment.canonicalName}}
data-column-id={{column.columnId}}
>
<span
class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
Expand Down
36 changes: 14 additions & 22 deletions packages/core/app/styles/navi-core/components/navi-table-sort-icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,26 @@
*/

.navi-table-sort-icon {
display: flex;
flex-flow: column;
margin-left: 5px;

&__caret {
color: map-get($denali-grey-colors, '400');
font-size: 14px;
height: 0;
}
color: map-get($denali-grey-colors, '500');

&--asc .sort-icon__caret-up,
&--desc .sort-icon__caret-down {
color: map-get($denali-grey-colors, '600');
}

&--none {
display: none;
&-up {
margin-bottom: -3px;
}

.table-header-cell:hover & {
display: inherit;
&-down {
margin-top: -3px;
}
}

.table-header-row-vc & {
display: inherit;
&--asc &__caret-up,
&--desc &__caret-down {
color: map-get($denali-grey-colors, '700');
}

@media print {
display: none;
}
&--none {
@media print {
display: none;
}
}
}
21 changes: 5 additions & 16 deletions packages/core/app/styles/navi-core/components/navi-visualizations/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,6 @@ $font-family-strong: 'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;
flex: 1;
font-family: $font-family-strong;
min-width: 125px;

&__icon {
padding: 3px 5px;
}
}

&,
Expand Down Expand Up @@ -162,6 +158,10 @@ $font-family-strong: 'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;
display: flex;
}

.table-header-cell {
align-items: flex-end;
}

&--edit {
th:first-of-type > div {
padding-left: 0;
Expand All @@ -172,6 +172,7 @@ $font-family-strong: 'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;
}

.table-header-cell {
align-items: center;
background-color: $body-bg-color;
border-bottom: 2px map-get($denali-grey-colors, '400') solid;

Expand All @@ -182,14 +183,6 @@ $font-family-strong: 'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;
}
}

.table-header-cell {
align-items: flex-end;

&__icon {
padding: 3px 5px 17px;
}
}

&:not(.table-header-row-vc--edit) th .table-header-cell {
height: 0;
overflow-y: hidden;
Expand All @@ -212,10 +205,6 @@ $font-family-strong: 'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;
min-width: 125px;
padding: $cell-padding;

&__icon {
padding: 3px 5px;
}

&__title {
flex: 1;

Expand Down