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

Minor visual fixes (#1927)

Browse source 
* Fix label

* Improve product organization widget labels

* Fix misaligned label

* Fix arrow behavior

* Add clickable rows to country picker

* Update snapshots

* Update messages

* Fix misaligned label

* Update snapshots
This commit is contained in:
Dominik Żegleń 2022-03-25 13:37:01 +01:00 committed by GitHub
parent 2b7d514da5
commit 1e77665b4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 3320 additions and 2256 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
locale/defaultMessages.json
View file

@ -430,7 +430,7 @@
"string": "Taxes" "string": "Taxes"
}, },
"productTypeTaxesInputLabel": { "productTypeTaxesInputLabel": {
"string": "Taxes" "string": "Tax group"
}, },
"productVariantCreatePricesSetPricePlaceholder": { "productVariantCreatePricesSetPricePlaceholder": {
"context": "input label", "context": "input label",
@ -6502,10 +6502,6 @@
"context": "modal button upload", "context": "modal button upload",
"string": "Upload" "string": "Upload"
}, },
"src_dot_products_dot_components_dot_ProductOrganization_dot_150865454": {
"context": "product is not configurable",
"string": "Simple"
},
"src_dot_products_dot_components_dot_ProductOrganization_dot_1755013298": { "src_dot_products_dot_components_dot_ProductOrganization_dot_1755013298": {
"string": "Category" "string": "Category"
}, },
@ -6517,7 +6513,6 @@
"string": "Organize Product" "string": "Organize Product"
}, },
"src_dot_products_dot_components_dot_ProductOrganization_dot_2754779425": { "src_dot_products_dot_components_dot_ProductOrganization_dot_2754779425": {
"context": "product is configurable",
"string": "Configurable" "string": "Configurable"
}, },
"src_dot_products_dot_components_dot_ProductOrganization_dot_2805838453": { "src_dot_products_dot_components_dot_ProductOrganization_dot_2805838453": {

32
src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
View file

@ -2,9 +2,9 @@ import { Popper, TextField, Typography } from "@material-ui/core";
import { fade } from "@material-ui/core/styles/colorManipulator"; import { fade } from "@material-ui/core/styles/colorManipulator";
import CloseIcon from "@material-ui/icons/Close"; import CloseIcon from "@material-ui/icons/Close";
import Debounce, { DebounceProps } from "@saleor/components/Debounce"; import Debounce, { DebounceProps } from "@saleor/components/Debounce";
import ArrowDropdownIcon from "@saleor/icons/ArrowDropdown"; import { ChevronIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
import { IconButton, makeStyles } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types"; import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames";
import Downshift, { ControllerStateAndHelpers } from "downshift"; import Downshift, { ControllerStateAndHelpers } from "downshift";
import { filter } from "fuzzaldrin"; import { filter } from "fuzzaldrin";
import React from "react"; import React from "react";
@ -65,12 +65,18 @@ const useStyles = makeStyles(
paddingRight: theme.spacing(1) paddingRight: theme.spacing(1)
}, },
adornment: { adornment: {
color: theme.palette.saleor.main[3],
cursor: "pointer",
userSelect: "none",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
userSelect: "none", "& svg": {
cursor: "pointer", transition: theme.transitions.duration.shorter + "ms"
"&:active": { }
pointerEvents: "none" },
adornmentRotate: {
"& svg": {
transform: "rotate(180deg)"
} }
} }
}), }),
@ -167,7 +173,8 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
toggleMenu, toggleMenu,
getMenuProps, getMenuProps,
highlightedIndex, highlightedIndex,
inputValue inputValue,
getToggleButtonProps
}) => { }) => {
const displayCustomValue = const displayCustomValue =
inputValue && inputValue &&
@ -183,13 +190,17 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
<TextField <TextField
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<div className={classes.adornment}> <div
{...getToggleButtonProps()}
className={classNames(classes.adornment, {
[classes.adornmentRotate]: isOpen
})}
>
{endAdornment} {endAdornment}
<ArrowDropdownIcon /> <ChevronIcon />
</div> </div>
), ),
ref: anchor, ref: anchor,
onBlur,
onFocus: () => { onFocus: () => {
if (fetchOnFocus) { if (fetchOnFocus) {
fetchChoices(inputValue); fetchChoices(inputValue);
@ -208,6 +219,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
label={label} label={label}
fullWidth={true} fullWidth={true}
disabled={disabled} disabled={disabled}
onBlur={onBlur}
/> />
{isOpen && ( {isOpen && (
<Popper <Popper

37
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -1,14 +1,13 @@
import { InputBase, Popper, TextField } from "@material-ui/core"; import { InputBase, Popper, TextField } from "@material-ui/core";
import { InputProps } from "@material-ui/core/Input"; import { InputProps } from "@material-ui/core/Input";
import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types"; import { ExtendedFormHelperTextProps } from "@saleor/channels/components/ChannelForm/types";
import { makeStyles } from "@saleor/macaw-ui"; import { ChevronIcon, makeStyles } from "@saleor/macaw-ui";
import { FetchMoreProps } from "@saleor/types"; import { FetchMoreProps } from "@saleor/types";
import classNames from "classnames"; import classNames from "classnames";
import Downshift from "downshift"; import Downshift from "downshift";
import { filter } from "fuzzaldrin"; import { filter } from "fuzzaldrin";
import React from "react"; import React from "react";
import ArrowDropdownIcon from "../../icons/ArrowDropdown";
import Debounce, { DebounceProps } from "../Debounce"; import Debounce, { DebounceProps } from "../Debounce";
import SingleAutocompleteSelectFieldContent, { import SingleAutocompleteSelectFieldContent, {
SingleAutocompleteActionType, SingleAutocompleteActionType,
@ -25,9 +24,16 @@ const useStyles = makeStyles(
padding: theme.spacing(2, 0) padding: theme.spacing(2, 0)
}, },
adornment: { adornment: {
color: theme.palette.saleor.main[3],
cursor: "pointer", cursor: "pointer",
"&:active": { userSelect: "none",
pointerEvents: "none" "& svg": {
transition: theme.transitions.duration.shorter + "ms"
}
},
adornmentRotate: {
"& svg": {
transform: "rotate(180deg)"
} }
} }
}), }),
@ -128,7 +134,8 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
toggleMenu, toggleMenu,
closeMenu, closeMenu,
highlightedIndex, highlightedIndex,
reset reset,
getToggleButtonProps
}) => { }) => {
const isCustomValueSelected = const isCustomValueSelected =
choices && selectedItem choices && selectedItem
@ -178,13 +185,17 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
const commonInputProps = { const commonInputProps = {
...InputProps, ...InputProps,
endAdornment: ( endAdornment: (
<div className={classes.adornment}> <div
<ArrowDropdownIcon /> {...getToggleButtonProps()}
className={classNames(classes.adornment, {
[classes.adornmentRotate]: isOpen
})}
>
<ChevronIcon />
</div> </div>
), ),
error, error,
id: undefined, id: undefined,
onBlur: handleBlur,
onFocus: () => { onFocus: () => {
if (fetchOnFocus) { if (fetchOnFocus) {
fetchChoices(inputValue); fetchChoices(inputValue);
@ -198,7 +209,8 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
"aria-label": "naked", "aria-label": "naked",
...commonInputProps, ...commonInputProps,
autoFocus: true, autoFocus: true,
className: classes.nakedInput className: classes.nakedInput,
onBlur: handleBlur
} }
: {}; : {};
@ -215,7 +227,12 @@ const SingleAutocompleteSelectFieldComponent: React.FC<SingleAutocompleteSelectF
inputProps={{ inputProps={{
...getInputProps({ ...getInputProps({
placeholder, placeholder,
onClick: !disabled && toggleMenu onClick: () => {
if (disabled) {
return;
}
toggleMenu();
}
}) })
}} }}
error={error} error={error}

2
src/productTypes/components/ProductTypeTaxes/ProductTypeTaxes.tsx
View file

@ -48,7 +48,7 @@ const ProductTypeTaxes: React.FC<ProductTypeTaxesProps> = props => {
disabled={disabled} disabled={disabled}
displayValue={taxTypeDisplayName} displayValue={taxTypeDisplayName}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Taxes", defaultMessage: "Tax group",
id: "productTypeTaxesInputLabel" id: "productTypeTaxesInputLabel"
})} })}
name={"taxType" as keyof ProductTypeForm} name={"taxType" as keyof ProductTypeForm}

27
src/products/components/ProductOrganization/ProductOrganization.tsx
View file

@ -12,6 +12,7 @@ import SingleAutocompleteSelectField, {
} from "@saleor/components/SingleAutocompleteSelectField"; } from "@saleor/components/SingleAutocompleteSelectField";
import { ProductErrorFragment } from "@saleor/graphql"; import { ProductErrorFragment } from "@saleor/graphql";
import { ChangeEvent } from "@saleor/hooks/useForm"; import { ChangeEvent } from "@saleor/hooks/useForm";
import { commonMessages } from "@saleor/intl";
import { makeStyles } from "@saleor/macaw-ui"; import { makeStyles } from "@saleor/macaw-ui";
import { maybe } from "@saleor/misc"; import { maybe } from "@saleor/misc";
import { productTypeUrl } from "@saleor/productTypes/urls"; import { productTypeUrl } from "@saleor/productTypes/urls";
@ -132,28 +133,24 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
<Typography className={classes.label} variant="caption"> <Typography className={classes.label} variant="caption">
<FormattedMessage defaultMessage="Product Type" /> <FormattedMessage defaultMessage="Product Type" />
</Typography> </Typography>
<Link <Typography>
href={productTypeUrl(productType?.id) ?? ""} <Link
disabled={!productType?.id} href={productTypeUrl(productType?.id) ?? ""}
> disabled={!productType?.id}
{productType?.name ?? "..."} >
</Link> {productType?.name ?? "..."}
</Link>
</Typography>
<CardSpacer /> <CardSpacer />
<Typography className={classes.label} variant="caption"> <Typography className={classes.label} variant="caption">
<FormattedMessage defaultMessage="Product Type" /> <FormattedMessage defaultMessage="Configurable" />
</Typography> </Typography>
<Typography> <Typography>
{maybe( {maybe(
() => () =>
productType.hasVariants productType.hasVariants
? intl.formatMessage({ ? intl.formatMessage(commonMessages.yes)
defaultMessage: "Configurable", : intl.formatMessage(commonMessages.no),
description: "product is configurable"
})
: intl.formatMessage({
defaultMessage: "Simple",
description: "product is not configurable"
}),
"..." "..."
)} )}
</Typography> </Typography>

42
src/products/components/ProductVariantPage/VariantDetailsChannelsAvailabilityCard/index.tsx
View file

@ -38,7 +38,7 @@ const useExpanderStyles = makeStyles(
); );
const useSummaryStyles = makeStyles( const useSummaryStyles = makeStyles(
theme => ({ () => ({
expanded: {}, expanded: {},
root: { root: {
width: "100%", width: "100%",
@ -46,10 +46,6 @@ const useSummaryStyles = makeStyles(
margin: 0, margin: 0,
padding: 0, padding: 0,
minHeight: 0, minHeight: 0,
paddingTop: theme.spacing(2),
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(5.5),
paddingBottom: theme.spacing(2),
"&$expanded": { "&$expanded": {
minHeight: 0 minHeight: 0
@ -66,6 +62,15 @@ const useSummaryStyles = makeStyles(
{ name: "VariantDetailsChannelsAvailabilityCardExpanderSummary" } { name: "VariantDetailsChannelsAvailabilityCardExpanderSummary" }
); );
const useStyles = makeStyles(
() => ({
summaryContent: {
paddingTop: 0
}
}),
{ name: "VariantDetailsChannelsAvailabilityCard" }
);
interface VariantDetailsChannelsAvailabilityCardProps { interface VariantDetailsChannelsAvailabilityCardProps {
variant: ProductVariantFragment; variant: ProductVariantFragment;
} }
@ -73,6 +78,7 @@ interface VariantDetailsChannelsAvailabilityCardProps {
const VariantDetailsChannelsAvailabilityCard: React.FC<VariantDetailsChannelsAvailabilityCardProps> = ({ const VariantDetailsChannelsAvailabilityCard: React.FC<VariantDetailsChannelsAvailabilityCardProps> = ({
variant variant
}) => { }) => {
const classes = useStyles();
const expanderClasses = useExpanderStyles({}); const expanderClasses = useExpanderStyles({});
const summaryClasses = useSummaryStyles({}); const summaryClasses = useSummaryStyles({});
const localizeDate = useDateLocalize(); const localizeDate = useDateLocalize();
@ -139,18 +145,20 @@ const VariantDetailsChannelsAvailabilityCard: React.FC<VariantDetailsChannelsAva
return ( return (
<CardContainer> <CardContainer>
<Accordion classes={expanderClasses}> <Accordion classes={expanderClasses}>
<AccordionSummary <CardContent className={classes.summaryContent}>
expandIcon={<IconChevronDown />} <AccordionSummary
classes={summaryClasses} expandIcon={<IconChevronDown />}
data-test-id="channels-variant-availability-summary" classes={summaryClasses}
> data-test-id="channels-variant-availability-summary"
<Typography variant="caption"> >
{intl.formatMessage(messages.subtitle, { <Typography variant="caption">
publishedInChannelsCount: publishedInChannelsListings.length, {intl.formatMessage(messages.subtitle, {
availableChannelsCount: allAvailableChannelsListings.length publishedInChannelsCount: publishedInChannelsListings.length,
})} availableChannelsCount: allAvailableChannelsListings.length
</Typography> })}
</AccordionSummary> </Typography>
</AccordionSummary>
</CardContent>
{channelListings.map(({ channel }) => ( {channelListings.map(({ channel }) => (
<React.Fragment key={channel.id}> <React.Fragment key={channel.id}>

232
src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
View file

@ -28,16 +28,7 @@ import React from "react";
import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl"; import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
const useStyles = makeStyles( const useStyles = makeStyles(
theme => ({ () => ({
caption: {
fontSize: 14,
padding: theme.spacing(0, 3, 2, 3)
},
colName: {
fontSize: 14,
paddingLeft: 0,
width: "auto"
},
colPrice: { colPrice: {
textAlign: "right", textAlign: "right",
verticalAlign: "top", verticalAlign: "top",
@ -124,126 +115,125 @@ const ProductVariantPrice: React.FC<ProductVariantPriceProps> = props => {
description: "product pricing, section header" description: "product pricing, section header"
})} })}
/> />
<CardContent className={classes.pricingContent}> <CardContent>
<Typography variant="caption" className={classes.caption}> <Typography variant="body2">
{intl.formatMessage({ {intl.formatMessage({
defaultMessage: defaultMessage:
"Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency", "Channels that don’t have assigned prices will use their parent channel to define the price. Price will be converted to channel’s currency",
description: "info text" description: "info text"
})} })}
</Typography> </Typography>
<ResponsiveTable className={classes.table}> </CardContent>
<TableHead> <ResponsiveTable className={classes.table}>
<TableRow> <TableHead>
<TableCell> <TableRow>
<FormattedMessage <TableCell>
defaultMessage="Channel Name" <FormattedMessage
description="tabel column header" defaultMessage="Channel Name"
/> description="tabel column header"
</TableCell> />
<TableCell className={classes.colType}> </TableCell>
<FormattedMessage <TableCell className={classes.colType}>
defaultMessage="Selling Price" <FormattedMessage
description="tabel column header" defaultMessage="Selling Price"
/> description="tabel column header"
</TableCell> />
<TableCell className={classes.colType}> </TableCell>
<FormattedMessage <TableCell className={classes.colType}>
defaultMessage="Cost price" <FormattedMessage
description="tabel column header" defaultMessage="Cost price"
/> description="tabel column header"
</TableCell> />
</TableRow> </TableCell>
</TableHead> </TableRow>
<TableBody> </TableHead>
{renderCollection( <TableBody>
ProductVariantChannelListings, {renderCollection(
(listing, index) => { ProductVariantChannelListings,
const priceError = getFormChannelError( (listing, index) => {
formErrors.price, const priceError = getFormChannelError(
listing.id formErrors.price,
); listing.id
const costPriceError = getFormChannelError( );
formErrors.costPrice, const costPriceError = getFormChannelError(
listing.id formErrors.costPrice,
); listing.id
);
return ( return (
<TableRow key={listing?.id || `skeleton-${index}`}> <TableRow key={listing?.id || `skeleton-${index}`}>
<TableCell>{listing?.name || <Skeleton />}</TableCell> <TableCell>{listing?.name || <Skeleton />}</TableCell>
<TableCell className={classes.colPrice}> <TableCell className={classes.colPrice}>
{listing ? ( {listing ? (
<PriceField <PriceField
className={classes.input} className={classes.input}
error={!!priceError} error={!!priceError}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Price" defaultMessage: "Price"
})} })}
name={`${listing.id}-channel-price`} name={`${listing.id}-channel-price`}
value={listing.price || ""} value={listing.price || ""}
currencySymbol={listing.currency} currencySymbol={listing.currency}
onChange={e => onChange={e =>
onChange(listing.id, { onChange(listing.id, {
costPrice: listing.costPrice, costPrice: listing.costPrice,
price: e.target.value, price: e.target.value,
preorderThreshold: listing.preorderThreshold preorderThreshold: listing.preorderThreshold
}) })
} }
disabled={loading} disabled={loading}
required required
hint={ hint={
priceError && priceError && getProductErrorMessage(priceError, intl)
getProductErrorMessage(priceError, intl) }
} />
/> ) : (
) : ( <Skeleton />
<Skeleton /> )}
)} </TableCell>
</TableCell> <TableCell className={classes.colPrice}>
<TableCell className={classes.colPrice}> {listing ? (
{listing ? ( <PriceField
<PriceField className={classes.input}
className={classes.input} error={!!costPriceError}
error={!!costPriceError} label={intl.formatMessage({
label={intl.formatMessage({ defaultMessage: "Cost",
defaultMessage: "Cost", description: "tabel column header"
description: "tabel column header" })}
})} name={`${listing.id}-channel-costPrice`}
name={`${listing.id}-channel-costPrice`} value={listing.costPrice || ""}
value={listing.costPrice || ""} currencySymbol={listing.currency}
currencySymbol={listing.currency} onChange={e =>
onChange={e => onChange(listing.id, {
onChange(listing.id, { costPrice: e.target.value,
costPrice: e.target.value, price: listing.price,
price: listing.price, preorderThreshold: listing.preorderThreshold
preorderThreshold: listing.preorderThreshold })
}) }
} disabled={loading}
disabled={loading} hint={
hint={ costPriceError
costPriceError ? getProductErrorMessage(costPriceError, intl)
? getProductErrorMessage(costPriceError, intl) : ""
: "" }
} />
/> ) : (
) : ( <Skeleton />
<Skeleton /> )}
)}
</TableCell>
</TableRow>
);
},
() => (
<TableRow>
<TableCell colSpan={numberOfColumns}>
<FormattedMessage defaultMessage="No channels found" />
</TableCell> </TableCell>
</TableRow> </TableRow>
) );
)} },
</TableBody> () => (
</ResponsiveTable> <TableRow>
</CardContent> <TableCell colSpan={numberOfColumns}>
<FormattedMessage defaultMessage="No channels found" />
</TableCell>
</TableRow>
)
)}
</TableBody>
</ResponsiveTable>
</Card> </Card>
); );
}; };

29
src/shipping/components/ShippingZoneCountriesAssignDialog/ShippingZoneCountriesAssignDialog.tsx
View file

@ -127,7 +127,14 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
<FormSpacer /> <FormSpacer />
<ResponsiveTable className={classes.table}> <ResponsiveTable className={classes.table}>
<TableBody> <TableBody>
<TableRow> <TableRow
className={classes.clickableRow}
onClick={() =>
handleRestOfTheWorldChange(
!isRestOfTheWorldSelected
)
}
>
<TableCell className={classes.wideCell}> <TableCell className={classes.wideCell}>
<FormattedMessage <FormattedMessage
{...messages.restOfTheWorldCheckbox} {...messages.restOfTheWorldCheckbox}
@ -145,11 +152,6 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
<Checkbox <Checkbox
name="restOfTheWorld" name="restOfTheWorld"
checked={isRestOfTheWorldSelected} checked={isRestOfTheWorldSelected}
onChange={() =>
handleRestOfTheWorldChange(
!isRestOfTheWorldSelected
)
}
/> />
</TableCell> </TableCell>
</TableRow> </TableRow>
@ -171,7 +173,13 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
const isChecked = countrySelectionMap[country.code]; const isChecked = countrySelectionMap[country.code];
return ( return (
<TableRow key={country.code}> <TableRow
className={classes.clickableRow}
onClick={() =>
handleCountryChange(country.code, !isChecked)
}
key={country.code}
>
<TableCell className={classes.wideCell}> <TableCell className={classes.wideCell}>
{country.country} {country.country}
</TableCell> </TableCell>
@ -179,12 +187,7 @@ const ShippingZoneCountriesAssignDialog: React.FC<ShippingZoneCountriesAssignDia
padding="checkbox" padding="checkbox"
className={classes.checkboxCell} className={classes.checkboxCell}
> >
<Checkbox <Checkbox checked={isChecked} />
checked={isChecked}
onChange={() =>
handleCountryChange(country.code, !isChecked)
}
/>
</TableCell> </TableCell>
</TableRow> </TableRow>
); );

4
src/shipping/components/ShippingZoneCountriesAssignDialog/styles.ts
View file

@ -2,6 +2,10 @@ import { makeStyles } from "@saleor/macaw-ui";
export const useStyles = makeStyles( export const useStyles = makeStyles(
theme => ({ theme => ({
clickableRow: {
cursor: "pointer",
userSelect: "none"
},
checkboxCell: { checkboxCell: {
paddingLeft: 0 paddingLeft: 0
}, },

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

File diff suppressed because it is too large Load diff