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) => ({
root: {
maxHeight: 400,
overflowX: "hidden",
overflowY: "scroll",
paddingLeft: theme.spacing.unit * 3,
position: "relative",
@ -74,6 +75,7 @@ const ProductVariantCreateContent: React.FC<
{step === "prices" && (
<ProductVariantCreatePrices
attributes={selectedAttributes}
currencySymbol={currencySymbol}
data={data}
onApplyPriceOrStockChange={(all, type) =>
dispatchFormDataAction({

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

@ -20,6 +20,9 @@ const useStyles = makeStyles((theme: Theme) => ({
marginBottom: theme.spacing.unit,
marginTop: theme.spacing.unit / 2
},
hrAttribute: {
marginTop: theme.spacing.unit * 2
},
label: {
alignSelf: "center"
},
@ -31,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) => ({
export type PriceOrStock = "price" | "stock";
export interface ProductVariantCreatePricesProps {
attributes: ProductDetails_product_productType_variantAttributes[];
currencySymbol: string;
data: ProductVariantCreateFormData;
onApplyPriceOrStockChange: (applyToAll: boolean, type: PriceOrStock) => void;
onApplyToAllChange: (value: string, type: PriceOrStock) => void;
@ -47,6 +51,7 @@ const ProductVariantCreatePrices: React.FC<
> = props => {
const {
attributes,
currencySymbol,
data,
onApplyPriceOrStockChange,
onApplyToAllChange,
@ -108,6 +113,9 @@ const ProductVariantCreatePrices: React.FC<
min: 0,
type: "number"
}}
InputProps={{
endAdornment: currencySymbol
}}
label={intl.formatMessage({
defaultMessage: "Price",
id: "productVariantCreatePricesPriceInputLabel"
@ -128,7 +136,7 @@ const ProductVariantCreatePrices: React.FC<
{!data.price.all && (
<>
<FormSpacer />
<Grid variant="inverted">
<Grid variant="uniform">
<div className={classes.label}>
<Typography>
<FormattedMessage
@ -151,11 +159,12 @@ const ProductVariantCreatePrices: React.FC<
/>
</div>
</Grid>
<Hr className={classes.hrAttribute} />
{priceAttributeValues &&
priceAttributeValues.map((attributeValue, attributeValueIndex) => (
<>
<FormSpacer />
<Grid variant="inverted">
<Grid variant="uniform">
<div className={classes.label}>
<Typography>{attributeValue.name}</Typography>
</div>
@ -166,6 +175,13 @@ const ProductVariantCreatePrices: React.FC<
description: "variant price",
id: "productVariantCreatePricesSetPricePlaceholder"
})}
inputProps={{
min: 0,
type: "number"
}}
InputProps={{
endAdornment: currencySymbol
}}
fullWidth
value={data.price.values[attributeValueIndex].value}
onChange={event =>
@ -226,7 +242,7 @@ const ProductVariantCreatePrices: React.FC<
{!data.stock.all && (
<>
<FormSpacer />
<Grid variant="inverted">
<Grid variant="uniform">
<div className={classes.label}>
<Typography>
<FormattedMessage
@ -249,11 +265,12 @@ const ProductVariantCreatePrices: React.FC<
/>
</div>
</Grid>
<Hr className={classes.hrAttribute} />
{stockAttributeValues &&
stockAttributeValues.map((attributeValue, attributeValueIndex) => (
<>
<FormSpacer />
<Grid variant="inverted">
<Grid variant="uniform">
<div className={classes.label}>
<Typography>{attributeValue.name}</Typography>
</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
</label>
<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
aria-hidden="true"
@ -83868,11 +83868,12 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</fieldset>
<input
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"
type="number"
value="2.79"
/>
USD
</div>
</div>
<div
@ -83917,7 +83918,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
class="FormSpacer-spacer-id"
/>
<div
class="Grid-root-id Grid-inverted-id"
class="Grid-root-id Grid-uniform-id"
>
<div
class="Hook-label-id"
@ -83987,11 +83988,14 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</div>
</div>
</div>
<hr
class="Hr-root-id Hook-hrAttribute-id"
/>
<div
class="FormSpacer-spacer-id"
/>
<div
class="Grid-root-id Grid-inverted-id"
class="Grid-root-id Grid-uniform-id"
>
<div
class="Hook-label-id"
@ -84013,7 +84017,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
Price
</label>
<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
aria-hidden="true"
@ -84031,10 +84035,12 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</fieldset>
<input
aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id"
type="text"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
min="0"
type="number"
value="4.00"
/>
USD
</div>
</div>
</div>
@ -84167,7 +84173,7 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
class="FormSpacer-spacer-id"
/>
<div
class="Grid-root-id Grid-inverted-id"
class="Grid-root-id Grid-uniform-id"
>
<div
class="Hook-label-id"
@ -84237,11 +84243,14 @@ exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1
</div>
</div>
</div>
<hr
class="Hr-root-id Hook-hrAttribute-id"
/>
<div
class="FormSpacer-spacer-id"
/>
<div
class="Grid-root-id Grid-inverted-id"
class="Grid-root-id Grid-uniform-id"
>
<div
class="Hook-label-id"