mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 16:23:44 +00:00
9f22a2fa87
Replace Bootstrap styles with Tailwind equivalents in the EnvironmentSelectorComponent to modernize the UI.
85 lines
3.0 KiB
HTML
85 lines
3.0 KiB
HTML
<ng-container
|
|
*ngIf="{
|
|
selectedRegion: selectedRegion$ | async,
|
|
} as data"
|
|
>
|
|
<div class="tw-text-sm tw-text-muted tw-leading-7 tw-font-normal tw-pl-4">
|
|
{{ "accessing" | i18n }}:
|
|
<button
|
|
type="button"
|
|
(click)="toggle(null)"
|
|
cdkOverlayOrigin
|
|
#trigger="cdkOverlayOrigin"
|
|
aria-haspopup="dialog"
|
|
aria-controls="cdk-overlay-container"
|
|
>
|
|
<span class="tw-text-primary-600 tw-text-sm tw-font-semibold">
|
|
<ng-container *ngIf="data.selectedRegion; else fallback">
|
|
{{ data.selectedRegion.domain }}
|
|
</ng-container>
|
|
<ng-template #fallback>
|
|
{{ "selfHostedServer" | i18n }}
|
|
</ng-template>
|
|
</span>
|
|
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<ng-template
|
|
cdkConnectedOverlay
|
|
[cdkConnectedOverlayOrigin]="trigger"
|
|
[cdkConnectedOverlayOpen]="isOpen"
|
|
[cdkConnectedOverlayPositions]="overlayPosition"
|
|
[cdkConnectedOverlayHasBackdrop]="true"
|
|
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
|
|
(backdropClick)="isOpen = false"
|
|
(detach)="close()"
|
|
>
|
|
<div class="tw-box-content">
|
|
<div
|
|
class="tw-bg-background tw-w-full tw-shadow-md tw-p-2 tw-rounded-md"
|
|
data-testid="environment-selector-dialog"
|
|
[@transformPanel]="'open'"
|
|
cdkTrapFocus
|
|
cdkTrapFocusAutoCapture
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<ng-container *ngFor="let region of availableRegions; let i = index">
|
|
<button
|
|
type="button"
|
|
class="tw-text-main tw-w-full tw-text-left tw-py-0 tw-border tw-border-transparent tw-transition-all tw-duration-200 tw-ease-in-out tw-pr-2 tw-rounded-md"
|
|
(click)="toggle(region.key)"
|
|
[attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
|
|
[attr.data-testid]="'environment-selector-dialog-item-' + i"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw bwi-sm bwi-check"
|
|
style="padding-bottom: 1px"
|
|
aria-hidden="true"
|
|
[style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
|
|
></i>
|
|
<span>{{ region.domain }}</span>
|
|
</button>
|
|
<br />
|
|
</ng-container>
|
|
<button
|
|
type="button"
|
|
class="tw-text-main tw-w-full tw-text-left tw-py-0 tw-pr-2 tw-border tw-border-transparent tw-transition-all tw-duration-200 tw-ease-in-out tw-rounded-md"
|
|
(click)="toggle(ServerEnvironmentType.SelfHosted)"
|
|
[attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
|
|
data-testid="environment-selector-dialog-item-self-hosted"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw bwi-sm bwi-check"
|
|
style="padding-bottom: 1px"
|
|
aria-hidden="true"
|
|
[style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
|
|
></i>
|
|
<span>{{ "selfHostedServer" | i18n }}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|