attachments list icon

This commit is contained in:
Kyle Spearrin 2018-06-08 12:45:31 -04:00
parent de9780a756
commit f05c6ccddd
3 changed files with 21 additions and 26 deletions

View File

@ -4,7 +4,7 @@
<div class="modal-header"> <div class="modal-header">
<h2 class="modal-title"> <h2 class="modal-title">
{{'attachments' | i18n}} {{'attachments' | i18n}}
<small>{{cipher.name}}</small> <small *ngIf="cipher">{{cipher.name}}</small>
</h2> </h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
@ -14,9 +14,12 @@
<table class="table table-hover table-list" *ngIf="cipher && cipher.hasAttachments"> <table class="table table-hover table-list" *ngIf="cipher && cipher.hasAttachments">
<tbody> <tbody>
<tr *ngFor="let a of cipher.attachments"> <tr *ngFor="let a of cipher.attachments">
<td class="table-list-icon">
<i class="fa fa-fw fa-lg fa-file-o" *ngIf="!a.downloading"></i>
<i class="fa fa-spinner fa-lg fa-fw fa-spin" *ngIf="a.downloading"></i>
</td>
<td> <td>
<a href="#" appStopClick appBlurCLick (click)="download(a)">{{a.fileName}}</a> <a href="#" appStopClick appBlurCLick (click)="download(a)">{{a.fileName}}</a>
<i class="fa fa-spinner fa-fw fa-spin text-muted" *ngIf="a.downloading"></i>
<br> <br>
<small>{{a.sizeName}}</small> <small>{{a.sizeName}}</small>
</td> </td>

View File

@ -2,16 +2,16 @@
<table class="table table-hover table-list table-ciphers" *ngIf="searchedCiphers.length > 0"> <table class="table table-hover table-list table-ciphers" *ngIf="searchedCiphers.length > 0">
<tbody> <tbody>
<tr *ngFor="let c of searchedCiphers"> <tr *ngFor="let c of searchedCiphers">
<td (click)="checkCipher(c)"> <td (click)="checkCipher(c)" class="table-list-checkbox">
<input type="checkbox" [(ngModel)]="c.checked"> <input type="checkbox" [(ngModel)]="c.checked">
</td> </td>
<td (click)="checkCipher(c)"> <td (click)="checkCipher(c)" class="table-list-icon">
<app-vault-icon [cipher]="c"></app-vault-icon> <app-vault-icon [cipher]="c"></app-vault-icon>
</td> </td>
<td (click)="checkCipher(c)"> <td (click)="checkCipher(c)">
<a href="#" appStopClick appStopProp (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a> <a href="#" appStopClick appStopProp (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
<i class="fa fa-share-alt text-muted" appStopProp *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i> <i class="fa fa-share-alt" appStopProp *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
<i class="fa fa-paperclip text-muted" appStopProp *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i> <i class="fa fa-paperclip" appStopProp *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
<br> <br>
<small appStopProp>{{c.subTitle}}</small> <small appStopProp>{{c.subTitle}}</small>
</td> </td>

View File

@ -162,7 +162,7 @@ form label {
vertical-align: middle; vertical-align: middle;
line-height: 1; line-height: 1;
small { small, > .fa, .icon {
color: $text-muted; color: $text-muted;
} }
} }
@ -188,29 +188,21 @@ form label {
visibility: hidden; visibility: hidden;
} }
} }
}
app-vault-icon .fa { td.table-list-icon {
color: $text-muted; width: 45px;
} max-width: 45px;
text-align: center;
app-vault { img {
.table-ciphers { @extend .rounded;
td:first-child { @extend .img-fluid;
width: 35px;
max-width: 35px;
} }
}
td:nth-child(2) { td.table-list-checkbox {
width: 45px; width: 35px;
max-width: 45px; max-width: 35px;
text-align: center;
img {
@extend .rounded;
@extend .img-fluid;
}
}
} }
} }