vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

styling updates

This commit is contained in:
Kyle Spearrin 2018-04-09 22:25:03 -04:00
parent 42f34e4185
commit b1ac825eba
6 changed files with 86 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/popup2/components/ciphers-list.component.html
View File

@ -2,12 +2,14 @@
class="box-content-row box-content-row-flex"> class="box-content-row box-content-row-flex">
<div class="row-main"> <div class="row-main">
<app-vault-icon [cipher]="c"></app-vault-icon> <app-vault-icon [cipher]="c"></app-vault-icon>
<span class="text"> <div class="row-main-content">
{{c.name}} <span class="text">
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i> {{c.name}}
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i> <i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
</span> <i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
<span class="detail">{{c.subTitle}}</span> </span>
<span class="detail">{{c.subTitle}}</span>
</div>
</div> </div>
<app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)" <app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)"
class="action-buttons"></app-action-buttons> class="action-buttons"></app-action-buttons>

13
src/popup2/services/services.module.ts
View File

@ -58,12 +58,15 @@ export const authService = new AuthService(getBgService<CryptoService>('cryptoSe
getBgService<I18nService>('i18n2Service')(), getBgService<PlatformUtilsService>('platformUtilsService')(), getBgService<I18nService>('i18n2Service')(), getBgService<PlatformUtilsService>('platformUtilsService')(),
getBgService<ConstantsService>('constantsService')(), messagingService); getBgService<ConstantsService>('constantsService')(), messagingService);
export function initFactory(i18nService: I18nService, storageService: StorageService): Function { export function initFactory(i18nService: I18nService, storageService: StorageService,
popupUtilsService: PopupUtilsService): Function {
return async () => { return async () => {
if (window.screen.availHeight < 600) { if (!popupUtilsService.inPopup(window)) {
window.document.body.classList.add('xs'); window.document.body.classList.add('body-full');
} else if (window.screen.availHeight < 600) {
window.document.body.classList.add('body-xs');
} else if (window.screen.availHeight <= 800) { } else if (window.screen.availHeight <= 800) {
window.document.body.classList.add('sm'); window.document.body.classList.add('body-sm');
} }
if (i18nService != null) { if (i18nService != null) {
@ -120,7 +123,7 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
{ {
provide: APP_INITIALIZER, provide: APP_INITIALIZER,
useFactory: initFactory, useFactory: initFactory,
deps: [I18nService, StorageService], deps: [I18nService, StorageService, PopupUtilsService],
multi: true, multi: true,
}, },
], ],

85
src/popup2/vault/groupings.component.html
View File

@ -39,37 +39,41 @@
<span class="flex-right">4</span> <span class="flex-right">4</span>
</div> </div>
<div class="box-content single-line"> <div class="box-content single-line">
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)"> <a href="#" class="box-content-row" appStopClick appBlurClick
<div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div> (click)="selectType(cipherType.Login)">
{{'typeLogin' | i18n}} <div class="row-main">
<div class="flex-right"> <div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span> <span class="text">{{'typeLogin' | i18n}}</span>
<i class="fa fa-chevron-right fa-lg"></i>
</div> </div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a> </a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)"> <a href="#" class="box-content-row" appStopClick appBlurClick
<div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div> (click)="selectType(cipherType.Card)">
{{'typeCard' | i18n}} <div class="row-main">
<div class="flex-right"> <div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span> <span class="text">{{'typeCard' | i18n}}</span>
<i class="fa fa-chevron-right fa-lg"></i>
</div> </div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a> </a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)"> <a href="#" class="box-content-row" appStopClick appBlurClick
<div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div> (click)="selectType(cipherType.Identity)">
{{'typeIdentity' | i18n}} <div class="row-main">
<div class="flex-right"> <div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span> <span class="text">{{'typeIdentity' | i18n}}</span>
<i class="fa fa-chevron-right fa-lg"></i>
</div> </div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a> </a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.SecureNote)"> <a href="#" class="box-content-row" appStopClick appBlurClick
<div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div> (click)="selectType(cipherType.SecureNote)">
{{'typeSecureNote' | i18n}} <div class="row-main">
<div class="flex-right"> <div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
<span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span> <span class="text">{{'typeSecureNote' | i18n}}</span>
<i class="fa fa-chevron-right fa-lg"></i>
</div> </div>
<span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a> </a>
</div> </div>
</div> </div>
@ -79,16 +83,17 @@
<span class="flex-right">{{folderCount}}</span> <span class="flex-right">{{folderCount}}</span>
</div> </div>
<div class="box-content single-line"> <div class="box-content single-line">
<a *ngFor="let f of folders" href="#" class="box-content-row" appStopClick appBlurClick <a *ngFor="let f of folders" href="#" class="box-content-row"
(click)="selectFolder(f)"> appStopClick appBlurClick (click)="selectFolder(f)">
<div class="icon"> <div class="row-main">
<i class="fa fa-fw fa-lg" [ngClass]="{'fa-folder-open': f.id, 'fa-folder-open-o': !f.id}"></i> <div class="icon">
</div> <i class="fa fa-fw fa-lg"
{{f.name}} [ngClass]="{'fa-folder-open': f.id, 'fa-folder-open-o': !f.id}"></i>
<div class="flex-right"> </div>
<span class="row-sub-label">{{folderCounts.get(f.id) || 0}}</span> <span class="text">{{f.name}}</span>
<i class="fa fa-chevron-right fa-lg"></i>
</div> </div>
<span class="row-sub-label">{{folderCounts.get(f.id) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a> </a>
</div> </div>
</div> </div>
@ -98,14 +103,14 @@
<span class="flex-right">{{collections.length}}</span> <span class="flex-right">{{collections.length}}</span>
</div> </div>
<div class="box-content single-line"> <div class="box-content single-line">
<a *ngFor="let c of collections" href="#" class="box-content-row" appStopClick appBlurClick <a *ngFor="let c of collections" href="#" class="box-content-row"
(click)="selectCollection(c)"> appStopClick appBlurClick (click)="selectCollection(c)">
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div> <div class="row-main">
{{c.name}} <div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
<div class="flex-right"> <span class="text">{{c.name}}</span>
<span class="row-sub-label">{{collectionCounts.get(c.id) || 0}}</span>
<i class="fa fa-chevron-right fa-lg"></i>
</div> </div>
<span class="row-sub-label">{{collectionCounts.get(c.id) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a> </a>
</div> </div>
</div> </div>

12
src/scss/base.scss
View File

@ -20,15 +20,20 @@ body {
height: 600px !important; height: 600px !important;
overflow: hidden; overflow: hidden;
&.sm { &.body-sm {
width: 375px !important; width: 375px !important;
height: 500px !important; height: 500px !important;
} }
&.xs { &.body-xs {
width: 375px !important; width: 375px !important;
height: 300px !important; height: 300px !important;
} }
&.body-full {
width: 100% !important;
height: 100% !important;
}
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -254,7 +259,8 @@ content {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
overflow: auto; overflow-y: auto;
overflow-x: hidden;
background-color: $background-color; background-color: $background-color;
&.no-header { &.no-header {

26
src/scss/box.scss
View File

@ -247,9 +247,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
float: left; min-width: 34px;
height: 36px; height: 100%;
width: 34px;
margin-left: -5px; margin-left: -5px;
color: $text-muted; color: $text-muted;
@ -326,17 +325,6 @@
background-color: initial; background-color: initial;
} }
} }
&.single-line {
.box-content-row {
display: flex;
.icon {
height: initial;
text-align: center;
}
}
}
} }
.box-footer { .box-footer {
@ -373,10 +361,20 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.row-main {
display: flex;
min-width: 0;
.row-main-content {
min-width: 0;
}
}
} }
&.single-line { &.single-line {
.box-content-row { .box-content-row {
display: flex;
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
} }

4
src/scss/misc.scss
View File

@ -105,3 +105,7 @@ app-password-generator .password-block {
text-align: center; text-align: center;
margin: 20px; margin: 20px;
} }
app-vault-icon {
display: flex;
}