Skip to content

Commit 3e47bb2

Browse files
benkeenbenkeen
committed
UI updates
1 parent 4eed33d commit 3e47bb2

File tree

14 files changed

+216
-233
lines changed

14 files changed

+216
-233
lines changed

‎apps/client/src/core/dialogs/login/Login.styles.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ export const useClasses = makeStyles({
3636
// div.actionsRow
3737
justifyContent: 'space-between'
3838
},
39-
4039
forgotPasswordLink: {
4140
marginLeft: '10px',
4241
color: '#666666',

‎apps/client/src/core/dialogs/saveDataSet/SaveDataSet.styles.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export const useClasses = makeStyles({
66
alignItems: 'center',
77
overflow: 'hidden !important',
88
padding: '10px 16px',
9-
109
'& ul': {
1110
margin: 0,
1211
padding: 0,
@@ -26,24 +25,20 @@ export const useClasses = makeStyles({
2625
fontSize: '13px',
2726
display: 'flex',
2827
alignItems: 'center',
29-
3028
'& svg': {
3129
color: '#275eb5',
3230
opacity: 0.8,
3331
fontSize: '50px',
3432
marginRight: '18px'
3533
}
3634
},
37-
3835
newDataSet: {
3936
flex: 1,
40-
4137
'& input': {
4238
fontSize: '14px',
4339
width: '100%'
4440
}
4541
},
46-
4742
existingDataSet: {
4843
fontSize: '14px'
4944
}

‎apps/client/src/core/dialogs/schema/Schema.styles.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { makeStyles } from '@griffel/react';
21
import { vars } from '@generatedata/core';
2+
import { makeStyles } from '@griffel/react';
33

44
export const useClasses = makeStyles({
55
dataTemplateDialog: {
@@ -11,8 +11,8 @@ export const useClasses = makeStyles({
1111
// }
1212

1313
actions: {
14-
button: {
15-
svg: {
14+
'& button': {
15+
'& svg': {
1616
fill: vars.primaryColor,
1717
height: '18px',
1818
width: '18px',

‎apps/client/src/core/footer/Footer.styles.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ export const useClasses = makeStyles({
142142
}
143143
}
144144
},
145-
146145
controls: {
147146
// div.controls
148147
marginRight: '15px'
@@ -163,7 +162,6 @@ export const useClasses = makeStyles({
163162
// button.saveBtnArrow
164163
minWidth: 'inherit',
165164
padding: '0 6px',
166-
167165
'& svg': {
168166
margin: 0
169167
}

‎apps/client/src/core/generator/Generator.component.tsx‎

Lines changed: 91 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,110 @@
1-
import React from 'react';
1+
import C from '@generatedata/config/constants';
2+
import { GeneratorLayout } from '@generatedata/types';
23
import { useWindowSize } from 'react-hooks-window-size';
34
import SplitPane from 'react-split-pane';
4-
import Grid from './grid/Grid.container';
5-
import Preview from './previewPanel/PreviewPanel.container';
5+
import TourDialog from '~core/dialogs/tourIntro/TourIntro.container';
66
import { GeneratorPanel } from '~types/general';
7-
import ExportSettings from './exportSettings/ExportSettings.container';
7+
import ClearPageDialog from '../dialogs/clearPage/ClearPage.container';
8+
import HelpDialog from '../dialogs/help/HelpDialog.container';
9+
import SchemaDialog from '../dialogs/schema/Schema.container';
810
import ActivityPanel from '../generationPanel/ActivityPanel.container';
911
import GenerationSettings from '../generationPanel/GenerationSettings.container';
10-
import TourDialog from '~core/dialogs/tourIntro/TourIntro.container';
1112
import DataSetHistory from './dataSetHistory/DataSetHistory.container';
12-
import HelpDialog from '../dialogs/help/HelpDialog.container';
13-
import ClearPageDialog from '../dialogs/clearPage/ClearPage.container';
14-
import SchemaDialog from '../dialogs/schema/Schema.container';
15-
import { GeneratorLayout } from '@generatedata/types';
16-
import C from '@generatedata/config/constants';
17-
import './Generator.scss';
13+
import ExportSettings from './exportSettings/ExportSettings.container';
14+
import './Generator.styles.ts';
15+
import Grid from './grid/Grid.container';
16+
import Preview from './previewPanel/PreviewPanel.container';
1817

1918
export type GeneratorProps = {
20-
i18n: any;
21-
isGridVisible: boolean;
22-
isPreviewVisible: boolean;
23-
generatorLayout: GeneratorLayout;
24-
onResizePanels: (size: number) => void;
25-
lastLayoutWidth: number | null;
26-
lastLayoutHeight: number | null;
27-
smallScreenVisiblePanel: GeneratorPanel;
28-
showDataSetHistory: boolean;
19+
i18n: any;
20+
isGridVisible: boolean;
21+
isPreviewVisible: boolean;
22+
generatorLayout: GeneratorLayout;
23+
onResizePanels: (size: number) => void;
24+
lastLayoutWidth: number | null;
25+
lastLayoutHeight: number | null;
26+
smallScreenVisiblePanel: GeneratorPanel;
27+
showDataSetHistory: boolean;
2928
};
3029

3130
const Builder = ({
32-
isGridVisible,
33-
isPreviewVisible,
34-
generatorLayout,
35-
onResizePanels,
36-
lastLayoutWidth,
37-
lastLayoutHeight,
38-
smallScreenVisiblePanel,
39-
showDataSetHistory,
40-
i18n
31+
isGridVisible,
32+
isPreviewVisible,
33+
generatorLayout,
34+
onResizePanels,
35+
lastLayoutWidth,
36+
lastLayoutHeight,
37+
smallScreenVisiblePanel,
38+
showDataSetHistory,
39+
i18n
4140
}: GeneratorProps) => {
42-
const windowSize = useWindowSize();
43-
const onResize = (size: number): void => onResizePanels(size);
41+
const windowSize = useWindowSize();
42+
const onResize = (size: number): void => onResizePanels(size);
4443

45-
let minSize: number;
46-
let maxSize: number;
47-
let defaultSize: number | string = '50%';
48-
if (generatorLayout === GeneratorLayout.vertical) {
49-
minSize = 350;
50-
maxSize = windowSize.width - 350;
51-
if (lastLayoutWidth) {
52-
defaultSize = lastLayoutWidth < maxSize ? lastLayoutWidth : maxSize;
53-
}
54-
} else {
55-
minSize = 100;
56-
maxSize = windowSize.height - (C.HEADER_HEIGHT + C.FOOTER_HEIGHT) - 100;
57-
if (lastLayoutHeight) {
58-
defaultSize = lastLayoutHeight < maxSize ? lastLayoutHeight : maxSize;
59-
}
60-
}
44+
let minSize: number;
45+
let maxSize: number;
46+
let defaultSize: number | string = '50%';
47+
if (generatorLayout === GeneratorLayout.vertical) {
48+
minSize = 350;
49+
maxSize = windowSize.width - 350;
50+
if (lastLayoutWidth) {
51+
defaultSize = lastLayoutWidth < maxSize ? lastLayoutWidth : maxSize;
52+
}
53+
} else {
54+
minSize = 100;
55+
maxSize = windowSize.height - (C.HEADER_HEIGHT + C.FOOTER_HEIGHT) - 100;
56+
if (lastLayoutHeight) {
57+
defaultSize = lastLayoutHeight < maxSize ? lastLayoutHeight : maxSize;
58+
}
59+
}
6160

62-
const getContent = () => {
63-
if (windowSize.width < C.SMALL_SCREEN_WIDTH) {
64-
return smallScreenVisiblePanel === 'grid' ? <Grid /> : <Preview />;
65-
}
61+
const getContent = () => {
62+
if (windowSize.width < C.SMALL_SCREEN_WIDTH) {
63+
return smallScreenVisiblePanel === 'grid' ? <Grid /> : <Preview />;
64+
}
6665

67-
// data set history only available on desktop
68-
if (showDataSetHistory) {
69-
return <Preview />;
70-
}
66+
// data set history only available on desktop
67+
if (showDataSetHistory) {
68+
return <Preview />;
69+
}
7170

72-
if (isGridVisible && isPreviewVisible) {
73-
return (
74-
/* @ts-ignore-line */
75-
<SplitPane
76-
className="gdGridPanel"
77-
split={generatorLayout}
78-
minSize={minSize}
79-
maxSize={maxSize}
80-
defaultSize={defaultSize}
81-
size={defaultSize}
82-
onChange={onResize}
83-
>
84-
<Grid />
85-
<Preview />
86-
</SplitPane>
87-
);
88-
}
89-
if (isGridVisible) {
90-
return <Grid />;
91-
}
92-
return <Preview />;
93-
};
71+
if (isGridVisible && isPreviewVisible) {
72+
return (
73+
/* @ts-ignore-line */
74+
<SplitPane
75+
className="gdGridPanel"
76+
split={generatorLayout}
77+
minSize={minSize}
78+
maxSize={maxSize}
79+
defaultSize={defaultSize}
80+
size={defaultSize}
81+
onChange={onResize}
82+
>
83+
<Grid />
84+
<Preview />
85+
</SplitPane>
86+
);
87+
}
88+
if (isGridVisible) {
89+
return <Grid />;
90+
}
91+
return <Preview />;
92+
};
9493

95-
return (
96-
<>
97-
<div style={{ height: '100%' }}>
98-
<div style={{ height: '100%', position: 'relative' }}>{getContent()}</div>
99-
<ExportSettings />
100-
<DataSetHistory />
101-
<GenerationSettings />
102-
<ActivityPanel />
103-
<TourDialog />
104-
<ClearPageDialog />
105-
<HelpDialog />
106-
<SchemaDialog />
107-
</div>
108-
</>
109-
);
94+
return (
95+
<>
96+
<div style={{ height: '100%' }}>
97+
<div style={{ height: '100%', position: 'relative' }}>{getContent()}</div>
98+
<ExportSettings />
99+
<DataSetHistory />
100+
<GenerationSettings />
101+
<ActivityPanel />
102+
<TourDialog />
103+
<ClearPageDialog />
104+
<HelpDialog />
105+
<SchemaDialog />
106+
</div>
107+
</>
108+
);
110109
};
111110
export default Builder;

‎apps/client/src/core/generator/Generator.scss‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎apps/client/src/core/generator/Generator.scss.d.ts‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎apps/client/src/core/generator/Generator.styles.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { makeStyles } from '@griffel/react';
2+
3+
export const useClasses = makeStyles({
4+
controlRow: {
5+
display: 'flex',
6+
flexDirection: 'row',
7+
padding: '6px 10px',
8+
justifyContent: 'flex-end'
9+
}
10+
});
11+
12+
// :global(.Pane2) {
13+
// max-width: 100%;
14+
// overflow: hidden;
15+
// }
16+
17+
// :global(.Resizer) {
18+
// background-image: url('./images/bg.png');
19+
// z-index: 1;
20+
// box-sizing: border-box;
21+
// background-clip: padding-box;
22+
23+
// &:global(.horizontal) {
24+
// flex: 0 0 auto;
25+
// height: 5px;
26+
// margin: 0;
27+
// cursor: row-resize;
28+
// width: 100%;
29+
30+
// &:hover {
31+
// background-image: none;
32+
// background-color: #dddddd;
33+
// }
34+
// }
35+
36+
// &:global(.vertical) {
37+
// width: 5px;
38+
// margin: 0;
39+
// cursor: col-resize;
40+
41+
// &:hover {
42+
// background-image: none;
43+
// background-color: #dddddd;
44+
// }
45+
// }
46+
47+
// &:hover(.disabled) {
48+
// cursor: not-allowed;
49+
// }
50+
// }

0 commit comments

Comments
 (0)