Skip to content

Commit dc72451

Browse files
CatalinB7CatalinB7
committed
feat(grid): increase target area for resize-handle
1 parent 8d8e17f commit dc72451

File tree

6 files changed

+52
-43
lines changed

6 files changed

+52
-43
lines changed

‎projects/angular/components/ui-grid/src/_ui-grid-variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ $ui-grid-cell-bottom-border: 1px solid $ui-grid-border-color;
44
$ui-grid-row-hover-color: var(--color-hover, #e9f1fa);
55
$header-background-color: var(--color-background-secondary, #f4f5f7);
66
$grid-actions-box-shadow: var(--color-background, #ffffff);
7-
$preview-selection-color: var(--color-primary, #0067df);
7+
$highlighted-entity-color: var(--color-primary, #0067df);

‎projects/angular/components/ui-grid/src/_ui-grid.theme.scss

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,21 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
2828
$ui-grid-elevation-color: rgb(0, 0, 0);
2929

3030
$_hover-base: mix($ui-grid-background, invert($ui-grid-background), 97%);
31-
31+
$resize-handle-hover-color: mix($ui-grid-resize-hover-color, $ui-grid-background, 40%);
3232
%resize-handle-default {
3333
background-color: $header-background-color;
3434
}
3535

3636
%resize-handle-hover {
37-
background-color: mix($ui-grid-resize-hover-color, $ui-grid-background, 40%);
37+
background: linear-gradient(to right, $header-background-color 0%, $header-background-color 66.67%, $resize-handle-hover-color 66.67%, $resize-handle-hover-color 100%);
38+
}
39+
40+
%resize-handle-focus {
41+
background: linear-gradient(to right, $ui-grid-row-hover-color 0%, $ui-grid-row-hover-color 66.67%, $resize-handle-hover-color 66.67%, $resize-handle-hover-color 100%);
3842
}
3943

4044
%resize-handle-resizing {
41-
background-color: $ui-grid-resize-hover-color;
45+
background: linear-gradient(to right, $ui-grid-row-hover-color 0%, $ui-grid-row-hover-color 66.67%, $ui-grid-resize-hover-color 66.67%, $ui-grid-resize-hover-color 100%);
4246
}
4347

4448
ui-grid {
@@ -90,8 +94,11 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
9094

9195
.ui-grid-action-cell-container {
9296
background-color: $ui-grid-cell-background-color;
93-
transition: box-shadow $ui-grid-default-transition, $ui-grid-background-transition !important;
94-
opacity: 0;
97+
transition: $ui-grid-background-transition;
98+
99+
&.sticky-grid-action-cell-container {
100+
opacity: 0;
101+
}
95102
}
96103

97104
.ui-grid {
@@ -146,7 +153,6 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
146153
}
147154

148155
@extend %resize-handle-default;
149-
transition: $ui-grid-background-transition;
150156

151157
&:hover {
152158
@extend %resize-handle-hover;
@@ -159,7 +165,7 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
159165

160166
&.ui-grid-state-resizing {
161167
opacity: 1;
162-
background: linear-gradient(to right, transparent 0%, transparent 25%, $ui-grid-resize-hover-color 25%, $ui-grid-resize-hover-color 75%, transparent 75%, transparent 100%);
168+
background: linear-gradient(to right, $ui-grid-row-hover-color 0%, $ui-grid-row-hover-color 83.33%, $ui-grid-resize-hover-color 83.33%, $ui-grid-resize-hover-color 100%);
163169
}
164170
}
165171

@@ -177,15 +183,13 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
177183
&-header-cell {
178184
&:hover {
179185
+ .ui-grid-resize-handle-container .ui-grid-resize-handle:not(.ui-grid-state-resizing) {
180-
transition-delay: $ui-grid-resize-handle-hover-delay;
181186
@extend %resize-handle-hover;
182187
}
183188
}
184189

185190
&:focus {
186-
+ .ui-grid-resize-handle-container .ui-grid-resize-handle {
187-
background: $ui-grid-resize-focus-color;
188-
@extend %resize-handle-resizing;
191+
+ .ui-grid-resize-handle-container .ui-grid-resize-handle:not(.ui-grid-state-resizing) {
192+
@extend %resize-handle-focus;
189193
}
190194
}
191195
}
@@ -250,6 +254,7 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
250254
.ui-grid-action-cell-container {
251255
opacity: 1;
252256
background-color: $ui-grid-row-hover-color;
257+
transition: box-shadow 0.2s 0.2s, $ui-grid-background-transition;
253258
}
254259
}
255260
}

‎projects/angular/components/ui-grid/src/body/ui-grid-column.directive.ts

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,11 +63,7 @@ export class UiGridColumnDirective<T> implements OnChanges, OnDestroy {
6363
if (isNaN(width)) { return; }
6464

6565
this._width = width * 10;
66-
67-
if (this.isSticky && !this._alreadySetMinWidth) {
68-
this._alreadySetMinWidth = true;
69-
this.minWidth = this._width * STICKY_MIN_WIDTH_FRACTION;
70-
}
66+
this.minWidth = this._width * STICKY_MIN_WIDTH_FRACTION;
7167
}
7268

7369
/**
@@ -160,7 +156,6 @@ export class UiGridColumnDirective<T> implements OnChanges, OnDestroy {
160156
this.disableToggle = this.disableToggle || value;
161157
if (value) {
162158
this.visible = true;
163-
this._alreadySetMinWidth = true;
164159
this.minWidth = this._width * STICKY_MIN_WIDTH_FRACTION;
165160
}
166161
}
@@ -272,7 +267,6 @@ export class UiGridColumnDirective<T> implements OnChanges, OnDestroy {
272267
private _primary = false;
273268
private _isSticky = false;
274269
private _disableToggle = false;
275-
private _alreadySetMinWidth = false;
276270
/**
277271
* @ignore
278272
*/

‎projects/angular/components/ui-grid/src/ui-grid.component.html

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -207,13 +207,15 @@
207207
</div>
208208

209209
<div *ngIf="!isProjected && column.resizeable && !useCardView && (!last || columns.freeColumns.length > 0)"
210+
[class.last-sticky-handle-container]="last && columns.freeColumns.length > 0"
210211
class="ui-grid-resize-handle-container ui-grid-sticky-element">
211-
<div *ngIf="isScrollable && last && columns.freeColumns.length > 0"
212-
class="ui-grid-sticky-boundary"></div>
212+
213213
<div [class.ui-grid-state-resizing]="column === resizeManager.current?.column"
214214
(mousedown)="resizeManager.startResize($event, column, columnIndex)"
215215
class="ui-grid-resize-handle">
216216
</div>
217+
<div *ngIf="isScrollable && last && columns.freeColumns.length > 0"
218+
class="ui-grid-sticky-boundary"></div>
217219
</div>
218220
</ng-container>
219221
</div>
@@ -518,12 +520,12 @@
518520

519521
<div class="ui-grid-cell-resizing-border-container ui-grid-sticky-element"
520522
[class.ui-grid-last-resize-handle-container]="lastColumn && renderedColumns.freeColumns.length > 0">
521-
<div *ngIf="lastColumn && renderedColumns.freeColumns.length > 0"
522-
class="ui-grid-sticky-boundary"></div>
523523
<div *ngIf="!isProjected && column.directive.resizeable && !useCardView"
524524
[class.ui-grid-state-resizing]="column.directive === resizeManager.current?.column"
525525
class="ui-grid-cell-resizing-border">
526526
</div>
527+
<div *ngIf="lastColumn && renderedColumns.freeColumns.length > 0"
528+
class="ui-grid-sticky-boundary"></div>
527529
</div>
528530
</ng-container>
529531
</div>
@@ -574,7 +576,8 @@
574576
[class.ui-grid-sticky-element]="isScrollable"
575577
role="gridcell"
576578
class="ui-grid-cell ui-grid-action-cell ui-grid-feature-cell">
577-
<div class="ui-grid-action-cell-container">
579+
<div [class.sticky-grid-action-cell-container]="isScrollable"
580+
class="ui-grid-action-cell-container">
578581
<ng-container *ngTemplateOutlet="actions.html ?? null; context: {
579582
data: row,
580583
index: index

‎projects/angular/components/ui-grid/src/ui-grid.component.scss

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ ui-grid {
1414
$ui-grid-row-horizontal-padding: 24px;
1515
$ui-feature-cell-width: 50px;
1616
$ui-row-border-width: 1px;
17-
$ui-header-resize-handle-width: 6px; //TODO: set handle target area to 18px
18-
$ui-cell-resizing-border-width: 6px;
17+
$ui-header-resize-handle-width: 18px;
1918
$ui-grid-default-spacing: 5px;
2019
$ui-border-radius: 4px;
2120
$ui-grid-button-size: 40px;
@@ -431,11 +430,15 @@ ui-grid {
431430
}
432431

433432
.ui-grid-resize-handle-container {
434-
background: $header-background-color;
433+
background-color: $header-background-color;
435434
}
436435

437436
.ui-grid-header-cell {
438437
background-color: $header-background-color;
438+
439+
&.ui-grid-state-resizing, &:focus, &.cdk-focused {
440+
background-color: $ui-grid-row-hover-color;
441+
}
439442
}
440443
}
441444

@@ -466,7 +469,7 @@ ui-grid {
466469

467470
&.highlighted-row {
468471
> div:first-of-type {
469-
box-shadow: inset 4px 0px 0px $preview-selection-color;
472+
box-shadow: inset 4px 0px 0px $highlighted-entity-color;
470473
}
471474
}
472475
}
@@ -500,6 +503,10 @@ ui-grid {
500503
flex: 0 0 $ui-header-resize-handle-width;
501504
height: $ui-grid-header-row-height + 1;
502505

506+
&.last-sticky-handle-container {
507+
flex: 0 0 ($ui-header-resize-handle-width + 1);
508+
}
509+
503510
.ui-grid-resize-handle {
504511
position: absolute;
505512
top: 0;
@@ -517,17 +524,17 @@ ui-grid {
517524
}
518525
}
519526

520-
.ui-grid-last-resize-handle-container {
521-
flex: 0 0 $ui-header-resize-handle-width + $sticky-boundary-width;
522-
}
523-
524527
.ui-grid-cell-resizing-border-container {
525528
position: relative;
526-
flex: 0 0 $ui-cell-resizing-border-width;
529+
flex: 0 0 $ui-header-resize-handle-width;
527530
height: $ui-grid-row-height + $ui-row-border-width - 2;
528531

532+
&.ui-grid-last-resize-handle-container {
533+
flex: 0 0 $ui-header-resize-handle-width + $sticky-boundary-width;
534+
}
535+
529536
.ui-grid-cell-resizing-border {
530-
width: $ui-cell-resizing-border-width;
537+
width: $ui-header-resize-handle-width;
531538
height: $ui-grid-row-height;
532539
}
533540

@@ -655,6 +662,10 @@ ui-grid {
655662
.ui-grid-cell {
656663
height: $ui-grid-row-height - $ui-row-border-width;
657664
background: $ui-grid-cell-background-color;
665+
666+
&.ui-grid-state-resizing {
667+
background: $ui-grid-row-hover-color;
668+
}
658669
}
659670

660671
.sticky-columns-cell-container {

‎projects/angular/components/ui-grid/src/ui-grid.component.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -520,9 +520,9 @@ export class UiGridComponent<T extends IGridDataEntry>
520520
this._columns = value;
521521

522522
if (this.isScrollable) {
523-
this._stickyColumns = value.filter(c => c.isSticky);
523+
const stickyColumns = value.filter(c => c.isSticky);
524524
const freeColumns = value.filter(c => !c.isSticky);
525-
this._columns.reset([...this._stickyColumns, ...freeColumns]);
525+
this._columns.reset([...stickyColumns, ...freeColumns]);
526526
}
527527
}
528528

@@ -801,10 +801,9 @@ export class UiGridComponent<T extends IGridDataEntry>
801801
distinctUntilChanged(),
802802
tap(() => queueMicrotask(() => this._cd.detectChanges())),
803803
),
804-
((this.footer
804+
defer(() => this.footer
805805
? this.footer.pageChange
806-
: EMPTY) as Observable<{ sum: number; widthMap: Record<string, number> }>
807-
).pipe(map(() => this.stickyColumnsWidths!)),
806+
: EMPTY).pipe(map(() => this.stickyColumnsWidths!)),
808807
)
809808
: EMPTY);
810809

@@ -821,7 +820,6 @@ export class UiGridComponent<T extends IGridDataEntry>
821820
private _resizeSubscription$: null | Subscription = null;
822821
private _expandedEntries: T[] = [];
823822
private _columns!: QueryList<UiGridColumnDirective<T>>;
824-
private _stickyColumns: UiGridColumnDirective<T>[] = [];
825823
private _virtualScroll = false;
826824
/**
827825
* @ignore
@@ -1150,9 +1148,7 @@ export class UiGridComponent<T extends IGridDataEntry>
11501148
onRowClick(event: Event, row: T) {
11511149
if ((event.target instanceof Element) &&
11521150
!EXCLUDED_ROW_SELECTION_ELEMENTS.find(el => (event.target as Element).closest(el))) {
1153-
if (this.isScrollable) {
1154-
this.highlightedEntityId$.next(row.id);
1155-
}
1151+
this.highlightedEntityId$.next(row.id);
11561152

11571153
if (this.shouldSelectOnRowClick) {
11581154
if (this.singleSelectable) {

0 commit comments

Comments
 (0)