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

Shorten inputs

Browse source
This commit is contained in:
dominik-zeglen 2019-10-07 15:58:51 +02:00
parent 8e9e412865
commit be674522e1
3 changed files with 41 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@ import { ProductVariantCreateStep } from "./types";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles((theme: Theme) => ({
root: { root: {
maxHeight: 400, maxHeight: 400,
overflowX: "hidden",
overflowY: "scroll", overflowY: "scroll",
paddingLeft: theme.spacing.unit * 3, paddingLeft: theme.spacing.unit * 3,
position: "relative", position: "relative",
@ -74,6 +75,7 @@ const ProductVariantCreateContent: React.FC<
{step === "prices" && ( {step === "prices" && (
<ProductVariantCreatePrices <ProductVariantCreatePrices
attributes={selectedAttributes} attributes={selectedAttributes}
currencySymbol={currencySymbol}
data={data} data={data}
onApplyPriceOrStockChange={(all, type) => onApplyPriceOrStockChange={(all, type) =>
dispatchFormDataAction({ dispatchFormDataAction({

25
src/products/components/ProductVariantCreateDialog/ProductVariantCreatePrices.tsx
View file

@ -20,6 +20,9 @@ const useStyles = makeStyles((theme: Theme) => ({
marginBottom: theme.spacing.unit, marginBottom: theme.spacing.unit,
marginTop: theme.spacing.unit / 2 marginTop: theme.spacing.unit / 2
}, },
hrAttribute: {
marginTop: theme.spacing.unit * 2
},
label: { label: {
alignSelf: "center" alignSelf: "center"
}, },
@ -31,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) => ({
export type PriceOrStock = "price" | "stock"; export type PriceOrStock = "price" | "stock";
export interface ProductVariantCreatePricesProps { export interface ProductVariantCreatePricesProps {
attributes: ProductDetails_product_productType_variantAttributes[]; attributes: ProductDetails_product_productType_variantAttributes[];
currencySymbol: string;
data: ProductVariantCreateFormData; data: ProductVariantCreateFormData;
onApplyPriceOrStockChange: (applyToAll: boolean, type: PriceOrStock) => void; onApplyPriceOrStockChange: (applyToAll: boolean, type: PriceOrStock) => void;
onApplyToAllChange: (value: string, type: PriceOrStock) => void; onApplyToAllChange: (value: string, type: PriceOrStock) => void;
@ -47,6 +51,7 @@ const ProductVariantCreatePrices: React.FC<
> = props => { > = props => {
const { const {
attributes, attributes,
currencySymbol,
data, data,
onApplyPriceOrStockChange, onApplyPriceOrStockChange,
onApplyToAllChange, onApplyToAllChange,
@ -108,6 +113,9 @@ const ProductVariantCreatePrices: React.FC<
min: 0, min: 0,
type: "number" type: "number"
}} }}
InputProps={{
endAdornment: currencySymbol
}}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Price", defaultMessage: "Price",
id: "productVariantCreatePricesPriceInputLabel" id: "productVariantCreatePricesPriceInputLabel"
@ -128,7 +136,7 @@ const ProductVariantCreatePrices: React.FC<
{!data.price.all && ( {!data.price.all && (
<> <>
<FormSpacer /> <FormSpacer />
<Grid variant="inverted"> <Grid variant="uniform">
<div className={classes.label}> <div className={classes.label}>
<Typography> <Typography>
<FormattedMessage <FormattedMessage
@ -151,11 +159,12 @@ const ProductVariantCreatePrices: React.FC<
/> />
</div> </div>
</Grid> </Grid>
<Hr className={classes.hrAttribute} />
{priceAttributeValues && {priceAttributeValues &&
priceAttributeValues.map((attributeValue, attributeValueIndex) => ( priceAttributeValues.map((attributeValue, attributeValueIndex) => (
<> <>
<FormSpacer /> <FormSpacer />
<Grid variant="inverted"> <Grid variant="uniform">
<div className={classes.label}> <div className={classes.label}>
<Typography>{attributeValue.name}</Typography> <Typography>{attributeValue.name}</Typography>
</div> </div>
@ -166,6 +175,13 @@ const ProductVariantCreatePrices: React.FC<
description: "variant price", description: "variant price",
id: "productVariantCreatePricesSetPricePlaceholder" id: "productVariantCreatePricesSetPricePlaceholder"
})} })}
inputProps={{
min: 0,
type: "number"
}}
InputProps={{
endAdornment: currencySymbol
}}
fullWidth fullWidth
value={data.price.values[attributeValueIndex].value} value={data.price.values[attributeValueIndex].value}
onChange={event => onChange={event =>
@ -226,7 +242,7 @@ const ProductVariantCreatePrices: React.FC<
{!data.stock.all && ( {!data.stock.all && (
<> <>
<FormSpacer /> <FormSpacer />
<Grid variant="inverted"> <Grid variant="uniform">
<div className={classes.label}> <div className={classes.label}>
<Typography> <Typography>
<FormattedMessage <FormattedMessage
@ -249,11 +265,12 @@ const ProductVariantCreatePrices: React.FC<
/> />
</div> </div>
</Grid> </Grid>
<Hr className={classes.hrAttribute} />
{stockAttributeValues && {stockAttributeValues &&
stockAttributeValues.map((attributeValue, attributeValueIndex) => ( stockAttributeValues.map((attributeValue, attributeValueIndex) => (
<> <>
<FormSpacer /> <FormSpacer />
<Grid variant="inverted"> <Grid variant="uniform">
<div className={classes.label}> <div className={classes.label}>
<Typography>{attributeValue.name}</Typography> <Typography>{attributeValue.name}</Typography>
</div> </div>

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

@ -83850,7 +83850,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
Price Price
</label> </label>
<div <div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id" class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
> >
<fieldset <fieldset
aria-hidden="true" aria-hidden="true"
@ -83868,11 +83868,12 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</fieldset> </fieldset>
<input <input
aria-invalid="false" aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id" class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
min="0" min="0"
type="number" type="number"
value="2.79" value="2.79"
/> />
USD
</div> </div>
</div> </div>
<div <div
@ -83917,7 +83918,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
class="FormSpacer-spacer-id" class="FormSpacer-spacer-id"
/> />
<div <div
class="Grid-root-id Grid-inverted-id" class="Grid-root-id Grid-uniform-id"
> >
<div <div
class="Hook-label-id" class="Hook-label-id"
@ -83987,11 +83988,14 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</div> </div>
</div> </div>
</div> </div>
<hr
class="Hr-root-id Hook-hrAttribute-id"
/>
<div <div
class="FormSpacer-spacer-id" class="FormSpacer-spacer-id"
/> />
<div <div
class="Grid-root-id Grid-inverted-id" class="Grid-root-id Grid-uniform-id"
> >
<div <div
class="Hook-label-id" class="Hook-label-id"
@ -84013,7 +84017,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
Price Price
</label> </label>
<div <div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id" class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
> >
<fieldset <fieldset
aria-hidden="true" aria-hidden="true"
@ -84031,10 +84035,12 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</fieldset> </fieldset>
<input <input
aria-invalid="false" aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id" class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
type="text" min="0"
type="number"
value="4.00" value="4.00"
/> />
USD
</div> </div>
</div> </div>
</div> </div>
@ -84167,7 +84173,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
class="FormSpacer-spacer-id" class="FormSpacer-spacer-id"
/> />
<div <div
class="Grid-root-id Grid-inverted-id" class="Grid-root-id Grid-uniform-id"
> >
<div <div
class="Hook-label-id" class="Hook-label-id"
@ -84237,11 +84243,14 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</div> </div>
</div> </div>
</div> </div>
<hr
class="Hr-root-id Hook-hrAttribute-id"
/>
<div <div
class="FormSpacer-spacer-id" class="FormSpacer-spacer-id"
/> />
<div <div
class="Grid-root-id Grid-inverted-id" class="Grid-root-id Grid-uniform-id"
> >
<div <div
class="Hook-label-id" class="Hook-label-id"