diff options
Diffstat (limited to 'subprojects/frontend/src/PaneButtons.tsx')
-rw-r--r-- | subprojects/frontend/src/PaneButtons.tsx | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx new file mode 100644 index 00000000..7e884ab0 --- /dev/null +++ b/subprojects/frontend/src/PaneButtons.tsx | |||
@@ -0,0 +1,144 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/> | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
7 | import CodeIcon from '@mui/icons-material/Code'; | ||
8 | import SchemaRoundedIcon from '@mui/icons-material/SchemaRounded'; | ||
9 | import TableChartIcon from '@mui/icons-material/TableChart'; | ||
10 | import ToggleButton from '@mui/material/ToggleButton'; | ||
11 | import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; | ||
12 | import { alpha, styled } from '@mui/material/styles'; | ||
13 | import { observer } from 'mobx-react-lite'; | ||
14 | |||
15 | import type ThemeStore from './theme/ThemeStore'; | ||
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 | |||
82 | function PaneButtons({ | ||
83 | themeStore, | ||
84 | hideLabel, | ||
85 | }: { | ||
86 | themeStore: ThemeStore; | ||
87 | hideLabel?: boolean; | ||
88 | }): JSX.Element { | ||
89 | return ( | ||
90 | <PaneButtonGroup | ||
91 | size={hideLabel ? 'small' : 'medium'} | ||
92 | hideLabel={hideLabel ?? PaneButtons.defaultProps.hideLabel} | ||
93 | > | ||
94 | <ToggleButton | ||
95 | value="code" | ||
96 | selected={themeStore.showCode} | ||
97 | onClick={(event) => { | ||
98 | if (event.shiftKey || event.ctrlKey) { | ||
99 | themeStore.setSelectedPane('code'); | ||
100 | } else { | ||
101 | themeStore.toggleCode(); | ||
102 | } | ||
103 | }} | ||
104 | > | ||
105 | <CodeIcon fontSize="small" /> | ||
106 | {!hideLabel && 'Code'} | ||
107 | </ToggleButton> | ||
108 | <ToggleButton | ||
109 | value="graph" | ||
110 | selected={themeStore.showGraph} | ||
111 | onClick={(event) => { | ||
112 | if (event.shiftKey || event.ctrlKey) { | ||
113 | themeStore.setSelectedPane('graph', event.shiftKey); | ||
114 | } else { | ||
115 | themeStore.toggleGraph(); | ||
116 | } | ||
117 | }} | ||
118 | > | ||
119 | <SchemaRoundedIcon fontSize="small" /> | ||
120 | {!hideLabel && 'Graph'} | ||
121 | </ToggleButton> | ||
122 | <ToggleButton | ||
123 | value="table" | ||
124 | selected={themeStore.showTable} | ||
125 | onClick={(event) => { | ||
126 | if (event.shiftKey || event.ctrlKey) { | ||
127 | themeStore.setSelectedPane('table', event.shiftKey); | ||
128 | } else { | ||
129 | themeStore.toggleTable(); | ||
130 | } | ||
131 | }} | ||
132 | > | ||
133 | <TableChartIcon fontSize="small" /> | ||
134 | {!hideLabel && 'Table'} | ||
135 | </ToggleButton> | ||
136 | </PaneButtonGroup> | ||
137 | ); | ||
138 | } | ||
139 | |||
140 | PaneButtons.defaultProps = { | ||
141 | hideLabel: false, | ||
142 | }; | ||
143 | |||
144 | export default observer(PaneButtons); | ||