[PM-11927] - File Send popout dialog (#11138)

* file popout component

* finish file popout dialog

* finalize send popout dialog component

* fix tests

* conditionally provide file popout dialog

* simplify send file popout dialog

* add file popout dialog container

* remove unnecessary modules
This commit is contained in:
Jordan Aasen 2024-09-25 12:35:12 -07:00 committed by GitHub
parent 7f33954316
commit caece397c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 91 additions and 5 deletions

View File

@ -2504,6 +2504,14 @@
"message": "Send saved",
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
},
"sendFilePopoutDialogText": {
"message": "Pop out extension?",
"description": "'Send' is a noun and the name of a feature called 'Bitwarden Send'. It should not be translated."
},
"sendFilePopoutDialogDesc": {
"message": "To create a file Send, you need to pop out te extension to a new window.",
"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."
},
@ -2513,6 +2521,9 @@
"sendSafariFileWarning": {
"message": "In order to choose a file using Safari, pop out to a new window by clicking this banner."
},
"popOut": {
"message": "Pop out"
},
"sendFileCalloutHeader": {
"message": "Before you start"
},

View File

@ -9,6 +9,8 @@
>
</tools-send-form>
<send-file-popout-dialog-container [config]="config"></send-file-popout-dialog-container>
<popup-footer slot="footer">
<button bitButton type="submit" form="sendForm" buttonType="primary" #submitBtn>
{{ "save" | i18n }}

View File

@ -29,6 +29,7 @@ import { SendFormModule } from "../../../../../../../libs/tools/send/send-ui/src
import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
import { PopupHeaderComponent } from "../../../../platform/popup/layout/popup-header.component";
import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page.component";
import { SendFilePopoutDialogContainerComponent } from "../send-file-popout-dialog/send-file-popout-dialog-container.component";
/**
* Helper class to parse query parameters for the AddEdit route.
@ -70,6 +71,7 @@ export type AddEditQueryParams = Partial<Record<keyof QueryParams, string>>;
PopupPageComponent,
PopupHeaderComponent,
PopupFooterComponent,
SendFilePopoutDialogContainerComponent,
SendFormModule,
AsyncActionsModule,
],

View File

@ -0,0 +1,31 @@
import { CommonModule } from "@angular/common";
import { Component, Input, OnInit } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { DialogService } from "@bitwarden/components";
import { SendFormConfig } from "@bitwarden/send-ui";
import { FilePopoutUtilsService } from "../../services/file-popout-utils.service";
import { SendFilePopoutDialogComponent } from "./send-file-popout-dialog.component";
@Component({
selector: "send-file-popout-dialog-container",
templateUrl: "./send-file-popout-dialog-container.component.html",
standalone: true,
imports: [JslibModule, CommonModule],
})
export class SendFilePopoutDialogContainerComponent implements OnInit {
@Input() config: SendFormConfig;
constructor(
private dialogService: DialogService,
private filePopoutUtilsService: FilePopoutUtilsService,
) {}
ngOnInit() {
if (this.config.mode === "add" && this.filePopoutUtilsService.showFilePopoutMessage(window)) {
this.dialogService.open(SendFilePopoutDialogComponent);
}
}
}

View File

@ -0,0 +1,20 @@
<bit-simple-dialog dialogSize="default">
<div bitDialogIcon>
<i class="bwi bwi-info-circle bwi-2x tw-text-info" aria-hidden="true"></i>
</div>
<ng-container bitDialogContent>
<div bitTypography="h3">
{{ "sendFilePopoutDialogText" | i18n }}
</div>
<div bitTypography="body1">{{ "sendFilePopoutDialogDesc" | i18n }}</div>
</ng-container>
<ng-container bitDialogFooter>
<button buttonType="primary" bitButton type="button" (click)="popOutWindow()">
{{ "popOut" | i18n }}
<i class="bwi bwi-popout tw-ml-1" aria-hidden="true"></i>
</button>
<button bitButton buttonType="secondary" type="button" (click)="close()">
{{ "cancel" | i18n }}
</button>
</ng-container>
</bit-simple-dialog>

View File

@ -0,0 +1,25 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ButtonModule, DialogModule, DialogService, TypographyModule } from "@bitwarden/components";
import BrowserPopupUtils from "../../../../platform/popup/browser-popup-utils";
@Component({
selector: "send-file-popout-dialog",
templateUrl: "./send-file-popout-dialog.component.html",
standalone: true,
imports: [JslibModule, CommonModule, DialogModule, ButtonModule, TypographyModule],
})
export class SendFilePopoutDialogComponent {
constructor(private dialogService: DialogService) {}
async popOutWindow() {
await BrowserPopupUtils.openCurrentPagePopout(window);
}
close() {
this.dialogService.closeAll();
}
}

View File

@ -51,17 +51,12 @@ export enum SendState {
})
export class SendV2Component implements OnInit, OnDestroy {
sendType = SendType;
sendState = SendState;
protected listState: SendState | null = null;
protected sends$ = this.sendItemsService.filteredAndSortedSends$;
protected title: string = "allSends";
protected noItemIcon = NoSendsIcon;
protected noResultsIcon = Icons.NoResults;
protected sendsDisabled = false;