Adds a third line for comments

This commit is contained in:
GabrielMeyer 2020-04-03 15:51:14 +02:00
parent ad4ed3443a
commit 170aa1c8f0
3 changed files with 30 additions and 34 deletions

View File

@ -1,3 +1,19 @@
@mixin icon-container($iconSize, $contentSize, $fontWeight) {
line-height: $iconSize;
& > mat-icon {
font-size: $iconSize;
width: $iconSize;
height: $iconSize;
margin-top: 0 !important;
}
& > .content-node {
font-size: $contentSize;
font-weight: $fontWeight;
}
}
os-icon-container {
display: flex;
align-items: center;
@ -6,33 +22,16 @@ os-icon-container {
margin-top: 5px;
}
&.medium-container {
$size: 18px;
line-height: $size;
&.small-container {
@include icon-container(12px, 12px, 400);
}
mat-icon {
font-size: $size;
height: $size;
width: $size;
margin-top: 0 !important;
}
&.medium-container {
@include icon-container(18px, 14px, 400);
}
&.large-container {
$size: 24px;
line-height: $size;
mat-icon {
font-size: $size;
width: $size;
height: $size;
margin-top: 0 !important;
}
.content-node {
font-size: 16px;
font-weight: 500;
}
@include icon-container(24px, 16px, 500);
}
.content-node {

View File

@ -11,12 +11,7 @@ export class IconContainerComponent {
*/
@HostBinding('class')
public get classes(): string {
switch (this.size) {
case 'medium':
return 'medium-container';
case 'large':
return 'large-container';
}
return `${this.size}-container`;
}
/**
@ -29,7 +24,7 @@ export class IconContainerComponent {
* Optional size property. Can be large, if needed.
*/
@Input()
public size: 'medium' | 'large' = 'medium';
public size: 'small' | 'medium' | 'large' = 'medium';
/**
* Reverse text and icon.

View File

@ -17,7 +17,7 @@
<os-list-view-table
[listObservableProvider]="repo"
[vScrollFixed]="64"
[vScrollFixed]="76"
[filterService]="filterService"
[columns]="tableColumnDefinition"
[multiSelect]="isMultiSelect"
@ -40,6 +40,11 @@
<div *ngIf="showSubtitle" class="subtitle ellipsis-overflow">
{{ item.getSubtitle() }}
</div>
<div *ngIf="item.comment" class="subtitle ellipsis-overflow">
<os-icon-container size="small" icon="comment" [noWrap]="true">
{{ item.comment }}
</os-icon-container>
</div>
</os-icon-container>
</div>
</div>
@ -56,9 +61,6 @@
</os-icon-container>
</div>
</div>
<div *ngIf="item.comment" class="align-right">
<os-icon-container [matTooltip]="item.comment" icon="comment"></os-icon-container>
</div>
</div>
<!-- Menu -->