Skip to content

Commit

Permalink
feat(tree-grid): Eva style (#1409)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:

Following theme properties were renamed:
tree-grid-header-bg -> tree-grid-header-background
tree-grid-footer-bg -> tree-grid-footer-background
tree-grid-row-bg -> tree-grid-row-background
tree-grid-row-bg-even -> tree-grid-row-even-background
tree-grid-row-hover-bg -> tree-grid-row-hover-background

Following theme properties were removed:
tree-grid-sort-header-button-font-weight
tree-grid-sort-header-button-color
tree-grid-icon-color
  • Loading branch information
@yggg
yggg committed May 27, 2019
1 parent c5799df commit 5fac736
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 39 deletions.
7 changes: 5 additions & 2 deletions src/framework/theme/components/tree-grid/_tree-grid-sort.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@
background: nb-theme(tree-grid-sort-header-button-background);
border: nb-theme(tree-grid-sort-header-button-border);
padding: nb-theme(tree-grid-sort-header-button-padding);
font-weight: nb-theme(tree-grid-sort-header-button-font-weight);
color: nb-theme(tree-grid-sort-header-button-color);
color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
line-height: inherit;
}
}
31 changes: 21 additions & 10 deletions src/framework/theme/components/tree-grid/_tree-grid.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,36 @@
border: $border-width $border-style $border-color;
}

.nb-tree-grid-header-cell {
line-height: 1.5;
}

.nb-tree-grid-header-row {
background: nb-theme(tree-grid-header-bg);
background: nb-theme(tree-grid-header-background);
color: nb-theme(tree-grid-header-text-color);
font-family: nb-theme(tree-grid-header-text-font-family);
font-size: nb-theme(tree-grid-header-text-font-size);
font-weight: nb-theme(tree-grid-header-text-font-weight);
line-height: nb-theme(tree-grid-header-text-line-height);
}

.nb-tree-grid-footer-row {
background: nb-theme(tree-grid-footer-bg);
background: nb-theme(tree-grid-footer-background);
color: nb-theme(tree-grid-footer-text-color);
font-family: nb-theme(tree-grid-footer-text-font-family);
font-size: nb-theme(tree-grid-footer-text-font-size);
font-weight: nb-theme(tree-grid-footer-text-font-weight);
line-height: nb-theme(tree-grid-footer-text-line-height);
}

.nb-tree-grid-row {
background: nb-theme(tree-grid-row-bg);
background: nb-theme(tree-grid-row-background);
color: nb-theme(tree-grid-row-text-color);
font-family: nb-theme(tree-grid-row-text-font-family);
font-size: nb-theme(tree-grid-row-text-font-size);
font-weight: nb-theme(tree-grid-row-text-font-weight);
line-height: nb-theme(tree-grid-row-text-line-height);
&:hover {
background: nb-theme(tree-grid-row-hover-bg);
background: nb-theme(tree-grid-row-hover-background);
}
&:nth-child(2n):not(:hover) {
background-color: nb-theme(tree-grid-row-bg-even);
background-color: nb-theme(tree-grid-row-even-background);
}
}

Expand All @@ -51,7 +62,7 @@
nb-icon {
font-size: inherit;
vertical-align: middle;
color: nb-theme(tree-grid-icon-color);
color: currentColor;
}
}

Expand Down
4 changes: 3 additions & 1 deletion src/framework/theme/components/tree-grid/data-source/tree-grid-sort.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ export class NbTreeGridSortService<T> {

const sorted = data.sort((na, nb) => this.comparator(request, na, nb));
for (const node of data) {
node.children = this.sort(request, node.children);
if (node.children) {
node.children = this.sort(request, node.children);
}
}
return sorted;
}
Expand Down
44 changes: 28 additions & 16 deletions src/framework/theme/components/tree-grid/tree-grid.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,22 +98,34 @@ import { NbColumnsService } from './tree-grid-columns.service';
*
* @styles
*
* tree-grid-cell-border-width
* tree-grid-cell-border-style
* tree-grid-cell-border-color
* tree-grid-row-min-height
* tree-grid-cell-padding
* tree-grid-sort-header-button-background
* tree-grid-sort-header-button-border
* tree-grid-sort-header-button-padding
* tree-grid-sort-header-button-font-weight
* tree-grid-header-bg
* tree-grid-footer-bg
* tree-grid-row-bg
* tree-grid-row-bg-even
* tree-grid-row-hover-bg
* tree-grid-sort-header-button-color
* tree-grid-icon-color
* tree-grid-cell-border-width:
* tree-grid-cell-border-style:
* tree-grid-cell-border-color:
* tree-grid-row-min-height:
* tree-grid-cell-padding:
* tree-grid-header-background:
* tree-grid-header-text-color:
* tree-grid-header-text-font-family:
* tree-grid-header-text-font-size:
* tree-grid-header-text-font-weight:
* tree-grid-header-text-line-height:
* tree-grid-footer-background:
* tree-grid-footer-text-color:
* tree-grid-footer-text-font-family:
* tree-grid-footer-text-font-size:
* tree-grid-footer-text-font-weight:
* tree-grid-footer-text-line-height:
* tree-grid-row-background:
* tree-grid-row-even-background:
* tree-grid-row-hover-background:
* tree-grid-row-text-color:
* tree-grid-row-text-font-family:
* tree-grid-row-text-font-size:
* tree-grid-row-text-font-weight:
* tree-grid-row-text-line-height:
* tree-grid-sort-header-button-background:
* tree-grid-sort-header-button-border:
* tree-grid-sort-header-button-padding:
*/
@Component({
selector: 'table[nbTreeGrid]',
Expand Down
36 changes: 26 additions & 10 deletions src/framework/theme/styles/themes/_default.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1510,22 +1510,38 @@ $theme: (
radio-info-active-border-color: color-info-active,
radio-info-active-inner-circle-color: color-info-active,

tree-grid-cell-border-width: 1px,
tree-grid-cell-border-width: 0.0625rem,
tree-grid-cell-border-style: solid,
tree-grid-cell-border-color: separator,
tree-grid-cell-border-color: divider-color,
tree-grid-row-min-height: 2rem,
tree-grid-cell-padding: 0.875rem 1.25rem,

tree-grid-header-background: color-white,
tree-grid-header-text-color: text-dark-color,
tree-grid-header-text-font-family: text-subtitle-font-family,
tree-grid-header-text-font-size: text-subtitle-font-size,
tree-grid-header-text-font-weight: text-subtitle-font-weight,
tree-grid-header-text-line-height: text-subtitle-line-height,

tree-grid-footer-background: tree-grid-header-background,
tree-grid-footer-text-color: text-dark-color,
tree-grid-footer-text-font-family: tree-grid-header-text-font-family,
tree-grid-footer-text-font-size: tree-grid-header-text-font-size,
tree-grid-footer-text-font-weight: tree-grid-header-text-font-weight,
tree-grid-footer-text-line-height: tree-grid-header-text-line-height,

tree-grid-row-background: color-white,
tree-grid-row-even-background: color-white,
tree-grid-row-hover-background: color-white,
tree-grid-row-text-color: text-dark-color,
tree-grid-row-text-font-family: text-paragraph-font-family,
tree-grid-row-text-font-size: text-paragraph-font-size,
tree-grid-row-text-font-weight: text-paragraph-font-weight,
tree-grid-row-text-line-height: text-paragraph-line-height,

tree-grid-sort-header-button-background: transparent,
tree-grid-sort-header-button-border: none,
tree-grid-sort-header-button-padding: 0,
tree-grid-sort-header-button-font-weight: bold,
tree-grid-header-bg: color-bg,
tree-grid-footer-bg: color-bg,
tree-grid-row-bg: color-bg,
tree-grid-row-bg-even: color-bg,
tree-grid-row-hover-bg: color-bg,
tree-grid-sort-header-button-color: color-fg-text,
tree-grid-icon-color: color-fg-text,

icon-font-size: 1.25rem,
icon-line-height: 1,
Expand Down

0 comments on commit 5fac736

Please sign in to comment.