From b670ce08cea6f56eb770e1d1e2f286d699006af8 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Tue, 8 Jun 2021 12:49:27 +0200
Subject: [PATCH] OZG-400 user-icon refactoring
---
.../vorgang-forwarding-info.component.html | 6 +--
.../header/header.component.html | 2 +-
.../header/header.component.spec.ts | 3 +-
.../user-icon-container.component.html | 2 -
.../user-icon-container.component.ts | 2 -
.../lib/user-icon/user-icon.component.html | 12 +++---
.../lib/user-icon/user-icon.component.scss | 38 ++++++++++---------
.../src/lib/user-icon/user-icon.component.ts | 9 ++---
.../src/lib/user-profile.module.ts | 3 +-
.../vorgang-list-item.component.html | 9 +++--
.../vorgang-list-item.component.scss | 1 -
11 files changed, 41 insertions(+), 46 deletions(-)
diff --git a/goofy-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-info-list/vorgang-forwarding-info/vorgang-forwarding-info.component.html b/goofy-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-info-list/vorgang-forwarding-info/vorgang-forwarding-info.component.html
index e059d522f5..25127aab09 100644
--- a/goofy-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-info-list/vorgang-forwarding-info/vorgang-forwarding-info.component.html
+++ b/goofy-client/libs/forwarding/src/lib/vorgang-forwarding-container/vorgang-forwarding-info-list/vorgang-forwarding-info/vorgang-forwarding-info.component.html
@@ -5,7 +5,7 @@
Die Versendung war nicht erfolgreich, die Fehlermeldung lautet:<br>
<span class="message">{{ forwarding.errorMessage }}</span>
</p>
- <mat-icon class="icon">error_outlined</mat-icon>
+ <mat-icon class="icon">error_outline</mat-icon>
</div>
<ng-template #success>
@@ -13,6 +13,6 @@
{{ forwarding.createdByName }} hat den Vorgang am {{ forwarding.createdAt | formatDateWithTimePipe }} an {{ forwarding.zustaendigeStelle }} weitergeleitet.<br>
Versendet am {{ forwarding.sentAt | formatDateWithTimePipe }}
</p>
-
+
<goofy-client-vorgang-forward-zustellen-container [forwarding]="forwarding"></goofy-client-vorgang-forward-zustellen-container>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
index 8fc56d6d07..294766a143 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.html
@@ -17,7 +17,7 @@
<goofy-client-settings [darkMode]="darkMode" (darkModeEmitter)="darkModeEmitter.emit($event)"></goofy-client-settings>
<button mat-icon-button [matMenuTriggerFor]="accountMenu" class="big-button" data-test-id="user-icon-button">
- <goofy-client-user-icon-container [disableTooltip]="true" [scaleFactor]="1.4" transformOrigin="center"></goofy-client-user-icon-container>
+ <goofy-client-user-icon></goofy-client-user-icon>
</button>
<mat-menu #accountMenu="matMenu">
diff --git a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.spec.ts b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.spec.ts
index 4617bd101a..914113603a 100644
--- a/goofy-client/libs/navigation/src/lib/header-container/header/header.component.spec.ts
+++ b/goofy-client/libs/navigation/src/lib/header-container/header/header.component.spec.ts
@@ -7,6 +7,7 @@ import { configureTestSuite } from 'ng-bullet';
import { MockComponent } from 'ng-mocks';
import { HeaderComponent } from './header.component';
import { SettingsComponent } from './settings/settings.component';
+import { UserIconComponent } from 'libs/user-profile/src/lib/user-icon/user-icon.component';
describe('HeaderComponent', () => {
let component: HeaderComponent;
@@ -22,7 +23,7 @@ describe('HeaderComponent', () => {
HeaderComponent,
MockComponent(SettingsComponent),
MockComponent(VorgangSearchContainerComponent),
- MockComponent(UserIconContainerComponent)
+ MockComponent(UserIconComponent)
]
})
});
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html
index 2f08f75ed6..195427fea2 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html
+++ b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.html
@@ -4,8 +4,6 @@
[matMenuTriggerFor]="menu"
[userProfileStateResource]="userProfile$ | async"
[disableTooltip]="disableTooltip"
- [scaleFactor]="scaleFactor"
- [transformOrigin]="transformOrigin"
data-test-id="user-profile-icon">
</goofy-client-user-icon>
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts
index 24b7528fc8..5748182f67 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts
+++ b/goofy-client/libs/user-profile/src/lib/user-icon-container/user-icon-container.component.ts
@@ -17,8 +17,6 @@ export class UserIconContainerComponent implements OnChanges {
@Input() vorgang: VorgangWithEingangResource;
@Input() allowAssigning: boolean = false;
@Input() disableTooltip: boolean = false;
- @Input() scaleFactor: number = 2;
- @Input() transformOrigin: string = 'right center';
apiRoot$: Observable<StateResource<ApiRootResource>> = of(createEmptyStateResource());
userProfile$: Observable<StateResource<UserProfileResource>> = of(createEmptyStateResource());
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html
index 96c9d4325e..7b2f89668d 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.html
@@ -1,8 +1,6 @@
-<div class="editor"
- [ngStyle]="{
- 'transform': 'scale(' + scaleFactor + ')',
- 'transform-origin': transformOrigin
- }"
+<div
+ class="user-profile"
+ [ngClass]="{'initials': !!userProfileStateResource.resource}"
[matTooltipDisabled]="disableTooltip"
matTooltip="{{ toolTip }}" data-test-class="user-profile-icon-tooltip">
@@ -10,7 +8,7 @@
<span data-test-id="user-profile-assigned">{{ initials }}</span>
</ng-container>
<ng-template #noUser>
- <mat-icon data-test-id="user-profile-unassigned">account_circle</mat-icon>
+ <mat-icon data-test-id="user-profile-unassigned">account_circle_outline</mat-icon>
</ng-template>
<div class="picture"></div>
-</div>
\ No newline at end of file
+</div>
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
index fcccc80212..0ebc6ece32 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.scss
@@ -1,22 +1,24 @@
-.editor {
+.user-profile {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
position: relative;
- flex-shrink: 1;
- display: flex;
- justify-content: flex-end;
- mat-icon {
- color: #999;
- margin: -2px;
+ &.initials {
+ background-color: #3e3e3e;
+ color: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 18px;
}
+}
- .picture {
- $size: 20px;
- background-color: transparent;
- width: $size;
- height: $size;
- border-radius: 50%;
- position: absolute;
- left: 0;
- top: 0;
- }
-}
\ No newline at end of file
+mat-icon {
+ color: #999;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: scale(1.56) translate(-50%, -50%);
+ transform-origin: left top;
+}
diff --git a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts
index bedfb1d456..227058b29b 100644
--- a/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts
+++ b/goofy-client/libs/user-profile/src/lib/user-icon/user-icon.component.ts
@@ -1,5 +1,5 @@
import { Component, Input, SimpleChanges } from '@angular/core';
-import { StateResource } from '@goofy-client/tech-shared';
+import { createEmptyStateResource, StateResource } from '@goofy-client/tech-shared';
import { UserProfileResource } from '@goofy-client/user-profile-shared';
import { isNil } from 'lodash';
@@ -10,11 +10,8 @@ import { isNil } from 'lodash';
})
export class UserIconComponent {
- @Input() userProfileStateResource: StateResource<UserProfileResource>;
-
+ @Input() userProfileStateResource: StateResource<UserProfileResource> = createEmptyStateResource();
@Input() disableTooltip: boolean = false;
- @Input() scaleFactor: number = 2;
- @Input() transformOrigin: string = 'right center';
readonly toolTipNoUser: string = 'kein Bearbeiter zugewiesen'
@@ -33,4 +30,4 @@ export class UserIconComponent {
private getFirstLetter(value: string): string {
return isNil(value) ? undefined : value.substr(0, 1).toUpperCase();
}
-}
\ No newline at end of file
+}
diff --git a/goofy-client/libs/user-profile/src/lib/user-profile.module.ts b/goofy-client/libs/user-profile/src/lib/user-profile.module.ts
index 466e853e41..f799afbde3 100644
--- a/goofy-client/libs/user-profile/src/lib/user-profile.module.ts
+++ b/goofy-client/libs/user-profile/src/lib/user-profile.module.ts
@@ -25,7 +25,8 @@ import { UserProfileSearchComponent } from './user-profile-search-container/user
],
exports: [
UserIconContainerComponent,
+ UserIconComponent,
AssignUserProfileButtonContainerComponent
]
})
-export class UserProfileModule { }
\ No newline at end of file
+export class UserProfileModule { }
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
index f36adaecbf..86ce24f7dd 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
+++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.html
@@ -18,9 +18,10 @@
<goofy-client-vorgang-next-frist-button [vorgang]="vorgang" class="row wiedervorlagen"></goofy-client-vorgang-next-frist-button>
</div>
- <goofy-client-user-icon-container *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN" data-test-id="vorgang-user-icon"
- [vorgang]="vorgang"
- scaleFactor="2.2"
- class="user-icon">
+ <goofy-client-user-icon-container
+ *ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
+ [vorgang]="vorgang"
+ data-test-id="vorgang-user-icon"
+ class="user-icon">
</goofy-client-user-icon-container>
</a>
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss
index 200266c2ec..6a8c0586f4 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss
+++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-list-item.component.scss
@@ -74,7 +74,6 @@ goofy-client-status-dot {
.user-icon {
margin-left: 16px;
- width: 44px;
}
.wiedervorlagen {
--
GitLab