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

View File

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

View File

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