Skip to content

Commit f733e86

Browse files
zdrawkuzdrawku
authored
Merge pull request #3223 from IgniteUI/ikitanov/list-2988-vNext
Ikitanov/list 2988 v next
2 parents 0c888b2 + f2e05b8 commit f733e86

12 files changed

Lines changed: 152 additions & 120 deletions

‎src/app/lists/list/list-item-selection/list-item-selection.component.html‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,14 @@
1111
<div class="list-sample">
1212
<igx-list>
1313
<igx-list-item [isHeader]="true">Contacts</igx-list-item>
14-
<igx-list-item [ngClass]="contact.selected ? 'selected' : ''"
15-
(click)="selectItem(contact)"
16-
*ngFor="let contact of contacts | igxFilter: filterContacts;">
14+
<igx-list-item [ngClass]="contact.selected ? 'selected' : ''" (click)="selectItem(contact)"
15+
*ngFor="let contact of contacts | igxFilter: filterContacts;">
1716
<igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
1817
<span igxListLineTitle>{{ contact.name }}</span>
1918
<span igxListLineSubTitle>{{ contact.phone }}</span>
20-
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact, $event)">star</igx-icon>
19+
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
20+
[igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
21+
(mousedown)="mousedown($event)">star</igx-icon>
2122
</igx-list-item>
2223
</igx-list>
2324
</div>

‎src/app/lists/list/list-item-selection/list-item-selection.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414

1515
igx-icon {
1616
cursor: pointer;
17+
position: relative;
1718
}
1819

1920
.search {

‎src/app/lists/list/list-item-selection/list-item-selection.component.ts‎

Lines changed: 52 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,67 +2,71 @@ import { Component } from '@angular/core';
22
import { IgxFilterOptions } from 'igniteui-angular';
33

44
@Component({
5-
selector: 'app-list-item-selection',
6-
templateUrl: './list-item-selection.component.html',
7-
styleUrls: ['./list-item-selection.component.scss']
5+
selector: 'app-list-item-selection',
6+
templateUrl: './list-item-selection.component.html',
7+
styleUrls: ['./list-item-selection.component.scss']
88
})
99
export class ListItemSelectionComponent {
1010
public searchContact: string;
1111

1212
public contacts = [
13-
{
14-
isFavorite: false,
15-
name: 'Terrance Orta',
16-
phone: '770-504-2217',
17-
photo: 'assets/images/men/27.jpg',
18-
selected: false
19-
},
20-
{
21-
isFavorite: true,
22-
name: 'Richard Mahoney',
23-
phone: '423-676-2869',
24-
photo: 'assets/images/men/1.jpg',
25-
selected: false
26-
},
27-
{
28-
isFavorite: false,
29-
name: 'Donna Price',
30-
phone: '859-496-2817',
31-
photo: 'assets/images/women/50.jpg',
32-
selected: false
33-
},
34-
{
35-
isFavorite: false,
36-
name: 'Lisa Landers',
37-
phone: '901-747-3428',
38-
photo: 'assets/images/women/3.jpg',
39-
selected: false
40-
},
41-
{
42-
isFavorite: true,
43-
name: 'Dorothy H. Spencer',
44-
phone: '573-394-9254',
45-
photo: 'assets/images/women/67.jpg',
46-
selected: false
47-
}
13+
{
14+
isFavorite: false,
15+
name: 'Terrance Orta',
16+
phone: '770-504-2217',
17+
photo: 'assets/images/men/27.jpg',
18+
selected: false
19+
},
20+
{
21+
isFavorite: true,
22+
name: 'Richard Mahoney',
23+
phone: '423-676-2869',
24+
photo: 'assets/images/men/1.jpg',
25+
selected: false
26+
},
27+
{
28+
isFavorite: false,
29+
name: 'Donna Price',
30+
phone: '859-496-2817',
31+
photo: 'assets/images/women/50.jpg',
32+
selected: false
33+
},
34+
{
35+
isFavorite: false,
36+
name: 'Lisa Landers',
37+
phone: '901-747-3428',
38+
photo: 'assets/images/women/3.jpg',
39+
selected: false
40+
},
41+
{
42+
isFavorite: true,
43+
name: 'Dorothy H. Spencer',
44+
phone: '573-394-9254',
45+
photo: 'assets/images/women/67.jpg',
46+
selected: false
47+
}
4848
];
4949

5050
public toggleFavorite(contact: any, event: Event) {
51-
event.stopPropagation();
52-
contact.isFavorite = !contact.isFavorite;
51+
event.stopPropagation();
52+
contact.isFavorite = !contact.isFavorite;
5353
}
5454

5555
public selectItem(item) {
56-
if (!item.selected) {
57-
this.contacts.forEach(c => c.selected = false);
58-
item.selected = true;
59-
}
56+
if (!item.selected) {
57+
this.contacts.forEach(c => c.selected = false);
58+
item.selected = true;
59+
}
6060
}
6161

6262
get filterContacts() {
63-
const fo = new IgxFilterOptions();
64-
fo.key = 'name';
65-
fo.inputValue = this.searchContact;
66-
return fo;
63+
const fo = new IgxFilterOptions();
64+
fo.key = 'name';
65+
fo.inputValue = this.searchContact;
66+
return fo;
67+
}
68+
69+
public mousedown(event: Event) {
70+
event.stopPropagation();
6771
}
6872
}

‎src/app/lists/list/list-sample-4/list-sample-4.component.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,14 @@
1515
<div class="list-sample">
1616
<igx-list [displayDensity]="density">
1717
<igx-list-item [isHeader]="true">Contacts</igx-list-item>
18-
<igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" #item *ngFor="let contact of contacts | igxFilter: filterContacts;">
18+
<igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" #item
19+
*ngFor="let contact of contacts | igxFilter: filterContacts;">
1920
<igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
2021
<span igxListLineTitle>{{ contact.name }}</span>
2122
<span igxListLineSubTitle>{{ contact.phone }}</span>
22-
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
23+
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
24+
[igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
25+
(mousedown)="mousedown($event)">star</igx-icon>
2326
</igx-list-item>
2427
</igx-list>
2528
</div>

‎src/app/lists/list/list-sample-4/list-sample-4.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
igx-icon {
1717
cursor: pointer;
18+
position: relative;
1819
}
1920

2021
.search {

‎src/app/lists/list/list-sample-4/list-sample-4.component.ts‎

Lines changed: 63 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,76 @@
11
import { Component, OnInit } from '@angular/core';
22
import { DisplayDensity, IgxFilterOptions } from 'igniteui-angular';
33
@Component({
4-
selector: 'app-contact-list2',
5-
styleUrls: ['./list-sample-4.component.scss'],
6-
templateUrl: './list-sample-4.component.html'
4+
selector: 'app-contact-list2',
5+
styleUrls: ['./list-sample-4.component.scss'],
6+
templateUrl: './list-sample-4.component.html'
77
})
88
export class ListSample4Component implements OnInit {
9-
public searchContact: string;
9+
public searchContact: string;
1010

11-
public contacts = [
12-
{
13-
isFavorite: false,
14-
name: 'Terrance Orta',
15-
phone: '770-504-2217',
16-
photo: 'assets/images/men/27.jpg'
17-
},
18-
{
19-
isFavorite: true,
20-
name: 'Richard Mahoney',
21-
phone: '423-676-2869',
22-
photo: 'assets/images/men/1.jpg'
23-
},
24-
{
25-
isFavorite: false,
26-
name: 'Donna Price',
27-
phone: '859-496-2817',
28-
photo: 'assets/images/women/50.jpg'
29-
},
30-
{
31-
isFavorite: false,
32-
name: 'Lisa Landers',
33-
phone: '901-747-3428',
34-
photo: 'assets/images/women/3.jpg'
35-
},
36-
{
37-
isFavorite: true,
38-
name: 'Dorothy H. Spencer',
39-
phone: '573-394-9254',
40-
photo: 'assets/images/women/67.jpg'
41-
}
42-
];
11+
public contacts = [
12+
{
13+
isFavorite: false,
14+
name: 'Terrance Orta',
15+
phone: '770-504-2217',
16+
photo: 'assets/images/men/27.jpg'
17+
},
18+
{
19+
isFavorite: true,
20+
name: 'Richard Mahoney',
21+
phone: '423-676-2869',
22+
photo: 'assets/images/men/1.jpg'
23+
},
24+
{
25+
isFavorite: false,
26+
name: 'Donna Price',
27+
phone: '859-496-2817',
28+
photo: 'assets/images/women/50.jpg'
29+
},
30+
{
31+
isFavorite: false,
32+
name: 'Lisa Landers',
33+
phone: '901-747-3428',
34+
photo: 'assets/images/women/3.jpg'
35+
},
36+
{
37+
isFavorite: true,
38+
name: 'Dorothy H. Spencer',
39+
phone: '573-394-9254',
40+
photo: 'assets/images/women/67.jpg'
41+
}
42+
];
4343

44-
public density: DisplayDensity = 'comfortable';
45-
public displayDensities;
44+
public density: DisplayDensity = 'comfortable';
45+
public displayDensities;
4646

47-
constructor() { }
47+
constructor() { }
4848

49-
public ngOnInit() {
50-
this.displayDensities = [
51-
{ label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
52-
{ label: 'cosy', selected: this.density === 'cosy', togglable: true },
53-
{ label: 'compact', selected: this.density === 'compact', togglable: true }
54-
];
55-
}
49+
public ngOnInit() {
50+
this.displayDensities = [
51+
{ label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
52+
{ label: 'cosy', selected: this.density === 'cosy', togglable: true },
53+
{ label: 'compact', selected: this.density === 'compact', togglable: true }
54+
];
55+
}
5656

57-
public selectDensity(event) {
58-
this.density = this.displayDensities[event.index].label;
59-
}
57+
public selectDensity(event) {
58+
this.density = this.displayDensities[event.index].label;
59+
}
6060

61-
public toggleFavorite(contact: any) {
62-
contact.isFavorite = !contact.isFavorite;
63-
}
61+
public toggleFavorite(contact: any, event: Event) {
62+
event.stopPropagation();
63+
contact.isFavorite = !contact.isFavorite;
64+
}
65+
66+
get filterContacts() {
67+
const fo = new IgxFilterOptions();
68+
fo.key = 'name';
69+
fo.inputValue = this.searchContact;
70+
return fo;
71+
}
6472

65-
get filterContacts() {
66-
const fo = new IgxFilterOptions();
67-
fo.key = 'name';
68-
fo.inputValue = this.searchContact;
69-
return fo;
70-
}
73+
public mousedown(event: Event) {
74+
event.stopPropagation();
75+
}
7176
}

‎src/app/lists/list/list-sample-7/list-sample-7.component.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div style="width:300px; margin-bottom:20px">
2-
<igx-slider id="slider" [minValue]="0.1" [maxValue]="0.9" [step]="0.1" [continuous]="true" [(ngModel)]="mainIgxList.panEndTriggeringThreshold"></igx-slider>
2+
<igx-slider id="slider" [minValue]="0.1" [maxValue]="0.9" [step]="0.1" [continuous]="true"
3+
[(ngModel)]="mainIgxList.panEndTriggeringThreshold"></igx-slider>
34
<label>Threshold: {{panThreshold}}</label>
45
</div>
56

@@ -17,11 +18,14 @@
1718
</div>
1819
</ng-template>
1920
<igx-list-item [isHeader]="true">Contacts</igx-list-item>
20-
<igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink" igxRippleTarget=".igx-list__item-content">
21+
<igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink"
22+
igxRippleTarget=".igx-list__item-content">
2123
<igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
2224
<span igxListLineTitle>{{ contact.name }}</span>
2325
<span igxListLineSubTitle>{{ contact.phone }}</span>
24-
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
26+
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
27+
[igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
28+
(mousedown)="mousedown($event)">star</igx-icon>
2529
</igx-list-item>
2630
</igx-list>
2731
<igx-toast #toast></igx-toast>

‎src/app/lists/list/list-sample-7/list-sample-7.component.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111

1212
igx-icon {
1313
cursor: pointer;
14+
position: relative;
1415
}
1516

1617
.listItemLeftPanningStyle {

‎src/app/lists/list/list-sample-7/list-sample-7.component.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ export class ListSample7Component implements OnInit {
5151
this.contacts = Object.assign([], this.dataSource);
5252
}
5353

54-
public toggleFavorite(contact: any) {
54+
public toggleFavorite(contact: any, event: Event) {
55+
event.stopPropagation();
5556
contact.isFavorite = !contact.isFavorite;
5657
}
5758

@@ -77,4 +78,7 @@ export class ListSample7Component implements OnInit {
7778
return Math.round(result * 100) + '%';
7879
}
7980

81+
public mousedown(event: Event) {
82+
event.stopPropagation();
83+
}
8084
}

‎src/app/lists/list/list-sample-8/list-sample-8.component.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
<igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
66
<span igxListLineTitle>{{ contact.name }}</span>
77
<span igxListLineSubTitle>{{ contact.phone }}</span>
8-
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
8+
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="white"
9+
[igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
10+
(mousedown)="mousedown($event)">star</igx-icon>
911
</igx-list-item>
1012
</igx-list>
1113
</div>

0 commit comments

Comments
 (0)