Skip to content

Commit 33a43f5

Browse files
rkaraivanovrkaraivanov
committed
chore(*): Merge upstream master
2 parents 0953faf + 4b7ca7f commit 33a43f5

24 files changed

+1679
-386
lines changed

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

+36
Original file line numberDiff line numberDiff line change
@@ -164,4 +164,40 @@
164164
@extend %grid-cell-display--compact !optional;
165165
}
166166
}
167+
168+
@include e(th-drop-indicator-left) {
169+
@extend %igx-grid__th-drop-indicator-left !optional;
170+
}
171+
172+
@include e(th-drop-indicator-right) {
173+
@extend %igx-grid__th-drop-indicator-right !optional;
174+
}
175+
176+
@include e(th-drop-indicator, $m: active) {
177+
@extend %igx-grid__th-drop-indicator--active !optional;
178+
}
179+
180+
@include e(scroll-on-drag-left) {
181+
@extend %grid__scroll-on-drag-left !optional;
182+
}
183+
184+
@include e(scroll-on-drag-right) {
185+
@extend %grid__scroll-on-drag-right !optional;
186+
}
187+
188+
@include e(scroll-on-drag-pinned) {
189+
@extend %grid__scroll-on-drag-pinned !optional;
190+
}
191+
192+
@include e(drag-ghost-image) {
193+
@extend %grid__drag-ghost-image !optional;
194+
}
195+
196+
@include e(drag-ghost-image-icon) {
197+
@extend %grid__drag-ghost-image-icon !optional;
198+
}
199+
200+
@include e(drag-col-header) {
201+
@extend %igx-grid__drag-col-header !optional;
202+
}
167203
}

‎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

@@ -469,4 +497,110 @@
469497
display: flex;
470498
background: inherit;
471499
}
500+
501+
502+
// Column moving
503+
504+
%igx-grid__th-drop-indicator-left {
505+
position: absolute;
506+
width: 1px;
507+
top: 0;
508+
left: -1px;
509+
height: 100%;
510+
}
511+
512+
513+
%igx-grid__th-drop-indicator-right {
514+
position: absolute;
515+
width: 1px;
516+
top: 0;
517+
right: -1px;
518+
height: 100%;
519+
}
520+
521+
%igx-grid__th-drop-indicator--active {
522+
&%igx-grid__th-drop-indicator-left,
523+
&%igx-grid__th-drop-indicator-right {
524+
border-right: 1px dotted --var($theme, 'drop-indicator-color');
525+
}
526+
527+
&::after,
528+
&::before {
529+
content: '';
530+
position: absolute;
531+
width: 0;
532+
height: 0;
533+
border-style: solid;
534+
left: -4.5px;
535+
}
536+
537+
&::before {
538+
bottom: 0;
539+
border-width: 0 5px 5px;
540+
border-color: transparent transparent --var($theme, 'drop-indicator-color');
541+
}
542+
543+
&::after {
544+
top: 0;
545+
border-width: 5px 5px 0;
546+
border-color: --var($theme, 'drop-indicator-color') transparent transparent;
547+
}
548+
}
549+
550+
%grid__scroll-on-drag-left {
551+
position: absolute;
552+
width: 15px;
553+
top: 0;
554+
left: 0;
555+
height: 100%;
556+
z-index: 25;
557+
}
558+
559+
%grid__scroll-on-drag-right {
560+
position: absolute;
561+
width: 15px;
562+
top: 0;
563+
right: 0;
564+
height: 100%;
565+
z-index: 25;
566+
}
567+
568+
%grid__scroll-on-drag-pinned {
569+
position: absolute;
570+
width: 15px;
571+
height: 100%;
572+
top: 0;
573+
z-index: 25;
574+
}
575+
576+
%grid__drag-ghost-image {
577+
background-color: --var($theme, 'ghost-header-background');
578+
color: --var($theme, 'ghost-header-text-color');
579+
position: absolute;
580+
z-index: 20;
581+
height: auto;
582+
top: -99999px;
583+
left: -99999px;
584+
overflow: visible;
585+
box-shadow: igx-elevation($elevations, 5);
586+
587+
%grid-cell-header-title {
588+
min-width: rem(24px);
589+
}
590+
}
591+
592+
%grid__drag-ghost-image-icon {
593+
color: --var($theme, 'ghost-header-icon-color');
594+
font-size: rem(24px);
595+
margin-right: rem(8);
596+
}
597+
598+
%igx-grid__drag-col-header {
599+
background-color: lighten(--var($theme, 'header-background'), 10%);
600+
601+
%grid-cell-header-title,
602+
%grid-cell-header-icons {
603+
opacity: .4;
604+
}
605+
}
472606
}

0 commit comments

Comments
 (0)