mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-03-21 12:29:03 +01:00
Update image upload
This commit is contained in:
vincent
parent
ac46314532
commit
927aa40182
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user