chore(*): changing sizes for some inputs

ChronosSF · ChronosSF · commit 8b7428670ded · 2023-03-28T15:58:23.000+03:00
diff --git a/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss b/src/app/data-entries/dropdown/dropdown-sample-4/dropdown-sample-4.component.scss
@@ -7,7 +7,7 @@
 }
 
 .input-group {
-    width: 180px;
+    width: 220px;
 }
 
 .igx-input-group {
diff --git a/src/app/grid/column-selection-sample/column-selection-sample.component.html b/src/app/grid/column-selection-sample/column-selection-sample.component.html
@@ -2,7 +2,7 @@
     <igx-grid #grid [columnSelection]="columnSelectionType" [data]="data" height="530px" width="100%">
         <igx-grid-toolbar>
 
-                <igx-select [(ngModel)]="columnSelectionType">
+                <igx-select [(ngModel)]="columnSelectionType" [displayDensity]="'compact'">
                     <label igxLabel>Column Selection</label>
                     <igx-select-item value="none">None</igx-select-item>
                     <igx-select-item value="single">Single</igx-select-item>
diff --git a/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html b/src/app/grid/grid-cascading-combos/grid-cascading-combos.component.html
@@ -8,7 +8,7 @@
                 <ng-template igxCell let-cell="cell">
                     <igx-simple-combo [id]="'country-' + cell.row.data.ID" [data]="countriesData"
                         (selectionChanging)="countryChanging($event, cell)" placeholder="Choose Country..."
-                        [displayKey]="'name'" width="100%">
+                        [displayKey]="'name'" [displayDensity]="'compact'" width="100%">
                     </igx-simple-combo>
                 </ng-template>
             </igx-column>
@@ -17,7 +17,8 @@
                     <div>
                         <igx-simple-combo [id]="'region-' + cell.row.data.ID"
                             (selectionChanging)="regionChanging($event, cell)" placeholder="Choose Region..."
-                            [displayKey]="'name'" [(ngModel)]="cell.value" [disabled]="cell.row.cells[1].value === ''">
+                            [displayKey]="'name'" [displayDensity]="'compact'" [(ngModel)]="cell.value"
+                            [disabled]="cell.row.cells[1].value === ''">
                         </igx-simple-combo>
                         <igx-linear-bar [id]="'region-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
                             type="info" [indeterminate]="true">
@@ -29,7 +30,8 @@
                 <ng-template igxCell let-cell="cell">
                     <div>
                         <igx-simple-combo [id]="'city-' + cell.row.data.ID" placeholder="Choose City..."
-                            [(ngModel)]="cell.value" [displayKey]="'name'" [disabled]="cell.row.cells[2].value === ''">
+                            [(ngModel)]="cell.value" [displayKey]="'name'" [displayDensity]="'compact'"
+                            [disabled]="cell.row.cells[2].value === ''">
                         </igx-simple-combo>
                         <igx-linear-bar [id]="'city-progress-' + cell.row.data.ID" [style.visibility]="'hidden'"
                             type="info" [indeterminate]="true">
diff --git a/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html b/src/app/grid/grid-column-data-types-sample/grid-column-data-types-sample.component.html
@@ -1,14 +1,14 @@
 <div class="wrapper">
     <span class="location-wrapper">
-        <igx-select #select [(ngModel)]="locale">
+        <igx-select #select [(ngModel)]="locale" [displayDensity]="'compact'">
             <igx-prefix class="ellipsis">Locale: </igx-prefix>
             <igx-select-item *ngFor="let locale of locales" [value]="locale">
                 {{ locale }}
             </igx-select-item>
             <igx-hint>Applicable to date, number, currency and percent type columns</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="dateTimeOptions.format" (selectionChanging)="selectionChanging($event)">
+        <igx-select #select [(ngModel)]="dateTimeOptions.format" [displayDensity]="'compact'" (selectionChanging)="selectionChanging($event)">
             <igx-prefix class="ellipsis">DateTime format: </igx-prefix>
             <igx-select-item *ngFor="let dateFormat of dateTimeFormats" [value]="dateFormat.format"
                 [text]="dateFormat.format + ' ---> ' + dateFormat.eq">
@@ -17,7 +17,7 @@
             <igx-hint>Applied to 'dateTime' type column only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="dateOptions.format" (selectionChanging)="selectionDateChanging($event)">
+        <igx-select #select [(ngModel)]="dateOptions.format" [displayDensity]="'compact'" (selectionChanging)="selectionDateChanging($event)">
             <igx-prefix class="ellipsis">Date format: </igx-prefix>
             <igx-select-item *ngFor="let dateFormat of dateFormats" [value]="dateFormat.format"
                 [text]="dateFormat.format + ' ---> ' + dateFormat.eq">
@@ -26,7 +26,7 @@
             <igx-hint>Applied to 'date' type column only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="timeOptions.format" (selectionChanging)="selectionTimeChanging($event)">
+        <igx-select #select [(ngModel)]="timeOptions.format" [displayDensity]="'compact'" (selectionChanging)="selectionTimeChanging($event)">
             <igx-prefix class="ellipsis">Time format: </igx-prefix>
             <igx-select-item *ngFor="let timeFormat of timeFormats" [value]="timeFormat.format"
                 [text]="timeFormat.format + ' ---> ' + timeFormat.eq">
@@ -35,15 +35,15 @@
             <igx-hint>Applied to 'time' type column only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="dateTimeOptions.timezone" (selectionChanging)="timezoneSelectionChanging($event)">
+        <igx-select #select [(ngModel)]="dateTimeOptions.timezone" [displayDensity]="'compact'" (selectionChanging)="timezoneSelectionChanging($event)">
             <igx-prefix class="ellipsis">Timezone: </igx-prefix>
             <igx-select-item *ngFor="let timezone of timezoneFormats" [value]="timezone" [text]="timezone">
                 {{ timezone }}
             </igx-select-item>
             <igx-hint>Applicable to dateTime type columns only</igx-hint>
         </igx-select>
 
-        <igx-select #select [(ngModel)]="options.currencyCode" (selectionChanging)="currencySelectionChanging($event)">
+        <igx-select #select [(ngModel)]="options.currencyCode" [displayDensity]="'compact'" (selectionChanging)="currencySelectionChanging($event)">
             <igx-prefix class="ellipsis">Currency Code: </igx-prefix>
             <igx-select-item *ngFor="let currencyCode of currencyCodes" [value]="currencyCode">
                 {{ currencyCode }}
@@ -55,7 +55,7 @@
             </igx-suffix>
         </igx-select>
         <br />
-        <igx-input-group type="search" class="searchInputGroup">
+        <igx-input-group type="search" class="searchInputGroup" [displayDensity]="'compact'">
             <igx-prefix class="ellipsis">
                 <div #target="tooltipTarget" [igxTooltipTarget]="tooltipRef" [showDelay]="0" [hideDelay]="0">Set digits
                     info
diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.html b/src/app/grid/grid-pager-sample/grid-pager-sample.component.html
@@ -31,7 +31,7 @@
     <div class="options-container">
         <label>Display density:</label>
         <div class="select-input">
-            <igx-select [(ngModel)]="grid.displayDensity">
+            <igx-select [(ngModel)]="grid.displayDensity" [displayDensity]="'compact'">
                 <igx-select-item *ngFor="let density of densityOptions" [value]="density">
                     {{ density }}
                 </igx-select-item>
diff --git a/src/app/grid/grid-pager-sample/grid-pager-sample.component.scss b/src/app/grid/grid-pager-sample/grid-pager-sample.component.scss
@@ -10,7 +10,7 @@ igx-switch {
 .options-container {
     display: flex; 
     flex-direction: row; 
-    align-items: baseline; 
+    align-items: center; 
     padding: 0 1rem;
 }
 .options_container * { margin-right: 15px; }
diff --git a/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html b/src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html
@@ -12,6 +12,7 @@
                 <igx-simple-combo #comboItem
                     [data]="sortingTypes"
                     [displayKey]="'mode'"
+                    [displayDensity]="'compact'"
                     [(ngModel)]="sortingOptions"
                     (keydown)="handleSearchResults($event)">
                     <ng-template igxComboClearIcon></ng-template>
diff --git a/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html b/src/app/grid/grid-sorting-styling/grid-sorting-styling.component.html
@@ -3,7 +3,7 @@
         (sortingDone)="removeSorting($event)">
         <igx-grid-toolbar>
 
-            <igx-select [(ngModel)]="currentSortingType" (selectionChanging)="sortTypeSelection($event)">
+            <igx-select [(ngModel)]="currentSortingType" [displayDensity]="'compact'" (selectionChanging)="sortTypeSelection($event)">
                 <label igxLabel>Select Sorting Type</label>
                 <igx-select-item *ngFor="let type of sortingTypes" [value]="type.value">
                     {{type.name}}
diff --git a/src/app/scheduling/datepicker/template-driven-form/template-driven-form.component.scss b/src/app/scheduling/datepicker/template-driven-form/template-driven-form.component.scss
@@ -6,14 +6,14 @@
 .form-group {
     display: flex;
     flex: 1;
-    width: 400px;
+    width: 450px;
 }
 
 .form-date-picker {
-    flex: 55%;
+    flex: 50%;
 }
 
 .form-time-picker {
-    flex: 45%;
+    flex: 50%;
     margin-left: 16px;
 }

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.input-group {`
`10`		`- width: 180px;`
	`10`	`+ width: 220px;`
`11`	`11`	`}`
`12`	`12`
`13`	`13`	`.igx-input-group {`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ igx-switch {`
`10`	`10`	`.options-container {`
`11`	`11`	`display: flex;`
`12`	`12`	`flex-direction: row;`
`13`		`- align-items: baseline;`
	`13`	`+ align-items: center;`
`14`	`14`	`padding: 0 1rem;`
`15`	`15`	`}`
`16`	`16`	`.options_container * { margin-right: 15px; }`
Original file line number	Diff line number	Diff line change
`@@ -6,14 +6,14 @@`
`6`	`6`	`.form-group {`
`7`	`7`	`display: flex;`
`8`	`8`	`flex: 1;`
`9`		`- width: 400px;`
	`9`	`+ width: 450px;`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`.form-date-picker {`
`13`		`- flex: 55%;`
	`13`	`+ flex: 50%;`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.form-time-picker {`
`17`		`- flex: 45%;`
	`17`	`+ flex: 50%;`
`18`	`18`	`margin-left: 16px;`
`19`	`19`	`}`