mirror of
https://github.com/bitwarden/browser
synced 2026-01-08 19:43:45 +00:00
b9eb4003a1
* [deps] Autofill: Update prettier to v3.3.3 * prettier formatting changes * fix SyntaxError for literal @ inline html --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jonathan Prusik <jprusik@classynemesis.com>
59 lines
2.3 KiB
HTML
59 lines
2.3 KiB
HTML
<bit-dialog dialogSize="large" [title]="'customizeAvatar' | i18n">
|
|
<ng-container bitDialogContent>
|
|
<div class="tw-text-center" *ngIf="loading">
|
|
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
|
|
{{ "loading" | i18n }}
|
|
</div>
|
|
<p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
|
|
<div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8">
|
|
<ng-container *ngFor="let c of defaultColorPalette">
|
|
<selectable-avatar
|
|
appStopClick
|
|
(select)="setSelection(c.color)"
|
|
[selected]="c.selected"
|
|
[title]="c.name"
|
|
text="{{ profile | userName }}"
|
|
[color]="c.color"
|
|
[border]="true"
|
|
>
|
|
</selectable-avatar>
|
|
</ng-container>
|
|
<span>
|
|
<span
|
|
[tabIndex]="0"
|
|
(keyup.enter)="showCustomPicker()"
|
|
(click)="showCustomPicker()"
|
|
title="{{ 'customColor' | i18n }}"
|
|
[ngClass]="{
|
|
'!tw-outline-[3px] tw-outline-primary-600 hover:tw-outline-[3px] hover:tw-outline-primary-600':
|
|
customColorSelected,
|
|
}"
|
|
class="tw-relative tw-flex tw-h-24 tw-w-24 tw-cursor-pointer tw-place-content-center tw-content-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-600 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-600"
|
|
[style.background-color]="customColor$ | async"
|
|
>
|
|
<i
|
|
[style.color]="customTextColor$ | async"
|
|
class="bwi bwi-pencil tw-m-auto tw-text-3xl"
|
|
></i>
|
|
<input
|
|
tabindex="-1"
|
|
class="tw-absolute tw-bottom-0 tw-right-0 tw-h-px tw-w-px tw-border-none tw-bg-transparent tw-opacity-0"
|
|
#colorPicker
|
|
type="color"
|
|
[ngModel]="customColor$ | async"
|
|
(ngModelChange)="customColor$.next($event)"
|
|
/>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container bitDialogFooter>
|
|
<button bitButton type="submit" buttonType="primary" [disabled]="loading" [bitAction]="submit">
|
|
{{ "save" | i18n }}
|
|
</button>
|
|
<button bitButton type="button" buttonType="secondary" bitDialogClose>
|
|
{{ "close" | i18n }}
|
|
</button>
|
|
</ng-container>
|
|
</bit-dialog>
|