Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-30 13:03:53 +01:00
Code Issues Projects Releases Wiki Activity

styling updates

Browse Source
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">
<div class="row-main">
<app-vault-icon [cipher]="c"></app-vault-icon>
<span class="text">
{{c.name}}
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
</span>
<span class="detail">{{c.subTitle}}</span>
<div class="row-main-content">
<span class="text">
{{c.name}}
<i class="fa fa-share-alt text-muted" *ngIf="c.organizationId" title="{{'shared' | i18n}}"></i>
<i class="fa fa-paperclip text-muted" *ngIf="c.hasAttachments" title="{{'attachments' | i18n}}"></i>
</span>
<span class="detail">{{c.subTitle}}</span>
</div>
</div>
<app-action-buttons [cipher]="c" [showView]="showView" (onView)="viewCipher(c)"
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<ConstantsService>('constantsService')(), messagingService);
export function initFactory(i18nService: I18nService, storageService: StorageService): Function {
export function initFactory(i18nService: I18nService, storageService: StorageService,
popupUtilsService: PopupUtilsService): Function {
return async () => {
if (window.screen.availHeight < 600) {
window.document.body.classList.add('xs');
if (!popupUtilsService.inPopup(window)) {
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) {
window.document.body.classList.add('sm');
window.document.body.classList.add('body-sm');
}
if (i18nService != null) {
@ -120,7 +123,7 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
{
provide: APP_INITIALIZER,
useFactory: initFactory,
deps: [I18nService, StorageService],
deps: [I18nService, StorageService, PopupUtilsService],
multi: true,
},
],

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

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

12
src/scss/base.scss
View File

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

26
src/scss/box.scss
View File

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

4
src/scss/misc.scss
View File

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