1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-15 12:29:16 +01:00

Update image upload

This commit is contained in:
vincent 2022-08-04 10:44:31 +02:00
parent ac46314532
commit 927aa40182
5 changed files with 27 additions and 139 deletions

View File

@ -22,7 +22,7 @@ interface FormImageUploadProps<TFieldValues> extends FormComponent<TFieldValues>
setValue: UseFormSetValue<TFieldValues>,
defaultImage?: ImageType,
accept?: string,
size?: 'small' | 'medium' | 'large'
size?: 'small' | 'medium' | 'large',
mainOption?: boolean,
onFileChange?: (value: ImageType) => void,
onFileRemove?: () => void,
@ -125,6 +125,12 @@ export const FormImageUpload = <TFieldValues extends FieldValues>({ id, register
<img src={image || noImage} />
</div>
<div className="actions">
{mainOption &&
<label className='fab-button'>
{t('app.shared.form_image_upload.main_image')}
<input type="radio" checked={!!file?.is_main} onChange={setMainImage} />
</label>
}
<FormInput className="image-file-input"
type="file"
accept={accept}
@ -139,12 +145,6 @@ export const FormImageUpload = <TFieldValues extends FieldValues>({ id, register
placeholder={placeholder()}/>
{hasImage() && <FabButton onClick={onRemoveFile} icon={<Trash size={20} weight="fill" />} className="is-main" />}
</div>
{mainOption &&
<div>
<input type="radio" checked={!!file?.is_main} onChange={setMainImage} />
<label>{t('app.shared.form_image_upload.main_image')}</label>
</div>
}
</div>
);
};

View File

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { useForm, useWatch, Path } from 'react-hook-form';
import { useForm, useWatch } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import slugify from 'slugify';
import _ from 'lodash';
@ -11,7 +11,7 @@ import { FormSelect } from '../form/form-select';
import { FormChecklist } from '../form/form-checklist';
import { FormRichText } from '../form/form-rich-text';
import { FormFileUpload } from '../form/form-file-upload';
import { FormImageUpload, ImageType } from '../form/form-image-upload';
import { FormImageUpload } from '../form/form-image-upload';
import { FabButton } from '../base/fab-button';
import { FabAlert } from '../base/fab-alert';
import ProductCategoryAPI from '../../api/product-category';

View File

@ -23,110 +23,3 @@
}
}
}
.nope-fileinput {
display: table;
border-collapse: separate;
position: relative;
margin-bottom: 9px;
.filename-container {
align-items: center;
display: inline-flex;
float: left;
margin-bottom: 0;
position: relative;
width: 100%;
z-index: 2;
background-color: #fff;
background-image: none;
border: 1px solid #c4c4c4;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
height: 38px;
padding: 6px 12px;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: #555;
font-size: 16px;
line-height: 1.5;
.fileinput-filename {
vertical-align: bottom;
display: inline-block;
overflow: hidden;
margin-left: 10px;
}
.file-download {
position: absolute;
right: 10px;
i {
color: black;
}
}
}
.fileinput-button {
z-index: 1;
border: 1px solid #c4c4c4;
border-left: 0;
border-radius: 0 4px 4px 0;
position: relative;
vertical-align: middle;
background-color: #eee;
color: #555;
font-size: 16px;
font-weight: 400;
line-height: 1;
padding: 6px 12px;
text-align: center;
white-space: nowrap;
width: 1%;
display: table-cell;
background-image: none;
touch-action: manipulation;
overflow: hidden;
cursor: pointer;
border-collapse: separate;
border-spacing: 0;
.form-input {
position: absolute;
z-index: 2;
opacity: 0;
top: 0;
left: 0;
}
input[type=file] {
display: block;
cursor: pointer;
direction: ltr;
filter: alpha(opacity=0);
font-size: 23px;
height: 100%;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
}
.fileinput-delete {
padding: 6px 12px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #555555;
text-align: center;
background-color: #eeeeee;
border: 1px solid #c4c4c4;
border-radius: 4px;
width: 1%;
white-space: nowrap;
vertical-align: middle;
display: table-cell;
}
}

View File

@ -1,14 +1,18 @@
@mixin base {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.6rem;
border: 1px solid var(--gray-soft-dark);
border-radius: var(--border-radius);
background-color: var(--gray-soft-lightest);
}
.form-image-upload {
&--small {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.6rem;
border: 1px solid var(--gray-soft-dark);
border-radius: var(--border-radius);
background-color: var(--gray-soft-lightest);
&--small,
&--medium,
&--large {
@include base;
}
&--large {}
.image {
flex-shrink: 0;
@ -41,8 +45,10 @@
margin-left: 1rem;
}
input[type="radio"] { margin-left: 0.5rem; }
.image-file-input {
margin: 0;
margin-bottom: 0;
}
}
}

View File

@ -35,25 +35,14 @@
}
}
.product-images {
display: flex;
flex-direction: column;
.list {
margin-bottom: 2.4rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2.4rem;
}
button { margin-left: auto; }
}
.product-images,
.product-documents {
display: flex;
flex-direction: column;
.list {
margin-bottom: 2.4rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(410px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
gap: 2.4rem;
}
button { margin-left: auto; }