rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-18 07:52:23 +01:00
Code Issues Releases Activity

(wip) Style product's components

Browse Source
This commit is contained in:
vincent 2022-07-28 18:13:18 +02:00 committed by Sylvain
parent ab6d91fd12
commit 4e65396e7e
16 changed files with 207 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/frontend/src/javascript/components/form/form-checklist.tsx
View File

@ -98,8 +98,8 @@ export const FormChecklist = <TFieldValues extends FieldValues, TOptionValue, TC
})}
</div>
<div className="actions">
<FabButton type="button" onClick={selectAll(onChange)} className="checklist-all-button">{t('app.shared.form_checklist.select_all')}</FabButton>
<FabButton type="button" onClick={unselectAll(onChange)} className="checklist-none-button">{t('app.shared.form_checklist.unselect_all')}</FabButton>
<FabButton type="button" onClick={selectAll(onChange)} className="is-info">{t('app.shared.form_checklist.select_all')}</FabButton>
<FabButton type="button" onClick={unselectAll(onChange)} className="is-info">{t('app.shared.form_checklist.unselect_all')}</FabButton>
</div>
</>
);

2
app/frontend/src/javascript/components/store/categories/product-categories.tsx
View File

@ -85,7 +85,7 @@ const ProductCategories: React.FC<ProductCategoriesProps> = ({ onSuccess, onErro
<ManageProductCategory action='create'
productCategories={productCategories}
onSuccess={handleSuccess} onError={onError} />
<FabButton className='saveBtn' onClick={handleSave}>Plop</FabButton>
<FabButton className='main-action-btn' onClick={handleSave}>Plop</FabButton>
</div>
</header>
<FabAlert level="warning">

4
app/frontend/src/javascript/components/store/edit-product.tsx
View File

@ -39,7 +39,9 @@ const EditProduct: React.FC<EditProductProps> = ({ productId, onSuccess, onError
if (product) {
return (
<ProductForm product={product} title={product.name} onSuccess={saveProductSuccess} onError={onError} />
<div className="edit-product">
<ProductForm product={product} title={product.name} onSuccess={saveProductSuccess} onError={onError} />
</div>
);
}
return null;

4
app/frontend/src/javascript/components/store/new-product.tsx
View File

@ -43,7 +43,9 @@ const NewProduct: React.FC<NewProductProps> = ({ onSuccess, onError }) => {
};
return (
<ProductForm product={product} title={t('app.admin.store.new_product.add_a_new_product')} onSuccess={saveProductSuccess} onError={onError} />
<div className="new-product">
<ProductForm product={product} title={t('app.admin.store.new_product.add_a_new_product')} onSuccess={saveProductSuccess} onError={onError} />
</div>
);
};

89
app/frontend/src/javascript/components/store/product-form.tsx
View File

@ -119,19 +119,26 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
return (
<>
<h2>{title}</h2>
<FabButton className="save" onClick={handleSubmit(saveProduct)}>{t('app.admin.store.product_form.save')}</FabButton>
<header>
<h2>{title}</h2>
<div className="grpBtn">
<FabButton className="main-action-btn" onClick={handleSubmit(saveProduct)}>{t('app.admin.store.product_form.save')}</FabButton>
</div>
</header>
<form className="product-form" onSubmit={onSubmit}>
<FormInput id="name"
register={register}
rules={{ required: true }}
formState={formState}
onChange={handleNameChange}
label={t('app.admin.store.product_form.name')} />
<FormInput id="sku"
register={register}
formState={formState}
label={t('app.admin.store.product_form.sku')} />
<div className="grp">
<FormInput id="name"
register={register}
rules={{ required: true }}
formState={formState}
onChange={handleNameChange}
label={t('app.admin.store.product_form.name')}
className='span-7' />
<FormInput id="sku"
register={register}
formState={formState}
label={t('app.admin.store.product_form.sku')} />
</div>
<FormInput id="slug"
register={register}
rules={{ required: true }}
@ -141,29 +148,39 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
id="is_active"
formState={formState}
label={t('app.admin.store.product_form.is_show_in_store')} />
<hr />
<div className="price-data">
<h4>{t('app.admin.store.product_form.price_and_rule_of_selling_product')}</h4>
<FormSwitch control={control}
id="is_active_price"
label={t('app.admin.store.product_form.is_active_price')}
tooltip={t('app.admin.store.product_form.is_active_price')}
defaultValue={isActivePrice}
onChange={toggleIsActivePrice} />
<div className="grp">
<h4 className='span-7'>{t('app.admin.store.product_form.price_and_rule_of_selling_product')}</h4>
<FormSwitch control={control}
id="is_active_price"
label={t('app.admin.store.product_form.is_active_price')}
tooltip={t('app.admin.store.product_form.is_active_price')}
defaultValue={isActivePrice}
onChange={toggleIsActivePrice} />
</div>
{isActivePrice && <div className="price-fields">
<FormInput id="amount"
type="number"
register={register}
rules={{ required: true, min: 0.01 }}
step={0.01}
formState={formState}
label={t('app.admin.store.product_form.price')} />
<FormInput id="quantity_min"
type="number"
rules={{ required: true }}
register={register}
formState={formState}
label={t('app.admin.store.product_form.quantity_min')} />
<div className="grp">
<FormInput id="amount"
type="number"
register={register}
rules={{ required: true, min: 0.01 }}
step={0.01}
formState={formState}
label={t('app.admin.store.product_form.price')} />
<FormInput id="quantity_min"
type="number"
rules={{ required: true }}
register={register}
formState={formState}
label={t('app.admin.store.product_form.quantity_min')} />
</div>
</div>}
<hr />
<h4>{t('app.admin.store.product_form.assigning_category')}</h4>
<FabAlert level="warning">
<HtmlTranslate trKey="app.admin.store.product_form.assigning_category_info" />
@ -173,6 +190,9 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
id="product_category_id"
formState={formState}
label={t('app.admin.store.product_form.linking_product_to_category')} />
<hr />
<h4>{t('app.admin.store.product_form.assigning_machines')}</h4>
<FabAlert level="warning">
<HtmlTranslate trKey="app.admin.store.product_form.assigning_machines_info" />
@ -181,6 +201,9 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
control={control}
id="machine_ids"
formState={formState} />
<hr />
<h4>{t('app.admin.store.product_form.product_description')}</h4>
<FabAlert level="warning">
<HtmlTranslate trKey="app.admin.store.product_form.product_description_info" />
@ -191,7 +214,7 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
id="description" />
</div>
<div className="main-actions">
<FabButton type="submit" className="submit-button">{t('app.admin.store.product_form.save')}</FabButton>
<FabButton type="submit" className="main-action-btn">{t('app.admin.store.product_form.save')}</FabButton>
</div>
</form>
</>

10
app/frontend/src/javascript/components/store/products.tsx
View File

@ -58,9 +58,13 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
};
return (
<div>
<h2>{t('app.admin.store.products.all_products')}</h2>
<FabButton className="save" onClick={newProduct}>{t('app.admin.store.products.create_a_product')}</FabButton>
<div className='products'>
<header>
<h2>{t('app.admin.store.products.all_products')}</h2>
<div className='grpBtn'>
<FabButton className="main-action-btn" onClick={newProduct}>{t('app.admin.store.products.create_a_product')}</FabButton>
</div>
</header>
<ProductsList
products={products}
onEdit={editProduct}

2
app/frontend/src/stylesheets/application.scss
View File

@ -86,8 +86,10 @@
@import "modules/settings/check-list-setting";
@import "modules/settings/user-validation-setting";
@import "modules/socials/fab-socials";
@import "modules/store/_utilities";
@import "modules/store/manage-product-category";
@import "modules/store/product-categories";
@import "modules/store/products";
@import "modules/subscriptions/free-extend-modal";
@import "modules/subscriptions/renew-modal";
@import "modules/supporting-documents/supporting-documents-files";

13
app/frontend/src/stylesheets/modules/base/fab-button.scss
View File

@ -49,4 +49,17 @@
&--icon-only {
display: flex;
}
// color variants
&.is-info {
border-color: var(--information);
background-color: var(--information);
color: var(--gray-soft-lightest);
&:hover {
border-color: var(--information);
background-color: var(--information);
color: var(--gray-soft-lightest);
opacity: 0.75;
}
}
}

2
app/frontend/src/stylesheets/modules/base/fab-output-copy.scss
View File

@ -1,7 +1,7 @@
.fab-output-copy {
.form-item-field {
& > input {
background-color: var(--gray-soft);
background-color: var(--gray-soft-dark);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

30
app/frontend/src/stylesheets/modules/form/form-checklist.scss
View File

@ -1,28 +1,28 @@
.form-checklist {
position: relative;
.form-item-field {
display: block !important;
display: flex;
flex-direction: column;
border: none;
}
.checklist {
display: flex;
padding: 16px;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.6rem 3.2rem;
.checklist-item {
flex: 0 0 33.333333%;
& > input {
margin-right: 1em;
}
.checklist-item input {
margin-right: 1em;
}
}
.actions {
align-self: flex-end;
margin: 2.4rem 0;
display: flex;
justify-content: space-evenly;
width: 50%;
margin: auto auto 1.2em;
justify-content: flex-end;
align-items: center;
& > *:not(:first-child) {
margin-left: 1.6rem;
}
}
}

14
app/frontend/src/stylesheets/modules/store/_utilities.scss Normal file
View File

@ -0,0 +1,14 @@
@mixin btn {
width: 4rem;
height: 4rem;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0;
background: none;
border: none;
&:active {
color: currentColor;
box-shadow: none;
}
}

39
app/frontend/src/stylesheets/modules/store/product-categories.scss
View File

@ -1,18 +1,3 @@
@mixin btn {
width: 4rem;
height: 4rem;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0;
background: none;
border: none;
&:active {
color: currentColor;
box-shadow: none;
}
}
.product-categories {
max-width: 1300px;
margin: 0 auto;
@ -25,28 +10,28 @@
.grpBtn {
display: flex;
& > *:not(:first-child) { margin-left: 2.4rem; }
.saveBtn {
background-color: var(--main);
.create-button {
background-color: var(--gray-hard-darkest);
border-color: var(--gray-hard-darkest);
color: var(--gray-soft-lightest);
border: none;
&:hover { opacity: 0.75; }
&:hover {
background-color: var(--gray-hard-light);
border-color: var(--gray-hard-light);
}
}
}
h2 {
margin: 0;
@include title-lg;
color: var(--gray-hard-darkest);
color: var(--gray-hard-darkest) !important;
}
}
.create-button {
background-color: var(--gray-hard-darkest);
border-color: var(--gray-hard-darkest);
.main-action-btn {
background-color: var(--main);
color: var(--gray-soft-lightest);
&:hover {
background-color: var(--gray-hard-light);
border-color: var(--gray-hard-light);
}
border: none;
&:hover { opacity: 0.75; }
}
&-tree {

73
app/frontend/src/stylesheets/modules/store/products.scss Normal file
View File

@ -0,0 +1,73 @@
.products,
.new-product,
.edit-product {
margin: 0 auto;
padding-bottom: 6rem;
.back-btn {
margin: 2.4rem 0;
padding: 0.4rem 0.8rem;
display: inline-flex;
align-items: center;
background-color: var(--gray-soft-darkest);
border-radius: var(--border-radius-sm);
color: var(--gray-soft-lightest);
i { margin-right: 0.8rem; }
&:hover {
background-color: var(--gray-hard-lightest);
cursor: pointer;
}
}
header {
padding: 2.4rem 0;
display: flex;
justify-content: space-between;
align-items: center;
.grpBtn {
display: flex;
& > *:not(:first-child) { margin-left: 2.4rem; }
}
h2 {
margin: 0;
@include title-lg;
color: var(--gray-hard-darkest) !important;
}
}
.main-action-btn {
background-color: var(--main);
color: var(--gray-soft-lightest);
border: none;
&:hover { opacity: 0.75; }
}
.main-actions {
display: flex;
justify-content: center;
align-items: center;
& > *:not(:first-child) {
margin-left: 1.6rem;
}
}
}
.products {
max-width: 1600px;
}
.new-product,
.edit-product {
max-width: 1300px;
.product-form {
.grp {
display: flex;
gap: 2.4rem 3.2rem;
.span-7 {
min-width: 70%;
}
}
}
}

1
app/frontend/src/stylesheets/variables/decoration.scss
View File

@ -1,4 +1,5 @@
:root {
--border-radius: 8px;
--border-radius-sm: 4px;
--shadow: 0 0 10px rgba(39, 32, 32, 0.25);
}

4
app/frontend/templates/admin/store/product_edit.html
View File

@ -14,11 +14,11 @@
</div>
</section>
<section class="m-lg admin-store-manage">
<section class="edit-product m-lg admin-store-manage">
<div class="row">
<div class="col-md-12">
<a ng-click="backProductsList()">
<a class="back-btn" ng-click="backProductsList()">
<i class="fas fa-angle-left"></i>
<span translate>{{ 'app.admin.store.back_products_list' }}</span>
</a>

4
app/frontend/templates/admin/store/product_new.html
View File

@ -14,11 +14,11 @@
</div>
</section>
<section class="m-lg admin-store-manage">
<section class="new-product m-lg admin-store-manage">
<div class="row">
<div class="col-md-12">
<a ng-click="backProductsList()">
<a class="back-btn" ng-click="backProductsList()" tabindex="0">
<i class="fas fa-angle-left"></i>
<span translate>{{ 'app.admin.store.back_products_list' }}</span>
</a>