Skip to content

Commit 19b6ead

Browse files
IvanKitanov17IvanKitanov17
committed
chore(List): Adding separate ripple for the igxListAction
1 parent 4bcda45 commit 19b6ead

8 files changed

Lines changed: 158 additions & 124 deletions

File tree

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

Lines changed: 6 additions & 5 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>
23-
</div>
24+
</div>

‎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: 6 additions & 3 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>
25-
</div>
28+
</div>

‎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: 9 additions & 4 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,15 @@
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-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
21+
<igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink"
22+
igxRippleTarget=".igx-list__item-content">
23+
<igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
24+
[igxRippleCentered]="true" (mousedown)="thumbnailMousedown($event)"></igx-avatar>
2225
<span igxListLineTitle>{{ contact.name }}</span>
2326
<span igxListLineSubTitle>{{ contact.phone }}</span>
24-
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
27+
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
28+
[igxRippleCentered]="true" igxRippleTarget=".igx-list__item-actions"
29+
(click)="toggleFavorite(contact, $event)" (mousedown)="mousedown($event)">star</igx-icon>
2530
</igx-list-item>
2631
</igx-list>
2732
<igx-toast #toast></igx-toast>

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

Lines changed: 9 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,11 @@ export class ListSample7Component implements OnInit {
7778
return Math.round(result * 100) + '%';
7879
}
7980

81+
public mousedown(event: Event) {
82+
event.stopPropagation();
83+
}
84+
85+
public thumbnailMousedown(event: Event) {
86+
event.stopPropagation();
87+
}
8088
}

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,13 @@
22
<igx-list>
33
<igx-list-item [isHeader]="true">Contacts</igx-list-item>
44
<igx-list-item #item *ngFor="let contact of contacts">
5-
<igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
5+
<igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true" igxRipple="white"
6+
[igxRippleCentered]="true"></igx-avatar>
67
<span igxListLineTitle>{{ contact.name }}</span>
78
<span igxListLineSubTitle>{{ contact.phone }}</span>
8-
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
9+
<igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="white"
10+
[igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
11+
(mousedown)="mousedown($event)">star</igx-icon>
912
</igx-list-item>
1013
</igx-list>
1114
</div>

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import { IgxListComponent, IgxToastComponent } from 'igniteui-angular';
88
templateUrl: './list-sample-8.component.html'
99
})
1010
export class ListSample8Component implements OnInit {
11-
@ViewChild('toast', { static : true })
11+
@ViewChild('toast', { static: true })
1212
public toast: IgxToastComponent;
1313

14-
@ViewChild('mainIgxList', { static : true })
14+
@ViewChild('mainIgxList', { static: true })
1515
public list: IgxListComponent;
1616

1717
public contacts;
@@ -51,7 +51,12 @@ export class ListSample8Component 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
}
58+
59+
public mousedown(event: Event) {
60+
event.stopPropagation();
61+
}
5762
}

0 commit comments

Comments
 (0)