Skip to content
Snippets Groups Projects
Commit b670ce08 authored by OZGCloud's avatar OZGCloud
Browse files

OZG-400 user-icon refactoring

parent 4575d25a
No related branches found
No related tags found
No related merge requests found
Showing
with 41 additions and 46 deletions
......@@ -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>
......
......@@ -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">
......
......@@ -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)
]
})
});
......
......@@ -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>
......
......@@ -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());
......
<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>
.editor {
.user-profile {
width: 32px;
height: 32px;
border-radius: 50%;
position: relative;
flex-shrink: 1;
&.initials {
background-color: #3e3e3e;
color: #fff;
display: flex;
justify-content: flex-end;
justify-content: center;
align-items: center;
font-size: 18px;
}
}
mat-icon {
color: #999;
margin: -2px;
}
.picture {
$size: 20px;
background-color: transparent;
width: $size;
height: $size;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
left: 50%;
top: 50%;
transform: scale(1.56) translate(-50%, -50%);
transform-origin: left top;
}
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'
......
......@@ -25,6 +25,7 @@ import { UserProfileSearchComponent } from './user-profile-search-container/user
],
exports: [
UserIconContainerComponent,
UserIconComponent,
AssignUserProfileButtonContainerComponent
]
})
......
......@@ -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"
<goofy-client-user-icon-container
*ngIf="vorgang | hasLink: vorgangLinkRel.ASSIGN"
[vorgang]="vorgang"
scaleFactor="2.2"
data-test-id="vorgang-user-icon"
class="user-icon">
</goofy-client-user-icon-container>
</a>
......@@ -74,7 +74,6 @@ goofy-client-status-dot {
.user-icon {
margin-left: 16px;
width: 44px;
}
.wiedervorlagen {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment