[Send] Navigation Tab (#1591)

* Initial commit of send tab

* update jslib (9ddec9b -> 859f317)

* updated skeleton class/html

* removed added space

* cleaned up import groupings

* Updated to use flex container and removed unnecessary scss class

jslib

@@ -1 +1 @@
-Subproject commit 9ddec9baf8b6e7de58c00744eb371dc68e1b6383
+Subproject commit 859f317d59189d223072a406bc2d6924e1fb71bc

src/_locales/en/messages.json

@@ -1470,5 +1470,9 @@
         "example": "googlecom"
       }
     }
+  },
+  "send": {
+    "message": "Send",
+    "description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
   }
 }

src/popup/app-routing.module.ts

@@ -20,9 +20,13 @@ import { SetPasswordComponent } from './accounts/set-password.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { SsoComponent } from './accounts/sso.component';
-import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
+
 import { PasswordGeneratorComponent } from './generator/password-generator.component';
+import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
+
 import { PrivateModeComponent } from './private-mode.component';
+import { TabsComponent } from './tabs.component';
+
 import { ExcludedDomainsComponent } from './settings/excluded-domains.component';
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
@@ -31,7 +35,7 @@ import { OptionsComponent } from './settings/options.component';
 import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SyncComponent } from './settings/sync.component';
-import { TabsComponent } from './tabs.component';
+
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
@@ -42,6 +46,8 @@ import { PasswordHistoryComponent } from './vault/password-history.component';
 import { ShareComponent } from './vault/share.component';
 import { ViewComponent } from './vault/view.component';
 
+import { SendComponent } from './send/send.component';
+
 const routes: Routes = [
     {
         path: '',
@@ -265,6 +271,12 @@ const routes: Routes = [
                 canActivate: [AuthGuardService],
                 data: { state: 'tabs_settings' },
             },
+            {
+                path: 'send',
+                component: SendComponent,
+                canActivate: [AuthGuardService],
+                data: { state: 'tabs_send' },
+            },
         ],
     },
 ];

src/popup/app.module.ts

@@ -25,10 +25,14 @@ import { SetPasswordComponent } from './accounts/set-password.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { SsoComponent } from './accounts/sso.component';
-import { AppComponent } from './app.component';
+
 import { PasswordGeneratorHistoryComponent } from './generator/password-generator-history.component';
 import { PasswordGeneratorComponent } from './generator/password-generator.component';
+
+import { AppComponent } from './app.component';
 import { PrivateModeComponent } from './private-mode.component';
+import { TabsComponent } from './tabs.component';
+
 import { ExcludedDomainsComponent } from './settings/excluded-domains.component';
 import { ExportComponent } from './settings/export.component';
 import { FolderAddEditComponent } from './settings/folder-add-edit.component';
@@ -37,7 +41,7 @@ import { OptionsComponent } from './settings/options.component';
 import { PremiumComponent } from './settings/premium.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SyncComponent } from './settings/sync.component';
-import { TabsComponent } from './tabs.component';
+
 import { AddEditComponent } from './vault/add-edit.component';
 import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
@@ -48,6 +52,8 @@ import { PasswordHistoryComponent } from './vault/password-history.component';
 import { ShareComponent } from './vault/share.component';
 import { ViewComponent } from './vault/view.component';
 
+import { SendComponent } from './send/send.component';
+
 import { A11yTitleDirective } from 'jslib/angular/directives/a11y-title.directive';
 import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
 import { AutofocusDirective } from 'jslib/angular/directives/autofocus.directive';
@@ -205,6 +211,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         RegisterComponent,
         SearchCiphersPipe,
         SelectCopyDirective,
+        SendComponent,
         SettingsComponent,
         ShareComponent,
         StopClickDirective,

src/popup/scss/base.scss

@@ -281,14 +281,13 @@ header {
     }
 
     ul {
-        width: 100%;
+        display: flex;
         list-style: none;
         padding: 0;
         margin: 0;
 
         li {
-            width: 25%;
-            float: left;
+            flex: 1;
             display: inline-block;
             padding: 0;
             margin: 0;
@@ -329,12 +328,6 @@ header {
             }
         }
     }
-
-    &.tabs-3 {
-        ul li {
-            width: 33.33%;
-        }
-    }
 }
 
 app-root {

src/popup/send/send.component.html

@@ -0,0 +1,8 @@
+<header>
+</header>
+<content>
+    <div class="no-items">
+        <i class="fa fa-smile-o fa-4x"></i>
+        <p>Coming soon...</p>
+    </div>
+</content>

src/popup/send/send.component.ts

@@ -0,0 +1,35 @@
+import {
+    Component,
+    NgZone,
+} from '@angular/core';
+
+import { SendView } from 'jslib/models/view/sendView';
+
+import { SendComponent as BaseSendComponent } from 'jslib/angular/components/send/send.component';
+
+import { EnvironmentService } from 'jslib/abstractions/environment.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { SendService } from 'jslib/abstractions/send.service';
+
+import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
+
+@Component({
+    selector: 'app-send',
+    templateUrl: 'send.component.html',
+})
+export class SendComponent extends BaseSendComponent {
+    constructor(sendService: SendService, i18nService: I18nService,
+        platformUtilsService: PlatformUtilsService, environmentService: EnvironmentService,
+        broadcasterService: BroadcasterService, ngZone: NgZone) {
+        super(sendService, i18nService, platformUtilsService, environmentService, broadcasterService, ngZone);
+    }
+
+    addSend() {
+        // TODO
+    }
+
+    editSend(send: SendView) {
+        // TODO
+    }
+}

src/popup/tabs.component.html

@@ -1,6 +1,6 @@
 <div class="tab-page">
     <router-outlet></router-outlet>
-    <nav class="tabs" [ngClass]="{'tabs-3': !showCurrentTab}">
+    <nav class="tabs">
         <ul>
             <li routerLinkActive="active" *ngIf="showCurrentTab">
                 <a routerLink="current" appA11yTitle="{{'currentTab' | i18n}}">
@@ -12,6 +12,11 @@
                     <i class="fa fa-lock fa-2x" aria-hidden="true"></i>{{'myVault' | i18n}}
                 </a>
             </li>
+            <li routerLinkActive="active">
+                <a routerLink="send" appA11yTitle="{{'send' | i18n}}">
+                    <i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i>{{'send' | i18n}}
+                </a>
+            </li>
             <li routerLinkActive="active">
                 <a routerLink="generator" appA11yTitle="{{'passGen' | i18n}}">
                     <i class="fa fa-refresh fa-2x" aria-hidden="true"></i>{{'generator' | i18n}}