diff options
author | Kristóf Marussy <kristof@marussy.com> | 2023-08-31 01:47:46 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2023-08-31 12:40:54 +0200 |
commit | cd5162fc1bba739e9c32dcbf048e51a0a8903d11 (patch) | |
tree | 65e18ac744c308706d1690b9d4c81b2e02516ec0 | |
parent | feat(frontend): implement grid view (diff) | |
download | refinery-cd5162fc1bba739e9c32dcbf048e51a0a8903d11.tar.gz refinery-cd5162fc1bba739e9c32dcbf048e51a0a8903d11.tar.zst refinery-cd5162fc1bba739e9c32dcbf048e51a0a8903d11.zip |
refactor(frontend): pane button theme
-rw-r--r-- | subprojects/frontend/src/PaneButtons.tsx | 94 | ||||
-rw-r--r-- | subprojects/frontend/src/TopBar.tsx | 9 |
2 files changed, 76 insertions, 27 deletions
diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx index 9cb02793..9df56baa 100644 --- a/subprojects/frontend/src/PaneButtons.tsx +++ b/subprojects/frontend/src/PaneButtons.tsx | |||
@@ -9,10 +9,76 @@ import SchemaRoundedIcon from '@mui/icons-material/SchemaRounded'; | |||
9 | import TableChartIcon from '@mui/icons-material/TableChart'; | 9 | import TableChartIcon from '@mui/icons-material/TableChart'; |
10 | import ToggleButton from '@mui/material/ToggleButton'; | 10 | import ToggleButton from '@mui/material/ToggleButton'; |
11 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | 11 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; |
12 | import { alpha, styled } from '@mui/material/styles'; | ||
12 | import { observer } from 'mobx-react-lite'; | 13 | import { observer } from 'mobx-react-lite'; |
13 | 14 | ||
14 | import type ThemeStore from './theme/ThemeStore'; | 15 | import type ThemeStore from './theme/ThemeStore'; |
15 | 16 | ||
17 | const PaneButtonGroup = styled(ToggleButtonGroup, { | ||
18 | name: 'PaneButtons-Group', | ||
19 | shouldForwardProp: (prop) => prop !== 'hideLabel', | ||
20 | })<{ hideLabel: boolean }>(({ theme, hideLabel }) => { | ||
21 | const color = | ||
22 | theme.palette.mode === 'dark' | ||
23 | ? theme.palette.primary.main | ||
24 | : theme.palette.text.primary; | ||
25 | return { | ||
26 | gap: theme.spacing(1), | ||
27 | '.MuiToggleButton-root': { | ||
28 | fontSize: '1rem', | ||
29 | lineHeight: '1.5', | ||
30 | border: 'none', | ||
31 | ...(hideLabel ? {} : { paddingBlock: 6 }), | ||
32 | '&::before': { | ||
33 | content: '" "', | ||
34 | position: 'absolute', | ||
35 | bottom: 0, | ||
36 | left: 0, | ||
37 | width: '0%', | ||
38 | height: '2px', | ||
39 | background: color, | ||
40 | transition: theme.transitions.create('width', { | ||
41 | duration: theme.transitions.duration.standard, | ||
42 | }), | ||
43 | }, | ||
44 | '&.MuiToggleButtonGroup-grouped': { | ||
45 | borderTopLeftRadius: theme.shape.borderRadius, | ||
46 | borderTopRightRadius: theme.shape.borderRadius, | ||
47 | borderBottomLeftRadius: 0, | ||
48 | borderBottomRightRadius: 0, | ||
49 | }, | ||
50 | '&:not(.Mui-selected)': { | ||
51 | color: theme.palette.text.secondary, | ||
52 | }, | ||
53 | '&.Mui-selected': { | ||
54 | color, | ||
55 | '&::before': { | ||
56 | width: '100%', | ||
57 | }, | ||
58 | '&:not(:active)': { | ||
59 | background: 'transparent', | ||
60 | }, | ||
61 | '&:hover': { | ||
62 | background: alpha( | ||
63 | theme.palette.text.primary, | ||
64 | theme.palette.action.hoverOpacity, | ||
65 | ), | ||
66 | '@media (hover: none)': { | ||
67 | background: 'transparent', | ||
68 | }, | ||
69 | }, | ||
70 | }, | ||
71 | }, | ||
72 | ...(hideLabel | ||
73 | ? {} | ||
74 | : { | ||
75 | '& svg': { | ||
76 | margin: '0 6px 0 -4px', | ||
77 | }, | ||
78 | }), | ||
79 | }; | ||
80 | }); | ||
81 | |||
16 | function PaneButtons({ | 82 | function PaneButtons({ |
17 | themeStore, | 83 | themeStore, |
18 | hideLabel, | 84 | hideLabel, |
@@ -21,31 +87,9 @@ function PaneButtons({ | |||
21 | hideLabel?: boolean; | 87 | hideLabel?: boolean; |
22 | }): JSX.Element { | 88 | }): JSX.Element { |
23 | return ( | 89 | return ( |
24 | <ToggleButtonGroup | 90 | <PaneButtonGroup |
25 | size={hideLabel ? 'small' : 'medium'} | 91 | size={hideLabel ? 'small' : 'medium'} |
26 | className="rounded" | 92 | hideLabel={hideLabel ?? PaneButtons.defaultProps.hideLabel} |
27 | sx={(theme) => ({ | ||
28 | '.MuiToggleButton-root': { | ||
29 | ...(hideLabel | ||
30 | ? {} | ||
31 | : { | ||
32 | paddingBlock: '6px', | ||
33 | }), | ||
34 | fontSize: '1rem', | ||
35 | lineHeight: '1.5', | ||
36 | fontWeight: theme.typography.fontWeightMedium ?? 500, | ||
37 | '&:not(.Mui-selected)': { | ||
38 | color: theme.palette.text.secondary, | ||
39 | }, | ||
40 | }, | ||
41 | ...(hideLabel | ||
42 | ? {} | ||
43 | : { | ||
44 | '& svg': { | ||
45 | margin: '0 6px 0 -4px', | ||
46 | }, | ||
47 | }), | ||
48 | })} | ||
49 | > | 93 | > |
50 | <ToggleButton | 94 | <ToggleButton |
51 | value="code" | 95 | value="code" |
@@ -89,7 +133,7 @@ function PaneButtons({ | |||
89 | <TableChartIcon fontSize="small" /> | 133 | <TableChartIcon fontSize="small" /> |
90 | {!hideLabel && 'Table'} | 134 | {!hideLabel && 'Table'} |
91 | </ToggleButton> | 135 | </ToggleButton> |
92 | </ToggleButtonGroup> | 136 | </PaneButtonGroup> |
93 | ); | 137 | ); |
94 | } | 138 | } |
95 | 139 | ||
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx index c22ca8b1..cfeab6d7 100644 --- a/subprojects/frontend/src/TopBar.tsx +++ b/subprojects/frontend/src/TopBar.tsx | |||
@@ -109,7 +109,6 @@ export default observer(function TopBar(): JSX.Element { | |||
109 | direction="row" | 109 | direction="row" |
110 | alignItems="center" | 110 | alignItems="center" |
111 | sx={{ | 111 | sx={{ |
112 | py: 0.5, | ||
113 | position: 'absolute', | 112 | position: 'absolute', |
114 | top: 0, | 113 | top: 0, |
115 | bottom: 0, | 114 | bottom: 0, |
@@ -120,7 +119,13 @@ export default observer(function TopBar(): JSX.Element { | |||
120 | <PaneButtons themeStore={themeStore} hideLabel={!large} /> | 119 | <PaneButtons themeStore={themeStore} hideLabel={!large} /> |
121 | </Stack> | 120 | </Stack> |
122 | )} | 121 | )} |
123 | <Stack direction="row" marginLeft={1} marginRight={1} gap={1}> | 122 | <Stack |
123 | direction="row" | ||
124 | marginLeft={1} | ||
125 | marginRight={1} | ||
126 | gap={1} | ||
127 | alignItems="center" | ||
128 | > | ||
124 | <GenerateButton editorStore={editorStore} hideWarnings={!veryLarge} /> | 129 | <GenerateButton editorStore={editorStore} hideWarnings={!veryLarge} /> |
125 | {large && ( | 130 | {large && ( |
126 | <IconButton | 131 | <IconButton |