Skip to content

Commit

Permalink
Merge pull request #3385 from IgniteUI/simeonoff/sizing-16.1.x
Browse files Browse the repository at this point in the history
refactor(*): update samples to reflect displayDensity changes
  • Loading branch information
simeonoff authored Sep 15, 2023
2 parents 4ebde9c + 2d056ec commit 45627df
Show file tree
Hide file tree
Showing 176 changed files with 560 additions and 426 deletions.
62 changes: 26 additions & 36 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,13 @@
"bootstrap": "5.3.1",
"file-saver": "^2.0.2",
"hammerjs": "^2.0.8",
"igniteui-angular": "^16.0.17",
"igniteui-angular": "^16.1.0-beta.5",
"igniteui-angular-charts": "^16.1.1",
"igniteui-angular-core": "^16.1.1",
"igniteui-angular-extras": "^16.0.3",
"igniteui-angular-extras": "^16.1.0",
"igniteui-angular-i18n": "^16.0.16",
"igniteui-dockmanager": "^1.13.0",
"igniteui-live-editing": "^2.0.9",
"igniteui-theming": "^2.1.1",
"igniteui-webcomponents": "^4.3.1",
"minireset.css": "0.0.6",
"rxjs": "^6.6.7",
Expand Down Expand Up @@ -103,6 +102,7 @@
"event-stream": "^4.0.1",
"fs-extra": "^8.1.0",
"gulp": "^4.0.2",
"igniteui-theming": "^3.0.3",
"jasmine-core": "~4.2.0",
"karma": "^6.4.2",
"karma-chrome-launcher": "~3.2.0",
Expand All @@ -112,4 +112,4 @@
"typescript": "4.9.5",
"webpack-bundle-analyzer": "^4.5.0"
}
}
}
4 changes: 2 additions & 2 deletions projects/app-crm/src/app/grid-crm/grid-crm.component.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div [ngClass]="{'grid__wrapper': true, 'dark_grid': dark === true }">
<igx-grid #grid1 [igxPreventDocumentScroll]="true" id="grid1" [data]="localData" [height]="'100%'" [moving]="true" [width]="'100%'" [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true">
<igx-grid #grid1 [igxPreventDocumentScroll]="true" id="grid1" [data]="localData" [height]="'100%'" [moving]="true" [width]="'100%'" [rowSelection]="selectionMode" rowHeight="50" [allowFiltering]="true">
<igx-grid-toolbar>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
Expand All @@ -15,7 +15,7 @@
<span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
</div>
<div class="sample-flex-container">
<igx-input-group type="search" class="searchInputGroup" displayDensity="compact">
<igx-input-group type="search">
<igx-prefix>
<igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
<igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear
Expand Down
12 changes: 9 additions & 3 deletions projects/app-crm/src/app/grid-crm/grid-crm.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,16 @@

$crm-input-drop-down: input-group-theme(
$placeholder-color: color($light-palette, 'gray', 500),
$idle-text-color: color($light-palette, 'gray', 900)
$idle-text-color: color($light-palette, 'gray', 900),
$size: sizable(rem(24px), rem(32px), rem(40px))
);

input-group[type="search"] {
--ig-size: var(--ig-size-small);
}

.grid__wrapper {
--ig-size: var(--ig-size-medium);
width: inherit;
position: relative;
height: 100%;
Expand All @@ -59,6 +65,8 @@
}

.avatar-cell {
--ig-size: var(--ig-size-small);

width: 100%;
display: flex;
justify-content: center;
Expand Down Expand Up @@ -197,10 +205,8 @@
box-shadow: none;
}


@include css-vars($crm-input-drop-down);


.sample-flex-container {
.igx-input-group,
.igx-input-group--focused {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<igc-dockmanager #dock class="light-theme dock-m-position" [layout]="docLayout">
<div slot="grid" igxOverlayOutlet style="height: 100%">
<igx-grid #grid columnSelection="multiple" [moving]="true" igxChartIntegration igxConditionalFormatting igxContextMenu
[chartData]="chartData" primaryKey="id" displayDensity="compact" [data]="data"
[allowFiltering]="true" [filterMode]="'excelStyleFilter'">
[chartData]="chartData" primaryKey="id" [data]="data" [allowFiltering]="true" [filterMode]="'excelStyleFilter'">
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="id" [hidden]="true"></igx-column>
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="category" [width]="'110px'"></igx-column>
<igx-column [sortable]="true" [disablePinning]="true" [disableHiding]="true" field="type" [filterable]="false" [width]="'130px'"></igx-column>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
height: 100vh;
padding: 0 rem(8px) rem(8px) rem(8px);
--igc-pane-content-background: #{contrast-color($color: 'gray', $variant: 900)};

igx-grid {
--ig-size: var(--ig-size-small);
}
}

.chart-types-container {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
Excel like data analysis showcase application with Ignite UI Angular components and extras
</app-page-header>
<div class="grid-chart-contextmenu-wrapper">
<igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' displayDensity="compact" [data]="data">
<igx-grid #grid igxChartIntegration igxConditionalFormatting igxContextMenu primaryKey='id' [data]="data">
<igx-column field="id" [hidden]="true"></igx-column>
<igx-column field="category" [editable]="true" [width]="'110px'"></igx-column>
<igx-column field="type" [editable]="true" [filterable]="false" [width]="'130px'"></igx-column>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
:host ::ng-deep {
.grid-chart-contextmenu-wrapper {
--ig-size: var(--ig-size-small);
width: 90%;
margin: 50px auto;
height: 80%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</div>
<div class="actionItem">
<!-- Change volume -->
<igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings" [displayDensity]="'compact'">
<igx-select [(ngModel)]="dataVolume" (ngModelChange)="paramsChanged()" [overlaySettings]="customOverlaySettings">
<label igxLabel>Change data volume</label>
<igx-prefix>
<igx-icon>view_list</igx-icon>
Expand All @@ -21,7 +21,7 @@
</div>
<div class="actionItem">
<!-- Change frequency -->
<igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" [displayDensity]="'compact'" #freq>
<igx-select [(ngModel)]="frequency" (ngModelChange)="paramsChanged()" [overlaySettings]="freqOverlaySettings" #freq>
<label igxLabel>Change update frequency</label>
<igx-prefix>
<igx-icon>cell_wifi</igx-icon>
Expand All @@ -35,7 +35,7 @@
<div igxOverlayOutlet #outlet></div>
</div>
<div slot="gridStockPrices" style="height: 100%;">
<igx-grid #grid1 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
<igx-grid #grid1 [data]="data | async" [isLoading]="isLoading"
[allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'"
[columnSelection]="'multiple'" [cellSelection]="'none'" [outlet]="filteringOverlayOutlet">
<igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
Expand Down Expand Up @@ -67,7 +67,7 @@
</igx-grid>
</div>
<div slot="forexMarket" style="height: 100%;">
<igx-grid #grid2 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
<igx-grid #grid2 [data]="data | async" [isLoading]="isLoading"
[allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
[columnSelection]="'multiple'" [cellSelection]="'none'">
<igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
Expand Down Expand Up @@ -99,7 +99,7 @@
</igx-grid>
</div>
<div slot="content4" style="height: 100%;">
<igx-grid #grid3 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
<igx-grid #grid3 [data]="data | async" [isLoading]="isLoading"
[allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
[columnSelection]="'multiple'" [cellSelection]="'none'">
<igx-column [field]="'id'" [width]="'70px'" [hidden]="true" [sortable]="true"></igx-column>
Expand Down Expand Up @@ -131,7 +131,7 @@
</igx-grid>
</div>
<div slot="etfStockPrices" style="height: 100%;">
<igx-grid #grid4 [data]="data | async" [displayDensity]="'compact'" [isLoading]="isLoading"
<igx-grid #grid4 [data]="data | async" [isLoading]="isLoading"
[allowFiltering]="true" [filterMode]="'excelStyleFilter'" [primaryKey]="'id'" [outlet]="filteringOverlayOutlet"
[columnSelection]="'multiple'" [cellSelection]="'none'">
<igx-paginator></igx-paginator>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,8 @@
}

igx-grid {
--ig-size: var(--ig-size-small);

.grid-area {
margin-block-start: 1rem;
overflow-y: hidden;
Expand Down Expand Up @@ -181,3 +183,8 @@ igx-grid {
}
}
}

igx-select {
--ig-size: var(--ig-size-small);
}

Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,6 @@ export class GridFinJSDockManagerComponent implements OnInit, OnDestroy, AfterVi
});
grid.columnSelection = 'multiple';
grid.cellSelection = 'none';
grid.displayDensity = 'compact';

// Use detectChanges because of ExpressionChangedAfterItHasBeenChecked Error when creating a dynamic pane
this.cdr.detectChanges();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<igx-grid #grid1
[igxPreventDocumentScroll]="true"
width="100%" height="100%"
displayDensity="compact"
hiddenColumnsText="Hidden"
primaryKey="id"
[autoGenerate]="false"
Expand Down
2 changes: 2 additions & 0 deletions projects/app-lob/src/app/grid-finjs/grid-finjs.component.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@use '../../variables' as *;

.grid__wrapper {
--ig-size: var(--ig-size-small);

position: relative;
width: 100%;
height: 98%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ <h5 class="switch-sample__title">Boston Marathon 2023</h5>
</igx-input-group>
</div>
<div class="grid__wrapper__inner">
<igx-grid #grid1 [igxPreventDocumentScroll]="true" [data]="localData" height="600px" displayDensity="cosy" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
<igx-grid #grid1 [igxPreventDocumentScroll]="true" [data]="localData" height="600px" [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [allowAdvancedFiltering]="true">
<igx-paginator [perPage]="10"></igx-paginator>
<igx-column header="Rank" [width]="'12%'" field="Id" [sortable]="true" [filterable]="false">
<ng-template igxCell let-cell="cell">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ $progressBar-sample-theme: progress-linear-theme(
justify-content: center;
}

igx-grid {
--ig-size: var(--ig-size-medium);
}

igx-avatar {
--ig-size: var(--ig-size-small);
}

:host {
::ng-deep {
.igx-paginator > * {
Expand Down
Loading

0 comments on commit 45627df

Please sign in to comment.