From aef468357cd768cbbdb534b65565c7af6a83c1a4 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 11:57:04 +0200 Subject: [PATCH 01/17] Fix modal overflow bar --- src/theme.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/theme.ts b/src/theme.ts index 937f04fc6..96bfbc556 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -100,6 +100,9 @@ export default (colors: IThemeColors): Theme => }, MuiDialogContent: { root: { + "& label": { + width: "calc(100% - 14px)" + }, padding: "5px 24px 24px" } }, From a1040a44c4ef98dbd16703d2ba07b7f055698fe7 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 12:07:20 +0200 Subject: [PATCH 02/17] Fix homePage card subtitle color --- src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx index ea3d3be15..a44b61b3e 100644 --- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx +++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx @@ -28,7 +28,6 @@ const styles = (theme: Theme) => marginBottom: theme.spacing.unit * 3 }, cardSubtitle: { - color: theme.palette.primary.main, fontSize: 12, height: "20px", lineHeight: 0.9 From 4af5f080d9f030729b7a611afd248e6883bcc40d Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 12:14:03 +0200 Subject: [PATCH 03/17] Fix cancel button colors --- src/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.ts b/src/theme.ts index 96bfbc556..220c222e4 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -60,7 +60,7 @@ export default (colors: IThemeColors): Theme => }, flat: { "& span": { - color: colors.font.gray + color: colors.font.default } }, flatPrimary: { From 6647162b752024bd011888c92bf1deb48b15b6f3 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 12:47:29 +0200 Subject: [PATCH 04/17] Fix controlled switch margin --- src/components/ControlledSwitch.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ControlledSwitch.tsx b/src/components/ControlledSwitch.tsx index 07a244006..b9d9e6a36 100644 --- a/src/components/ControlledSwitch.tsx +++ b/src/components/ControlledSwitch.tsx @@ -6,7 +6,7 @@ import React from "react"; const styles = (theme: Theme) => createStyles({ label: { - marginLeft: theme.spacing.unit * 2 + marginLeft: theme.spacing.unit * 3.5 }, labelText: { fontSize: 14 From 98020ba67f6cecef1c7a41c5039a3dacb08a9331 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 13:17:07 +0200 Subject: [PATCH 05/17] Fix copy --- .../components/AttributeProperties/AttributeProperties.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/attributes/components/AttributeProperties/AttributeProperties.tsx b/src/attributes/components/AttributeProperties/AttributeProperties.tsx index 45cdd9906..0e5d2d958 100644 --- a/src/attributes/components/AttributeProperties/AttributeProperties.tsx +++ b/src/attributes/components/AttributeProperties/AttributeProperties.tsx @@ -74,7 +74,7 @@ const AttributeProperties: React.FC = ({ Date: Tue, 22 Oct 2019 13:32:45 +0200 Subject: [PATCH 06/17] Fix layout action bar fixed instead of sticky --- src/components/AppLayout/AppLayout.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 6185b8d3b..8b91f7b0b 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -42,9 +42,15 @@ import ThemeSwitch from "./ThemeSwitch"; const styles = (theme: Theme) => createStyles({ appAction: { + [theme.breakpoints.down("sm")]: { + left: 0, + width: "100%" + }, bottom: 0, gridColumn: 2, - position: "sticky", + left: 210, + position: "fixed", + width: "calc(100% - 210px)", zIndex: 10 }, appLoader: { @@ -252,10 +258,7 @@ const styles = (theme: Theme) => flex: 1, flexGrow: 1, marginLeft: 0, - paddingBottom: theme.spacing.unit, - [theme.breakpoints.up("sm")]: { - paddingBottom: theme.spacing.unit * 3 - } + paddingBottom: theme.spacing.unit * 10 } }); From e279174234248c948e20ff8be10354c47b8e7d6e Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 13:35:19 +0200 Subject: [PATCH 07/17] Fix checkbox margin --- src/components/Checkbox/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index c698f1a89..c0ebe2025 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -83,7 +83,7 @@ const styles = (theme: Theme) => display: "flex", height: 30, justifyContent: "center", - margin: 9, + margin: "5px 9px", width: 30 } }); From 3bf4e820100cff45868e12d4de691092f02d3b1b Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 13:49:35 +0200 Subject: [PATCH 08/17] Fix timeline note design --- src/components/Timeline/TimelineNote.tsx | 29 ++++++++++++------------ 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx index 185064156..56568a199 100644 --- a/src/components/Timeline/TimelineNote.tsx +++ b/src/components/Timeline/TimelineNote.tsx @@ -14,7 +14,6 @@ import CRC from "crc-32"; import React from "react"; import { DateTime } from "../Date"; -import Hr from "../Hr"; const palette = [ colors.amber, @@ -49,20 +48,22 @@ const styles = (theme: Theme) => }, cardContent: { "&:last-child": { - paddingBottom: 16 - } - }, - content: { - marginTop: theme.spacing.unit * 2 + padding: 16 + }, + boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)" }, root: { position: "relative" }, title: { + "& p": { + fontSize: "14px" + }, alignItems: "center", display: "flex", justifyContent: "space-between", - marginBottom: theme.spacing.unit + marginBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 3 } }); @@ -83,17 +84,15 @@ export const TimelineNote = withStyles(styles, { name: "TimelineNote" })( > +
+ {user.email} + + + +
-
- {user.email} - - - -
-
") }} From d4742933d26e307709e1dc608157cf5a8c6f45cd Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Tue, 22 Oct 2019 14:28:39 +0200 Subject: [PATCH 09/17] Fix add note reset field after submit --- src/components/Timeline/Timeline.tsx | 10 ++++++++-- src/orders/components/OrderHistory/OrderHistory.tsx | 3 ++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx index 1c449c8e8..5489fa695 100644 --- a/src/components/Timeline/Timeline.tsx +++ b/src/components/Timeline/Timeline.tsx @@ -71,6 +71,7 @@ interface TimelineProps extends WithStyles { interface TimelineAddNoteProps extends WithStyles { message: string; + reset: () => void; onChange(event: React.ChangeEvent); onSubmit(event: React.FormEvent); } @@ -82,9 +83,14 @@ export const Timeline = withStyles(styles, { name: "Timeline" })( ); export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })( - ({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => { + ({ classes, message, onChange, onSubmit, reset }: TimelineAddNoteProps) => { const intl = useIntl(); + const submit = e => { + reset(); + onSubmit(e); + }; + return (
@@ -106,7 +112,7 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })( multiline InputProps={{ endAdornment: ( -
+
+

+ admin@example.com +

+

+ +

+
-
-

- admin@example.com -

-

- -

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -6787,37 +6784,34 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = ` />
+
+

+ ceo@example.com +

+

+ +

+
-
-

- ceo@example.com -

-

- -

-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -8378,7 +8372,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = ` - Use in faceted navigation + Use in Faceted Navigation
- Use in faceted navigation + Use in Faceted Navigation
- Use in faceted navigation + Use in Faceted Navigation
- Use in faceted navigation + Use in Faceted Navigation
- Use in faceted navigation + Use in Faceted Navigation
- Use in faceted navigation + Use in Faceted Navigation
Date: Tue, 22 Oct 2019 15:56:16 +0200 Subject: [PATCH 13/17] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 323fc2dba..b0ba4e2cb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -42,3 +42,4 @@ All notable, unreleased changes to this project will be documented in this file. - Fix empty attribute values - #218 by @dominik-zeglen - Add language switch - #213 by @dominik-zeglen - Fix copy - #223, #224 by @dominik-zeglen +- Fix ui improvements - #226 by @benekex2 \ No newline at end of file From d8138807a2c9fd807b70138b4c625103a3283f89 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 23 Oct 2019 14:21:34 +0200 Subject: [PATCH 14/17] Fix column picker --- src/components/ColumnPicker/ColumnPickerContent.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx index bef6aa779..bffe1bc82 100644 --- a/src/components/ColumnPicker/ColumnPickerContent.tsx +++ b/src/components/ColumnPicker/ColumnPickerContent.tsx @@ -87,10 +87,11 @@ const ColumnPickerContent: React.FC = props => { const anchor = React.useRef(); const scrollPosition = useElementScroll(anchor); - const dropShadow = anchor.current - ? scrollPosition.y + anchor.current.clientHeight < - anchor.current.scrollHeight - : false; + const dropShadow = + anchor.current && scrollPosition + ? scrollPosition.y + anchor.current.clientHeight < + anchor.current.scrollHeight + : false; return ( From f52b59c843ffc9652a45a3eb23145c0c53a90cb9 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 23 Oct 2019 14:22:12 +0200 Subject: [PATCH 15/17] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 19c170bb5..6248ae6a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -43,3 +43,4 @@ All notable, unreleased changes to this project will be documented in this file. - Add language switch - #213 by @dominik-zeglen - Fix copy - #223, #224 by @dominik-zeglen - Fix attribute errors - #216 by @dominik-zeglen +- Fix column picker - #228 by @dominik-zeglen From 7376c5e84d703357284bfd6169df412b0c8e7454 Mon Sep 17 00:00:00 2001 From: Krzysztof Bialoglowicz Date: Wed, 23 Oct 2019 16:42:51 +0200 Subject: [PATCH 16/17] Fix modal overlowX --- src/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.ts b/src/theme.ts index 220c222e4..a6e8a37b1 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -101,7 +101,7 @@ export default (colors: IThemeColors): Theme => MuiDialogContent: { root: { "& label": { - width: "calc(100% - 14px)" + overflowX: "hidden" }, padding: "5px 24px 24px" } From ae7bad925caf455301d340a030db51ee4c2d04b9 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 23 Oct 2019 17:10:46 +0200 Subject: [PATCH 17/17] Fix layout --- src/components/AppLayout/AppLayout.tsx | 233 +++++++++++++------------ 1 file changed, 125 insertions(+), 108 deletions(-) diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 8b91f7b0b..b8c7f7193 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -48,15 +48,19 @@ const styles = (theme: Theme) => }, bottom: 0, gridColumn: 2, - left: 210, - position: "fixed", - width: "calc(100% - 210px)", + height: 70, + position: "sticky", zIndex: 10 }, appLoader: { height: appLoaderHeight, + marginBottom: theme.spacing.unit * 2, zIndex: 1201 }, + appLoaderPlaceholder: { + height: appLoaderHeight, + marginBottom: theme.spacing.unit * 2 + }, arrow: { marginLeft: theme.spacing.unit * 2, transition: theme.transitions.duration.standard + "ms" @@ -81,11 +85,7 @@ const styles = (theme: Theme) => header: { display: "flex", height: 40, - marginBottom: theme.spacing.unit * 3, - marginTop: theme.spacing.unit * 2 - }, - hide: { - opacity: 0 + marginBottom: theme.spacing.unit * 3 }, isMenuSmall: { "& path": { @@ -258,7 +258,15 @@ const styles = (theme: Theme) => flex: 1, flexGrow: 1, marginLeft: 0, - paddingBottom: theme.spacing.unit * 10 + paddingBottom: theme.spacing.unit, + [theme.breakpoints.up("sm")]: { + paddingBottom: theme.spacing.unit * 3 + } + }, + viewContainer: { + minHeight: `calc(100vh - ${theme.spacing.unit * 2 + + appLoaderHeight + + 70}px)` } }); @@ -319,12 +327,6 @@ const AppLayout = withStyles(styles, { {({ isProgress }) => ( -
-
- -
-
setDrawerState(!isDrawerOpened)} - > - - - - -
-
-
-
- + {isProgress ? ( + + ) : ( +
+ )} +
+
+ +
setDrawerState(!isDrawerOpened)} > - - ) - } - className={classes.userChip} - label={ - <> - {user.email} - - - } - onClick={() => setMenuState(!isMenuOpened)} + + + + +
+
+
+
+ - - {({ TransitionProps, placement }) => ( - - - setMenuState(false)} - mouseEvent="onClick" - > - - - - - - - - - - - - )} - + + ) + } + className={classes.userChip} + label={ + <> + {user.email} + + + } + onClick={() => setMenuState(!isMenuOpened)} + /> + + {({ TransitionProps, placement }) => ( + + + + setMenuState(false) + } + mouseEvent="onClick" + > + + + + + + + + + + + + )} + +
-
- + +
+
{children}
-
{children}