Skip to content

Commit 0f0ebec

Browse files
RivaIvanovaRivaIvanova
authored
Merge branch 'vnext' into rivanova/update-tooltip-simple-sample
2 parents 234d780 + 23ed344 commit 0f0ebec

File tree

12 files changed

+106
-29
lines changed

12 files changed

+106
-29
lines changed

‎src/app/data-display/circular-progressbar/circular-dynamic-sample/circular-dynamic-sample.component.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.custom-size {
2-
width: 100px;
3-
height: 100px;
2+
--diameter: 50px;
3+
--stroke-thickness: 3px;
44
}
55

66
.sample-content {
77
width: 300px;
88
display: flex;
99
align-items: center;
10-
margin-top: 30px;
10+
margin: 30px;
1111
}

‎src/app/data-display/circular-progressbar/circular-indeterminate-progressbar/circular-indeterminate-progressbar.component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
igx-circular-bar {
2+
margin: 20px;
3+
--diameter: 50px;
4+
}

‎src/app/data-display/circular-progressbar/circular-progressbar.component.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.custom-size {
2-
margin-top: 20px;
3-
width: 50px;
4-
height: 50px;
2+
margin: 20px;
3+
--diameter: 50px;
54
}

‎src/app/data-display/circular-progressbar/circular-styling-sample/circular-styling-sample.component.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22

33
$custom-theme: progress-circular-theme(
44
$fill-color-default: rgb(32, 192, 17),
5+
$diameter: 50px,
56
);
67

78
@include css-vars($custom-theme);
9+
10+
igx-circular-bar {
11+
margin: 20px;
12+
}

‎src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.html‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="sample-wrapper">
1+
<div class="sample-wrapper mrl-layout">
22
<section style="height: 800px;">
33
<div style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 15px; margin-bottom: 15px;">
44
<div class="settingsInputWrapper">
@@ -13,12 +13,15 @@
1313
[id]="block.key" [data]="block" [selected]="block.key === selectedBlock.key" [draggable]="true"
1414
(chipClick)="selectedBlock = block" (pointerenter)="onPointerOver(chip)" (pointerleave)="onPointerLeave(chip)">
1515
{{block.key}}
16-
<div class="material-icons igx-icon"
17-
[style.opacity]="chip.data.hovered ? '1' : '0'" [style.z-index]="chip.data.hovered ? '1' : '-1'" [style.width]="chip.data.hovered ? '24px' : '0px'"
18-
style="transition: opacity 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: width 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);"
19-
igxSuffix igxIconButton="flat" (pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickBlock(blockIndex)">
20-
<igx-icon id="igx-icon-150" >cancel</igx-icon>
21-
</div>
16+
17+
<igx-icon
18+
[style.opacity]="chip.data.hovered ? '1' : '0'" [style.z-index]="chip.data.hovered ? '1' : '-1'" [style.width]="chip.data.hovered ? '24px' : '0px'"
19+
style="transition: opacity 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: width 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);"
20+
(pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickBlock(blockIndex)"
21+
igxSuffix
22+
id="igx-icon-150">
23+
cancel
24+
</igx-icon>
2225
</igx-chip>
2326
}
2427
<igx-chip #addBlock [style.margin]="'5px'" [data]="{ clicked: false }" (chipClick)="onAddBlockClick(addBlock)">
@@ -28,7 +31,7 @@
2831
}
2932
@if (addBlock.data.clicked) {
3033
<igx-input-group>
31-
<input style="width: 15ch; padding: unset; border: none; height: 25px;" igxInput type="text" placeholder="Layout Name" (keydown)="inputKeyDownBlock($event, addBlock)" (blur)="inputBlur($event, addBlock)"/>
34+
<input igxInput type="text" placeholder="Layout Name" (keydown)="inputKeyDownBlock($event, addBlock)" (blur)="inputBlur($event, addBlock)"/>
3235
</igx-input-group>
3336
}
3437
</igx-chip>
@@ -104,27 +107,28 @@
104107

105108
<div style="width: 100%; margin-bottom: 15px; text-align:center; min-height: 50px;" >
106109
<span>Drag a column into a layout cell to apply:</span>
107-
<igx-chips-area style="margin: auto; justify-content: center;">
110+
<igx-chips-area style="margin: auto; justify-content: center; gap: 10px;">
108111
@for (col of columnsList; track col; let colIndex = $index) {
109-
<igx-chip #chip [style.margin]="'5px'" [data]="col" [draggable]="true"
112+
<igx-chip #chip [data]="col" [draggable]="true"
110113
(pointerenter)="onPointerOver(chip)" (pointerleave)="onPointerLeave(chip)">
111114
{{col.key}}
112-
<div class="material-icons igx-icon"
115+
<igx-icon
113116
[style.opacity]="chip.data.hovered ? '1' : '0'" [style.z-index]="chip.data.hovered ? '1' : '-1'" [style.width]="chip.data.hovered ? '24px' : '0px'"
114117
style="transition: opacity 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: width 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);"
115-
igxSuffix igxIconButton="flat" (pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickColumn(colIndex)">
116-
<igx-icon id="igx-icon-150" >cancel</igx-icon>
117-
</div>
118+
igxSuffix (pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickColumn(colIndex)"
119+
id="igx-icon-150">
120+
cancel
121+
</igx-icon>
118122
</igx-chip>
119123
}
120-
<igx-chip #addChip [style.margin]="'5px'" [data]="{ clicked: false }" (chipClick)="onAddChipClick(addChip)">
124+
<igx-chip #addChip [data]="{ clicked: false }" (chipClick)="onAddChipClick(addChip)">
121125
<igx-icon igxPrefix>add_circle_outline</igx-icon>
122126
@if (!addChip.data.clicked) {
123127
<span>{{"Add Column"}}</span>
124128
}
125129
@if (addChip.data.clicked) {
126130
<igx-input-group>
127-
<input style="width: 10ch; padding: unset; border: none; height: 25px;" igxInput type="text" placeholder="Column Key" (keydown)="inputKeyDown($event, addChip)" (blur)="inputBlur($event, addChip)"/>
131+
<input igxInput type="text" placeholder="Column Key" (keydown)="inputKeyDown($event, addChip)" (blur)="inputBlur($event, addChip)"/>
128132
</igx-input-group>
129133
}
130134
</igx-chip>

‎src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.scss‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1+
.mrl-layout {
2+
igx-input-group {
3+
--ig-size: 1;
4+
--size: 22px;
5+
--idle-bottom-line-color: transparent;
6+
--hover-bottom-line-color: transparent;
7+
--focused-bottom-line-color: transparent;
8+
--focused-secondary-color: transparent;
9+
10+
.igx-input-group__bundle-start,
11+
.igx-input-group__bundle-end {
12+
display: none;
13+
}
14+
15+
.igx-input-group__bundle {
16+
top: 0;
17+
}
18+
}
19+
20+
igx-chip {
21+
--ig-size: var(--ig-size-medium);
22+
}
23+
}
24+
125
.igx-grid__thead-wrapper {
226
position: initial !important;
327
}
@@ -206,7 +230,7 @@
206230
width: 800px;
207231
}
208232

209-
.bottomButton {
233+
.bottomButton {
210234
margin: 5px;
211235
}
212236

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@
44
<igx-picker-toggle igxPrefix>
55
<igx-icon>calendar_today</igx-icon>
66
</igx-picker-toggle>
7+
<igx-picker-clear igxSuffix>
8+
<igx-icon>clear</igx-icon>
9+
</igx-picker-clear>
710
</igx-date-range-start>
811
<igx-date-range-end>
12+
<igx-picker-toggle igxPrefix>
13+
<igx-icon>calendar_today</igx-icon>
14+
</igx-picker-toggle>
915
<input igxInput igxDateTimeEditor type="text">
16+
<igx-picker-clear igxSuffix>
17+
<igx-icon>clear</igx-icon>
18+
</igx-picker-clear>
1019
</igx-date-range-end>
1120
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Component } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxPickerClearComponent, IgxSuffixDirective } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-rangedatepicker-start-end',
77
styleUrls: ['./daterangepicker-start-end.scss'],
88
templateUrl: './daterangepicker-start-end.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
10+
IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective,
11+
IgxPickerClearComponent]
1012
})
1113
export class DateRangePickerStartEndComponent {
1214
public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@
44
<igx-picker-toggle igxPrefix>
55
<igx-icon>calendar_today</igx-icon>
66
</igx-picker-toggle>
7+
<igx-picker-clear igxSuffix>
8+
<igx-icon>clear</igx-icon>
9+
</igx-picker-clear>
710
</igx-date-range-start>
811
<igx-date-range-end>
12+
<igx-picker-toggle igxPrefix>
13+
<igx-icon>calendar_today</igx-icon>
14+
</igx-picker-toggle>
915
<input igxInput igxDateTimeEditor type="text">
16+
<igx-picker-clear igxSuffix>
17+
<igx-icon>clear</igx-icon>
18+
</igx-picker-clear>
1019
</igx-date-range-end>
1120
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Component, ElementRef, inject } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-styled-rangedatepicker',
77
styleUrls: ['./daterangepicker-styling.scss'],
88
templateUrl: './daterangepicker-styling.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
10+
IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent]
1011
})
1112
export class StyledDateRangePickerComponent {
1213
element = inject(ElementRef);

0 commit comments

Comments
 (0)