diff options
Diffstat (limited to 'subprojects/frontend/src/PaneButtons.tsx')
-rw-r--r-- | subprojects/frontend/src/PaneButtons.tsx | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/subprojects/frontend/src/PaneButtons.tsx b/subprojects/frontend/src/PaneButtons.tsx new file mode 100644 index 00000000..7b83171d --- /dev/null +++ b/subprojects/frontend/src/PaneButtons.tsx | |||
@@ -0,0 +1,96 @@ | |||
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 { observer } from 'mobx-react-lite'; | ||
13 | |||
14 | import type ThemeStore from './theme/ThemeStore'; | ||
15 | |||
16 | function PaneButtons({ | ||
17 | themeStore, | ||
18 | hideLabel, | ||
19 | }: { | ||
20 | themeStore: ThemeStore; | ||
21 | hideLabel?: boolean; | ||
22 | }): JSX.Element { | ||
23 | return ( | ||
24 | <ToggleButtonGroup | ||
25 | size={hideLabel ? 'small' : 'medium'} | ||
26 | className="rounded" | ||
27 | sx={{ | ||
28 | '.MuiToggleButton-root': { | ||
29 | ...(hideLabel | ||
30 | ? {} | ||
31 | : { | ||
32 | paddingBlock: '6px', | ||
33 | }), | ||
34 | fontSize: '1rem', | ||
35 | lineHeight: '1.5', | ||
36 | }, | ||
37 | ...(hideLabel | ||
38 | ? {} | ||
39 | : { | ||
40 | '& svg': { | ||
41 | margin: '0 6px 0 -4px', | ||
42 | }, | ||
43 | }), | ||
44 | }} | ||
45 | > | ||
46 | <ToggleButton | ||
47 | value="code" | ||
48 | selected={themeStore.showCode} | ||
49 | onClick={(event) => { | ||
50 | if (event.shiftKey || event.ctrlKey) { | ||
51 | themeStore.setSelectedPane('code'); | ||
52 | } else { | ||
53 | themeStore.toggleCode(); | ||
54 | } | ||
55 | }} | ||
56 | > | ||
57 | <CodeIcon fontSize="small" /> | ||
58 | {!hideLabel && 'Code'} | ||
59 | </ToggleButton> | ||
60 | <ToggleButton | ||
61 | value="graph" | ||
62 | selected={themeStore.showGraph} | ||
63 | onClick={(event) => { | ||
64 | if (event.shiftKey || event.ctrlKey) { | ||
65 | themeStore.setSelectedPane('graph'); | ||
66 | } else { | ||
67 | themeStore.toggleGraph(); | ||
68 | } | ||
69 | }} | ||
70 | > | ||
71 | <SchemaRoundedIcon fontSize="small" /> | ||
72 | {!hideLabel && 'Graph'} | ||
73 | </ToggleButton> | ||
74 | <ToggleButton | ||
75 | value="table" | ||
76 | selected={themeStore.showTable} | ||
77 | onClick={(event) => { | ||
78 | if (event.shiftKey || event.ctrlKey) { | ||
79 | themeStore.setSelectedPane('table'); | ||
80 | } else { | ||
81 | themeStore.toggleTable(); | ||
82 | } | ||
83 | }} | ||
84 | > | ||
85 | <TableChartIcon fontSize="small" /> | ||
86 | {!hideLabel && 'Table'} | ||
87 | </ToggleButton> | ||
88 | </ToggleButtonGroup> | ||
89 | ); | ||
90 | } | ||
91 | |||
92 | PaneButtons.defaultProps = { | ||
93 | hideLabel: false, | ||
94 | }; | ||
95 | |||
96 | export default observer(PaneButtons); | ||