mirror of
https://github.com/RoboSats/robosats.git
synced 2024-09-11 14:05:51 +03:00
Add size slider and settings widget
This commit is contained in:
parent
20b2b3dcd6
commit
b9dc7f7c95
@ -97,6 +97,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setWindowSize(getWindowSize(theme.typography.fontSize));
|
||||
}, [theme.typography.fontSize]);
|
||||
|
||||
const onResize = function () {
|
||||
setWindowSize(getWindowSize(theme.typography.fontSize));
|
||||
};
|
||||
|
@ -9,10 +9,12 @@ import {
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
Slider,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { Settings } from '../../models';
|
||||
import SelectLanguage from './SelectLanguage';
|
||||
import { Language, Palette, LightMode, DarkMode } from '@mui/icons-material';
|
||||
import { Language, Palette, LightMode, DarkMode, FormatSize } from '@mui/icons-material';
|
||||
|
||||
interface SettingsFormProps {
|
||||
dense?: boolean;
|
||||
@ -20,9 +22,31 @@ interface SettingsFormProps {
|
||||
setSettings: (state: Settings) => void;
|
||||
}
|
||||
|
||||
const fontSizesBasic = [
|
||||
{ label: 'XS', value: 12 },
|
||||
{ label: 'S', value: 13 },
|
||||
{ label: 'M', value: 14 },
|
||||
{ label: 'L', value: 15 },
|
||||
{ label: 'XL', value: 16 },
|
||||
];
|
||||
const fontSizesPro = [
|
||||
{ label: 'XS', value: 10 },
|
||||
{ label: 'S', value: 11 },
|
||||
{ label: 'M', value: 12 },
|
||||
{ label: 'L', value: 13 },
|
||||
{ label: 'XL', value: 14 },
|
||||
];
|
||||
|
||||
const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProps): JSX.Element => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const fontSizes = [
|
||||
{ label: 'XS', value: { basic: 12, pro: 10 } },
|
||||
{ label: 'S', value: { basic: 13, pro: 11 } },
|
||||
{ label: 'M', value: { basic: 14, pro: 12 } },
|
||||
{ label: 'L', value: { basic: 15, pro: 13 } },
|
||||
{ label: 'XL', value: { basic: 16, pro: 14 } },
|
||||
];
|
||||
|
||||
return (
|
||||
<Grid container spacing={1}>
|
||||
@ -37,6 +61,7 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
||||
setLanguage={(language) => setSettings({ ...settings, language })}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<Palette />
|
||||
@ -55,6 +80,8 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
||||
height: '1.2em',
|
||||
borderRadius: '0.4em',
|
||||
backgroundColor: 'white',
|
||||
position: 'relative',
|
||||
top: `${7 - 0.5 * theme.typography.fontSize}px`,
|
||||
}}
|
||||
>
|
||||
<DarkMode sx={{ width: '0.8em', height: '0.8em', color: '#666' }} />
|
||||
@ -69,9 +96,11 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
||||
borderRadius: '0.4em',
|
||||
backgroundColor: 'white',
|
||||
padding: '0.07em',
|
||||
position: 'relative',
|
||||
top: `${7 - 0.5 * theme.typography.fontSize}px`,
|
||||
}}
|
||||
>
|
||||
<LightMode sx={{ width: '0.7em', height: '0.7em', color: '#666' }} />
|
||||
<LightMode sx={{ width: '0.67em', height: '0.67em', color: '#666' }} />
|
||||
</Paper>
|
||||
}
|
||||
onChange={(e) =>
|
||||
@ -81,6 +110,25 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<FormatSize />
|
||||
</ListItemIcon>
|
||||
<Slider
|
||||
value={settings.fontSize}
|
||||
min={settings.frontend == 'basic' ? 12 : 10}
|
||||
max={settings.frontend == 'basic' ? 16 : 14}
|
||||
step={1}
|
||||
onChange={(e) => setSettings({ ...settings, fontSize: e.target.value })}
|
||||
valueLabelDisplay='off'
|
||||
marks={fontSizes.map(({ label, value }) => ({
|
||||
label: <Typography variant='caption'>{t(label)}</Typography>,
|
||||
value: settings.frontend === 'basic' ? value.basic : value.pro,
|
||||
}))}
|
||||
track={false}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
@ -2,6 +2,7 @@ import { baseSettings, Settings } from './Settings.model';
|
||||
|
||||
export const defaultSettings: Settings = {
|
||||
...baseSettings,
|
||||
frontend: 'basic',
|
||||
};
|
||||
|
||||
export default defaultSettings;
|
||||
|
@ -3,6 +3,7 @@ import { baseSettings, Settings } from './Settings.model';
|
||||
export const defaultSettings: Settings = {
|
||||
...baseSettings,
|
||||
fontSize: 12,
|
||||
frontend: 'pro',
|
||||
};
|
||||
|
||||
export default defaultSettings;
|
||||
|
@ -3,6 +3,7 @@ import type Coordinator from './Coordinator.model';
|
||||
import type Language from './Language.model';
|
||||
|
||||
export interface Settings {
|
||||
frontend: 'basic' | 'pro';
|
||||
mode: 'light' | 'dark';
|
||||
fontSize: number;
|
||||
language: Language;
|
||||
@ -12,6 +13,7 @@ export interface Settings {
|
||||
}
|
||||
|
||||
export const baseSettings: Settings = {
|
||||
frontend: 'basic',
|
||||
mode:
|
||||
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
|
@ -17,7 +17,13 @@ import {
|
||||
defaultInfo,
|
||||
} from '../models';
|
||||
|
||||
import { PlaceholderWidget, MakerWidget, BookWidget, DepthChartWidget } from '../pro/Widgets';
|
||||
import {
|
||||
PlaceholderWidget,
|
||||
MakerWidget,
|
||||
BookWidget,
|
||||
DepthChartWidget,
|
||||
SettingsWidget,
|
||||
} from '../pro/Widgets';
|
||||
import ToolBar from '../pro/ToolBar';
|
||||
import LandingDialog from '../pro/LandingDialog';
|
||||
|
||||
@ -101,6 +107,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
|
||||
setWindowSize(getWindowSize(em));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setWindowSize(getWindowSize(theme.typography.fontSize));
|
||||
}, [theme.typography.fontSize]);
|
||||
|
||||
const fetchLimits = async () => {
|
||||
setLimits({ ...limits, loading: true });
|
||||
const data = apiClient.get('/api/limits/').then((data) => {
|
||||
@ -188,6 +198,9 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
|
||||
windowSize={windowSize}
|
||||
/>
|
||||
</div>
|
||||
<div key='Settings'>
|
||||
<SettingsWidget settings={settings} setSettings={setSettings} />
|
||||
</div>
|
||||
<div key='Garage'>
|
||||
<PlaceholderWidget label='Robot Garage' />
|
||||
</div>
|
||||
@ -197,9 +210,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
|
||||
<div key='Trade'>
|
||||
<PlaceholderWidget label='Trade Box' />
|
||||
</div>
|
||||
<div key='Settings'>
|
||||
<PlaceholderWidget label='Settings' />
|
||||
</div>
|
||||
<div key='Other'>
|
||||
<PlaceholderWidget label='Other' />
|
||||
</div>
|
||||
|
44
frontend/src/pro/Widgets/Settings.tsx
Normal file
44
frontend/src/pro/Widgets/Settings.tsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Settings } from '../../models';
|
||||
import { Paper, useTheme } from '@mui/material';
|
||||
import SettingsForm from '../../components/SettingsForm';
|
||||
|
||||
interface SettingsWidgetProps {
|
||||
settings: Settings;
|
||||
setSettings: (state: Settings) => void;
|
||||
style?: Object;
|
||||
className?: string;
|
||||
onMouseDown?: () => void;
|
||||
onMouseUp?: () => void;
|
||||
onTouchEnd?: () => void;
|
||||
}
|
||||
|
||||
const SettingsWidget = React.forwardRef(
|
||||
(
|
||||
{
|
||||
settings,
|
||||
setSettings,
|
||||
style,
|
||||
className,
|
||||
onMouseDown,
|
||||
onMouseUp,
|
||||
onTouchEnd,
|
||||
}: SettingsWidgetProps,
|
||||
ref,
|
||||
) => {
|
||||
const theme = useTheme();
|
||||
return React.useMemo(() => {
|
||||
return (
|
||||
<Paper
|
||||
elevation={3}
|
||||
style={{ width: '100%', height: '100%', position: 'relative', top: '0.6em', left: '0em' }}
|
||||
>
|
||||
<SettingsForm dense={true} settings={settings} setSettings={setSettings} />
|
||||
</Paper>
|
||||
);
|
||||
}, [settings]);
|
||||
},
|
||||
);
|
||||
|
||||
export default SettingsWidget;
|
@ -1,4 +1,5 @@
|
||||
export { default as MakerWidget } from './Maker';
|
||||
export { default as BookWidget } from './Book';
|
||||
export { default as DepthChartWidget } from './Depth';
|
||||
export { default as SettingsWidget } from './Settings';
|
||||
export { default as PlaceholderWidget } from './Placeholder';
|
||||
|
Loading…
Reference in New Issue
Block a user