diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 491786da50..b93a3a5333 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -63,10 +63,11 @@ import { ShareComponent } from './vault/share.component'; import { VaultComponent } from './vault/vault.component'; import { ViewComponent } from './vault/view.component'; -import { AccessComponent } from './send/access.component'; import { AddEditComponent as SendAddEditComponent } from './send/add-edit.component'; import { SendComponent } from './send/send.component'; +import { NavComponent } from './layout/nav.component'; + import { registerLocaleData } from '@angular/common'; import localeBe from '@angular/common/locales/be'; import localeBg from '@angular/common/locales/bg'; @@ -160,7 +161,6 @@ registerLocaleData(localeZhTw, 'zh-TW'); ], declarations: [ A11yTitleDirective, - AccessComponent, AddEditComponent, ApiActionDirective, AppComponent, @@ -183,6 +183,7 @@ registerLocaleData(localeZhTw, 'zh-TW'); LockComponent, LoginComponent, ModalComponent, + NavComponent, PasswordGeneratorComponent, PasswordGeneratorHistoryComponent, PasswordHistoryComponent, diff --git a/src/app/layout/nav.component.html b/src/app/layout/nav.component.html new file mode 100644 index 0000000000..d24d23f9f8 --- /dev/null +++ b/src/app/layout/nav.component.html @@ -0,0 +1,5 @@ + + + {{ item.label }} + + diff --git a/src/app/layout/nav.component.ts b/src/app/layout/nav.component.ts new file mode 100644 index 0000000000..ea7a24018b --- /dev/null +++ b/src/app/layout/nav.component.ts @@ -0,0 +1,20 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-nav', + templateUrl: 'nav.component.html', +}) +export class NavComponent { + items: any[] = [ + { + link: '/vault', + icon: 'fa-lock', + label: 'My Vault', + }, + { + link: '/send', + icon: 'fa-paper-plane', + label: 'Send', + }, + ]; +} diff --git a/src/app/send/access.component.html b/src/app/send/access.component.html deleted file mode 100644 index 2f45085ea4..0000000000 --- a/src/app/send/access.component.html +++ /dev/null @@ -1,7 +0,0 @@ -
-
-
-

Under construction

-
-
-
diff --git a/src/app/send/access.component.ts b/src/app/send/access.component.ts deleted file mode 100644 index 2cd2832da9..0000000000 --- a/src/app/send/access.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { - Component, - OnInit, -} from '@angular/core'; - -@Component({ - selector: 'app-send-access', - templateUrl: 'access.component.html', -}) -export class AccessComponent implements OnInit { - constructor() { - return; - } - - ngOnInit() { - return; - } -} diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html index 624a87014d..9315c4e6a4 100644 --- a/src/app/send/send.component.html +++ b/src/app/send/send.component.html @@ -3,32 +3,30 @@
-
-

{{'filters' | i18n}}

- -

{{'types' | i18n}}

- -
-
- -
+

{{'filters' | i18n}}

+ +

{{'types' | i18n}}

+ +
+
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html index f177c11adb..57f71782fb 100644 --- a/src/app/vault/groupings.component.html +++ b/src/app/vault/groupings.component.html @@ -1,106 +1,104 @@
-
-

{{'filters' | i18n}}

+

{{'filters' | i18n}}

+ +

{{'types' | i18n}}

+ +

{{'loading' | i18n}}

+ +
+

{{'folders' | i18n}}

+ +
-

{{'types' | i18n}}

- -

{{'loading' | i18n}}

- -
-

{{'folders' | i18n}}

- -
+
+

{{'collections' | i18n}}

-
- -
+
+ +
+
diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss index b868ad4181..e0e2204d0d 100644 --- a/src/scss/buttons.scss +++ b/src/scss/buttons.scss @@ -77,16 +77,6 @@ text-decoration: underline; } } - - &.icon-link { - padding: 10px; - font-size: 20px; - text-align: center; - text-decoration: none; - margin: 5px 2px; - border-radius: 50%; - width: 45px; - } } .action-buttons { diff --git a/src/scss/vault.scss b/src/scss/vault.scss index 7a52bb8697..ccbe744119 100644 --- a/src/scss/vault.scss +++ b/src/scss/vault.scss @@ -24,17 +24,24 @@ border-right-color: themed('borderColor'); } - .inner-content { + .content { display: flex; - height: 100%; flex-direction: column; flex-grow: 1; justify-content: space-between; - padding-right: 5px; - user-select: none; - > ul, > div > ul { - margin: 0 0 15px 0; + .footer { + padding: 0; + } + + .inner-content { + padding-bottom: 0; + padding-right: 5px; + user-select: none; + + > ul, > div > ul { + margin: 0 0 15px 0; + } } } @@ -418,7 +425,7 @@ } .footer { - height: 50px; + height: 55px; flex: 0 0 auto; border-top: 1px solid #000000; display: flex; @@ -443,4 +450,31 @@ display: flex; } } + + .nav { + height: 100%; + width: 100%; + display: flex; + .btn { + width: 100%; + font-size: $font-size-base * 0.8; + flex: 1; + border: 0; + border-radius: 0; + padding-bottom: 4px; + + &:not(.active) { + @include themify($themes) { + background-color: themed('backgroundColorAlt'); + } + } + + i { + font-size: $font-size-base * 1.5; + display: block; + margin-bottom: 2px; + text-align: center; + } + } + } }