From d256a872fc4a8bf108492a57a6626c01f0d489db Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Fri, 8 Jun 2018 12:04:03 -0400 Subject: [PATCH] cipher attachments modal --- src/app/vault/attachments.component.html | 62 ++++++++--------- src/app/vault/ciphers.component.html | 16 ++--- src/app/vault/ciphers.component.ts | 43 +++++++++++- src/app/vault/vault.component.html | 2 +- src/app/vault/vault.component.ts | 4 +- src/locales/en/messages.json | 24 +++++++ src/scss/styles.scss | 86 +++++++++++++----------- 7 files changed, 152 insertions(+), 85 deletions(-) diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html index 86394e86542..cb4f0008622 100644 --- a/src/app/vault/attachments.component.html +++ b/src/app/vault/attachments.component.html @@ -1,49 +1,45 @@
+
+

+ {{'attachments' | i18n}} + {{cipher.name}} +

+ +
-
-
- {{'attachments' | i18n}} -
-
-
-
+ + + + + + + +
{{a.fileName}} - - {{a.sizeName}} -
-
+ - - - - -
-
- {{'newAttachment' | i18n}} -
-
-
- - -
-
-
- {{'maxFileSize' | i18n}} -
-
+
+

{{'newAttachment' | i18n}}

+ + + {{'maxFileSize' | i18n}}
- - +
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html index 806c7f82c23..4963166ab1b 100644 --- a/src/app/vault/ciphers.component.html +++ b/src/app/vault/ciphers.component.html @@ -1,5 +1,5 @@ - +
-
@@ -15,30 +15,30 @@
{{c.subTitle}} 		+
- + {{'copyPassword' | i18n}} - + {{'attachments' | i18n}} - + {{'share' | i18n}} - + {{'collections' | i18n}} - + {{'delete' | i18n}} diff --git a/src/app/vault/ciphers.component.ts b/src/app/vault/ciphers.component.ts index fa6c3efd837..406ee26dfa5 100644 --- a/src/app/vault/ciphers.component.ts +++ b/src/app/vault/ciphers.component.ts @@ -1,6 +1,15 @@ -import { Component } from '@angular/core'; +import { + Component, + EventEmitter, + Output, +} from '@angular/core'; + +import { ToasterService } from 'angular2-toaster'; +import { Angulartics2 } from 'angulartics2'; import { CipherService } from 'jslib/abstractions/cipher.service'; +import { I18nService } from 'jslib/abstractions/i18n.service'; +import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service'; import { CiphersComponent as BaseCiphersComponent } from 'jslib/angular/components/ciphers.component'; @@ -13,13 +22,43 @@ import { CipherView } from 'jslib/models/view/cipherView'; templateUrl: 'ciphers.component.html', }) export class CiphersComponent extends BaseCiphersComponent { + @Output() onAttachmentsClicked = new EventEmitter(); cipherType = CipherType; - constructor(cipherService: CipherService) { + constructor(cipherService: CipherService, private analytics: Angulartics2, + private toasterService: ToasterService, private i18nService: I18nService, + private platformUtilsService: PlatformUtilsService) { super(cipherService); } checkCipher(c: CipherView) { (c as any).checked = !(c as any).checked; } + + attachments(c: CipherView) { + this.onAttachmentsClicked.emit(c); + } + + share(c: CipherView) { + // + } + + collections(c: CipherView) { + // + } + + delete(c: CipherView) { + // + } + + copy(value: string, typeI18nKey: string, aType: string) { + if (value == null) { + return; + } + + this.analytics.eventTrack.next({ action: 'Copied ' + aType.toLowerCase() + ' from listing.' }); + this.platformUtilsService.copyToClipboard(value, { doc: window.document }); + this.toasterService.popAsync('info', null, + this.i18nService.t('valueCopied', this.i18nService.t(typeI18nKey))); + } } diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html index 2f9b2a5183f..8b9cd1ea92c 100644 --- a/src/app/vault/vault.component.html +++ b/src/app/vault/vault.component.html @@ -73,7 +73,7 @@
- +
diff --git a/src/app/vault/vault.component.ts b/src/app/vault/vault.component.ts index b8edd6aa598..88ff234993d 100644 --- a/src/app/vault/vault.component.ts +++ b/src/app/vault/vault.component.ts @@ -205,10 +205,10 @@ export class VaultComponent implements OnInit { AddEditComponent, this.cipherAddEditRef); childComponent.cipherId = cipher == null ? null : cipher.id; - childComponent.onSavedCipher.subscribe(async (cipher: CipherView) => { + childComponent.onSavedCipher.subscribe(async (c: CipherView) => { this.modal.close(); }); - childComponent.onDeletedCipher.subscribe(async (cipher: CipherView) => { + childComponent.onDeletedCipher.subscribe(async (c: CipherView) => { this.modal.close(); }); diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json index 82a1f2cdcf1..42b36eef787 100644 --- a/src/locales/en/messages.json +++ b/src/locales/en/messages.json @@ -385,5 +385,29 @@ }, "launch": { "message": "Launch" + }, + "newAttachment": { + "message": "Add New Attachment" + }, + "deletedAttachment": { + "message": "Deleted attachment" + }, + "deleteAttachmentConfirmation": { + "message": "Are you sure you want to delete this attachment?" + }, + "attachmentSaved": { + "message": "The attachment has been saved." + }, + "file": { + "message": "File" + }, + "selectFile": { + "message": "Select a file." + }, + "maxFileSize": { + "message": "Maximum file size is 100 MB." + }, + "updateKey": { + "message": "You cannot use this feature until you update your encryption key." } } diff --git a/src/scss/styles.scss b/src/scss/styles.scss index def0b6ba9c8..7412af68719 100644 --- a/src/scss/styles.scss +++ b/src/scss/styles.scss @@ -48,6 +48,7 @@ $input-bg: #fafafa; $input-focus-bg: #ffffff; $input-disabled-bg: #e0e0e0; +$table-accent-bg: rgba(#000000, .02); $table-hover-bg: rgba(#000000, .03); @import "../../node_modules/bootstrap/scss/bootstrap"; @@ -143,32 +144,57 @@ form label { } } +.table.table-list { + tr:first-child { + td { + border: none; + } + } + + tr:hover { + td.table-list-options > .dropdown button, td.table-list-options > button { + visibility: visible; + } + } + + td { + vertical-align: middle; + line-height: 1; + + small { + color: $text-muted; + } + } + + td.table-list-options { + width: 76px; + max-width: 76px; + text-align: right; + + .btn { + line-height: 1; + } + + .dropdown-menu { + line-height: $line-height-base; + } + + > .dropdown:not(.show) button { + visibility: hidden; + } + + > button { + visibility: hidden; + } + } +} + app-vault-icon .fa { color: $text-muted; } app-vault { - .table { - tr:first-child { - td { - border: none; - } - } - - tr:hover { - td:last-child .dropdown button { - visibility: visible; - } - } - - td { - vertical-align: middle; - - small { - color: $text-muted; - } - } - + .table-ciphers { td:first-child { width: 35px; max-width: 35px; @@ -184,24 +210,6 @@ app-vault { @extend .img-fluid; } } - - td:nth-child(3) { - line-height: 1; - } - - td:last-child { - width: 72px; - max-width: 72px; - text-align: right; - - .btn { - line-height: 1; - } - - .dropdown:not(.show) button { - visibility: hidden; - } - } } }