bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Code Issues Releases Wiki Activity

[SM-251] Migrate to new avatar component (#3600)

Browse Source
This commit is contained in:
Oscar Hinton
2022-10-27 14:38:34 +02:00
committed by GitHub
parent 7fa0231616
commit 5f6f4bad82
37 changed files with 230 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web/src/app/components/organization-switcher.component.html
View File

@@ -6,12 +6,7 @@
[appA11yTitle]="'organizationPicker' | i18n"
[bitMenuTriggerFor]="orgPickerMenu"
>
<app-avatar
[data]="activeOrganization.name"
size="45"
[circle]="true"
[dynamic]="true"
></app-avatar>
<bit-avatar [text]="activeOrganization.name" [id]="activeOrganization.id"></bit-avatar>
<div class="tw-flex">
<div class="org-name tw-ml-3">
<span>{{ activeOrganization.name }}</span>

8
apps/web/src/app/layouts/navbar.component.html
View File

@@ -54,13 +54,7 @@
*ngIf="name"
appStopProp
>
<app-avatar
[data]="name"
[email]="email"
size="25"
fontSize="14"
[circle]="true"
></app-avatar>
<bit-avatar [text]="name" [id]="userId" size="small"></bit-avatar>
<div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
<span>{{ "loggedInAs" | i18n }}</span>
<small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">{{

2
apps/web/src/app/layouts/navbar.component.ts
View File

@@ -24,6 +24,7 @@ export class NavbarComponent implements OnInit {
name: string;
email: string;
providers: Provider[] = [];
userId: string;
organizations$: Observable<Organization[]>;
constructor(
@@ -41,6 +42,7 @@ export class NavbarComponent implements OnInit {
async ngOnInit() {
this.name = await this.tokenService.getName();
this.email = await this.tokenService.getEmail();
this.userId = await this.tokenService.getUserId();
if (this.name == null || this.name.trim() === "") {
this.name = this.email;
}

27
apps/web/src/app/organizations/manage/bulk/bulk-confirm.component.html
View File

@@ -41,14 +41,7 @@
</thead>
<tr *ngFor="let user of filteredUsers">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -60,14 +53,7 @@
</tr>
<tr *ngFor="let user of excludedUsers">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -89,14 +75,7 @@
</thead>
<tr *ngFor="let user of filteredUsers">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}

18
apps/web/src/app/organizations/manage/bulk/bulk-remove.component.html
View File

@@ -33,14 +33,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -59,14 +52,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}

18
apps/web/src/app/organizations/manage/bulk/bulk-restore-revoke.component.html
View File

@@ -33,14 +33,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}
@@ -59,14 +52,7 @@
</thead>
<tr *ngFor="let user of users">
<td width="30">
<app-avatar
[data]="user | userName"
[email]="user.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="user | userName" [id]="user.id" size="small"></bit-avatar>
</td>
<td>
{{ user.email }}

12
apps/web/src/app/organizations/manage/bulk/bulk-status.component.html
View File

@@ -28,13 +28,11 @@
</thead>
<tr *ngFor="let item of users">
<td width="30">
<app-avatar
[data]="item.user | userName"
[email]="item.user.email"
size="25"
[circle]="true"
[fontSize]="14"
></app-avatar>
<bit-avatar
[text]="item.user | userName"
[id]="item.user.id"
size="small"
></bit-avatar>
</td>
<td>
{{ item.user.email }}

9
apps/web/src/app/organizations/manage/entity-users.component.html
View File

@@ -101,14 +101,7 @@
/>
</td>
<td width="30" (click)="check(u)">
<app-avatar
[data]="u | userName"
[email]="u.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="u | userName" [id]="u.id" size="small"></bit-avatar>
</td>
<td>
{{ u.email }}

9
apps/web/src/app/organizations/manage/people.component.html
View File

@@ -141,14 +141,7 @@
<input type="checkbox" [(ngModel)]="u.checked" appStopProp />
</td>
<td width="30">
<app-avatar
[data]="u | userName"
[email]="u.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="u | userName" [id]="u.userId" size="small"></bit-avatar>
</td>
<td>
<a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>

2
apps/web/src/app/organizations/settings/account.component.html
View File

@@ -63,7 +63,7 @@
</div>
</div>
<div class="col-6">
<app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
<bit-avatar [text]="org.name" [id]="org.id" size="large"></bit-avatar>
</div>
</div>
<button type="submit" buttonType="primary" bitButton [loading]="form.loading">

2
apps/web/src/app/providers/providers.component.html
View File

@@ -12,7 +12,7 @@
<tbody>
<tr *ngFor="let p of providers">
<td width="30">
<app-avatar [data]="p.name" size="25" [circle]="true" [fontSize]="14"></app-avatar>
<bit-avatar [text]="p.name" [id]="p.id" size="small"></bit-avatar>
</td>
<td>
<a href="#" [routerLink]="['/providers', p.id]">{{ p.name }}</a>

18
apps/web/src/app/settings/emergency-access.component.html
View File

@@ -34,14 +34,7 @@
<tbody>
<tr *ngFor="let c of trustedContacts; let i = index">
<td width="30">
<app-avatar
[data]="c | userName"
[email]="c.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="c | userName" [id]="c.granteeId" size="small"></bit-avatar>
</td>
<td>
<a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
@@ -149,14 +142,7 @@
<tbody>
<tr *ngFor="let c of grantedContacts; let i = index">
<td width="30">
<app-avatar
[data]="c | userName"
[email]="c.email"
size="25"
[circle]="true"
[fontSize]="14"
>
</app-avatar>
<bit-avatar [text]="c | userName" [id]="c.grantorId" size="small"></bit-avatar>
</td>
<td>
<span>{{ c.email }}</span>

23
apps/web/src/app/settings/preferences.component.html
View File

@@ -90,29 +90,6 @@
</div>
<small class="form-text text-muted">{{ "faviconDesc" | i18n }}</small>
</div>
<div class="form-group">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="enableGravatars"
name="enableGravatars"
[(ngModel)]="enableGravatars"
/>
<label class="form-check-label" for="enableGravatars">
{{ "enableGravatars" | i18n }}
</label>
<a
href="https://gravatar.com/"
target="_blank"
rel="noopener"
appA11yTitle="{{ 'learnMore' | i18n }}"
>
<i class="bwi bwi-question-circle" aria-hidden="true"></i>
</a>
</div>
<small class="form-text text-muted">{{ "enableGravatarsDesc" | i18n }}</small>
</div>
<div class="form-group">
<div class="form-check">
<input

3
apps/web/src/app/settings/preferences.component.ts
View File

@@ -17,7 +17,6 @@ import { Utils } from "@bitwarden/common/misc/utils";
export class PreferencesComponent implements OnInit {
vaultTimeoutAction = "lock";
enableFavicons: boolean;
enableGravatars: boolean;
enableFullWidth: boolean;
theme: ThemeType;
locale: string;
@@ -73,7 +72,6 @@ export class PreferencesComponent implements OnInit {
this.vaultTimeout.setValue(await this.vaultTimeoutSettingsService.getVaultTimeout());
this.vaultTimeoutAction = await this.stateService.getVaultTimeoutAction();
this.enableFavicons = !(await this.stateService.getDisableFavicon());
this.enableGravatars = await this.stateService.getEnableGravitars();
this.enableFullWidth = await this.stateService.getEnableFullWidth();
this.locale = (await this.stateService.getLocale()) ?? null;
@@ -98,7 +96,6 @@ export class PreferencesComponent implements OnInit {
this.vaultTimeoutAction
);
await this.stateService.setDisableFavicon(!this.enableFavicons);
await this.stateService.setEnableGravitars(this.enableGravatars);
await this.stateService.setEnableFullWidth(this.enableFullWidth);
this.messagingService.send("setFullWidth");
if (this.theme !== this.startingTheme) {

9
apps/web/src/app/settings/profile.component.html
View File

@@ -33,14 +33,7 @@
</div>
<div class="col-6">
<div class="mb-3">
<app-avatar
data="{{ profile | userName }}"
[email]="profile.email"
dynamic="true"
size="75"
fontSize="35"
>
</app-avatar>
<bit-avatar [text]="profile | userName" [id]="profile.id" size="large"></bit-avatar>
</div>
<hr />
<p *ngIf="fingerprint">

7
apps/web/src/app/shared/shared.module.ts
View File

@@ -8,13 +8,14 @@ import { ToastrModule } from "ngx-toastr";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import {
AsyncActionsModule,
AvatarModule,
BadgeModule,
ButtonModule,
CalloutModule,
FormFieldModule,
MenuModule,
IconModule,
AsyncActionsModule,
MenuModule,
} from "@bitwarden/components";
// Register the locales for the application
@@ -45,6 +46,7 @@ import "./locales";
MenuModule,
FormFieldModule,
IconModule,
AvatarModule,
],
exports: [
CommonModule,
@@ -64,6 +66,7 @@ import "./locales";
MenuModule,
FormFieldModule,
IconModule,
AvatarModule,
],
providers: [DatePipe],
bootstrap: [],

7
apps/web/src/locales/en/messages.json
View File

@@ -1235,13 +1235,6 @@
"faviconDesc": {
"message": "Show a recognizable image next to each login."
},
"enableGravatars": {
"message": "Show Gravatars",
"description": "Use avatar images loaded from gravatar.com."
},
"enableGravatarsDesc": {
"message": "Use avatar images loaded from gravatar.com."
},
"enableFullWidth": {
"message": "Display full width layout",
"description": "Allows scaling the web vault UI's width"