diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html
index 01d9a52ebe2b94684decd7027b8c4991a347440e..15144de4fd7091af863e7a40463538b9770f8053 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html
@@ -1,27 +1,27 @@
<mat-icon [class.disabled]="disabled" *ngIf="imageUrl && canDelete" (click)="onDelete()" class="delete pointer">clear</mat-icon>
<div [class.disabled]="disabled">
- <div class="drag-and-drop-area" [style.width]="size.width +'px'" [style.height]="size.height +'px'" [ngClass]="{'on-over': hasDropZoneOver}"
+ <div class="drag-and-drop-area" [ngClass]="{'on-over': hasDropZoneOver}"
vitamuiCommonDragAndDrop
(fileToUploadEmitter)="onImageDropped($event)"
(fileDragOverEmitter)="onImageDragOver($event)"
(fileDragLeaveEmitter)="onImageDragLeave($event)">
<input type="file" #fileSearch class="d-none" (change)="handleFileInput($event.target.files)">
- <div class="drop-area d-flex flex-column justify-content-center align-items-center">
+ <div class="image-area d-flex flex-column justify-content-center align-items-center">
<div *ngIf="!imageUrl && messContent" class="">
- <h3 >
+ <h5>
{{messContent}}
- </h3>
+ </h5>
</div>
<img *ngIf="imageUrl" [src]="imageUrl"/>
</div>
</div>
<div class="d-flex flex-column pt-2">
- <span (click)="addLogo()" class="small upload pointer text caption bold">
+ <span (click)="addLogo()" class="upload pointer text caption light bold">
<mat-icon class="pj">attach_file</mat-icon>
{{messPj}}
</span>
- <small class="error-message" *ngIf="hasError">
- {{ message }}
+ <small class="error-message">
+ <div *ngIf="hasError"> {{ message }}</div>
</small>
</div>
</div>
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss
index 9c89e958405814292aaae13598e1dd9c12aac9a0..e88506d1a37dea322582e3569960b738a0256a70 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss
@@ -4,11 +4,6 @@
display: flex;
flex-direction: column;
- .drag-and-drop-area {
- border: 2px dashed var(--vitamui-grey-600);
- border-radius: 6px;
- }
-
.on-over {
border: 2px solid var(--vitamui-grey-600);
@@ -22,24 +17,11 @@
.pj {
transform: rotate(45deg);
}
-
- .small {
- color: var(--vitamui-grey-700);
- }
.pointer {
cursor: pointer;
}
- img {
- max-width: 100%;
- max-height: 100%;
- }
-
- .drop-area {
- height: 100%;
- }
-
.error-message {
color: $red;
}
diff --git a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts
index da81f7331580351f4666aeaaa187e9d90b6be321..a9b7f5ff8afe7862d1d9fd58d7778e5af0929cd5 100644
--- a/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts
+++ b/ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts
@@ -82,10 +82,6 @@ export class VitamuiDragDropFileComponent implements OnInit {
@Input()
public logoSize: {width: number, height: number} = {width: 1000, height: 1000};
- @Input()
- public size: {width: number, height: number} = {width: 240, height: 127};
-
-
@Output()
public file = new EventEmitter<File>();
diff --git a/ui/ui-frontend-common/src/sass/_image.scss b/ui/ui-frontend-common/src/sass/_image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c0476ac05c5713ac27c622cf705ebacec0903112
--- /dev/null
+++ b/ui/ui-frontend-common/src/sass/_image.scss
@@ -0,0 +1,11 @@
+.image-area {
+ border: 2px dashed var(--vitamui-grey-600);
+ border-radius: 6px;
+
+ height: 100px;
+ max-width: 200px;
+
+ img {
+ max-width: 180px;
+ }
+}
diff --git a/ui/ui-frontend-common/src/sass/_theme.scss b/ui/ui-frontend-common/src/sass/_theme.scss
index 8eff0a1254470327e3aa367b37bd17726c52af69..5b16e73158ad373289497e11406dbfdf4c2333a3 100644
--- a/ui/ui-frontend-common/src/sass/_theme.scss
+++ b/ui/ui-frontend-common/src/sass/_theme.scss
@@ -6,6 +6,7 @@
@import "button";
@import "chip";
@import "editable-field";
+@import "image";
@import "file";
@import "form";
@import "icon";
diff --git a/ui/ui-frontend-common/src/sass/base/_typography.scss b/ui/ui-frontend-common/src/sass/base/_typography.scss
index 46c8d74d5566ba8d468f81e24f7447844d0c2300..8fe93a79de1864955e7c675106837bb8c1998f62 100644
--- a/ui/ui-frontend-common/src/sass/base/_typography.scss
+++ b/ui/ui-frontend-common/src/sass/base/_typography.scss
@@ -67,5 +67,6 @@ h5 {
{
text-transform: uppercase;
}
+
@include text-colors;
}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
index 286f0aed2272015964d36424dec74d8b3e9babd1..a1225a470a12d5abd3957156e86cbd6f38f8a480 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
@@ -8,7 +8,7 @@
</div>
<div class="col-6">
<label i18n="@@labelLogoPortal">Logo portal</label>
- <div class="image-area d-flex flex-column justify-content-center align-items-center"
+ <div class="image-area small d-flex flex-column justify-content-center align-items-center"
[style.background-color]="theme.colors[THEME_COLORS.VITAMUI_BACKGROUND] | safeStyle"
>
<div *ngIf="isLoading"><mat-spinner class="vitamui-spinner medium"></mat-spinner></div>
@@ -20,7 +20,7 @@
<div class="d-flex mt-4">
<div class="col-6 mr-4">
<label i18n="@@labelLogoHeader">Logo header</label>
- <div class="image-area d-flex flex-column justify-content-center align-items-center"
+ <div class="image-area small d-flex flex-column justify-content-center align-items-center"
[style.background-color]="theme.colors[THEME_COLORS.VITAMUI_HEADER_FOOTER] | safeStyle"
>
<div *ngIf="isLoading"><mat-spinner class="vitamui-spinner medium"></mat-spinner></div>
@@ -30,7 +30,7 @@
<div class="col-6">
<label i18n="@@labelLogoFooter">Logo footer</label>
- <div class="image-area d-flex flex-column justify-content-center align-items-center"
+ <div class="image-area small d-flex flex-column justify-content-center align-items-center"
[style.background-color]="theme.colors[THEME_COLORS.VITAMUI_HEADER_FOOTER] | safeStyle"
>
<div *ngIf="isLoading"><mat-spinner class="vitamui-spinner medium"></mat-spinner></div>
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
index 8fd2901853f0a70af8890042226f2c80d5a17f5c..6a2f0e7ce746a568633bee653979cbb91113274f 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
@@ -1,17 +1,6 @@
@import '~ui-frontend-common/sass/variables/colors';
:host {
- .image-area {
- border: 2px dashed var(--vitamui-grey-600);
- border-radius: 6px;
- height: 100px;
- max-width: 200px;
- }
-
- img {
- max-width: 180px;
- max-height: 120px;
- }
.label-color {
display: flex;
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
index 6d314f8c7ab4850e47b7d58cb27b78e9044b58c0..b804d16abfcc0bc650f798b9f1a4074c90ce01cb 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
@@ -16,11 +16,10 @@
<div>
<label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_PORTAL_TITLE' | translate}}</label>
<vitamui-common-drag-drop-file
- class="color-background"
+ class="color-background image-area-big"
[disabled]="disabled"
[fileUrl]="graphicIdentityForm.get('portalUrl')?.value"
[logoSize]="{width: 280, height: 100}"
- [size]="{width: 410, height: 230}"
[canDelete]="false"
(file)="addOrReplaceLogo(ATTACHMENT_TYPE.Portal, $event)"
[messContent]="'GRAPHIC_IDENTITY.LOGO_DROP' | translate"
@@ -31,11 +30,10 @@
<div class="mr-4">
<label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_HEADER_TITLE' | translate}}</label>
<vitamui-common-drag-drop-file
- class="color-header-footer"
+ class="color-header-footer image-area-small"
[disabled]="disabled"
[fileUrl]="graphicIdentityForm.get('headerUrl')?.value"
[logoSize]="{width: 280, height: 100}"
- [size]="{width: 196, height: 127}"
[canDelete]="false"
(file)="addOrReplaceLogo(ATTACHMENT_TYPE.Header, $event)"
[messContent]="'GRAPHIC_IDENTITY.LOGO_DROP' | translate"
@@ -44,11 +42,10 @@
<div>
<label class="text medium bold">{{'GRAPHIC_IDENTITY.LOGO_FOOTER_TITLE' | translate}}</label>
<vitamui-common-drag-drop-file
- class="color-header-footer"
+ class="color-header-footer image-area-small"
[disabled]="disabled"
[fileUrl]="graphicIdentityForm.get('footerUrl')?.value"
[logoSize]="{width: 280, height: 100}"
- [size]="{width: 196, height: 127}"
[canDelete]="false"
(file)="addOrReplaceLogo(ATTACHMENT_TYPE.Footer, $event)"
[messContent]="'GRAPHIC_IDENTITY.LOGO_DROP' | translate"
diff --git a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
index ab6b218ae0a01f4cb9459db49326f44a292b92dc..768b4d78ddd55635562ae6334cd3797ce039bdf9 100644
--- a/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
+++ b/ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
@@ -4,7 +4,7 @@
h2 {
margin-top: 0;
}
-
+
::ng-deep .color-header-footer > * > .drag-and-drop-area {
background-color: var(--vitamui-header-footer);
}
@@ -13,6 +13,21 @@
background-color: var(--vitamui-background);
}
+ ::ng-deep .image-area-big > * > .drag-and-drop-area > .image-area {
+ height: 230px;
+ width: 410px;
+ max-width: 100%;
+
+ img {
+ max-height: 120px;
+ max-width: 100%;
+ }
+ }
+
+ ::ng-deep .image-area-small > * > .drag-and-drop-area > .image-area {
+ width: 200px;
+ }
+
.form-group {
margin-top: 40px;
margin-bottom: 20px;