Skip to content

Commit 4c1643b

Browse files
kdinevkdinev
authored
Merge pull request #5814 from IgniteUI/bpenkov/fix-5764
Move padding on the default template
2 parents 57b9405 + acae88f commit 4c1643b

File tree

9 files changed

+98
-63
lines changed

9 files changed

+98
-63
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@
8585

8686
@include scale-in-out($start-scale: .9);
8787

88+
// If updating the WIDTH of the checkbox here, please update it in the grid theme as well.
89+
// It is under the name of $cbx-size
8890
$size: em(20px);
8991
$checkbox-radius: $size / 2;
9092

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,10 @@
331331
@extend %grid-cell-text !optional;
332332
}
333333

334+
@include e(cbx-padding) {
335+
@extend %cbx-padding !optional;
336+
}
337+
334338
@include e(cbx-selection) {
335339
@extend %grid__cbx-selection !optional;
336340
}
@@ -519,8 +523,8 @@
519523
@extend %igx-grid__drag-indicator--cosy !optional;
520524
}
521525

522-
@include e(cbx-selection) {
523-
@extend %grid__cbx-selection--cosy !optional;
526+
@include e(cbx-padding) {
527+
@extend %cbx-padding--cosy !optional;
524528
}
525529

526530
@include e(cbx-selection, $m: push) {
@@ -619,8 +623,8 @@
619623
@extend %igx-grid__drag-indicator--compact !optional;
620624
}
621625

622-
@include e(cbx-selection) {
623-
@extend %grid__cbx-selection--compact !optional;
626+
@include e(cbx-padding) {
627+
@extend %cbx-padding--compact !optional;
624628
}
625629

626630
@include e(cbx-selection, $m: push) {

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -503,7 +503,7 @@
503503
@include igx-root-css-vars($theme);
504504

505505
$palette: map-get($theme, 'palette');
506-
506+
$cbx-size: rem(20px);
507507
$grid-shadow: --var($theme, 'grid-shadow');
508508

509509
$grid-caption-fs: rem(20px);
@@ -534,6 +534,16 @@
534534
compact: 0 rem(12px)
535535
);
536536

537+
$grid-cbx-padding: (
538+
comfortable: rem(24px),
539+
cosy: rem(16px),
540+
compact: rem(12px)
541+
);
542+
543+
$cbx-padding: map-get($grid-cbx-padding, 'comfortable');
544+
$cbx-padding-cosy: map-get($grid-cbx-padding, 'cosy');
545+
$cbx-padding-compact: map-get($grid-cbx-padding, 'compact');
546+
537547
$grid-header-height: (
538548
comfortable: rem(50px),
539549
cosy: rem(40px),
@@ -1379,20 +1389,27 @@
13791389
display: flex;
13801390
justify-content: center;
13811391
align-items: center;
1382-
padding: map-get($grid-header-padding, 'comfortable');
13831392
border-right: --var($theme, 'header-border-width')
13841393
--var($theme, 'header-border-style')
13851394
--var($theme, 'header-border-color');
13861395
background: inherit;
13871396
z-index: 4;
13881397
}
13891398

1390-
%grid__cbx-selection--cosy {
1391-
padding: map-get($grid-header-padding, 'cosy');
1399+
%cbx-padding {
1400+
display: flex;
1401+
align-items: center;
1402+
justify-content: center;
1403+
// The min-width here plays the role of padding because of IE11
1404+
min-width: calc(#{$cbx-size} + (#{$cbx-padding} * 2));
13921405
}
13931406

1394-
%grid__cbx-selection--compact {
1395-
padding: map-get($grid-header-padding, 'compact');
1407+
%cbx-padding--cosy {
1408+
min-width: calc(#{$cbx-size} + (#{$cbx-padding-cosy} * 2));
1409+
}
1410+
1411+
%cbx-padding--compact {
1412+
min-width: calc(#{$cbx-size} + (#{$cbx-padding-compact} * 2));
13961413
}
13971414

13981415
%grid__resize-handle {

‎projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<ng-template *ngTemplateOutlet="
1212
this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
1313
context: { $implicit: {
14-
index: this.grid.groupingExpressions.length > 0 ? this.grid.filteredSortedData.indexOf(this.rowData) :
14+
index: this.grid.groupingExpressions.length > 0 ? this.grid.filteredSortedData.indexOf(this.rowData) :
1515
this.index + this.grid.page * this.grid.perPage,
1616
rowID: rowID, selected: selected }}">
1717
</ng-template>
@@ -112,12 +112,14 @@
112112
</ng-container>
113113

114114
<ng-template #rowSelectorBaseTemplate>
115-
<igx-checkbox
116-
[checked]="selected"
117-
[readonly]="true"
118-
[disabled]="deleted"
119-
disableRipple="true"
120-
[disableTransitions]="grid.disableTransitions"
121-
[aria-label]="rowCheckboxAriaLabel">
122-
</igx-checkbox>
115+
<div class="igx-grid__cbx-padding">
116+
<igx-checkbox
117+
[checked]="selected"
118+
[readonly]="true"
119+
[disabled]="deleted"
120+
disableRipple="true"
121+
[disableTransitions]="grid.disableTransitions"
122+
[aria-label]="rowCheckboxAriaLabel">
123+
</igx-checkbox>
124+
</div>
123125
</ng-template>

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -252,15 +252,17 @@
252252
</ng-template>
253253

254254
<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
255-
<igx-checkbox
256-
[readonly]="true"
257-
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
258-
disableRipple="true"
259-
[ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
260-
[indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
261-
[aria-label]="headSelectorBaseAriaLabel"
262-
#headerCheckbox>
263-
</igx-checkbox>
255+
<div class="igx-grid__cbx-padding">
256+
<igx-checkbox
257+
[readonly]="true"
258+
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
259+
disableRipple="true"
260+
[ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
261+
[indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
262+
[aria-label]="headSelectorBaseAriaLabel"
263+
#headerCheckbox>
264+
</igx-checkbox>
265+
</div>
264266
</ng-template>
265267

266268
<igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -217,15 +217,17 @@
217217
</ng-template>
218218

219219
<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
220-
<igx-checkbox
221-
[readonly]="true"
222-
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
223-
disableRipple="true"
224-
[ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
225-
[indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
226-
[aria-label]="headSelectorBaseAriaLabel"
227-
#headerCheckbox>
228-
</igx-checkbox>
220+
<div class="igx-grid__cbx-padding">
221+
<igx-checkbox
222+
[readonly]="true"
223+
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
224+
disableRipple="true"
225+
[ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
226+
[indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
227+
[aria-label]="headSelectorBaseAriaLabel"
228+
#headerCheckbox>
229+
</igx-checkbox>
230+
</div>
229231
</ng-template>
230232

231233
<igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<ng-template #defaultCollapsedTemplate>
1010
<igx-icon [isActive]='!added' fontSet="material">chevron_right</igx-icon>
1111
</ng-template>
12-
12+
1313
<ng-template #defaultEmptyTemplate>
1414
<igx-icon fontSet="material"></igx-icon>
1515
</ng-template>
@@ -77,12 +77,14 @@
7777
</ng-template>
7878

7979
<ng-template #rowSelectorBaseTemplate>
80-
<igx-checkbox
81-
[readonly]="true"
82-
[checked]="selected"
83-
disableRipple="true"
84-
[disabled]="deleted"
85-
[disableTransitions]="grid.disableTransitions"
86-
[aria-label]="rowCheckboxAriaLabel">
87-
</igx-checkbox>
80+
<div class="igx-grid__cbx-padding">
81+
<igx-checkbox
82+
[readonly]="true"
83+
[checked]="selected"
84+
disableRipple="true"
85+
[disabled]="deleted"
86+
[disableTransitions]="grid.disableTransitions"
87+
[aria-label]="rowCheckboxAriaLabel">
88+
</igx-checkbox>
89+
</div>
8890
</ng-template>

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,14 @@
110110
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
111111
</ng-template>
112112
<ng-template #rowSelectorBaseTemplate>
113-
<igx-checkbox
114-
[readonly]="true"
115-
[checked]="selected"
116-
[disabled]="deleted"
117-
disableRipple="true"
118-
[disableTransitions]="grid.disableTransitions"
119-
[aria-label]="rowCheckboxAriaLabel">
120-
</igx-checkbox>
113+
<div class="igx-grid__cbx-padding">
114+
<igx-checkbox
115+
[readonly]="true"
116+
[checked]="selected"
117+
[disabled]="deleted"
118+
disableRipple="true"
119+
[disableTransitions]="grid.disableTransitions"
120+
[aria-label]="rowCheckboxAriaLabel">
121+
</igx-checkbox>
122+
</div>
121123
</ng-template>

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -192,15 +192,17 @@
192192
</ng-template>
193193

194194
<ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
195-
<igx-checkbox
196-
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
197-
[ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
198-
[readonly]="true"
199-
disableRipple="true"
200-
[indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
201-
[aria-label]="headSelectorBaseAriaLabel"
202-
#headerCheckbox>
203-
</igx-checkbox>
195+
<div class="igx-grid__cbx-padding">
196+
<igx-checkbox
197+
[checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
198+
[ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
199+
[readonly]="true"
200+
disableRipple="true"
201+
[indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
202+
[aria-label]="headSelectorBaseAriaLabel"
203+
#headerCheckbox>
204+
</igx-checkbox>
205+
</div>
204206
</ng-template>
205207

206208
<igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>

0 commit comments

Comments
 (0)