fix(grid/tGrid/hGrid): move padding on the default template #5764

IgniteUI · Sep 17, 2019 · 0c7bd5b · 0c7bd5b
1 parent b70d00a
commit 0c7bd5b
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 58 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -331,6 +331,10 @@
         @extend %grid-cell-text !optional;
     }
 
+    @include e(def_tmp_padding) {
+        @extend %grid__def_tmp_padding !optional;
+    }
+
     @include e(cbx-selection) {
         @extend %grid__cbx-selection !optional;
     }
@@ -519,8 +523,8 @@
             @extend %igx-grid__drag-indicator--cosy !optional;
         }
 
-        @include e(cbx-selection) {
-            @extend %grid__cbx-selection--cosy !optional;
+        @include e(def_tmp_padding) {
+            @extend %grid__def_tmp_padding--cosy !optional;
         }
 
         @include e(cbx-selection, $m: push) {
@@ -619,8 +623,8 @@
             @extend %igx-grid__drag-indicator--compact !optional;
         }
 
-        @include e(cbx-selection) {
-            @extend %grid__cbx-selection--compact !optional;
+        @include e(def_tmp_padding) {
+            @extend %grid__def_tmp_padding--compact !optional;
         }
 
         @include e(cbx-selection, $m: push) {

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -1379,19 +1379,22 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: map-get($grid-header-padding, 'comfortable');
         border-right: --var($theme, 'header-border-width')
             --var($theme, 'header-border-style')
             --var($theme, 'header-border-color');
         background: inherit;
         z-index: 4;
     }
 
-    %grid__cbx-selection--cosy {
+    %grid__def_tmp_padding {
+        padding: map-get($grid-header-padding, 'comfortable');
+    }
+
+    %grid__def_tmp_padding--cosy {
         padding: map-get($grid-header-padding, 'cosy');
     }
 
-    %grid__cbx-selection--compact {
+    %grid__def_tmp_padding--compact {
         padding: map-get($grid-header-padding, 'compact');
     }
 

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -112,12 +112,14 @@
 </ng-container>
 
 <ng-template #rowSelectorBaseTemplate>
-    <igx-checkbox
-        [checked]="selected"
-        [readonly]="true"
-        [disabled]="deleted"
-        disableRipple="true"
-        [disableTransitions]="grid.disableTransitions"
-        [aria-label]="rowCheckboxAriaLabel">
-    </igx-checkbox>
+    <div class="igx-grid__def_tmp_padding">
+        <igx-checkbox
+            [checked]="selected"
+            [readonly]="true"
+            [disabled]="deleted"
+            disableRipple="true"
+            [disableTransitions]="grid.disableTransitions"
+            [aria-label]="rowCheckboxAriaLabel">
+        </igx-checkbox>
+    </div>
 </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -252,15 +252,17 @@
 </ng-template>
 
 <ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
-    <igx-checkbox
-        [readonly]="true"
-        [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
-        disableRipple="true"
-        [ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
-        [indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
-        [aria-label]="headSelectorBaseAriaLabel"
-        #headerCheckbox>
-    </igx-checkbox>
+    <div class="igx-grid__def_tmp_padding">
+        <igx-checkbox
+            [readonly]="true"
+            [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
+            disableRipple="true"
+            [ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
+            [indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
+            [aria-label]="headSelectorBaseAriaLabel"
+            #headerCheckbox>
+        </igx-checkbox>
+    </div>
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -217,15 +217,17 @@
 </ng-template>
 
 <ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
-    <igx-checkbox
-        [readonly]="true"
-        [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
-        disableRipple="true"
-        [ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
-        [indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
-        [aria-label]="headSelectorBaseAriaLabel"
-        #headerCheckbox>
-    </igx-checkbox>
+    <div class="igx-grid__def_tmp_padding">
+        <igx-checkbox
+            [readonly]="true"
+            [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
+            disableRipple="true"
+            [ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
+            [indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
+            [aria-label]="headSelectorBaseAriaLabel"
+            #headerCheckbox>
+        </igx-checkbox>
+    </div>
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -77,12 +77,14 @@
 </ng-template>
 
 <ng-template #rowSelectorBaseTemplate>
-    <igx-checkbox
-        [readonly]="true"
-        [checked]="selected"
-        disableRipple="true"
-        [disabled]="deleted"
-        [disableTransitions]="grid.disableTransitions"
-        [aria-label]="rowCheckboxAriaLabel">
-    </igx-checkbox>
+    <div class="igx-grid__def_tmp_padding">
+        <igx-checkbox
+            [readonly]="true"
+            [checked]="selected"
+            disableRipple="true"
+            [disabled]="deleted"
+            [disableTransitions]="grid.disableTransitions"
+            [aria-label]="rowCheckboxAriaLabel">
+        </igx-checkbox>
+    </div>
 </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -110,12 +110,14 @@
     <ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
 </ng-template>
 <ng-template #rowSelectorBaseTemplate>
-    <igx-checkbox
-        [readonly]="true"
-        [checked]="selected"
-        [disabled]="deleted"
-        disableRipple="true"
-        [disableTransitions]="grid.disableTransitions"
-        [aria-label]="rowCheckboxAriaLabel">
-    </igx-checkbox>
+    <div class="igx-grid__def_tmp_padding">
+        <igx-checkbox
+            [readonly]="true"
+            [checked]="selected"
+            [disabled]="deleted"
+            disableRipple="true"
+            [disableTransitions]="grid.disableTransitions"
+            [aria-label]="rowCheckboxAriaLabel">
+        </igx-checkbox>
+    </div>
 </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -192,15 +192,17 @@
 </ng-template>
 
 <ng-template #headSelectorBaseTemplate igxHeadSelector let-context>
-    <igx-checkbox
-        [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
-        [ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
-        [readonly]="true"
-        disableRipple="true"
-        [indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
-        [aria-label]="headSelectorBaseAriaLabel"
-        #headerCheckbox>
-    </igx-checkbox>
+    <div class="igx-grid__def_tmp_padding">
+        <igx-checkbox
+            [checked]="context.selectedCount > 0 && context.totalCount === context.selectedCount"
+            [ngStyle]="{'visibility': isMultiRowSelectionEnabled? 'visible' : 'hidden' }"
+            [readonly]="true"
+            disableRipple="true"
+            [indeterminate]="context.selectedCount > 0 && context.selectedCount !== context.totalCount"
+            [aria-label]="headSelectorBaseAriaLabel"
+            #headerCheckbox>
+        </igx-checkbox>
+    </div>
 </ng-template>
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>