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

Change switches to checkboxes

Browse source
This commit is contained in:
Krzysztof Bialoglowicz 2019-09-09 11:28:06 +02:00
parent ed86f95421
commit 0400fe19bf
9 changed files with 89 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/attributes/components/AttributeDetails/AttributeDetails.tsx
View file

@ -6,7 +6,7 @@ import { useIntl } from "react-intl";
import slugify from "slugify"; import slugify from "slugify";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import SingleSelectField from "@saleor/components/SingleSelectField"; import SingleSelectField from "@saleor/components/SingleSelectField";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
@ -103,14 +103,15 @@ const AttributeDetails: React.FC<AttributeDetailsProps> = ({
value={data.inputType} value={data.inputType}
/> />
<FormSpacer /> <FormSpacer />
<ControlledSwitch <ControlledCheckbox
checked={data.valueRequired} name={"valueRequired" as keyof FormData}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Value Required", defaultMessage: "Value Required",
description: "check to require attribute to have value" description: "check to require attribute to have value"
})} })}
name={"valueRequired" as keyof AttributePageFormData} checked={data.valueRequired}
onChange={onChange} onChange={onChange}
disabled={disabled}
/> />
</CardContent> </CardContent>
</Card> </Card>

71
src/attributes/components/AttributeProperties/AttributeProperties.tsx
View file

@ -7,7 +7,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import CardSpacer from "@saleor/components/CardSpacer"; import CardSpacer from "@saleor/components/CardSpacer";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
@ -71,16 +71,17 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
/> />
</Typography> </Typography>
<Hr /> <Hr />
<ControlledSwitch <ControlledCheckbox
name={"filterableInStorefront" as keyof AttributePageFormData} name={"filterableInStorefront" as keyof FormData}
checked={data.filterableInStorefront}
disabled={disabled}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Use in faceted navigation", defaultMessage: "Use in faceted navigation",
description: "attribute is filterable in storefront" description: "attribute is filterable in storefront"
})} })}
checked={data.filterableInStorefront}
onChange={onChange} onChange={onChange}
disabled={disabled}
/> />
<FormSpacer />
{data.filterableInStorefront && ( {data.filterableInStorefront && (
<TextField <TextField
disabled={disabled} disabled={disabled}
@ -97,15 +98,15 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
/> />
)} )}
<FormSpacer /> <FormSpacer />
<ControlledSwitch <ControlledCheckbox
name={"visibleInStorefront" as keyof AttributePageFormData} name={"visibleInStorefront" as keyof FormData}
checked={data.visibleInStorefront}
disabled={disabled}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Visible on Product Page in Storefront", defaultMessage: "Visible on Product Page in Storefront",
description: "attribute" description: "attribute"
})} })}
checked={data.visibleInStorefront}
onChange={onChange} onChange={onChange}
disabled={disabled}
/> />
<CardSpacer /> <CardSpacer />
<Typography variant="subtitle1"> <Typography variant="subtitle1">
@ -116,36 +117,40 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
</Typography> </Typography>
<Hr /> <Hr />
<CardSpacer /> <CardSpacer />
<ControlledSwitch <ControlledCheckbox
name={"filterableInDashboard" as keyof AttributePageFormData} name={"filterableInDashboard" as keyof FormData}
checked={data.filterableInDashboard} label={
disabled={disabled} <>
label={intl.formatMessage({ <FormattedMessage
defaultMessage: "Use in Filtering", defaultMessage="Use in Filtering"
description: "use attribute in filtering" description="use attribute in filtering"
})} />
secondLabel={ <Typography variant="caption">
<Typography variant="caption"> <FormattedMessage defaultMessage="If enabled, you’ll be able to use this attribute to filter products in product list." />
<FormattedMessage defaultMessage="If enabled, you’ll be able to use this attribute to filter products in product list." /> </Typography>
</Typography> </>
} }
checked={data.filterableInDashboard}
onChange={onChange} onChange={onChange}
disabled={disabled}
/> />
<FormSpacer /> <FormSpacer />
<ControlledSwitch <ControlledCheckbox
name={"availableInGrid" as keyof AttributePageFormData} name={"availableInGrid" as keyof FormData}
checked={data.availableInGrid} label={
disabled={disabled} <>
label={intl.formatMessage({ <FormattedMessage
defaultMessage: "Add to Column Options", defaultMessage="Add to Column Options"
description: "add attribute as column in product list table" description="add attribute as column in product list table"
})} />
secondLabel={ <Typography variant="caption">
<Typography variant="caption"> <FormattedMessage defaultMessage="If enable this attribute can be used as a column in product table." />
<FormattedMessage defaultMessage="If enable this attribute can be used as a column in product table." /> </Typography>
</Typography> </>
} }
checked={data.availableInGrid}
onChange={onChange} onChange={onChange}
disabled={disabled}
/> />
</CardContent> </CardContent>
</Card> </Card>

12
src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx
View file

@ -6,7 +6,7 @@ import AppHeader from "@saleor/components/AppHeader";
import { CardSpacer } from "@saleor/components/CardSpacer"; import { CardSpacer } from "@saleor/components/CardSpacer";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import { Container } from "@saleor/components/Container"; import { Container } from "@saleor/components/Container";
import { ControlledSwitch } from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Form from "@saleor/components/Form"; import Form from "@saleor/components/Form";
import Grid from "@saleor/components/Grid"; import Grid from "@saleor/components/Grid";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
@ -126,15 +126,15 @@ const CollectionDetailsPage: React.StatelessComponent<
disabled={disabled} disabled={disabled}
onChange={change} onChange={change}
> >
<ControlledSwitch <ControlledCheckbox
checked={data.isFeatured} name={"isFeatured" as keyof FormData}
disabled={disabled}
name="isFeatured"
onChange={change}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Feature on Homepage", defaultMessage: "Feature on Homepage",
description: "switch button" description: "switch button"
})} })}
checked={data.isFeatured}
onChange={change}
disabled={disabled}
/> />
</VisibilityCard> </VisibilityCard>
</div> </div>

8
src/discounts/components/VoucherValue/VoucherValue.tsx
View file

@ -5,7 +5,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import { FormSpacer } from "@saleor/components/FormSpacer"; import { FormSpacer } from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import RadioGroupField from "@saleor/components/RadioGroupField"; import RadioGroupField from "@saleor/components/RadioGroupField";
@ -98,8 +98,8 @@ const VoucherValue = ({
)} )}
<Hr /> <Hr />
<FormSpacer /> <FormSpacer />
<ControlledSwitch <ControlledCheckbox
checked={data.applyOncePerOrder} name={"applyOncePerOrder" as keyof FormData}
label={ label={
<> <>
<FormattedMessage <FormattedMessage
@ -111,8 +111,8 @@ const VoucherValue = ({
</Typography> </Typography>
</> </>
} }
checked={data.applyOncePerOrder}
onChange={onChange} onChange={onChange}
name={"applyOncePerOrder" as keyof FormData}
disabled={disabled} disabled={disabled}
/> />
</CardContent> </CardContent>

8
src/plugins/components/PluginInfo/PluginInfo.tsx
View file

@ -6,7 +6,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import { commonMessages } from "@saleor/intl"; import { commonMessages } from "@saleor/intl";
@ -69,12 +69,12 @@ const PluginInfo: React.StatelessComponent<PluginInfoProps> = ({
description: "plugin status" description: "plugin status"
})} })}
</Typography> </Typography>
<ControlledSwitch <ControlledCheckbox
checked={data.active} name={"active" as keyof FormData}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Set plugin as Active" defaultMessage: "Set plugin as Active"
})} })}
name={"active" as keyof FormData} checked={data.active}
onChange={onChange} onChange={onChange}
/> />
</CardContent> </CardContent>

10
src/plugins/components/PluginSettings/PluginSettings.tsx
View file

@ -3,7 +3,7 @@ import CardContent from "@material-ui/core/CardContent";
import TextField from "@material-ui/core/TextField"; import TextField from "@material-ui/core/TextField";
import makeStyles from "@material-ui/styles/makeStyles"; import makeStyles from "@material-ui/styles/makeStyles";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import { FormErrors } from "@saleor/types"; import { FormErrors } from "@saleor/types";
import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes"; import { ConfigurationTypeFieldEnum } from "@saleor/types/globalTypes";
import React from "react"; import React from "react";
@ -65,16 +65,16 @@ const PluginSettings: React.StatelessComponent<PluginSettingsProps> = ({
/> />
)} )}
{fields[index].type === ConfigurationTypeFieldEnum.BOOLEAN && ( {fields[index].type === ConfigurationTypeFieldEnum.BOOLEAN && (
<ControlledSwitch <ControlledCheckbox
name={configuration.name}
label={fields[index].label}
checked={ checked={
typeof configuration.value !== "boolean" typeof configuration.value !== "boolean"
? configuration.value === "true" ? configuration.value === "true"
: configuration.value : configuration.value
} }
disabled={disabled}
label={fields[index].label}
name={configuration.name}
onChange={onChange} onChange={onChange}
disabled={disabled}
/> />
)} )}
</div> </div>

17
src/shipping/components/ShippingZoneRateDialog/ShippingZoneRateDialog.tsx
View file

@ -17,7 +17,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, { import ConfirmButton, {
ConfirmButtonTransitionState ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton"; } from "@saleor/components/ConfirmButton";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Form from "@saleor/components/Form"; import Form from "@saleor/components/Form";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
@ -184,10 +184,8 @@ const ShippingZoneRateDialog = withStyles(styles, {
description: "order weight range" description: "order weight range"
})} })}
</Typography> </Typography>
<ControlledSwitch <ControlledCheckbox
checked={data.noLimits}
name={"noLimits" as keyof FormData} name={"noLimits" as keyof FormData}
onChange={change}
label={ label={
<> <>
<FormattedMessage <FormattedMessage
@ -207,6 +205,9 @@ const ShippingZoneRateDialog = withStyles(styles, {
</Typography> </Typography>
</> </>
} }
checked={data.noLimits}
onChange={change}
disabled={disabled}
/> />
{!data.noLimits && ( {!data.noLimits && (
<> <>
@ -289,15 +290,15 @@ const ShippingZoneRateDialog = withStyles(styles, {
description="shipping method" description="shipping method"
/> />
</Typography> </Typography>
<ControlledSwitch <ControlledCheckbox
checked={data.isFree} name={"isFree" as keyof FormData}
disabled={disabled}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "This is free shipping", defaultMessage: "This is free shipping",
description: "shipping method, switch button" description: "shipping method, switch button"
})} })}
name={"isFree" as keyof FormData} checked={data.isFree}
onChange={change} onChange={change}
disabled={disabled}
/> />
{!data.isFree && ( {!data.isFree && (
<> <>

22
src/taxes/components/TaxConfiguration/TaxConfiguration.tsx
View file

@ -7,7 +7,7 @@ import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
import ControlledSwitch from "@saleor/components/ControlledSwitch"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import Hr from "@saleor/components/Hr"; import Hr from "@saleor/components/Hr";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
@ -42,33 +42,35 @@ export const TaxConfiguration = withStyles(styles, {
<Card> <Card>
<CardTitle title={intl.formatMessage(sectionNames.configuration)} /> <CardTitle title={intl.formatMessage(sectionNames.configuration)} />
<CardContent className={classes.content}> <CardContent className={classes.content}>
<ControlledSwitch <ControlledCheckbox
disabled={disabled}
name={"includeTax" as keyof FormData} name={"includeTax" as keyof FormData}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: defaultMessage:
"All products prices are entered with tax included" "All products prices are entered with tax included"
})} })}
onChange={onChange}
checked={data.includeTax} checked={data.includeTax}
/> onChange={onChange}
<ControlledSwitch
disabled={disabled} disabled={disabled}
/>
<FormSpacer />
<ControlledCheckbox
name={"showGross" as keyof FormData} name={"showGross" as keyof FormData}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Show gross prices to customers in the storefront" defaultMessage: "Show gross prices to customers in the storefront"
})} })}
onChange={onChange}
checked={data.showGross} checked={data.showGross}
/> onChange={onChange}
<ControlledSwitch
disabled={disabled} disabled={disabled}
/>
<FormSpacer />
<ControlledCheckbox
name={"chargeTaxesOnShipping" as keyof FormData} name={"chargeTaxesOnShipping" as keyof FormData}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Charge taxes on shipping rates" defaultMessage: "Charge taxes on shipping rates"
})} })}
onChange={onChange}
checked={data.chargeTaxesOnShipping} checked={data.chargeTaxesOnShipping}
onChange={onChange}
disabled={disabled}
/> />
<FormSpacer /> <FormSpacer />
</CardContent> </CardContent>

6
src/theme.ts
View file

@ -90,6 +90,12 @@ export default (colors: IThemeColors): Theme =>
padding: "5px 24px 24px" padding: "5px 24px 24px"
} }
}, },
MuiFormControlLabel: {
root: {
display: "grid",
gridTemplateColumns: "50px 6fr"
}
},
MuiFormLabel: { MuiFormLabel: {
filled: { filled: {
color: [[colors.primary], "!important"] as any color: [[colors.primary], "!important"] as any