Commit c7d9f910 authored by Florent Poittevin's avatar Florent Poittevin
Browse files

fix: improve size of overlay icons

parent eccb5df7
......@@ -67,7 +67,7 @@ export class HomeFundingAgencyContainer extends SharedAbstractContainer {
private _retrieveFundingAgency(): void {
this._fundingAgency = undefined;
if (isNullOrUndefined(this.archiveFundingAgency)) {
if (isNullOrUndefined(this.archiveFundingAgency) || isNullOrUndefined(this.archiveFundingAgency.identifier)) {
return;
}
......
......@@ -67,7 +67,7 @@ export class HomeInstitutionContainer extends SharedAbstractContainer {
private _retrieveInstitution(): void {
this._institution = undefined;
if (isNullOrUndefined(this.archiveInstitution)) {
if (isNullOrUndefined(this.archiveInstitution) || isNullOrUndefined(this.archiveInstitution.identifier)) {
return;
}
......
......@@ -67,7 +67,7 @@ export class HomeLicenseContainer extends SharedAbstractContainer {
private _retrieveLicense(): void {
this._license = undefined;
if (isNullOrUndefined(this.archiveLicense)) {
if (isNullOrUndefined(this.archiveLicense) || isNullOrUndefined(this.archiveLicense.identifier)) {
return;
}
......
......@@ -15,7 +15,7 @@
[isUser]="true"
[userInfo]="model"
[isLogoPresent]="model.avatar | isNotNullNorUndefined"
[large]="true"
[imageMode]="imageDisplayMode.MAIN"
class="avatar"
></dlcm-shared-logo-wrapper-container>
</ng-template>
......
......@@ -33,6 +33,7 @@ import {FormBuilder} from "@angular/forms";
import {AppUserAction} from "@app/stores/user/app-user.action";
import {AppUserState} from "@app/stores/user/app-user.state";
import {Contributor} from "@models";
import {ImageDisplayMode} from "@shared/components/presentationals/shared-image-display/shared-image-display.presentational";
import {IconNameEnum} from "@shared/enums/icon-name.enum";
import {LabelTranslateEnum} from "@shared/enums/label-translate.enum";
import {BaseFormDefinition} from "@shared/models/base-form-definition.model";
......@@ -74,6 +75,10 @@ export class PreservationSpaceContributorFormPresentational extends AbstractForm
return IconNameEnum;
}
get imageDisplayMode(): typeof ImageDisplayMode {
return ImageDisplayMode;
}
constructor(protected readonly _changeDetectorRef: ChangeDetectorRef,
protected readonly _elementRef: ElementRef,
protected readonly _injector: Injector,
......
......@@ -12,6 +12,7 @@
</div>
<ng-template #noPhoto>
<dlcm-shared-avatar [userInfo]="userInfo"
[mode]="imageDisplayMode.UPLOAD"
class="avatar-initial"
></dlcm-shared-avatar>
</ng-template>
......
......@@ -48,6 +48,7 @@ import {
SharedUploadImageDialog,
SharedUploadImageDialogData,
} from "@shared/components/dialogs/shared-upload-image/shared-upload-image.dialog";
import {ImageDisplayMode} from "@shared/components/presentationals/shared-image-display/shared-image-display.presentational";
import {LabelTranslateEnum} from "@shared/enums/label-translate.enum";
import {ResourceLogoStateModel} from "@shared/stores/resource-logo/resource-logo-state.model";
import {
......@@ -84,6 +85,10 @@ export class SharedAvatarUploadWrapperContainer extends SharedAbstractImageUploa
@HostBinding("class.is-editable")
isEditable: boolean = true;
get imageDisplayMode(): typeof ImageDisplayMode {
return ImageDisplayMode;
}
constructor(protected readonly _store: Store,
protected readonly _route: ActivatedRoute,
protected readonly _fb: FormBuilder,
......
......@@ -8,17 +8,17 @@
<dlcm-shared-avatar [userInfo]="userInfo"
class="avatar-initial"
[photoUser]="photo"
[large]="large"
[mode]="imageMode"
></dlcm-shared-avatar>
</ng-template>
<ng-template #isImage>
<dlcm-shared-image-display *ngIf="photo; else fallback"
[image]="photo"
[mode]="imageDisplayMode.IN_LIST"
[mode]="imageMode"
></dlcm-shared-image-display>
<ng-template #fallback>
<dlcm-shared-image-display [mode]="imageDisplayMode.IN_LIST"></dlcm-shared-image-display>
<dlcm-shared-image-display [mode]="imageMode"></dlcm-shared-image-display>
</ng-template>
</ng-template>
</div>
......@@ -94,7 +94,7 @@ export class SharedLogoWrapperContainer<TResource extends BaseResource> extends
isLogoPresent: boolean = true;
@Input()
large: boolean;
imageMode: ImageDisplayMode = ImageDisplayMode.IN_LIST;
listPhotosObs: Observable<MappingObject<string, string>>;
......
......@@ -3,4 +3,7 @@
[solidifySpinner]="isLoading"
[style.display]="inline ? 'inline' : 'block'"
solidifyTooltipOnEllipsis
[solidifyOverlayComponent]="organizationalUnitOverlayComponent"
[solidifyOverlayData]="organizationalUnit"
solidifyOverlay
>{{name}}</div>
......@@ -31,6 +31,7 @@ import {environment} from "@environments/environment";
import {OrganizationalUnit} from "@models";
import {Store} from "@ngxs/store";
import {SharedAbstractContainer} from "@shared/components/containers/shared-abstract/shared-abstract.container";
import {SharedOrganizationalUnitOverlayPresentational} from "@shared/components/presentationals/shared-organizational-unit-overlay/shared-organizational-unit-overlay.presentational";
import {SharedOrgUnitAction} from "@shared/stores/organizational-unit/shared-organizational-unit.action";
import {SharedOrganizationalUnitState} from "@shared/stores/organizational-unit/shared-organizational-unit.state";
import {Observable} from "rxjs";
......@@ -44,6 +45,7 @@ import {
isNullOrUndefined,
MemoizedUtil,
StringUtil,
Type,
} from "solidify-frontend";
@Component({
......@@ -55,7 +57,17 @@ import {
export class SharedOrganizationalUnitNameContainer extends SharedAbstractContainer {
readonly TIME_BEFORE_DISPLAY_TOOLTIP: number = environment.timeBeforeDisplayTooltip;
name: string;
organizationalUnitOverlayComponent: Type<SharedOrganizationalUnitOverlayPresentational> = SharedOrganizationalUnitOverlayPresentational;
organizationalUnit: OrganizationalUnit | undefined;
get name(): string {
if (isNotNullNorUndefined(this.organizationalUnit)) {
return this.organizationalUnit.name;
}
return StringUtil.stringEmpty;
}
listOrgUnitObs: Observable<OrganizationalUnit[]> = MemoizedUtil.list(this._store, SharedOrganizationalUnitState);
isLoading: boolean = false;
......@@ -65,26 +77,22 @@ export class SharedOrganizationalUnitNameContainer extends SharedAbstractContain
set id(id: string) {
this._id = id;
if (isNullOrUndefined(id)) {
this.name = StringUtil.stringEmpty;
return;
}
const listSnapshot = MemoizedUtil.listSnapshot(this._store, SharedOrganizationalUnitState);
const orgUnit = this._getOrgUnit(listSnapshot);
if (isNullOrUndefined(orgUnit)) {
this.name = StringUtil.stringEmpty;
this.organizationalUnit = this._getOrgUnit(listSnapshot);
if (isNullOrUndefined(this.organizationalUnit)) {
this.subscribe(this.listOrgUnitObs.pipe(
distinctUntilChanged(),
filter(list => isNotNullNorUndefined(this._getOrgUnit(list))),
take(1),
), list => {
this.name = this._getOrgUnit(list)?.name;
this.organizationalUnit = this._getOrgUnit(list);
this.isLoading = false;
this._changeDetector.detectChanges();
});
this._store.dispatch(new SharedOrgUnitAction.AddInListById(id, true));
this.isLoading = true;
} else {
this.name = orgUnit.name;
}
}
......
......@@ -31,12 +31,26 @@ $avatar-size: 45px;
background-color: transparent;
}
:host(.is-large) {
$avatar-size: 300px;
height: $avatar-size;
width: $avatar-size;
:host(.UPLOAD) {
.avatar {
font-size: 40px;
}
}
:host(.MAIN) {
.avatar {
font-size: 70px;
}
}
:host(.IN_OVERLAY) {
.avatar {
font-size: 30px;
}
}
:host(.IN_LIST) {
.avatar {
font-size: 17px;
}
}
......@@ -33,6 +33,7 @@ import {
} from "@angular/platform-browser";
import {SharedAbstractPresentational} from "@app/shared/components/presentationals/shared-abstract/shared-abstract.presentational";
import {UserInfo} from "@models";
import {ImageDisplayMode} from "@shared/components/presentationals/shared-image-display/shared-image-display.presentational";
import {
isNotNullNorUndefinedNorWhiteString,
isNullOrUndefined,
......@@ -73,14 +74,38 @@ export class SharedAvatarPresentational extends SharedAbstractPresentational {
return this._photoUserSanitize;
}
@HostBinding("class")
@Input()
@HostBinding("class.is-large")
large: boolean = false;
mode: ImageDisplayMode = ImageDisplayMode.IN_LIST;
private readonly _DEFAULT_INITIAL: string = "";
initial: string = this._DEFAULT_INITIAL;
@HostBinding("style.width")
@HostBinding("style.height")
get size(): string {
let size;
switch (this.mode) {
case ImageDisplayMode.MAIN:
size = 300;
break;
case ImageDisplayMode.UPLOAD:
size = 145;
break;
case ImageDisplayMode.IN_OVERLAY:
size = 125;
break;
case ImageDisplayMode.IN_LIST:
case ImageDisplayMode.NEXT_FORM_FIELD:
size = 45;
break;
default:
size = 300;
}
return size + "px";
}
constructor(private readonly _sanitizer: DomSanitizer) {
super();
}
......
......@@ -8,7 +8,7 @@
[logoState]="logoState"
[isUser]="false"
[isLogoPresent]="isLogoPresent"
[large]="false"
[imageMode]="imageDisplayMode.IN_OVERLAY"
class="avatar"
></dlcm-shared-logo-wrapper-container>
</div>
......
......@@ -26,6 +26,7 @@ import {
Component,
} from "@angular/core";
import {FundingAgency} from "@models";
import {ImageDisplayMode} from "@shared/components/presentationals/shared-image-display/shared-image-display.presentational";
import {
overlayAnimation,
SharedResourceLogoOverlayPresentational,
......@@ -55,4 +56,8 @@ export class SharedFundingAgencyOverlayPresentational extends SharedResourceLogo
get iconNameEnum(): typeof IconNameEnum {
return IconNameEnum;
}
get imageDisplayMode(): typeof ImageDisplayMode {
return ImageDisplayMode;
}
}
......@@ -9,6 +9,9 @@
left: 0;
right: 0;
text-align: center;
display: grid;
justify-content: center;
align-items: center;
}
.fallback-image {
......
......@@ -68,6 +68,7 @@ export class SharedImageDisplayPresentational extends SharedAbstractPresentation
size = 200;
break;
case ImageDisplayMode.IN_ORDER:
case ImageDisplayMode.IN_OVERLAY:
size = 125;
break;
case ImageDisplayMode.IN_LIST:
......@@ -115,9 +116,11 @@ export class SharedImageDisplayPresentational extends SharedAbstractPresentation
export type ImageDisplayMode = "MAIN" | "IN_TILE" | "IN_ORDER" | "IN_LIST" | "NEXT_FORM_FIELD";
export const ImageDisplayMode = {
UPLOAD: "UPLOAD" as ImageDisplayMode,
MAIN: "MAIN" as ImageDisplayMode,
IN_TILE: "IN_TILE" as ImageDisplayMode,
IN_ORDER: "IN_ORDER" as ImageDisplayMode,
IN_OVERLAY: "IN_OVERLAY" as ImageDisplayMode,
IN_LIST: "IN_LIST" as ImageDisplayMode,
NEXT_FORM_FIELD: "NEXT_FORM_FIELD" as ImageDisplayMode,
};
......@@ -8,7 +8,7 @@
[logoState]="logoState"
[isUser]="false"
[isLogoPresent]="isLogoPresent"
[large]="false"
[imageMode]="imageDisplayMode.IN_OVERLAY"
class="avatar"
></dlcm-shared-logo-wrapper-container>
</div>
......
......@@ -26,6 +26,7 @@ import {
Component,
} from "@angular/core";
import {Institution} from "@models";
import {ImageDisplayMode} from "@shared/components/presentationals/shared-image-display/shared-image-display.presentational";
import {
overlayAnimation,
SharedResourceLogoOverlayPresentational,
......@@ -55,4 +56,8 @@ export class SharedInstitutionOverlayPresentational extends SharedResourceLogoOv
get iconNameEnum(): typeof IconNameEnum {
return IconNameEnum;
}
get imageDisplayMode(): typeof ImageDisplayMode {
return ImageDisplayMode;
}
}
......@@ -8,7 +8,7 @@
[logoState]="logoState"
[isUser]="false"
[isLogoPresent]="isLogoPresent"
[large]="false"
[imageMode]="imageDisplayMode.IN_OVERLAY"
class="avatar"
></dlcm-shared-logo-wrapper-container>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment