diff --git a/apps/browser/src/popup/scss/base.scss b/apps/browser/src/popup/scss/base.scss index fff32bf8b4a..e816521f0e8 100644 --- a/apps/browser/src/popup/scss/base.scss +++ b/apps/browser/src/popup/scss/base.scss @@ -112,12 +112,14 @@ app-root > div { } main::-webkit-scrollbar, -cdk-virtual-scroll-viewport::-webkit-scrollbar { +cdk-virtual-scroll-viewport::-webkit-scrollbar, +.vault-select::-webkit-scrollbar { width: 10px; height: 10px; } -main::-webkit-scrollbar-track { +main::-webkit-scrollbar-track, +.vault-select::-webkit-scrollbar-track { background-color: transparent; } @@ -128,7 +130,8 @@ cdk-virtual-scroll-viewport::-webkit-scrollbar-track { } main::-webkit-scrollbar-thumb, -cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb { +cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb, +.vault-select::-webkit-scrollbar-thumb { border-radius: 10px; margin-right: 1px; @@ -483,6 +486,10 @@ main { } } .vault-select { + overflow-y: auto; + display: flex; + flex-direction: column; + @include themify($themes) { background-color: themed("boxBackgroundColor"); } diff --git a/apps/browser/src/popup/vault/vault-select.component.html b/apps/browser/src/popup/vault/vault-select.component.html index 9ebaa55e564..813fbccf148 100644 --- a/apps/browser/src/popup/vault/vault-select.component.html +++ b/apps/browser/src/popup/vault/vault-select.component.html @@ -1,9 +1,8 @@
- +
; + @ViewChild("vaultSelectorTemplate", { read: TemplateRef }) templateRef: TemplateRef; + isOpen = false; loaded = false; organizations: Organization[]; @@ -51,6 +67,8 @@ export class VaultSelectComponent implements OnInit { }, ]; + private overlayRef: OverlayRef; + get show() { return ( (this.organizations.length > 0 && !this.enforcePersonalOwnwership) || @@ -62,7 +80,9 @@ export class VaultSelectComponent implements OnInit { private vaultFilterService: VaultFilterService, private i18nService: I18nService, private ngZone: NgZone, - private broadcasterService: BroadcasterService + private broadcasterService: BroadcasterService, + private overlay: Overlay, + private viewContainerRef: ViewContainerRef ) {} async ngOnInit() { @@ -108,11 +128,44 @@ export class VaultSelectComponent implements OnInit { this.loaded = true; } - toggle() { - this.isOpen = !this.isOpen; + openOverlay() { + const viewPortHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); + const positionStrategyBuilder = this.overlay.position(); + + const positionStrategy = positionStrategyBuilder + .flexibleConnectedTo(this.buttonRef.nativeElement) + .withFlexibleDimensions(true) + .withPush(true) + .withViewportMargin(10) + .withGrowAfterOpen(true) + .withPositions(this.overlayPostition); + + this.overlayRef = this.overlay.create({ + hasBackdrop: false, + positionStrategy, + maxHeight: viewPortHeight - 160, + backdropClass: "cdk-overlay-transparent-backdrop", + }); + + const templatePortal = new TemplatePortal(this.templateRef, this.viewContainerRef); + this.overlayRef.attach(templatePortal); + this.isOpen = true; + + // Handle closing + merge( + this.overlayRef.outsidePointerEvents(), + this.overlayRef.backdropClick(), + this.overlayRef.detachments() + ).subscribe(() => { + this.close(); + }); } close() { + if (this.overlayRef) { + this.overlayRef.dispose(); + this.overlayRef = undefined; + } this.isOpen = false; }