Upstream
/
bitwarden-browser
mirror of https://github.com/bitwarden/browser.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

send UX improvements (#822) 

* send UX improvements

* typo
This commit is contained in:
Kyle Spearrin 2021-02-08 16:07:40 -05:00 committed by GitHub
parent 84d03158b5
commit 13a04976fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 60 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
jslib

@ -1 +1 @@
Subproject commit 22f576ea60fdd19cd0eb3c11d3073a45240b9f98
Subproject commit e706261ed6e3eb654cc23623eefb94c9cd198c56

59
src/app/send/add-edit.component.html
View File

@ -14,25 +14,32 @@
</app-callout>
<div class="row" *ngIf="!editMode">
<div class="col-6 form-group">
<label for="type">{{'whatTypeOfSend' | i18n}}</label>
<select id="type" name="Type" [(ngModel)]="send.type" class="form-control" appAutofocus
(change)='typeChanged()'>
<option *ngFor="let o of typeOptions" [ngValue]="o.value">{{o.name}}</option>
</select>
<label>{{'whatTypeOfSend' | i18n}}</label>
<div class="form-check" *ngFor="let o of typeOptions">
<input class="form-check-input" type="radio" [(ngModel)]="send.type" name="Type_{{o.value}}"
id="type_{{o.value}}" [value]="o.value" (change)="typeChanged(o)"
[checked]="send.type === o.value">
<label class="form-check-label" for="type_{{o.value}}">
{{o.name}}
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-6 form-group">
<label for="name">{{'name' | i18n}}</label>
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required [readOnly]="disableSend">
<input id="name" class="form-control" type="text" name="Name" [(ngModel)]="send.name" required
[readOnly]="disableSend">
<small class="form-text text-muted">{{'sendNameDesc' | i18n}}</small>
</div>
</div>
<!-- Text -->
<ng-container *ngIf="send.type === sendType.Text">
<div class="form-group">
<label for="text">{{'sendTypeText' | i18n}}</label>
<textarea id="text" name="Text.Text" rows="6" [(ngModel)]="send.text.text"
class="form-control" [readOnly]="disableSend"></textarea>
<textarea id="text" name="Text.Text" rows="6" [(ngModel)]="send.text.text" class="form-control"
[readOnly]="disableSend"></textarea>
<small class="form-text text-muted">{{'sendTextDesc' | i18n}}</small>
</div>
<div class="form-group">
<div class="form-check">
@ -51,8 +58,10 @@
</div>
<div *ngIf="!editMode">
<label for="file">{{'file' | i18n}}</label>
<input type="file" id="file" class="form-control-file" name="file" required [disabled]="disableSend">
<small class="form-text text-muted">{{'maxFileSize' | i18n}}</small>
<input type="file" id="file" class="form-control-file" name="file" required
[disabled]="disableSend">
<small class="form-text text-muted">{{'sendFileDesc' | i18n}} {{'maxFileSize' |
i18n}}</small>
</div>
</div>
</ng-container>
@ -63,7 +72,8 @@
<div *ngIf="!editMode">
<select id="deletionDate" name="DeletionDateSelect" [(ngModel)]="deletionDateSelect"
class="form-control" required>
<option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}</option>
<option *ngFor="let o of deletionDateOptions" [ngValue]="o.value">{{o.name}}
</option>
</select>
<input id="deletionDateCustom" class="form-control mt-1" type="datetime-local"
name="DeletionDate" [(ngModel)]="deletionDate" required *ngIf="deletionDateSelect === 0"
@ -71,7 +81,8 @@
</div>
<div *ngIf="editMode">
<input id="deletionDate" class="form-control" type="datetime-local" name="DeletionDate"
[(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
[(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM"
[readOnly]="disableSend">
</div>
<div class="form-text text-muted small">{{'deletionDateDesc' | i18n}}</div>
</div>
@ -90,11 +101,13 @@
</select>
<input id="expirationDateCustom" class="form-control mt-1" type="datetime-local"
name="ExpirationDate" [(ngModel)]="expirationDate" required
*ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
*ngIf="expirationDateSelect === 0" placeholder="MM/DD/YYYY HH:MM AM/PM"
[readOnly]="disableSend">
</div>
<div *ngIf="editMode">
<input id="expirationDate" class="form-control" type="datetime-local" name="ExpirationDate"
[(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
[(ngModel)]="expirationDate" placeholder="MM/DD/YYYY HH:MM AM/PM"
[readOnly]="disableSend">
</div>
<div class="form-text text-muted small">{{'expirationDateDesc' | i18n}}</div>
</div>
@ -117,11 +130,12 @@
<label for="password" *ngIf="!hasPassword">{{'password' | i18n}}</label>
<label for="password" *ngIf="hasPassword">{{'newPassword' | i18n}}</label>
<div class="input-group">
<input id="password" class="form-control text-monospace" type="{{showPassword ? 'text' : 'password'}}"
name="Password" [(ngModel)]="password" [readOnly]="disableSend">
<input id="password" class="form-control text-monospace"
type="{{showPassword ? 'text' : 'password'}}" name="Password" [(ngModel)]="password"
[readOnly]="disableSend">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary" appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="togglePasswordVisible()">
<button type="button" class="btn btn-outline-secondary"
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePasswordVisible()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</button>
@ -143,11 +157,18 @@
<label class="form-check-label" for="disabled">{{'disableThisSend' | i18n}}</label>
</div>
</div>
<h3 class="mt-5" *ngIf="link">{{'share' | i18n}}</h3>
<h3 class="mt-5">{{'share' | i18n}}</h3>
<div class="form-group" *ngIf="link">
<label for="link">{{'sendLink' | i18n}}</label>
<input type="text" readonly id="link" name="Link" [(ngModel)]="link" class="form-control">
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" [(ngModel)]="copyLink" id="copy-link"
name="CopyLink">
<label class="form-check-label" for="copy-link">{{'copySendLinkOnSave' | i18n}}</label>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary disabled" disabled=true *ngIf="disableSend">

6
src/app/send/add-edit.component.ts
View File

@ -24,4 +24,10 @@ export class AddEditComponent extends BaseAddEditComponent {
super(i18nService, platformUtilsService, environmentService, datePipe, sendService, userService,
messagingService, policyService);
}
copyLinkToClipboard(link: string) {
// Copy function on web depends on the modal being open or not. Since this event occurs during a transition
// of the modal closing we need to add a small delay to make sure state of the DOM is consistent.
window.setTimeout(() => super.copyLinkToClipboard(link), 500);
}
}

16
src/locales/en/messages.json
View File

@ -3640,14 +3640,24 @@
"personalOwnershipPolicyInEffect": {
"message": "An organization policy is affecting your ownership options."
},
"custom": {
"message": "Custom"
},
"personalOwnershipCheckboxDesc": {
"message": "Disable personal ownership for organization users"
},
"textHiddenByDefault": {
"message": "When accessing the Send, hide the text by default",
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
},
"sendNameDesc": {
"message": "A friendly name to describe this Send.",
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
},
"sendTextDesc": {
"message": "The text you want to send."
},
"sendFileDesc": {
"message": "The file you want to send."
},
"copySendLinkOnSave": {
"message": "Copy the link to share this Send to my clipboard upon save."
}
}