From d4c4c7589afb59ef2121830280d8b7c54670bbbe Mon Sep 17 00:00:00 2001
From: Cindy <cindy.nacibide@teamdlab.com>
Date: Thu, 14 Jan 2021 14:00:06 +0100
Subject: [PATCH] Add common class for image area
---
.../vitamui-drag-drop-file.component.html | 14 +++++++-------
.../vitamui-drag-drop-file.component.scss | 18 ------------------
.../vitamui-drag-drop-file.component.ts | 4 ----
ui/ui-frontend-common/src/sass/_image.scss | 11 +++++++++++
ui/ui-frontend-common/src/sass/_theme.scss | 1 +
.../src/sass/base/_typography.scss | 1 +
.../graphic-identity-tab.component.html | 6 +++---
.../graphic-identity-tab.component.scss | 11 -----------
.../graphic-identity-form.component.html | 9 +++------
.../graphic-identity-form.component.scss | 17 ++++++++++++++++-
10 files changed, 42 insertions(+), 50 deletions(-)
create mode 100644 ui/ui-frontend-common/src/sass/_image.scss
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 01d9a52eb..15144de4f 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 9c89e9584..e88506d1a 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 da81f7331..a9b7f5ff8 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 000000000..c0476ac05
--- /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 8eff0a125..5b16e7315 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 46c8d74d5..8fe93a79d 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 286f0aed2..a1225a470 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 8fd290185..6a2f0e7ce 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 6d314f8c7..b804d16ab 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 ab6b218ae..768b4d78d 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;
--
GitLab