djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Minor fixes

Browse source
This commit is contained in:
dominik-zeglen 2019-10-08 12:56:24 +02:00
parent a770c464c7
commit 03374fb00b
6 changed files with 50 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
View file

@ -32,6 +32,7 @@ export interface ProductVariantCreateContentProps {
dispatchFormDataAction: React.Dispatch<ProductVariantCreateReducerAction>; dispatchFormDataAction: React.Dispatch<ProductVariantCreateReducerAction>;
errors: ProductVariantBulkCreate_productVariantBulkCreate_bulkProductErrors[]; errors: ProductVariantBulkCreate_productVariantBulkCreate_bulkProductErrors[];
step: ProductVariantCreateStep; step: ProductVariantCreateStep;
onStepClick: (step: ProductVariantCreateStep) => void;
} }
const ProductVariantCreateContent: React.FC< const ProductVariantCreateContent: React.FC<
@ -43,7 +44,8 @@ const ProductVariantCreateContent: React.FC<
data, data,
dispatchFormDataAction, dispatchFormDataAction,
errors, errors,
step step,
onStepClick
} = props; } = props;
const classes = useStyles(props); const classes = useStyles(props);
@ -57,7 +59,7 @@ const ProductVariantCreateContent: React.FC<
return ( return (
<div> <div>
<ProductVariantCreateTabs step={step} /> <ProductVariantCreateTabs step={step} onStepClick={onStepClick} />
<div className={classes.root}> <div className={classes.root}>
{step === "values" && ( {step === "values" && (
<ProductVariantCreateValues <ProductVariantCreateValues

10
src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
View file

@ -24,6 +24,9 @@ const useStyles = makeStyles((theme: Theme) => ({
overflowX: "visible", overflowX: "visible",
overflowY: "hidden", overflowY: "hidden",
width: 800 width: 800
},
spacer: {
flex: 1
} }
})); }));
@ -146,19 +149,24 @@ const ProductVariantCreateDialog: React.FC<
data={data} data={data}
dispatchFormDataAction={dispatchFormDataAction} dispatchFormDataAction={dispatchFormDataAction}
step={step} step={step}
onStepClick={step => setStep(step)}
/> />
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button className={classes.button} onClick={onClose}> <Button className={classes.button} onClick={onClose}>
<FormattedMessage defaultMessage="Cancel" description="button" /> <FormattedMessage defaultMessage="Cancel" description="button" />
</Button> </Button>
<div className={classes.spacer} />
{step !== "values" && ( {step !== "values" && (
<Button <Button
className={classes.button} className={classes.button}
color="primary" color="primary"
onClick={handlePrevStep} onClick={handlePrevStep}
> >
<FormattedMessage defaultMessage="Back" description="button" /> <FormattedMessage
defaultMessage="Previous"
description="previous step, button"
/>
</Button> </Button>
)} )}
{step !== "summary" ? ( {step !== "summary" ? (

44
src/products/components/ProductVariantCreateDialog/ProductVariantCreateTabs.tsx
View file

@ -51,13 +51,15 @@ const useStyles = makeStyles(
}, },
tab: { tab: {
flex: 1, flex: 1,
paddingBottom: theme.spacing.unit paddingBottom: theme.spacing.unit,
userSelect: "none"
}, },
tabActive: { tabActive: {
fontWeight: 600 fontWeight: 600
}, },
tabUnderline: { tabVisited: {
borderBottom: `3px solid ${theme.palette.primary.main}` borderBottom: `3px solid ${theme.palette.primary.main}`,
cursor: "pointer"
} }
}), }),
{ {
@ -67,32 +69,38 @@ const useStyles = makeStyles(
export interface ProductVariantCreateTabsProps { export interface ProductVariantCreateTabsProps {
step: ProductVariantCreateStep; step: ProductVariantCreateStep;
onStepClick: (step: ProductVariantCreateStep) => void;
} }
const ProductVariantCreateTabs: React.FC< const ProductVariantCreateTabs: React.FC<
ProductVariantCreateTabsProps ProductVariantCreateTabsProps
> = props => { > = props => {
const { step: currentStep } = props; const { step: currentStep, onStepClick } = props;
const classes = useStyles(props); const classes = useStyles(props);
const intl = useIntl(); const intl = useIntl();
const steps = getSteps(intl); const steps = getSteps(intl);
return ( return (
<div className={classes.root}> <div className={classes.root}>
{steps.map((step, stepIndex) => ( {steps.map((step, stepIndex) => {
<div const visitedStep =
className={classNames(classes.tab, { steps.findIndex(step => step.value === currentStep) >= stepIndex;
[classes.tabActive]: step.value === currentStep,
[classes.tabUnderline]: return (
steps.findIndex(step => step.value === currentStep) >= stepIndex <div
})} className={classNames(classes.tab, {
key={step.value} [classes.tabActive]: step.value === currentStep,
> [classes.tabVisited]: visitedStep
<Typography className={classes.label} variant="caption"> })}
{step.label} onClick={visitedStep ? () => onStepClick(step.value) : undefined}
</Typography> key={step.value}
</div> >
))} <Typography className={classes.label} variant="caption">
{step.label}
</Typography>
</div>
);
})}
</div> </div>
); );
}; };

2
src/products/components/ProductVariantCreateDialog/ProductVariantCreateValues.tsx
View file

@ -50,6 +50,7 @@ const ProductVariantCreateValues: React.FC<
<Debounce <Debounce
debounceFn={() => onValueClick(attribute.id, value.slug)} debounceFn={() => onValueClick(attribute.id, value.slug)}
time={100} time={100}
key={value.slug}
> >
{change => ( {change => (
<ControlledCheckbox <ControlledCheckbox
@ -63,7 +64,6 @@ const ProductVariantCreateValues: React.FC<
name={`value:${value.slug}`} name={`value:${value.slug}`}
label={value.name} label={value.name}
onChange={change} onChange={change}
key={value.slug}
/> />
)} )}
</Debounce> </Debounce>

18
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -82067,7 +82067,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
class="ProductVariantCreateTabs-root-id" class="ProductVariantCreateTabs-root-id"
> >
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82076,7 +82076,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
</span> </span>
</div> </div>
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82085,7 +82085,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary defaul
</span> </span>
</div> </div>
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82770,7 +82770,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
class="ProductVariantCreateTabs-root-id" class="ProductVariantCreateTabs-root-id"
> >
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82779,7 +82779,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
</span> </span>
</div> </div>
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -82788,7 +82788,7 @@ exports[`Storyshots Views / Products / Create multiple variants / summary errors
</span> </span>
</div> </div>
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -83478,7 +83478,7 @@ exports[`Storyshots Views / Products / Create multiple variants choose values 1`
class="ProductVariantCreateTabs-root-id" class="ProductVariantCreateTabs-root-id"
> >
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -83762,7 +83762,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
class="ProductVariantCreateTabs-root-id" class="ProductVariantCreateTabs-root-id"
> >
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"
@ -83771,7 +83771,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</span> </span>
</div> </div>
<div <div
class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabUnderline-id" class="ProductVariantCreateTabs-tab-id ProductVariantCreateTabs-tabActive-id ProductVariantCreateTabs-tabVisited-id"
> >
<span <span
class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id" class="MuiTypography-root-id MuiTypography-caption-id ProductVariantCreateTabs-label-id"

2
src/theme.ts
View file

@ -60,7 +60,7 @@ export default (colors: IThemeColors): Theme =>
}, },
flat: { flat: {
"& span": { "& span": {
color: colors.primary color: colors.font.gray
} }
}, },
flatPrimary: { flatPrimary: {