Skip to content

Commit

Permalink
fix(list): align avatar size in dense list with spec
Browse files Browse the repository at this point in the history
* Fixes the dense list avatar being slightly larger than the spec.
* Removes an unnecessary setter from the `MatListItem` class.

Fixes #10019.
  • Loading branch information
crisbeto committed Feb 19, 2018
1 parent 45399c6 commit 40c7657
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 17 deletions.
19 changes: 11 additions & 8 deletions src/lib/list/list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,14 @@ $mat-dense-two-line-height: 60px;
$mat-dense-three-line-height: 76px;
$mat-dense-multi-line-padding: 16px;
$mat-dense-list-icon-size: 20px;
$mat-dense-avatar-size: 36px;

$mat-list-item-inset-divider-offset: 72px;

// This mixin provides all list-item styles, changing font size and height
// based on whether the list is in dense mode.
@mixin mat-list-item-base($base-height, $avatar-height, $two-line-height,
$three-line-height, $multi-line-padding, $icon-size) {
@mixin mat-list-item-base($base-height, $has-avatar-height, $two-line-height,
$three-line-height, $multi-line-padding, $icon-size, $avatar-size) {

// Prevents the wrapper `mat-list-item-content` from collapsing due to it
// being `inline` by default.
Expand Down Expand Up @@ -69,7 +70,7 @@ $mat-list-item-inset-divider-offset: 72px;
}

&.mat-list-item-avatar {
height: $avatar-height;
height: $has-avatar-height;
}

&.mat-2-line {
Expand Down Expand Up @@ -128,12 +129,12 @@ $mat-list-item-inset-divider-offset: 72px;

.mat-list-avatar {
flex-shrink: 0;
width: $mat-list-avatar-size;
height: $mat-list-avatar-size;
width: $avatar-size;
height: $avatar-size;
border-radius: 50%;

~ .mat-divider-inset {
@include mat-inset-divider-offset($mat-list-avatar-size, $mat-list-side-padding);
@include mat-inset-divider-offset($avatar-size, $mat-list-side-padding);
}
}

Expand Down Expand Up @@ -210,7 +211,8 @@ $mat-list-item-inset-divider-offset: 72px;
$mat-list-two-line-height,
$mat-list-three-line-height,
$mat-list-multi-line-padding,
$mat-list-icon-size
$mat-list-icon-size,
$mat-list-avatar-size
);
}
}
Expand All @@ -232,7 +234,8 @@ $mat-list-item-inset-divider-offset: 72px;
$mat-dense-two-line-height,
$mat-dense-three-line-height,
$mat-dense-multi-line-padding,
$mat-dense-list-icon-size
$mat-dense-list-icon-size,
$mat-dense-avatar-size
);
}
}
Expand Down
11 changes: 2 additions & 9 deletions src/lib/list/list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ export class MatListSubheaderCssMatStyler {}
exportAs: 'matListItem',
host: {
'class': 'mat-list-item',
'[class.mat-list-item-avatar]': '_avatar',
'(focus)': '_handleFocus()',
'(blur)': '_handleBlur()',
},
Expand All @@ -113,15 +114,7 @@ export class MatListItem extends _MatListItemMixinBase implements AfterContentIn
private _isNavList: boolean = false;

@ContentChildren(MatLine) _lines: QueryList<MatLine>;

@ContentChild(MatListAvatarCssMatStyler)
set _hasAvatar(avatar: MatListAvatarCssMatStyler) {
if (avatar != null) {
this._element.nativeElement.classList.add('mat-list-item-avatar');
} else {
this._element.nativeElement.classList.remove('mat-list-item-avatar');
}
}
@ContentChild(MatListAvatarCssMatStyler) _avatar: MatListAvatarCssMatStyler;

constructor(private _element: ElementRef,
@Optional() private _navList: MatNavList) {
Expand Down

0 comments on commit 40c7657

Please sign in to comment.