no items message for ciphers

This commit is contained in:
Kyle Spearrin 2018-01-31 17:58:06 -05:00
parent 59726ad818
commit 5e7ac7a7ec
6 changed files with 52 additions and 14 deletions

View File

@ -6,8 +6,9 @@
</div>
</div>
<div class="content">
<div class="list">
<a *ngFor="let c of ciphers | searchCiphers: searchText" appStopClick (click)="cipherClicked(c)"
<ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
<div class="list" *ngIf="searchedCiphers.length > 0">
<a *ngFor="let c of searchedCiphers" appStopClick (click)="cipherClicked(c)"
href="#" title="{{'viewItem' | i18n}}" [ngClass]="{'active': c.id === activeCipherId}">
<app-vault-icon [cipher]="c"></app-vault-icon>
<span class="text">
@ -20,6 +21,11 @@
<span class="detail">{{c.subTitle}}</span>
</a>
</div>
<div *ngIf="searchedCiphers.length === 0" class="no-items">
<p>{{'noItemsInList' | i18n}}</p>
<button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
</div>
</ng-container>
</div>
<div class="footer">
<button appBlurClick (click)="addCipher()" class="block primary" title="{{'addItem' | i18n}}">

View File

@ -442,5 +442,8 @@
},
"itemInformation": {
"message": "Item Information"
},
"noItemsInList": {
"message": "There are no items to list."
}
}

View File

@ -31,6 +31,10 @@ img {
a {
color: $brand-primary;
text-decoration: none;
&:hover, &:focus {
color: darken($brand-primary, 6%);
}
}
input, select, textarea, button {

View File

@ -39,4 +39,9 @@
display: block;
width: 100%;
}
&.link {
border: none !important;
background: none !important;
}
}

View File

@ -8,6 +8,10 @@
color: $text-muted !important;
}
.text-center {
text-align: center;
}
[hidden] {
display: none !important;
}
@ -95,3 +99,4 @@
margin-top: 10px;
}
}

View File

@ -11,6 +11,10 @@
max-width: 250px;
border-right: 1px solid $border-color-dark;
.inner-content {
padding-bottom: 0 !important;
}
h2 {
color: $gray-light;
text-transform: uppercase;
@ -102,6 +106,16 @@
min-width: 200px;
max-width: 350px;
border-right: 1px solid $border-color-dark;
.no-items {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 10px;
}
}
#details {
@ -191,6 +205,7 @@
flex: 1 1 auto;
position: relative;
overflow: auto;
height: 100%;
}
.footer {