Merge pull request #3223 from IgniteUI/ikitanov/list-2988-vNext

Ikitanov/list 2988 v next
IgniteUI · Jan 9, 2023 · f733e86 · f733e86
2 parents 0c888b2 + f2e05b8
commit f733e86
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 120 deletions.
diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.html b/src/app/lists/list/list-item-selection/list-item-selection.component.html
@@ -11,13 +11,14 @@
 <div class="list-sample">
     <igx-list>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
-        <igx-list-item [ngClass]="contact.selected ? 'selected' : ''"
-                       (click)="selectItem(contact)"
-                       *ngFor="let contact of contacts | igxFilter: filterContacts;">
+        <igx-list-item [ngClass]="contact.selected ? 'selected' : ''" (click)="selectItem(contact)"
+            *ngFor="let contact of contacts | igxFilter: filterContacts;">
             <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact, $event)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
 </div>
diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.scss b/src/app/lists/list/list-item-selection/list-item-selection.component.scss
@@ -14,6 +14,7 @@
 
     igx-icon {
       cursor: pointer;
+      position: relative;
     }
 
     .search {

diff --git a/src/app/lists/list/list-item-selection/list-item-selection.component.ts b/src/app/lists/list/list-item-selection/list-item-selection.component.ts
@@ -2,67 +2,71 @@ import { Component } from '@angular/core';
 import { IgxFilterOptions } from 'igniteui-angular';
 
 @Component({
-  selector: 'app-list-item-selection',
-  templateUrl: './list-item-selection.component.html',
-  styleUrls: ['./list-item-selection.component.scss']
+    selector: 'app-list-item-selection',
+    templateUrl: './list-item-selection.component.html',
+    styleUrls: ['./list-item-selection.component.scss']
 })
 export class ListItemSelectionComponent {
     public searchContact: string;
 
     public contacts = [
-      {
-        isFavorite: false,
-        name: 'Terrance Orta',
-        phone: '770-504-2217',
-        photo: 'assets/images/men/27.jpg',
-        selected: false
-      },
-      {
-        isFavorite: true,
-        name: 'Richard Mahoney',
-        phone: '423-676-2869',
-        photo: 'assets/images/men/1.jpg',
-        selected: false
-      },
-      {
-        isFavorite: false,
-        name: 'Donna Price',
-        phone: '859-496-2817',
-        photo: 'assets/images/women/50.jpg',
-        selected: false
-      },
-      {
-        isFavorite: false,
-        name: 'Lisa Landers',
-        phone: '901-747-3428',
-        photo: 'assets/images/women/3.jpg',
-        selected: false
-      },
-      {
-        isFavorite: true,
-        name: 'Dorothy H. Spencer',
-        phone: '573-394-9254',
-        photo: 'assets/images/women/67.jpg',
-        selected: false
-      }
+        {
+            isFavorite: false,
+            name: 'Terrance Orta',
+            phone: '770-504-2217',
+            photo: 'assets/images/men/27.jpg',
+            selected: false
+        },
+        {
+            isFavorite: true,
+            name: 'Richard Mahoney',
+            phone: '423-676-2869',
+            photo: 'assets/images/men/1.jpg',
+            selected: false
+        },
+        {
+            isFavorite: false,
+            name: 'Donna Price',
+            phone: '859-496-2817',
+            photo: 'assets/images/women/50.jpg',
+            selected: false
+        },
+        {
+            isFavorite: false,
+            name: 'Lisa Landers',
+            phone: '901-747-3428',
+            photo: 'assets/images/women/3.jpg',
+            selected: false
+        },
+        {
+            isFavorite: true,
+            name: 'Dorothy H. Spencer',
+            phone: '573-394-9254',
+            photo: 'assets/images/women/67.jpg',
+            selected: false
+        }
     ];
 
     public toggleFavorite(contact: any, event: Event) {
-      event.stopPropagation();
-      contact.isFavorite = !contact.isFavorite;
+        event.stopPropagation();
+        contact.isFavorite = !contact.isFavorite;
     }
 
     public selectItem(item) {
-      if (!item.selected) {
-        this.contacts.forEach(c => c.selected = false);
-        item.selected = true;
-      }
+        if (!item.selected) {
+            this.contacts.forEach(c => c.selected = false);
+            item.selected = true;
+        }
     }
 
     get filterContacts() {
-      const fo = new IgxFilterOptions();
-      fo.key = 'name';
-      fo.inputValue = this.searchContact;
-      return fo;
+        const fo = new IgxFilterOptions();
+        fo.key = 'name';
+        fo.inputValue = this.searchContact;
+        return fo;
+    }
+
+    public mousedown(event: Event) {
+        event.stopPropagation();
     }
 }
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.html b/src/app/lists/list/list-sample-4/list-sample-4.component.html
@@ -15,11 +15,14 @@
 <div class="list-sample">
     <igx-list [displayDensity]="density">
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
-        <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" #item *ngFor="let contact of contacts | igxFilter: filterContacts;">
+        <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content" #item
+            *ngFor="let contact of contacts | igxFilter: filterContacts;">
             <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
 </div>
diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.scss b/src/app/lists/list/list-sample-4/list-sample-4.component.scss
@@ -15,6 +15,7 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }
 
 .search {

diff --git a/src/app/lists/list/list-sample-4/list-sample-4.component.ts b/src/app/lists/list/list-sample-4/list-sample-4.component.ts
@@ -1,71 +1,76 @@
 import { Component, OnInit } from '@angular/core';
 import { DisplayDensity, IgxFilterOptions } from 'igniteui-angular';
 @Component({
-  selector: 'app-contact-list2',
-  styleUrls: ['./list-sample-4.component.scss'],
-  templateUrl: './list-sample-4.component.html'
+    selector: 'app-contact-list2',
+    styleUrls: ['./list-sample-4.component.scss'],
+    templateUrl: './list-sample-4.component.html'
 })
 export class ListSample4Component implements OnInit {
-  public searchContact: string;
+    public searchContact: string;
 
-  public contacts = [
-    {
-      isFavorite: false,
-      name: 'Terrance Orta',
-      phone: '770-504-2217',
-      photo: 'assets/images/men/27.jpg'
-    },
-    {
-      isFavorite: true,
-      name: 'Richard Mahoney',
-      phone: '423-676-2869',
-      photo: 'assets/images/men/1.jpg'
-    },
-    {
-      isFavorite: false,
-      name: 'Donna Price',
-      phone: '859-496-2817',
-      photo: 'assets/images/women/50.jpg'
-    },
-    {
-      isFavorite: false,
-      name: 'Lisa Landers',
-      phone: '901-747-3428',
-      photo: 'assets/images/women/3.jpg'
-    },
-    {
-      isFavorite: true,
-      name: 'Dorothy H. Spencer',
-      phone: '573-394-9254',
-      photo: 'assets/images/women/67.jpg'
-    }
-  ];
+    public contacts = [
+        {
+            isFavorite: false,
+            name: 'Terrance Orta',
+            phone: '770-504-2217',
+            photo: 'assets/images/men/27.jpg'
+        },
+        {
+            isFavorite: true,
+            name: 'Richard Mahoney',
+            phone: '423-676-2869',
+            photo: 'assets/images/men/1.jpg'
+        },
+        {
+            isFavorite: false,
+            name: 'Donna Price',
+            phone: '859-496-2817',
+            photo: 'assets/images/women/50.jpg'
+        },
+        {
+            isFavorite: false,
+            name: 'Lisa Landers',
+            phone: '901-747-3428',
+            photo: 'assets/images/women/3.jpg'
+        },
+        {
+            isFavorite: true,
+            name: 'Dorothy H. Spencer',
+            phone: '573-394-9254',
+            photo: 'assets/images/women/67.jpg'
+        }
+    ];
 
-  public density: DisplayDensity = 'comfortable';
-  public displayDensities;
+    public density: DisplayDensity = 'comfortable';
+    public displayDensities;
 
-  constructor() { }
+    constructor() { }
 
-  public ngOnInit() {
-    this.displayDensities = [
-        { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
-        { label: 'cosy', selected: this.density === 'cosy', togglable: true },
-        { label: 'compact', selected: this.density === 'compact', togglable: true }
-    ];
-  }
+    public ngOnInit() {
+        this.displayDensities = [
+            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+            { label: 'compact', selected: this.density === 'compact', togglable: true }
+        ];
+    }
 
-  public selectDensity(event) {
-    this.density = this.displayDensities[event.index].label;
-  }
+    public selectDensity(event) {
+        this.density = this.displayDensities[event.index].label;
+    }
 
-  public toggleFavorite(contact: any) {
-    contact.isFavorite = !contact.isFavorite;
-  }
+    public toggleFavorite(contact: any, event: Event) {
+        event.stopPropagation();
+        contact.isFavorite = !contact.isFavorite;
+    }
+
+    get filterContacts() {
+        const fo = new IgxFilterOptions();
+        fo.key = 'name';
+        fo.inputValue = this.searchContact;
+        return fo;
+    }
 
-  get filterContacts() {
-    const fo = new IgxFilterOptions();
-    fo.key = 'name';
-    fo.inputValue = this.searchContact;
-    return fo;
-  }
+    public mousedown(event: Event) {
+        event.stopPropagation();
+    }
 }
diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.html b/src/app/lists/list/list-sample-7/list-sample-7.component.html
@@ -1,5 +1,6 @@
 <div style="width:300px; margin-bottom:20px">
-    <igx-slider id="slider" [minValue]="0.1" [maxValue]="0.9" [step]="0.1" [continuous]="true" [(ngModel)]="mainIgxList.panEndTriggeringThreshold"></igx-slider>
+    <igx-slider id="slider" [minValue]="0.1" [maxValue]="0.9" [step]="0.1" [continuous]="true"
+        [(ngModel)]="mainIgxList.panEndTriggeringThreshold"></igx-slider>
     <label>Threshold: {{panThreshold}}</label>
 </div>
 
@@ -17,11 +18,14 @@
             </div>
         </ng-template>
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
-        <igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink" igxRippleTarget=".igx-list__item-content">
+        <igx-list-item #item *ngFor="let contact of contacts" igxRipple="pink"
+            igxRippleTarget=".igx-list__item-content">
             <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="pink"
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
     <igx-toast #toast></igx-toast>

diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.scss b/src/app/lists/list/list-sample-7/list-sample-7.component.scss
@@ -11,6 +11,7 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }
 
 .listItemLeftPanningStyle {

diff --git a/src/app/lists/list/list-sample-7/list-sample-7.component.ts b/src/app/lists/list/list-sample-7/list-sample-7.component.ts
@@ -51,7 +51,8 @@ export class ListSample7Component implements OnInit {
         this.contacts = Object.assign([], this.dataSource);
     }
 
-    public toggleFavorite(contact: any) {
+    public toggleFavorite(contact: any, event: Event) {
+        event.stopPropagation();
         contact.isFavorite = !contact.isFavorite;
     }
 
@@ -77,4 +78,7 @@ export class ListSample7Component implements OnInit {
         return Math.round(result * 100) + '%';
     }
 
+    public mousedown(event: Event) {
+        event.stopPropagation();
+    }
 }
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.html b/src/app/lists/list/list-sample-8/list-sample-8.component.html
@@ -5,7 +5,9 @@
             <igx-avatar igxListThumbnail [src]="contact.photo" [roundShape]="true"></igx-avatar>
             <span igxListLineTitle>{{ contact.name }}</span>
             <span igxListLineSubTitle>{{ contact.phone }}</span>
-            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" (click)="toggleFavorite(contact)">star</igx-icon>
+            <igx-icon igxListAction [style.color]="contact.isFavorite ? 'orange' : 'lightgray'" igxRipple="white"
+                [igxRippleCentered]="true" (click)="toggleFavorite(contact, $event)"
+                (mousedown)="mousedown($event)">star</igx-icon>
         </igx-list-item>
     </igx-list>
 </div>
diff --git a/src/app/lists/list/list-sample-8/list-sample-8.component.scss b/src/app/lists/list/list-sample-8/list-sample-8.component.scss
@@ -19,4 +19,5 @@
 
 igx-icon {
   cursor: pointer;
+  position: relative;
 }