Skip to content
Snippets Groups Projects
Commit d4c4c758 authored by Cindy's avatar Cindy Committed by pybelecalo
Browse files

Add common class for image area

parent d6951e09
No related branches found
No related tags found
10 merge requests!51Merge mis a jour vitam-ui,!25Nouveau mis a jour Vitamui,!24Nouveau mis a jour Vitamui,!23Nouveau mis a jour Vitamui,!22WIP: nouveau mis a jour Vitamui,!21nouveau mis a jour Vitamui,!20nouveau mis à jour Vitamui,!19nouveau mis à jour Vitamui,!18New MAJ Vitamui,!16[VAS] BUG 7332 : Correction sur la position de la barre permettant de...
Hide whitespace changes
Inline Side-by-side
Showing
with 42 additions and 50 deletions
ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.html
+ 7
− 7
View file @ d4c4c758
<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>
ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.scss
+ 0
− 18
View file @ d4c4c758
......@@ -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;
}
......
ui/ui-frontend-common/src/app/modules/components/vitamui-drag-drop-file/vitamui-drag-drop-file.component.ts
+ 0
− 4
View file @ d4c4c758
......@@ -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>();
......
ui/ui-frontend-common/src/sass/_image.scss 0 → 100644
+ 11
− 0
View file @ d4c4c758
.image-area {
border: 2px dashed var(--vitamui-grey-600);
border-radius: 6px;
height: 100px;
max-width: 200px;
img {
max-width: 180px;
}
}
ui/ui-frontend-common/src/sass/_theme.scss
+ 1
− 0
View file @ d4c4c758
......@@ -6,6 +6,7 @@
@import "button";
@import "chip";
@import "editable-field";
@import "image";
@import "file";
@import "form";
@import "icon";
......
ui/ui-frontend-common/src/sass/base/_typography.scss
+ 1
− 0
View file @ d4c4c758
......@@ -67,5 +67,6 @@ h5 {
{
text-transform: uppercase;
}
@include text-colors;
}
\ No newline at end of file
ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.html
+ 3
− 3
View file @ d4c4c758
......@@ -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>
......
ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss
+ 0
− 11
View file @ d4c4c758
@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;
......
ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.html
+ 3
− 6
View file @ d4c4c758
......@@ -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"
......
ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity/graphic-identity-form/graphic-identity-form.component.scss
+ 16
− 1
View file @ d4c4c758
......@@ -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;
......
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