mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-14 11:26:24 +00: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 () {
|
const onResize = function () {
|
||||||
setWindowSize(getWindowSize(theme.typography.fontSize));
|
setWindowSize(getWindowSize(theme.typography.fontSize));
|
||||||
};
|
};
|
||||||
|
@ -9,10 +9,12 @@ import {
|
|||||||
List,
|
List,
|
||||||
ListItem,
|
ListItem,
|
||||||
ListItemIcon,
|
ListItemIcon,
|
||||||
|
Slider,
|
||||||
|
Typography,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { Settings } from '../../models';
|
import { Settings } from '../../models';
|
||||||
import SelectLanguage from './SelectLanguage';
|
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 {
|
interface SettingsFormProps {
|
||||||
dense?: boolean;
|
dense?: boolean;
|
||||||
@ -20,9 +22,31 @@ interface SettingsFormProps {
|
|||||||
setSettings: (state: Settings) => void;
|
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 SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProps): JSX.Element => {
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { t } = useTranslation();
|
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 (
|
return (
|
||||||
<Grid container spacing={1}>
|
<Grid container spacing={1}>
|
||||||
@ -37,6 +61,7 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
|||||||
setLanguage={(language) => setSettings({ ...settings, language })}
|
setLanguage={(language) => setSettings({ ...settings, language })}
|
||||||
/>
|
/>
|
||||||
</ListItem>
|
</ListItem>
|
||||||
|
|
||||||
<ListItem>
|
<ListItem>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<Palette />
|
<Palette />
|
||||||
@ -55,6 +80,8 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
|||||||
height: '1.2em',
|
height: '1.2em',
|
||||||
borderRadius: '0.4em',
|
borderRadius: '0.4em',
|
||||||
backgroundColor: 'white',
|
backgroundColor: 'white',
|
||||||
|
position: 'relative',
|
||||||
|
top: `${7 - 0.5 * theme.typography.fontSize}px`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<DarkMode sx={{ width: '0.8em', height: '0.8em', color: '#666' }} />
|
<DarkMode sx={{ width: '0.8em', height: '0.8em', color: '#666' }} />
|
||||||
@ -69,9 +96,11 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
|||||||
borderRadius: '0.4em',
|
borderRadius: '0.4em',
|
||||||
backgroundColor: 'white',
|
backgroundColor: 'white',
|
||||||
padding: '0.07em',
|
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>
|
</Paper>
|
||||||
}
|
}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
@ -81,6 +110,25 @@ const SettingsForm = ({ dense = false, settings, setSettings }: SettingsFormProp
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</ListItem>
|
</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>
|
</List>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
@ -2,6 +2,7 @@ import { baseSettings, Settings } from './Settings.model';
|
|||||||
|
|
||||||
export const defaultSettings: Settings = {
|
export const defaultSettings: Settings = {
|
||||||
...baseSettings,
|
...baseSettings,
|
||||||
|
frontend: 'basic',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defaultSettings;
|
export default defaultSettings;
|
||||||
|
@ -3,6 +3,7 @@ import { baseSettings, Settings } from './Settings.model';
|
|||||||
export const defaultSettings: Settings = {
|
export const defaultSettings: Settings = {
|
||||||
...baseSettings,
|
...baseSettings,
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
frontend: 'pro',
|
||||||
};
|
};
|
||||||
|
|
||||||
export default defaultSettings;
|
export default defaultSettings;
|
||||||
|
@ -3,6 +3,7 @@ import type Coordinator from './Coordinator.model';
|
|||||||
import type Language from './Language.model';
|
import type Language from './Language.model';
|
||||||
|
|
||||||
export interface Settings {
|
export interface Settings {
|
||||||
|
frontend: 'basic' | 'pro';
|
||||||
mode: 'light' | 'dark';
|
mode: 'light' | 'dark';
|
||||||
fontSize: number;
|
fontSize: number;
|
||||||
language: Language;
|
language: Language;
|
||||||
@ -12,6 +13,7 @@ export interface Settings {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const baseSettings: Settings = {
|
export const baseSettings: Settings = {
|
||||||
|
frontend: 'basic',
|
||||||
mode:
|
mode:
|
||||||
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||||
? 'dark'
|
? 'dark'
|
||||||
|
@ -17,7 +17,13 @@ import {
|
|||||||
defaultInfo,
|
defaultInfo,
|
||||||
} from '../models';
|
} 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 ToolBar from '../pro/ToolBar';
|
||||||
import LandingDialog from '../pro/LandingDialog';
|
import LandingDialog from '../pro/LandingDialog';
|
||||||
|
|
||||||
@ -101,6 +107,10 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
|
|||||||
setWindowSize(getWindowSize(em));
|
setWindowSize(getWindowSize(em));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setWindowSize(getWindowSize(theme.typography.fontSize));
|
||||||
|
}, [theme.typography.fontSize]);
|
||||||
|
|
||||||
const fetchLimits = async () => {
|
const fetchLimits = async () => {
|
||||||
setLimits({ ...limits, loading: true });
|
setLimits({ ...limits, loading: true });
|
||||||
const data = apiClient.get('/api/limits/').then((data) => {
|
const data = apiClient.get('/api/limits/').then((data) => {
|
||||||
@ -188,6 +198,9 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
|
|||||||
windowSize={windowSize}
|
windowSize={windowSize}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div key='Settings'>
|
||||||
|
<SettingsWidget settings={settings} setSettings={setSettings} />
|
||||||
|
</div>
|
||||||
<div key='Garage'>
|
<div key='Garage'>
|
||||||
<PlaceholderWidget label='Robot Garage' />
|
<PlaceholderWidget label='Robot Garage' />
|
||||||
</div>
|
</div>
|
||||||
@ -197,9 +210,6 @@ const Main = ({ settings, setSettings }: MainProps): JSX.Element => {
|
|||||||
<div key='Trade'>
|
<div key='Trade'>
|
||||||
<PlaceholderWidget label='Trade Box' />
|
<PlaceholderWidget label='Trade Box' />
|
||||||
</div>
|
</div>
|
||||||
<div key='Settings'>
|
|
||||||
<PlaceholderWidget label='Settings' />
|
|
||||||
</div>
|
|
||||||
<div key='Other'>
|
<div key='Other'>
|
||||||
<PlaceholderWidget label='Other' />
|
<PlaceholderWidget label='Other' />
|
||||||
</div>
|
</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 MakerWidget } from './Maker';
|
||||||
export { default as BookWidget } from './Book';
|
export { default as BookWidget } from './Book';
|
||||||
export { default as DepthChartWidget } from './Depth';
|
export { default as DepthChartWidget } from './Depth';
|
||||||
|
export { default as SettingsWidget } from './Settings';
|
||||||
export { default as PlaceholderWidget } from './Placeholder';
|
export { default as PlaceholderWidget } from './Placeholder';
|
||||||
|
Loading…
Reference in New Issue
Block a user