Skip to content
Snippets Groups Projects
Commit 052bc068 authored by OZGCloud's avatar OZGCloud
Browse files

OZG-530 only show file size if gt 0

parent 430eaab4
No related branches found
No related tags found
No related merge requests found
:host {
max-width: 100%;
}
.files { .files {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
<div class="file" [matTooltip]="file.name"> <div class="file" [matTooltip]="file.name">
<mat-icon>file_present</mat-icon> <mat-icon>file_present</mat-icon>
<span class="name">{{ file.name }}</span> <span class="name">{{ file.name }}</span>
<span class="size" [innerHTML]="file.size | fileSize"></span> <span class="size" data-test-class="file-size" [innerHTML]="file.size | fileSize"></span>
</div> </div>
:host { :host {
max-width: 100%; max-width: 100%;
display: flex;
justify-content: flex-start;
} }
.file { .file {
background-color: rgba(#000, 0.04); background-color: rgba(#000, 0.04);
margin: 4px 0; margin: 4px 0;
padding: 0 2px; padding: 0 8px 0 2px;
border-radius: 14px; border-radius: 14px;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
max-width: calc(100% - 4px);
align-items: center; align-items: center;
max-width: calc(100% - 10px);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
...@@ -27,17 +29,10 @@ ...@@ -27,17 +29,10 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mat-icon,
.size,
.name {
margin: 2px;
}
.size { .size {
font-size: 12px; font-size: 12px;
flex-shrink: 0; flex-shrink: 0;
opacity: 0.4; opacity: 0.4;
margin-right: 8px;
::ng-deep { ::ng-deep {
.unit { .unit {
...@@ -45,3 +40,9 @@ ...@@ -45,3 +40,9 @@
} }
} }
} }
.mat-icon,
.size,
.name {
margin: 2px;
}
...@@ -12,6 +12,7 @@ describe('FileComponent', () => { ...@@ -12,6 +12,7 @@ describe('FileComponent', () => {
let fixture: ComponentFixture<FileComponent>; let fixture: ComponentFixture<FileComponent>;
const file: FileResource = createFileResource([FileLinkRel.DOWNLOAD]); const file: FileResource = createFileResource([FileLinkRel.DOWNLOAD]);
const fileSizeSelector: string = '[data-test-class="file-size"]';
beforeEach(async () => { beforeEach(async () => {
await TestBed.configureTestingModule({ await TestBed.configureTestingModule({
...@@ -35,4 +36,20 @@ describe('FileComponent', () => { ...@@ -35,4 +36,20 @@ describe('FileComponent', () => {
it('should create', () => { it('should create', () => {
expect(component).toBeTruthy(); expect(component).toBeTruthy();
}); });
describe('file size', () => {
it('should visible if size > 0', () => {
const element = fixture.nativeElement.querySelector(fileSizeSelector);
expect(element).toBeInstanceOf(HTMLElement);
})
it('should be hidden if size = 0', () => {
component.file = { ...file, size: 0 }
const element = fixture.nativeElement.querySelector(fileSizeSelector);
expect(element).toBeInstanceOf(HTMLElement);
})
})
}); });
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment