Skip to content

Commit 15be5c2

Browse files
simeonoffsimeonoff
committed
Merge branch 'rkaraivanov/multi-column-headers' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/multi-column-headers
2 parents 56f5da2 + 0c56ec1 commit 15be5c2

26 files changed

+1684
-405
lines changed

‎package-lock.json

+4-18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
"devDependencies": {
4040
"@angular-devkit/build-angular": "~0.6.3",
4141
"@angular-devkit/build-ng-packagr": "~0.6.3",
42-
"@angular-devkit/schematics": "^0.7.0-beta.1",
42+
"@angular-devkit/schematics": "^0.6.8",
4343
"@angular/cli": "~6.0.3",
4444
"@angular/compiler-cli": "^6.0.2",
4545
"@angular/language-service": "^6.0.2",

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

+36
Original file line numberDiff line numberDiff line change
@@ -202,4 +202,40 @@
202202
@extend %grid-cell-display--compact !optional;
203203
}
204204
}
205+
206+
@include e(th-drop-indicator-left) {
207+
@extend %igx-grid__th-drop-indicator-left !optional;
208+
}
209+
210+
@include e(th-drop-indicator-right) {
211+
@extend %igx-grid__th-drop-indicator-right !optional;
212+
}
213+
214+
@include e(th-drop-indicator, $m: active) {
215+
@extend %igx-grid__th-drop-indicator--active !optional;
216+
}
217+
218+
@include e(scroll-on-drag-left) {
219+
@extend %grid__scroll-on-drag-left !optional;
220+
}
221+
222+
@include e(scroll-on-drag-right) {
223+
@extend %grid__scroll-on-drag-right !optional;
224+
}
225+
226+
@include e(scroll-on-drag-pinned) {
227+
@extend %grid__scroll-on-drag-pinned !optional;
228+
}
229+
230+
@include e(drag-ghost-image) {
231+
@extend %grid__drag-ghost-image !optional;
232+
}
233+
234+
@include e(drag-ghost-image-icon) {
235+
@extend %grid__drag-ghost-image-icon !optional;
236+
}
237+
238+
@include e(drag-col-header) {
239+
@extend %igx-grid__drag-col-header !optional;
240+
}
205241
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

+137-3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
99
/// @param {Color} $header-background [null] - The table header background color.
1010
/// @param {Color} $header-text-color [null] - The table header text color.
11+
/// @param {Color} $ghost-header-text-color [null] - The dragged header text color.
12+
/// @param {Color} $ghost-header-icon-color [null] - The dragged header icon color.
13+
/// @param {Color} $ghost-header-background [null] - The dragged header background color.
1114
/// @param {Color} $content-background [null] - The table body background color.
1215
/// @param {Color} $content-text-color [null] - The table body text color.
1316
/// @param {Color} $row-selected-background [null] - The selected row background color.
@@ -35,6 +38,10 @@
3538
$content-background: null,
3639
$content-text-color: null,
3740
41+
$ghost-header-text-color: null,
42+
$ghost-header-icon-color: null,
43+
$ghost-header-background: null,
44+
3845
$row-selected-background: null,
3946
$row-selected-text-color: null,
4047
$row-hover-background: null,
@@ -48,7 +55,8 @@
4855
$cell-selected-text-color: null,
4956
$cell-editing-background: null,
5057
51-
$resize-line-color: null
58+
$resize-line-color: null,
59+
$drop-indicator-color: null
5260
) {
5361
$default-theme: (
5462
name: 'igx-grid',
@@ -59,6 +67,10 @@
5967
content-background: #fff,
6068
content-text-color: igx-color($palette, 'grays', 800),
6169

70+
ghost-header-text-color: igx-color($palette, 'grays', 600),
71+
ghost-header-icon-color: igx-color($palette, 'grays'),
72+
ghost-header-background: #fff,
73+
6274
row-selected-background: hexrgba(igx-color($palette, 'grays', 800)),
6375
row-selected-text-color: igx-contrast-color($palette, 'grays', 900),
6476
row-hover-background: hexrgba(igx-color($palette, 'grays', 100)),
@@ -72,9 +84,19 @@
7284
cell-selected-text-color: igx-contrast-color($palette, 'primary'),
7385
cell-editing-background: #fff,
7486

75-
resize-line-color: igx-color($palette, 'secondary')
87+
resize-line-color: igx-color($palette, 'secondary'),
88+
89+
drop-indicator-color: igx-color($palette, 'secondary')
7690
);
7791

92+
@if not($ghost-header-icon-color) and $ghost-header-background {
93+
$ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07);
94+
}
95+
96+
@if not($ghost-header-text-color) and $ghost-header-background {
97+
$ghost-header-text-color: text-contrast($ghost-header-background);
98+
}
99+
78100
@if not($header-text-color) and $header-background {
79101
$header-text-color: text-contrast($header-background);
80102
}
@@ -109,6 +131,10 @@
109131
header-background: $header-background,
110132
header-text-color: $header-text-color,
111133

134+
ghost-header-text-color: $ghost-header-text-color,
135+
ghost-header-icon-color: $ghost-header-icon-color,
136+
ghost-header-background: $ghost-header-background,
137+
112138
content-background: $content-background,
113139
content-text-color: $content-text-color,
114140

@@ -125,7 +151,9 @@
125151
cell-editing-background: $cell-editing-background,
126152
cell-selected-text-color: $cell-selected-text-color,
127153

128-
resize-line-color: $resize-line-color
154+
resize-line-color: $resize-line-color,
155+
156+
drop-indicator-color: $drop-indicator-color
129157
));
130158
}
131159

@@ -510,4 +538,110 @@
510538
display: flex;
511539
background: inherit;
512540
}
541+
542+
543+
// Column moving
544+
545+
%igx-grid__th-drop-indicator-left {
546+
position: absolute;
547+
width: 1px;
548+
top: 0;
549+
left: -1px;
550+
height: 100%;
551+
}
552+
553+
554+
%igx-grid__th-drop-indicator-right {
555+
position: absolute;
556+
width: 1px;
557+
top: 0;
558+
right: -1px;
559+
height: 100%;
560+
}
561+
562+
%igx-grid__th-drop-indicator--active {
563+
&%igx-grid__th-drop-indicator-left,
564+
&%igx-grid__th-drop-indicator-right {
565+
border-right: 1px dotted --var($theme, 'drop-indicator-color');
566+
}
567+
568+
&::after,
569+
&::before {
570+
content: '';
571+
position: absolute;
572+
width: 0;
573+
height: 0;
574+
border-style: solid;
575+
left: -4.5px;
576+
}
577+
578+
&::before {
579+
bottom: 0;
580+
border-width: 0 5px 5px;
581+
border-color: transparent transparent --var($theme, 'drop-indicator-color');
582+
}
583+
584+
&::after {
585+
top: 0;
586+
border-width: 5px 5px 0;
587+
border-color: --var($theme, 'drop-indicator-color') transparent transparent;
588+
}
589+
}
590+
591+
%grid__scroll-on-drag-left {
592+
position: absolute;
593+
width: 15px;
594+
top: 0;
595+
left: 0;
596+
height: 100%;
597+
z-index: 25;
598+
}
599+
600+
%grid__scroll-on-drag-right {
601+
position: absolute;
602+
width: 15px;
603+
top: 0;
604+
right: 0;
605+
height: 100%;
606+
z-index: 25;
607+
}
608+
609+
%grid__scroll-on-drag-pinned {
610+
position: absolute;
611+
width: 15px;
612+
height: 100%;
613+
top: 0;
614+
z-index: 25;
615+
}
616+
617+
%grid__drag-ghost-image {
618+
background-color: --var($theme, 'ghost-header-background');
619+
color: --var($theme, 'ghost-header-text-color');
620+
position: absolute;
621+
z-index: 20;
622+
height: auto;
623+
top: -99999px;
624+
left: -99999px;
625+
overflow: visible;
626+
box-shadow: igx-elevation($elevations, 5);
627+
628+
%grid-cell-header-title {
629+
min-width: rem(24px);
630+
}
631+
}
632+
633+
%grid__drag-ghost-image-icon {
634+
color: --var($theme, 'ghost-header-icon-color');
635+
font-size: rem(24px);
636+
margin-right: rem(8);
637+
}
638+
639+
%igx-grid__drag-col-header {
640+
background-color: lighten(--var($theme, 'header-background'), 10%);
641+
642+
%grid-cell-header-title,
643+
%grid-cell-header-icons {
644+
opacity: .4;
645+
}
646+
}
513647
}

0 commit comments

Comments
 (0)