1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
/*
* SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
*
* SPDX-License-Identifier: EPL-2.0
*/
import CodeIcon from '@mui/icons-material/Code';
import SchemaRoundedIcon from '@mui/icons-material/SchemaRounded';
import TableChartIcon from '@mui/icons-material/TableChart';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { observer } from 'mobx-react-lite';
import type ThemeStore from './theme/ThemeStore';
function PaneButtons({
themeStore,
hideLabel,
}: {
themeStore: ThemeStore;
hideLabel?: boolean;
}): JSX.Element {
return (
<ToggleButtonGroup
size={hideLabel ? 'small' : 'medium'}
className="rounded"
sx={(theme) => ({
'.MuiToggleButton-root': {
...(hideLabel
? {}
: {
paddingBlock: '6px',
}),
fontSize: '1rem',
lineHeight: '1.5',
fontWeight: theme.typography.fontWeightMedium ?? 500,
'&:not(.Mui-selected)': {
color: theme.palette.text.secondary,
},
},
...(hideLabel
? {}
: {
'& svg': {
margin: '0 6px 0 -4px',
},
}),
})}
>
<ToggleButton
value="code"
selected={themeStore.showCode}
onClick={(event) => {
if (event.shiftKey || event.ctrlKey) {
themeStore.setSelectedPane('code');
} else {
themeStore.toggleCode();
}
}}
>
<CodeIcon fontSize="small" />
{!hideLabel && 'Code'}
</ToggleButton>
<ToggleButton
value="graph"
selected={themeStore.showGraph}
onClick={(event) => {
if (event.shiftKey || event.ctrlKey) {
themeStore.setSelectedPane('graph');
} else {
themeStore.toggleGraph();
}
}}
>
<SchemaRoundedIcon fontSize="small" />
{!hideLabel && 'Graph'}
</ToggleButton>
<ToggleButton
value="table"
selected={themeStore.showTable}
onClick={(event) => {
if (event.shiftKey || event.ctrlKey) {
themeStore.setSelectedPane('table');
} else {
themeStore.toggleTable();
}
}}
>
<TableChartIcon fontSize="small" />
{!hideLabel && 'Table'}
</ToggleButton>
</ToggleButtonGroup>
);
}
PaneButtons.defaultProps = {
hideLabel: false,
};
export default observer(PaneButtons);
|
