Skip to content

Commit 8e2d191

Browse files
mmalerbammalerba
committed
refactor list-item template to be easier to reason about and fill in list-option template
1 parent 9df4ab9 commit 8e2d191

File tree

5 files changed

+85
-28
lines changed

5 files changed

+85
-28
lines changed

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

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,33 @@
1-
<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
1+
<!-- Divide content into templates -->
22

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>
3+
<ng-template #prefix>
4+
<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
5+
</ng-template>
76

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">
7+
<ng-template #text>
8+
<span class="mdc-list-item__text">
9+
<ng-content *ngIf="lines.length else unsortedContent" select="[mat-line],[matLine]">
10+
</ng-content>
11+
</span>
12+
</ng-template>
13+
14+
<ng-template #suffix>
15+
<span class="mdc-list-item__meta" *ngIf="lines.length">
16+
<ng-container [ngTemplateOutlet]="unsortedContent"></ng-container>
17+
</span>
18+
</ng-template>
19+
20+
<ng-template #divider>
21+
<ng-content select="mat-divider"></ng-content>
22+
</ng-template>
23+
24+
<ng-template #unsortedContent>
1325
<ng-content></ng-content>
14-
</span>
26+
</ng-template>
27+
28+
<!-- Arrange the templates in the right order -->
1529

16-
<ng-content select="mat-divider"></ng-content>
30+
<ng-container [ngTemplateOutlet]="prefix"></ng-container>
31+
<ng-container [ngTemplateOutlet]="text"></ng-container>
32+
<ng-container [ngTemplateOutlet]="suffix"></ng-container>
33+
<ng-container [ngTemplateOutlet]="divider"></ng-container>

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

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,50 @@
1-
<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
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">
1+
<!-- Divide content into templates -->
2+
3+
<ng-template #prefix>
4+
<ng-container *ngIf="checkboxPosition === 'after' else checkbox" [ngTemplateOutlet]="icons">
5+
</ng-container>
6+
</ng-template>
7+
8+
<ng-template #suffix>
9+
<span class="mdc-list-item__meta">
10+
<ng-container *ngIf="checkboxPosition === 'after' else icons" [ngTemplateOutlet]="checkbox">
11+
</ng-container>
12+
<ng-container [ngTemplateOutlet]="actions"></ng-container>
13+
</span>
14+
</ng-template>
15+
16+
<ng-template #checkbox>
17+
<span class="mdc-list-item__graphic">
18+
<mat-pseudo-checkbox></mat-pseudo-checkbox>
19+
</span>
20+
</ng-template>
21+
22+
<ng-template #icons>
23+
<ng-content select="[mat-list-avatar],[matListAvatar],[mat-list-icon],[matListIcon]"></ng-content>
24+
</ng-template>
25+
26+
<ng-template #text>
27+
<span class="mdc-list-item__text">
28+
<ng-content *ngIf="lines.length else unsortedContent" select="[mat-line],[matLine]">
29+
</ng-content>
30+
</span>
31+
</ng-template>
32+
33+
<ng-template #actions>
34+
<ng-container *ngIf="lines.length" [ngTemplateOutlet]="unsortedContent"></ng-container>
35+
</ng-template>
36+
37+
<ng-template #divider>
38+
<ng-content select="mat-divider"></ng-content>
39+
</ng-template>
40+
41+
<ng-template #unsortedContent>
1342
<ng-content></ng-content>
14-
</span>
43+
</ng-template>
44+
45+
<!-- Arrange the templates in the right order -->
1546

16-
<ng-content select="mat-divider"></ng-content>
47+
<ng-container [ngTemplateOutlet]="prefix"></ng-container>
48+
<ng-container [ngTemplateOutlet]="text"></ng-container>
49+
<ng-container [ngTemplateOutlet]="suffix"></ng-container>
50+
<ng-container [ngTemplateOutlet]="divider"></ng-container>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,3 +108,8 @@
108108
right: 0;
109109
opacity: 0;
110110
}
111+
112+
.mat-mdc-list-option .mdc-list-item__meta .mdc-list-item__graphic {
113+
margin-right: 0;
114+
vertical-align: middle;
115+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {CommonModule} from '@angular/common';
1010
import {NgModule} from '@angular/core';
11-
import {MatLineModule, MatRippleModule} from '@angular/material/core';
11+
import {MatLineModule, MatPseudoCheckboxModule, MatRippleModule} from '@angular/material/core';
1212
import {MatDividerModule} from '@angular/material/divider';
1313
import {MatActionList} from './action-list';
1414
import {
@@ -26,6 +26,7 @@ import {MatListOption, MatSelectionList} from './selection-list';
2626
CommonModule,
2727
MatLineModule,
2828
MatRippleModule,
29+
MatPseudoCheckboxModule,
2930
],
3031
exports: [
3132
MatList,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ export class MatListOption extends MatListItemBase {
106106

107107
// TODO: Implement these inputs.
108108
@Input() disableRipple: boolean;
109-
@Input() checkboxPosition: 'before' | 'after';
109+
@Input() checkboxPosition: 'before' | 'after' = 'before';
110110
@Input() color: ThemePalette;
111111
@Input() value: any;
112112
@Input() disabled: boolean;

0 commit comments

Comments
 (0)