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

Merge pull request #143 from mirumee/fix/table-cell-padding

Browse source 
Fix table cell padding
This commit is contained in:
Marcin Gębala 2019-09-02 12:58:55 +02:00 committed by GitHub
commit c834dabc1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 114 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -13,3 +13,4 @@ All notable, unreleased changes to this project will be documented in this file.
- Add dynamic dashboard settings - #135 by @benekex2
- Fix plugins page translations - #141 by @benekex2
- Add attributes to column picker - #136 by @dominik-zeglen
- Fix table cell padding - #143 by @dominik-zeglen

4
src/attributes/components/AttributeList/AttributeList.tsx
View file

@ -46,7 +46,9 @@ const useStyles = makeStyles((theme: Theme) => ({
colSearchable: {
textAlign: "center"
},
colSlug: {},
colSlug: {
paddingLeft: 0
},
colVisible: {
textAlign: "center"
},

4
src/collections/components/CollectionList/CollectionList.tsx
View file

@ -28,7 +28,9 @@ const styles = (theme: Theme) =>
colAvailability: {
width: 240
},
colName: {},
colName: {
paddingLeft: 0
},
colProducts: {
width: 240
}

3
src/collections/components/CollectionProducts/CollectionProducts.tsx
View file

@ -35,9 +35,10 @@ const styles = (theme: Theme) =>
"&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing.unit / 2
width: 76 + theme.spacing.unit / 2
},
colName: {
paddingLeft: 0,
width: "auto"
},
colNameLabel: {

1
src/components/AssignProductDialog/AssignProductDialog.tsx
View file

@ -45,6 +45,7 @@ const styles = createStyles({
overflowY: "scroll"
},
wideCell: {
paddingLeft: 0,
width: "100%"
}
});

3
src/components/ProductList/ProductList.tsx
View file

@ -59,7 +59,8 @@ const styles = (theme: Theme) =>
colName: {
"&$colNameFixed": {
width: 250
}
},
paddingLeft: 0
},
colNameFixed: {},
colNameHeader: {

5
src/components/Timeline/Timeline.tsx
View file

@ -21,7 +21,7 @@ const styles = (theme: Theme) =>
width: "100%"
},
alignSelf: "flex-start",
marginRight: theme.spacing.unit * 5.5
marginRight: 28
},
cardActionsExpanded: {
maxHeight: theme.spacing.unit * 6
@ -41,7 +41,8 @@ const styles = (theme: Theme) =>
},
alignItems: "center",
background: theme.palette.background.default,
display: "flex"
display: "flex",
paddingLeft: theme.spacing.unit * 3
},
root: {
borderColor: theme.overrides.MuiCard.root.borderColor,

4
src/customers/components/CustomerList/CustomerList.tsx
View file

@ -31,7 +31,9 @@ const styles = (theme: Theme) =>
}
},
colEmail: {},
colName: {},
colName: {
paddingLeft: 0
},
colOrders: {
textAlign: "center"
},

3
src/discounts/components/DiscountProducts/DiscountProducts.tsx
View file

@ -42,9 +42,10 @@ const styles = (theme: Theme) =>
"&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing.unit / 2
width: 76 + theme.spacing.unit / 2
},
colName: {
paddingLeft: 0,
width: "auto"
},
colNameLabel: {

4
src/discounts/components/SaleList/SaleList.tsx
View file

@ -47,7 +47,9 @@ const styles = (theme: Theme) =>
colEnd: {
textAlign: "right"
},
colName: {},
colName: {
paddingLeft: 0
},
colStart: {
textAlign: "right"
},

4
src/discounts/components/VoucherList/VoucherList.tsx
View file

@ -56,7 +56,9 @@ const styles = (theme: Theme) =>
colMinSpent: {
textAlign: "right"
},
colName: {},
colName: {
paddingLeft: 0
},
colStart: {
textAlign: "right"
},

6
src/home/components/HomeProductListCard/HomeProductListCard.tsx
View file

@ -29,8 +29,12 @@ const styles = (theme: Theme) =>
},
avatarSpacing: {
paddingBottom: theme.spacing.unit * 2,
paddingRight: theme.spacing.unit,
paddingTop: theme.spacing.unit * 2
},
label: {
paddingLeft: 0
},
noProducts: {
paddingBottom: 20,
paddingTop: 20
@ -81,7 +85,7 @@ export const HomeProductList = withStyles(styles, { name: "HomeProductList" })(
avatarProps={classes.avatarProps}
/>
<TableCell>
<TableCell className={classes.label}>
{variant ? (
<>
<Typography color={"primary"}>

16
src/icons/ArrowSort.tsx Normal file
View file

@ -0,0 +1,16 @@
import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";
import React from "react";
export const ArrowSort = createSvgIcon(
<>
<rect width="24" height="24" fill="transparent" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M11.0328 17.1401V4H12.9672V17.1401L14.6322 15.4751L16 16.8429L12 20.8429L8 16.8429L9.36782 15.4751L11.0328 17.1401Z"
fill="currentColor"
/>
</>
);
ArrowSort.displayName = "ArrowSort";
export default ArrowSort;

5
src/navigation/components/MenuList/MenuList.tsx
View file

@ -39,7 +39,9 @@ const styles = (theme: Theme) =>
colItems: {
textAlign: "right"
},
colTitle: {},
colTitle: {
paddingLeft: 0
},
row: {
cursor: "pointer"
}
@ -88,6 +90,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
id="menuListItems"
/>
</TableCell>
<TableCell />
</TableHead>
<TableFooter>
<TableRow>

2
src/orders/components/OrderDraftDetailsProducts/OrderDraftDetailsProducts.tsx
View file

@ -36,7 +36,7 @@ const styles = (theme: Theme) =>
"&:last-child": {
paddingRight: 0
},
width: 48 + theme.spacing.unit / 2
width: 76 + theme.spacing.unit / 2
},
colName: {
width: "auto"

4
src/orders/components/OrderDraftList/OrderDraftList.tsx
View file

@ -43,7 +43,9 @@ const styles = (theme: Theme) =>
},
colCustomer: {},
colDate: {},
colNumber: {},
colNumber: {
paddingLeft: 0
},
colTotal: {
textAlign: "right"
},

12
src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
View file

@ -39,6 +39,12 @@ const styles = (theme: Theme) =>
avatar: {
paddingLeft: 0
},
colName: {
paddingLeft: 0
},
colVariantCheckbox: {
padding: 0
},
content: {
overflowY: "scroll"
},
@ -259,7 +265,7 @@ const OrderProductAddDialog = withStyles(styles, {
className={classes.avatar}
thumbnail={maybe(() => product.thumbnail.url)}
/>
<TableCell className={classes.wideCell} colSpan={2}>
<TableCell className={classes.colName} colSpan={2}>
{maybe(() => product.name)}
</TableCell>
</TableRow>
@ -267,7 +273,7 @@ const OrderProductAddDialog = withStyles(styles, {
(variant, variantIndex) => (
<TableRow key={variant.id}>
<TableCell />
<TableCell>
<TableCell className={classes.colVariantCheckbox}>
<Checkbox
className={classes.variantCheckbox}
checked={
@ -288,7 +294,7 @@ const OrderProductAddDialog = withStyles(styles, {
}
/>
</TableCell>
<TableCell>
<TableCell className={classes.colName}>
<div>{variant.name}</div>
<div className={classes.grayText}>
<FormattedMessage

1
src/orders/components/OrderUnfulfilledItems/OrderUnfulfilledItems.tsx
View file

@ -25,6 +25,7 @@ const styles = createStyles({
cursor: "pointer"
},
colName: {
paddingLeft: 0,
width: "auto"
},
colNameLabel: {

4
src/pages/components/PageList/PageList.tsx
View file

@ -38,7 +38,9 @@ const styles = (theme: Theme) =>
}
},
colSlug: {},
colTitle: {},
colTitle: {
paddingLeft: 0
},
colVisibility: {},
link: {
cursor: "pointer"

4
src/productTypes/components/ProductTypeList/ProductTypeList.tsx
View file

@ -33,7 +33,9 @@ const styles = (theme: Theme) =>
width: 300
}
},
colName: {},
colName: {
paddingLeft: 0
},
colTax: {},
colType: {},
link: {

11
src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx
View file

@ -23,6 +23,10 @@ import { ProductVariantDetails_productVariant } from "../../types/ProductVariant
const styles = (theme: Theme) =>
createStyles({
colName: {
paddingLeft: 0,
textAlign: [["left"], "!important"] as any
},
link: {
cursor: "pointer"
},
@ -37,9 +41,6 @@ const styles = (theme: Theme) =>
width: 2
},
position: "relative"
},
textLeft: {
textAlign: [["left"], "!important"] as any
}
});
@ -92,7 +93,7 @@ const ProductVariantNavigation = withStyles(styles, {
fallbackThumbnail
)}
/>
<TableCell className={classes.textLeft}>
<TableCell className={classes.colName}>
{variant ? variant.name || variant.sku : <Skeleton />}
</TableCell>
</TableRow>
@ -114,7 +115,7 @@ const ProductVariantNavigation = withStyles(styles, {
className={classes.tabActive}
thumbnail={null}
/>
<TableCell className={classes.textLeft}>
<TableCell className={classes.colName}>
<FormattedMessage
defaultMessage="New Variant"
description="variant name"

4
src/shipping/components/ShippingZonesList/ShippingZonesList.tsx
View file

@ -45,7 +45,9 @@ const styles = (theme: Theme) =>
width: ICONBUTTON_SIZE + theme.spacing.unit / 2
},
colCountries: {},
colName: {},
colName: {
paddingLeft: 0
},
row: {
cursor: "pointer"
}

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

@ -46674,7 +46674,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-label-id"
>
<p
class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
@ -47401,7 +47401,7 @@ exports[`Storyshots Views / HomePage loading 1`] = `
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id"
class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-label-id"
>
<span
class="Skeleton-skeleton-id"
@ -49050,6 +49050,10 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
>
Items
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id"
scope="col"
/>
</tr>
</thead>
<tfoot
@ -49388,6 +49392,10 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
>
Items
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id"
scope="col"
/>
</tr>
</thead>
<tfoot
@ -49661,6 +49669,10 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
>
Items
</th>
<th
class="MuiTableCell-root-id MuiTableCell-head-id"
scope="col"
/>
</tr>
</thead>
<tfoot
@ -82515,7 +82527,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
</td>
@ -82942,7 +82954,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Cordoba Oro
</td>
@ -82970,7 +82982,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
silver
</td>
@ -83024,7 +83036,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
</td>
@ -83462,7 +83474,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
<span
class="Skeleton-skeleton-id"
@ -83520,7 +83532,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
</td>
@ -83890,7 +83902,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Cordoba Oro
</td>
@ -83918,7 +83930,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
silver
</td>
@ -83972,7 +83984,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
New Variant
</td>
@ -95477,7 +95489,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Extended Hard
</td>
@ -95505,7 +95517,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Extended Soft
</td>
@ -95533,7 +95545,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Normal Hard
</td>
@ -95561,7 +95573,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Normal Soft
</td>
@ -96160,7 +96172,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Extended Hard
</td>
@ -96188,7 +96200,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Extended Soft
</td>
@ -96216,7 +96228,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Normal Hard
</td>
@ -96244,7 +96256,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
Normal Soft
</td>
@ -96849,7 +96861,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
</div>
</td>
<td
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-textLeft-id"
class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
>
<span
class="Skeleton-skeleton-id"

5
src/theme.ts
View file

@ -270,8 +270,7 @@ export default (colors: IThemeColors): Theme =>
paddingTop: 8
},
head: {
fontSize: ".875rem",
fontWeight: 400
fontSize: ".875rem"
},
paddingCheckbox: {
"&:first-child": {
@ -292,7 +291,7 @@ export default (colors: IThemeColors): Theme =>
},
borderBottomColor: colors.paperBorder,
height: 56,
padding: "4px 24px 4px 0"
padding: "4px 24px"
}
},
MuiTableRow: {