move new app into popup folder

src/popup/components/action-buttons.component.html

@@ -0,0 +1,37 @@
+<span class="row-btn" (click)="view()" appStopClick appStopProp title="{{'view' | i18n}}" *ngIf="showView">
+    <i class="fa fa-lg fa-eye"></i>
+</span>
+<ng-container *ngIf="cipher.type === cipherType.Login">
+    <span class="row-btn" appStopClick appStopProp title="{{'launch' | i18n}}" (click)="launch()"
+          *ngIf="!showView" [ngClass]="{disabled: !cipher.login.canLaunch}">
+        <i class="fa fa-lg fa-share-square-o"></i>
+    </span>
+    <span class="row-btn" appStopClick appStopProp title="{{'copyUsername' | i18n}}"
+          (click)="copy(cipher.login.username, 'username', 'Username')"
+          [ngClass]="{disabled: !cipher.login.username}">
+        <i class="fa fa-lg fa-user"></i>
+    </span>
+    <span class="row-btn" appStopClick appStopProp title="{{'copyPassword' | i18n}}"
+          (click)="copy(cipher.login.password, 'password', 'Password')"
+          [ngClass]="{disabled: !cipher.login.password}">
+        <i class="fa fa-lg fa-key"></i>
+    </span>
+</ng-container>
+<ng-container *ngIf="cipher.type === cipherType.Card">
+    <span class="row-btn" appStopClick appStopProp title="{{'copyNumber' | i18n}}"
+          (click)="copy(cipher.card.number, 'number', 'Card Number')"
+          [ngClass]="{disabled: !cipher.card.number}">
+        <i class="fa fa-lg fa-hashtag"></i>
+    </span>
+    <span class="row-btn" appStopClick appStopProp title="{{'copySecurityCode' | i18n}}"
+          (click)="copy(cipher.card.code, 'securityCode', 'Security Code')"
+          [ngClass]="{disabled: !cipher.card.code}">
+        <i class="fa fa-lg fa-key"></i>
+    </span>
+</ng-container>
+<ng-container *ngIf="cipher.type === cipherType.SecureNote">
+    <span class="row-btn" appStopClick appStopProp title="{{'copyNote' | i18n}}"
+          (click)="copy(cipher.notes, 'note', 'Note')" [ngClass]="{disabled: !cipher.notes}">
+        <i class="fa fa-lg fa-clipboard"></i>
+    </span>
+</ng-container>

src/popup/components/action-buttons.component.ts

@@ -0,0 +1,63 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { BrowserApi } from '../../browser/browserApi';
+
+import { CipherType } from 'jslib/enums/cipherType';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { PopupUtilsService } from '../services/popup-utils.service';
+
+@Component({
+    selector: 'app-action-buttons',
+    templateUrl: 'action-buttons.component.html',
+})
+export class ActionButtonsComponent {
+    @Output() onView = new EventEmitter<CipherView>();
+    @Input() cipher: CipherView;
+    @Input() showView = false;
+
+    cipherType = CipherType;
+
+    constructor(private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private platformUtilsService: PlatformUtilsService,
+        private popupUtilsService: PopupUtilsService) { }
+
+    launch() {
+        if (this.cipher.type !== CipherType.Login || !this.cipher.login.canLaunch) {
+            return;
+        }
+
+        this.analytics.eventTrack.next({ action: 'Launched URI From Listing' });
+        BrowserApi.createNewTab(this.cipher.login.uri);
+        if (this.popupUtilsService.inPopup(window)) {
+            BrowserApi.closePopup(window);
+        }
+    }
+
+    copy(value: string, typeI18nKey: string, aType: string) {
+        if (value == null) {
+            return;
+        }
+
+        this.analytics.eventTrack.next({ action: 'Copied ' + aType });
+        this.platformUtilsService.copyToClipboard(value);
+        this.toasterService.popAsync('info', null,
+            this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey)));
+    }
+
+    view() {
+        this.onView.emit(this.cipher);
+    }
+}

src/popup/components/ciphers-list.component.html

@@ -0,0 +1,16 @@
+<a *ngFor="let c of ciphers" (click)="selectCipher(c)" href="#" appStopClick title="{{title}}"
+   class="box-content-row box-content-row-flex">
+    <div class="row-main">
+        <app-vault-icon [cipher]="c"></app-vault-icon>
+        <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>
+</a>

src/popup/components/ciphers-list.component.ts

@@ -0,0 +1,44 @@
+import {
+    Component,
+    EventEmitter,
+    Input,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { BrowserApi } from '../../browser/browserApi';
+
+import { CipherType } from 'jslib/enums/cipherType';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { PopupUtilsService } from '../services/popup-utils.service';
+
+@Component({
+    selector: 'app-ciphers-list',
+    templateUrl: 'ciphers-list.component.html',
+})
+export class CiphersListComponent {
+    @Output() onSelected = new EventEmitter<CipherView>();
+    @Output() onView = new EventEmitter<CipherView>();
+    @Input() ciphers: CipherView[];
+    @Input() showView = false;
+    @Input() title: string;
+
+    cipherType = CipherType;
+
+    constructor() { }
+
+    selectCipher(c: CipherView) {
+        this.onSelected.emit(c);
+    }
+
+    viewCipher(c: CipherView) {
+        this.onView.emit(c);
+    }
+}

src/popup/components/pop-out.component.html

@@ -0,0 +1,3 @@
+<button (click)="expand()" title="{{'popOutNewWindow' | i18n}}">
+    <i class="fa fa-external-link fa-rotate-270 fa-lg fa-fw"></i>
+</button>

src/popup/components/pop-out.component.ts

@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+import { Angulartics2 } from 'angulartics2';
+
+import { BrowserApi } from '../../browser/browserApi';
+
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { PopupUtilsService } from '../services/popup-utils.service';
+
+@Component({
+    selector: 'app-pop-out',
+    templateUrl: 'pop-out.component.html',
+})
+export class PopOutComponent {
+    constructor(private analytics: Angulartics2, private platformUtilsService: PlatformUtilsService,
+        private popupUtilsService: PopupUtilsService) { }
+
+    expand() {
+        this.analytics.eventTrack.next({ action: 'Pop Out Window' });
+
+        let href = window.location.href;
+        if (this.platformUtilsService.isEdge()) {
+            const popupIndex = href.indexOf('/popup/');
+            if (popupIndex > -1) {
+                href = href.substring(popupIndex);
+            }
+        }
+
+        if ((typeof chrome !== 'undefined') && chrome.windows && chrome.windows.create) {
+            if (href.indexOf('?uilocation=') > -1) {
+                href = href.replace('uilocation=popup', 'uilocation=popout')
+                    .replace('uilocation=tab', 'uilocation=popout')
+                    .replace('uilocation=sidebar', 'uilocation=popout');
+            } else {
+                const hrefParts = href.split('#');
+                href = hrefParts[0] + '?uilocation=popout' + (hrefParts.length > 0 ? '#' + hrefParts[1] : '');
+            }
+
+            const bodyRect = document.querySelector('body').getBoundingClientRect();
+            chrome.windows.create({
+                url: href,
+                type: 'popup',
+                width: bodyRect.width + 60,
+                height: bodyRect.height,
+            });
+
+            if (this.popupUtilsService.inPopup(window)) {
+                BrowserApi.closePopup(window);
+            }
+        } else if ((typeof chrome !== 'undefined') && chrome.tabs && chrome.tabs.create) {
+            href = href.replace('uilocation=popup', 'uilocation=tab')
+                .replace('uilocation=popout', 'uilocation=tab')
+                .replace('uilocation=sidebar', 'uilocation=tab');
+            chrome.tabs.create({
+                url: href,
+            });
+        } else if ((typeof safari !== 'undefined')) {
+            // Safari can't open popup in full page tab :(
+        }
+    }
+}