88 lines
2.6 KiB
JavaScript
88 lines
2.6 KiB
JavaScript
|
|
import { useState, useCallback } from 'react';
|
|
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import { useColorScheme } from '@mui/material/styles';
|
|
|
|
import { CONFIG } from 'src/config-global';
|
|
import { Iconify } from 'src/components/iconify';
|
|
import { SvgColor, svgColorClasses } from 'src/components/svg-color';
|
|
|
|
import { useSettingsContext } from 'src/components/settings/context';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
function FullScreenButton() {
|
|
const [fullscreen, setFullscreen] = useState(false);
|
|
|
|
const onToggle = useCallback(() => {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen();
|
|
setFullscreen(true);
|
|
} else if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
setFullscreen(false);
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<Tooltip title={fullscreen ? 'Выйти из полноэкранного режима' : 'Полный экран'}>
|
|
<IconButton
|
|
onClick={onToggle}
|
|
sx={{
|
|
p: 0,
|
|
width: 40,
|
|
height: 40,
|
|
[`& .${svgColorClasses.root}`]: {
|
|
background: (theme) =>
|
|
`linear-gradient(135deg, ${theme.vars.palette.grey[500]} 0%, ${theme.vars.palette.grey[600]} 100%)`,
|
|
...(fullscreen && {
|
|
background: (theme) =>
|
|
`linear-gradient(135deg, ${theme.vars.palette.primary.light} 0%, ${theme.vars.palette.primary.main} 100%)`,
|
|
}),
|
|
},
|
|
}}
|
|
>
|
|
<SvgColor
|
|
src={`${CONFIG.site.basePath}/assets/icons/setting/${fullscreen ? 'ic-exit-full-screen' : 'ic-full-screen'}.svg`}
|
|
sx={{ width: 18, height: 18 }}
|
|
/>
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export function SettingsButton({ sx, ...other }) {
|
|
const settings = useSettingsContext();
|
|
const { mode, setMode } = useColorScheme();
|
|
|
|
const isDark = mode === 'dark' || settings.colorScheme === 'dark';
|
|
|
|
const handleToggle = () => {
|
|
const next = isDark ? 'light' : 'dark';
|
|
settings.onUpdateField('colorScheme', next);
|
|
setMode(next);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<FullScreenButton />
|
|
<Tooltip title={isDark ? 'Светлая тема' : 'Тёмная тема'}>
|
|
<IconButton
|
|
onClick={handleToggle}
|
|
sx={{ p: 0, width: 40, height: 40, ...sx }}
|
|
{...other}
|
|
>
|
|
<Iconify
|
|
icon={isDark ? 'solar:sun-bold-duotone' : 'solar:moon-bold-duotone'}
|
|
width={22}
|
|
/>
|
|
</IconButton>
|
|
</Tooltip>
|
|
</>
|
|
);
|
|
}
|