Skip to content

Commit 9bdf7f1

Browse files
dan-mirescudan-mirescu
committed
fix(grid): show border for column resize
1 parent 9620977 commit 9bdf7f1

File tree

3 files changed

+147
-82
lines changed

3 files changed

+147
-82
lines changed

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

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ $ui-grid-default-transition: 200ms cubic-bezier(0.35, 0, 0.25, 1);
55
$ui-grid-background-transition: background-color $ui-grid-default-transition;
66
$ui-grid-opacity-transition: opacity $ui-grid-default-transition;
77

8-
%resize-anchor-hover {
9-
opacity: 0.9;
8+
%resize-anchor-border-hover {
9+
opacity: 1;
1010
}
1111

12-
%resize-anchor-default {
13-
opacity: 0.1;
12+
%resize-anchor-border-default {
13+
opacity: 0;
1414
}
1515

1616
@mixin ui-grid-theme($theme) {
@@ -19,6 +19,10 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
1919
$background: map-get($theme, "background");
2020
$accent-palette: map-get($theme, "accent");
2121

22+
$primary-palette: map-get($theme, "primary");
23+
$primary-color: map-get($primary-palette, "default");
24+
25+
2226
$ui-grid-primary-text-color: map-get($foreground, "text");
2327
$ui-grid-secondary-text-color: map-get($foreground, "secondary-text");
2428

@@ -61,8 +65,8 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
6165

6266
&.ui-grid-state-resizing {
6367
.ui-grid-header-cell:not(.ui-grid-state-resizing) {
64-
.ui-grid-resize-anchor {
65-
@extend %resize-anchor-default;
68+
.ui-grid-resize-anchor-border {
69+
@extend %resize-anchor-border-default;
6670
}
6771
}
6872
}
@@ -103,18 +107,31 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
103107
}
104108
}
105109

110+
&-cell {
111+
.ui-grid-resizing-border {
112+
background: $primary-color;
113+
}
114+
}
115+
106116
&-cell,
107117
&-header-cell {
108118
background-color: transparent;
109119
transition: $ui-grid-background-transition;
110120
}
111121

112-
&-resize-anchor {
113-
@extend %resize-anchor-default;
122+
&-resize-anchor-border {
123+
@extend %resize-anchor-border-default;
124+
background: $primary-color;
114125
transition: $ui-grid-opacity-transition;
126+
}
115127

116-
&:hover {
117-
@extend %resize-anchor-hover;
128+
&-resize-anchor-border:hover {
129+
@extend %resize-anchor-border-hover;
130+
}
131+
132+
&-resize-anchor {
133+
&:hover ~ .ui-grid-resize-anchor-border {
134+
@extend %resize-anchor-border-hover;
118135
}
119136
}
120137

@@ -128,16 +145,9 @@ $ui-grid-opacity-transition: opacity $ui-grid-default-transition;
128145
outline: none;
129146
}
130147

131-
&-header-cell:focus {
132-
.ui-grid-resize-anchor {
133-
opacity: 0.5;
134-
}
135-
}
136-
137-
&-header-cell:hover,
138148
&-state-resizing {
139-
.ui-grid-resize-anchor {
140-
@extend %resize-anchor-hover;
149+
.ui-grid-resize-anchor-border {
150+
@extend %resize-anchor-border-hover;
141151
}
142152
}
143153

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

Lines changed: 63 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -191,18 +191,14 @@
191191
</div>
192192
</div>
193193

194-
<div *ngIf="column.resizeable && !last && !useCardView"
195-
(mousedown)="resizeManager.startResize($event, column, columnIndex)"
196-
class="ui-grid-resize-anchor">
197-
<mat-icon>
198-
<svg xmlns="http://www.w3.org/2000/svg"
199-
width="24"
200-
height="24">
201-
<path
202-
d="M11 18l-2 2-2-2 2-2 2 2zm-2-8l-2 2 2 2 2-2-2-2zm0-6L7 6l2 2 2-2-2-2zm6 4l2-2-2-2-2 2 2 2zm0 2l-2 2 2 2 2-2-2-2zm0 6l-2 2 2 2 2-2-2-2z" />
203-
</svg>
204-
</mat-icon>
205-
</div>
194+
<ng-container *ngIf="column.resizeable && !last && !useCardView">
195+
<div (click)="sortManager.changeSort(column)"
196+
class="ui-grid-resize-anchor">
197+
</div>
198+
<div (mousedown)="resizeManager.startResize($event, column, columnIndex)"
199+
class="ui-grid-resize-anchor-border">
200+
</div>
201+
</ng-container>
206202
</div>
207203

208204
<div *ngIf="virtualScroll"
@@ -336,28 +332,28 @@
336332
role="gridcell">
337333
<ng-container *ngLet="disableSelectionByEntry(row) as disabledReason">
338334
<div *ngIf="selectable && !singleSelectable"
339-
class="ui-grid-mobile-feature-container ui-grid-mobile-refresh-container">
335+
class="ui-grid-mobile-feature-container ui-grid-mobile-refresh-container">
340336
<mat-checkbox (click)="checkShift($event)"
341-
(keyup.shift.space)="checkShift($event)"
342-
(keyup.space)="checkShift($event)"
343-
(change)="handleSelection(index, row)"
344-
[checked]="selectionManager.isSelected(row)"
345-
[indeterminate]="selectionManager.isIndeterminate(row)"
346-
[matTooltip]="disabledReason || checkboxTooltip(row)"
347-
[aria-label]="disabledReason || checkboxTooltip(row)"
348-
[disabled]="!!disabledReason"
349-
tabindex="0">
337+
(keyup.shift.space)="checkShift($event)"
338+
(keyup.space)="checkShift($event)"
339+
(change)="handleSelection(index, row)"
340+
[checked]="selectionManager.isSelected(row)"
341+
[indeterminate]="selectionManager.isIndeterminate(row)"
342+
[matTooltip]="disabledReason || checkboxTooltip(row)"
343+
[aria-label]="disabledReason || checkboxTooltip(row)"
344+
[disabled]="!!disabledReason"
345+
tabindex="0">
350346
</mat-checkbox>
351347
</div>
352348
<div *ngIf="singleSelectable"
353-
class="ui-grid-mobile-feature-container ui-grid-mobile-refresh-container">
349+
class="ui-grid-mobile-feature-container ui-grid-mobile-refresh-container">
354350
<mat-radio-group>
355351
<mat-radio-button [value]="row.id"
356-
[checked]="selectionManager.isSelected(row)"
357-
[disabled]="disabledReason"
358-
[matTooltip]="disabledReason || checkboxTooltip(row)"
359-
[aria-label]="disabledReason || checkboxTooltip(row)"
360-
(change)="rowSelected(row)"></mat-radio-button>
352+
[checked]="selectionManager.isSelected(row)"
353+
[disabled]="disabledReason"
354+
[matTooltip]="disabledReason || checkboxTooltip(row)"
355+
[aria-label]="disabledReason || checkboxTooltip(row)"
356+
(change)="rowSelected(row)"></mat-radio-button>
361357
</mat-radio-group>
362358
</div>
363359
</ng-container>
@@ -378,29 +374,29 @@
378374
<ng-container *ngLet="disableSelectionByEntry(row) as disabledReason">
379375
<mat-radio-group *ngIf="singleSelectable; else multiSelectable">
380376
<mat-radio-button [value]="row.id"
381-
[checked]="selectionManager.isSelected(row)"
382-
[disabled]="disabledReason"
383-
[matTooltip]="disabledReason || checkboxTooltip(row)"
384-
[aria-label]="disabledReason || checkboxTooltip(row)"
385-
(change)="rowSelected(row)"></mat-radio-button>
377+
[checked]="selectionManager.isSelected(row)"
378+
[disabled]="disabledReason"
379+
[matTooltip]="disabledReason || checkboxTooltip(row)"
380+
[aria-label]="disabledReason || checkboxTooltip(row)"
381+
(change)="rowSelected(row)"></mat-radio-button>
386382
</mat-radio-group>
387383
<ng-template #multiSelectable>
388384
<mat-checkbox (click)="checkShift($event)"
389-
(keyup.shift.space)="checkShift($event)"
390-
(keyup.space)="checkShift($event)"
391-
(change)="handleSelection(index, row)"
392-
[checked]="selectionManager.isSelected(row)"
393-
[indeterminate]="selectionManager.isIndeterminate(row)"
394-
[matTooltip]="disabledReason || checkboxTooltip(row)"
395-
[aria-label]="disabledReason || checkboxTooltip(row)"
396-
[disabled]="disabledReason"
397-
tabindex="0">
385+
(keyup.shift.space)="checkShift($event)"
386+
(keyup.space)="checkShift($event)"
387+
(change)="handleSelection(index, row)"
388+
[checked]="selectionManager.isSelected(row)"
389+
[indeterminate]="selectionManager.isIndeterminate(row)"
390+
[matTooltip]="disabledReason || checkboxTooltip(row)"
391+
[aria-label]="disabledReason || checkboxTooltip(row)"
392+
[disabled]="disabledReason"
393+
tabindex="0">
398394
</mat-checkbox>
399395
</ng-template>
400396
</ng-container>
401397
</div>
402398

403-
<ng-container *ngFor="let column of renderedColumns$ | async">
399+
<ng-container *ngFor="let column of renderedColumns$ | async; let lastColumn = last">
404400
<div [class.ui-grid-primary]="column.directive.primary"
405401
[class.ui-grid-secondary]="!column.directive.primary"
406402
[class.ui-grid-state-resizing]="column.directive === resizeManager.current?.column"
@@ -410,17 +406,19 @@
410406
[attr.role]="column.role"
411407
class="ui-grid-cell">
412408
<div *ngIf="isProjected"
413-
[matTooltip]="column.directive.title ?? ''"
414-
[matTooltipDisabled]="resizeManager.isResizing"
415-
class="ui-grid-cell-mobile-title">{{column.directive.title}}</div>
416-
<div class="ui-grid-cell-content">
417-
<ng-container *ngTemplateOutlet="column.directive.html || textCellTemplate; context: {
418-
data: row,
419-
index: index,
420-
property: column.directive.property
421-
}">
422-
</ng-container>
423-
</div>
409+
[matTooltip]="column.directive.title ?? ''"
410+
[matTooltipDisabled]="resizeManager.isResizing"
411+
class="ui-grid-cell-mobile-title">{{column.directive.title}}</div>
412+
413+
<div *ngIf="!isProjected" class="ui-grid-cell-inner">
414+
<ng-container *ngTemplateOutlet="uiGridCellContent; context: { column, row, index }"></ng-container>
415+
</div>
416+
417+
<ng-container *ngIf="isProjected">
418+
<ng-container *ngTemplateOutlet="uiGridCellContent; context: { column, row, index }"></ng-container>
419+
</ng-container>
420+
421+
<div *ngIf="!isProjected && column.directive.resizeable && !lastColumn && !useCardView" class="ui-grid-resizing-border"></div>
424422
</div>
425423
</ng-container>
426424

@@ -460,6 +458,17 @@
460458
</div>
461459
</ng-template>
462460

461+
<ng-template #uiGridCellContent let-column="column" let-row="row" let-index="index">
462+
<div class="ui-grid-cell-content">
463+
<ng-container *ngTemplateOutlet="column.directive.html || textCellTemplate; context: {
464+
data: row,
465+
index: index,
466+
property: column.directive.property
467+
}">
468+
</ng-container>
469+
</div>
470+
</ng-template>
471+
463472
<ng-template #textCellTemplate
464473
let-row="data"
465474
let-property="property">

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

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,16 @@ ui-grid {
1313
$ui-grid-row-horizontal-padding: 24px;
1414
$ui-feature-cell-width: 50px;
1515
$ui-row-border-width: 1px;
16-
$ui-header-resize-handle-width: 15px;
17-
$ui-grid-default-spacing: 5px;
16+
$ui-header-resize-border-width: 6px;
17+
$ui-header-resize-anchor-width: 24px;
18+
$ui-grid-default-spacing: 10px;
1819
$ui-border-radius: 4px;
1920
$ui-grid-button-size: 40px;
2021
$ui-grid-main-font-size: 13.5px;
2122
$ui-grid-secondary-font-size: 12px;
2223
$ui-grid-action-buttons-spacing: 16px;
24+
$ui-grid-resize-border-width: 3px;
25+
$ui-grid-resize-border-margin-right: 1px;
2326

2427
position: relative;
2528
display: block;
@@ -323,13 +326,18 @@ ui-grid {
323326
}
324327

325328
&-resize-anchor {
329+
position: absolute;
330+
right: $ui-header-resize-border-width;
326331
height: 100%;
327-
width: $ui-header-resize-handle-width + $ui-grid-default-spacing;
332+
width: $ui-header-resize-anchor-width;
333+
}
334+
335+
&-resize-anchor-border {
336+
position: absolute;
337+
right: 0;
328338
cursor: col-resize;
329-
justify-content: center;
330-
display: flex;
331-
align-items: center;
332-
margin-right: $ui-grid-default-spacing;
339+
width: $ui-header-resize-border-width;
340+
height: 100%;
333341
}
334342

335343
&-dropdown-filter {
@@ -365,7 +373,7 @@ ui-grid {
365373
display: block;
366374

367375
.ui-grid-header-title {
368-
width: calc(100% - #{$ui-header-resize-handle-width + $ui-grid-default-spacing});
376+
width: calc(100% - #{$ui-header-resize-border-width + $ui-grid-default-spacing});
369377
height: 100%;
370378
display: inline-flex;
371379
align-items: center;
@@ -438,13 +446,44 @@ ui-grid {
438446
}
439447
}
440448

449+
.ui-grid-cell {
450+
justify-content: space-between;
451+
452+
.ui-grid-cell-inner {
453+
overflow: hidden;
454+
display: flex;
455+
flex: 1;
456+
flex-basis: auto;
457+
word-wrap: break-word;
458+
align-items: center;
459+
height: 100%;
460+
}
461+
462+
.ui-grid-resizing-border {
463+
flex: 0 0 $ui-grid-resize-border-width;
464+
margin-right: $ui-grid-resize-border-margin-right;
465+
height: $ui-grid-row-height + $ui-row-border-width;
466+
visibility: hidden;
467+
}
468+
469+
&.ui-grid-state-resizing {
470+
.ui-grid-resizing-border {
471+
visibility: visible;
472+
}
473+
}
474+
}
475+
476+
.ui-grid-header-cell {
477+
overflow: hidden;
478+
position: relative;
479+
}
480+
441481
.ui-grid-cell,
442482
.ui-grid-header-cell {
443483
flex: 1;
444484
flex-basis: auto;
445485
display: flex;
446486
align-items: center;
447-
overflow: hidden;
448487
word-wrap: break-word;
449488

450489
&:not(.ui-grid-feature-cell):not(:first-child) {
@@ -473,6 +512,13 @@ ui-grid {
473512
&.ui-grid-refresh-cell,
474513
&.ui-grid-checkbox-cell {
475514
min-width: $ui-feature-cell-width;
515+
}
516+
517+
&.ui-grid-checkbox-cell {
518+
justify-content: center;
519+
}
520+
521+
&.ui-grid-checkbox-cell .ui-grid-cell-inner {
476522
justify-content: center;
477523
}
478524

0 commit comments

Comments
 (0)