Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-18 11:05:41 +01:00
Code Issues Projects Releases Wiki Activity

[Send] Added pop out banner for linux os (#1713)

Browse Source
This commit is contained in:
Vincent Salucci 2021-03-17 09:05:48 -05:00 committed by GitHub
parent acd20187f0
commit 24d172e3b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/_locales/en/messages.json
View File

@ -1649,6 +1649,9 @@
"message": "Edited Send",
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
},
"sendLinuxChromiumFileWarning": {
"message": "In order to choose a file, open the extension in the sidebar (if possible) or pop out to a new window by clicking this banner."
},
"sendFirefoxFileWarning": {
"message": "In order to choose a file using Firefox, open the extension in the sidebar or pop out to a new window by clicking this banner."
},

58
src/popup/send/send-add-edit.component.html
View File

@ -22,6 +22,7 @@
<app-callout type="warning" icon="fa fa-external-link fa-rotate-270 fa-fw" [clickable]="true"
title="{{'sendFileCalloutHeader' | i18n}}"
*ngIf="showFilePopoutMessage && send.type === sendType.File && !disableSend" (click)="popOutWindow()">
<div *ngIf="showLinuxChromiumFileWarning">{{'sendLinuxChromiumFileWarning' | i18n}}</div>
<div *ngIf="showFirefoxFileWarning">{{'sendFirefoxFileWarning' | i18n}}</div>
<div *ngIf="showSafariFileWarning">{{'sendSafariFileWarning' | i18n}}</div>
</app-callout>
@ -122,15 +123,16 @@
[(ngModel)]="deletionDate" required placeholder="MM/DD/YYYY HH:MM AM/PM">
</ng-container>
<div class="flex flex-grow" *ngIf="!isDateTimeLocalSupported">
<input id="deletionDateCustomFallback" type="date"
name="DeletionDateFallback" [(ngModel)]="deletionDateFallback" required
placeholder="MM/DD/YYYY" [readOnly]="disableSend"
data-date-format="mm/dd/yyyy" >
<input *ngIf="!isSafari" id="deletionTimeCustomFallback" type="time"
name="DeletionTimeDate" [(ngModel)]="deletionTimeFallback" required
placeholder="HH:MM AM/PM" [readOnly]="disableSend">
<select *ngIf="isSafari" id="deletionTimeCustomFallback" [(ngModel)]="safariDeletionTime" name="SafariDeletionTime">
<option *ngFor="let o of safariDeletionTimeOptions" [value]="o.military">{{o.standard}}</option>
<input id="deletionDateCustomFallback" type="date" name="DeletionDateFallback"
[(ngModel)]="deletionDateFallback" required placeholder="MM/DD/YYYY"
[readOnly]="disableSend" data-date-format="mm/dd/yyyy">
<input *ngIf="!isSafari" id="deletionTimeCustomFallback" type="time" name="DeletionTimeDate"
[(ngModel)]="deletionTimeFallback" required placeholder="HH:MM AM/PM"
[readOnly]="disableSend">
<select *ngIf="isSafari" id="deletionTimeCustomFallback" [(ngModel)]="safariDeletionTime"
name="SafariDeletionTime">
<option *ngFor="let o of safariDeletionTimeOptions" [value]="o.military">{{o.standard}}
</option>
</select>
</div>
</ng-template>
@ -155,8 +157,11 @@
</div>
<div class="box-footer">
{{'deletionDateDesc' | i18n}}
<ng-container *ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
<br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a (click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a> {{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
<ng-container
*ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
<br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a
(click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a>
{{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
</ng-container>
</div>
</div>
@ -165,20 +170,22 @@
<div class="box-content">
<ng-template #expirationDateCustom>
<ng-container *ngIf="isDateTimeLocalSupported">
<input id="expirationDateCustom" type="datetime-local"
name="ExpirationDate" [(ngModel)]="expirationDate" required
placeholder="MM/DD/YYYY HH:MM AM/PM" [readOnly]="disableSend">
<input id="expirationDateCustom" type="datetime-local" name="ExpirationDate"
[(ngModel)]="expirationDate" required placeholder="MM/DD/YYYY HH:MM AM/PM"
[readOnly]="disableSend">
</ng-container>
<div class="flex flex-grow" *ngIf="!isDateTimeLocalSupported">
<input id="expirationDateCustomFallback" type="date"
name="ExpirationDateFallback" [(ngModel)]="expirationDateFallback" [required]="!editMode"
placeholder="MM/DD/YYYY" [readOnly]="disableSend" (change)="expirationDateFallbackChanged()"
data-date-format="mm/dd/yyyy" >
<input id="expirationDateCustomFallback" type="date" name="ExpirationDateFallback"
[(ngModel)]="expirationDateFallback" [required]="!editMode" placeholder="MM/DD/YYYY"
[readOnly]="disableSend" (change)="expirationDateFallbackChanged()"
data-date-format="mm/dd/yyyy">
<input *ngIf="!isSafari" id="expirationTimeCustomFallback" type="time"
name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback" [required]="!editMode"
placeholder="HH:MM AM/PM" [readOnly]="disableSend">
<select *ngIf="isSafari" id="expirationTimeCustomFallback" [(ngModel)]="safariExpirationTime" name="SafariExpirationTime">
<option *ngFor="let o of safariExpirationTimeOptions" [value]="o.military">{{o.standard}}</option>
name="ExpirationTimeFallback" [(ngModel)]="expirationTimeFallback"
[required]="!editMode" placeholder="HH:MM AM/PM" [readOnly]="disableSend">
<select *ngIf="isSafari" id="expirationTimeCustomFallback"
[(ngModel)]="safariExpirationTime" name="SafariExpirationTime">
<option *ngFor="let o of safariExpirationTimeOptions" [value]="o.military">
{{o.standard}}</option>
</select>
</div>
</ng-template>
@ -205,8 +212,11 @@
</div>
<div class="box-footer">
{{'expirationDateDesc' | i18n}}
<ng-container *ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
<br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a (click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a> {{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
<ng-container
*ngIf="(!inPopout && isFirefox) && (this.editMode || (deletionDateSelect === 0 && !editMode))">
<br>{{'sendFirefoxCustomDatePopoutMessage1' | i18n}} <a
(click)="popOutWindow()">{{'sendFirefoxCustomDatePopoutMessage2' | i18n}}</a>
{{'sendFirefoxCustomDatePopoutMessage3' | i18n}}
</ng-container>
</div>
</div>

14
src/popup/send/send-add-edit.component.ts
View File

@ -33,6 +33,7 @@ export class SendAddEditComponent extends BaseAddEditComponent {
isFirefox = false;
inPopout = false;
inSidebar = false;
isLinux = false;
constructor(i18nService: I18nService, platformUtilsService: PlatformUtilsService,
userService: UserService, messagingService: MessagingService, policyService: PolicyService,
@ -44,13 +45,14 @@ export class SendAddEditComponent extends BaseAddEditComponent {
}
get showFileSelector(): boolean {
return !this.editMode && (!this.isFirefox && !this.isSafari) ||
return !this.editMode && (!this.isFirefox && !this.isSafari && !this.isLinux) ||
(this.isFirefox && (this.inSidebar || this.inPopout)) ||
(this.isSafari && this.inPopout);
(this.isSafari && this.inPopout) ||
(this.isLinux && !this.isFirefox && (this.inSidebar || this.inPopout));
}
get showFilePopoutMessage(): boolean {
return !this.editMode && (this.showFirefoxFileWarning || this.showSafariFileWarning);
return !this.editMode && (this.showFirefoxFileWarning || this.showSafariFileWarning || this.showLinuxChromiumFileWarning);
}
get showFirefoxFileWarning(): boolean {
@ -61,6 +63,11 @@ export class SendAddEditComponent extends BaseAddEditComponent {
return this.isSafari && !this.inPopout;
}
// Only show this for Chromium based browsers in Linux
get showLinuxChromiumFileWarning(): boolean {
return this.isLinux && !this.isFirefox && !(this.inSidebar || this.inPopout);
}
popOutWindow() {
this.popupUtilsService.popOut(window);
}
@ -70,6 +77,7 @@ export class SendAddEditComponent extends BaseAddEditComponent {
this.isFirefox = this.platformUtilsService.isFirefox();
this.inPopout = this.popupUtilsService.inPopout(window);
this.inSidebar = this.popupUtilsService.inSidebar(window);
this.isLinux = window?.navigator?.userAgent.indexOf('Linux') !== -1;
const queryParamsSub = this.route.queryParams.subscribe(async params => {
if (params.sendId) {