Skip to content

Commit 535dce4

Browse files
mmalerbammalerba
committed
fix trailing action button
1 parent e91cc4a commit 535dce4

File tree

6 files changed

+58
-36
lines changed

6 files changed

+58
-36
lines changed

‎src/dev-app/list/list-demo.html

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ <h2>Normal lists</h2>
4040
<div mat-line class="demo-secondary-text">{{message.message}} </div>
4141
</mat-list-item>
4242
</mat-list>
43+
44+
<mat-list>
45+
<mat-list-item *ngFor="let link of links">
46+
<span mat-line>{{ link.name }}</span>
47+
<button mat-icon-button (click)="infoClicked=!infoClicked">
48+
<mat-icon>info</mat-icon>
49+
</button>
50+
</mat-list-item>
51+
</mat-list>
4352
</div>
4453

4554
<div>
@@ -67,6 +76,15 @@ <h2>Dense lists</h2>
6776
<div mat-line class="demo-secondary-text">{{message.message}} </div>
6877
</mat-list-item>
6978
</mat-list>
79+
80+
<mat-list dense>
81+
<mat-list-item *ngFor="let link of links">
82+
<span mat-line>{{ link.name }}</span>
83+
<button mat-icon-button (click)="infoClicked=!infoClicked">
84+
<mat-icon class="material-icons">info</mat-icon>
85+
</button>
86+
</mat-list-item>
87+
</mat-list>
7088
</div>
7189
<div>
7290
<h2>Nav lists</h2>
@@ -78,14 +96,6 @@ <h2>Nav lists</h2>
7896
<div *ngIf="infoClicked">
7997
More info!
8098
</div>
81-
<mat-nav-list>
82-
<mat-list-item *ngFor="let link of links">
83-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
84-
<button mat-icon-button (click)="infoClicked=!infoClicked">
85-
<mat-icon>info</mat-icon>
86-
</button>
87-
</mat-list-item>
88-
</mat-nav-list>
8999
<mat-nav-list>
90100
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
91101
<mat-icon mat-list-icon>folder</mat-icon>
@@ -94,14 +104,6 @@ <h2>Nav lists</h2>
94104
<mat-divider inset *ngIf="!last"></mat-divider>
95105
</a>
96106
</mat-nav-list>
97-
<mat-nav-list dense>
98-
<mat-list-item *ngFor="let link of links">
99-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
100-
<button mat-icon-button (click)="infoClicked=!infoClicked">
101-
<mat-icon class="material-icons">info</mat-icon>
102-
</button>
103-
</mat-list-item>
104-
</mat-nav-list>
105107
</div>
106108

107109
<div>

‎src/dev-app/mdc-list/mdc-list-demo.html

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ <h2>Normal lists</h2>
4040
<div mat-line>{{message.message}}</div>
4141
</mat-list-item>
4242
</mat-list>
43+
44+
<mat-list>
45+
<mat-list-item *ngFor="let link of links">
46+
<span mat-line>{{ link.name }}</span>
47+
<button mat-icon-button (click)="infoClicked=!infoClicked">
48+
<mat-icon>info</mat-icon>
49+
</button>
50+
</mat-list-item>
51+
</mat-list>
4352
</div>
4453

4554
<div>
@@ -63,8 +72,17 @@ <h2>Dense lists</h2>
6372
<mat-list-item *ngFor="let message of messages">
6473
<img mat-list-avatar [src]="message.image" alt="Image of {{message.from}}">
6574
<div mat-line>{{message.from}}</div>
66-
<div mat-line> {{message.subject}} </div>
67-
<div mat-line>{{message.message}} </div>
75+
<div mat-line>{{message.subject}}</div>
76+
<div mat-line>{{message.message}}</div>
77+
</mat-list-item>
78+
</mat-list>
79+
80+
<mat-list dense>
81+
<mat-list-item *ngFor="let link of links">
82+
<span mat-line>{{ link.name }}</span>
83+
<button mat-icon-button (click)="infoClicked=!infoClicked">
84+
<mat-icon class="material-icons">info</mat-icon>
85+
</button>
6886
</mat-list-item>
6987
</mat-list>
7088
</div>
@@ -78,14 +96,6 @@ <h2>Nav lists</h2>
7896
<div *ngIf="infoClicked">
7997
More info!
8098
</div>
81-
<mat-nav-list>
82-
<mat-list-item *ngFor="let link of links">
83-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
84-
<button mat-icon-button (click)="infoClicked=!infoClicked">
85-
<mat-icon>info</mat-icon>
86-
</button>
87-
</mat-list-item>
88-
</mat-nav-list>
8999
<mat-nav-list>
90100
<a mat-list-item *ngFor="let link of links; last as last" href="http://www.google.com">
91101
<mat-icon mat-list-icon>folder</mat-icon>
@@ -94,14 +104,6 @@ <h2>Nav lists</h2>
94104
<mat-divider inset *ngIf="!last"></mat-divider>
95105
</a>
96106
</mat-nav-list>
97-
<mat-nav-list dense>
98-
<mat-list-item *ngFor="let link of links">
99-
<a mat-line href="http://www.google.com">{{ link.name }}</a>
100-
<button mat-icon-button (click)="infoClicked=!infoClicked">
101-
<mat-icon class="material-icons">info</mat-icon>
102-
</button>
103-
</mat-list-item>
104-
</mat-nav-list>
105107
</div>
106108

107109
<div>

‎src/material-experimental/mdc-list/_list-theme.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
@import '@material/ripple/variables.import';
33
@import '../mdc-helpers/mdc-helpers';
44

5+
// TODO: implement mat-list[dense] once density system is in master
6+
57
@mixin mat-mdc-list-theme($theme) {
68
$is-dark-theme: map-get($theme, is-dark);
79
$state-opacities:

‎src/material-experimental/mdc-list/list-base.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
6767
this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
6868
.subscribe((lines: QueryList<ElementRef<Element>>) => {
6969
lines.forEach((line: ElementRef<Element>, index: number) => {
70-
line.nativeElement.classList.toggle('mdc-list-item__primary-text', index === 0);
70+
line.nativeElement.classList
71+
.toggle('mdc-list-item__primary-text', index === 0 && lines.length > 1);
7172
line.nativeElement.classList.toggle('mdc-list-item__secondary-text', index !== 0);
7273
});
7374
setLines(lines, this._element, 'mat-mdc');

‎src/material-experimental/mdc-list/list-item.html

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
11
<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
2-
<span class="mdc-list-item__text"><ng-content></ng-content></span>
2+
3+
<!-- If lines were explicitly given, use those as the text. -->
4+
<ng-container *ngIf="lines.length">
5+
<span class="mdc-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
6+
</ng-container>
7+
8+
<!--
9+
If lines were not explicitly given, assume the remaining content is the text, otherwise assume it
10+
is an action that belongs in the "meta" section.
11+
-->
12+
<span [class.mdc-list-item__text]="!lines.length" [class.mdc-list-item__meta]="!!lines.length">
13+
<ng-content></ng-content>
14+
</span>
15+
316
<ng-content select="mat-divider"></ng-content>

‎src/material-experimental/mdc-list/module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
import {CommonModule} from '@angular/common';
910
import {NgModule} from '@angular/core';
1011
import {MatLineModule, MatRippleModule} from '@angular/material/core';
1112
import {MatDividerModule} from '@angular/material/divider';
@@ -22,6 +23,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
2223

2324
@NgModule({
2425
imports: [
26+
CommonModule,
2527
MatLineModule,
2628
MatRippleModule,
2729
],

0 commit comments

Comments
 (0)