sysadminix/rentalcalculator
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: clear layout1

Browse Source
This commit is contained in:
evgeniywas
2023-06-04 18:20:46 +01:00
parent 1236746ce9
commit d35f6b7da2
7 changed files with 4 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/theme-layouts/layout1/Layout1.js
View File

@@ -1,18 +1,13 @@
import FuseDialog from '@fuse/core/FuseDialog';
import { styled } from '@mui/material/styles';
import FuseMessage from '@fuse/core/FuseMessage';
import FuseSuspense from '@fuse/core/FuseSuspense';
import { styled } from '@mui/material/styles';
import AppContext from 'app/AppContext';
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
import { memo, useContext } from 'react';
import { useSelector } from 'react-redux';
import { useRoutes } from 'react-router-dom';
import { selectFuseCurrentLayoutConfig } from 'app/store/fuse/settingsSlice';
import FooterLayout1 from './components/FooterLayout1';
import LeftSideLayout1 from './components/LeftSideLayout1';
import NavbarWrapperLayout1 from './components/NavbarWrapperLayout1';
import RightSideLayout1 from './components/RightSideLayout1';
import ToolbarLayout1 from './components/ToolbarLayout1';
import SettingsPanel from '../shared-components/SettingsPanel';
const Root = styled('div')(({ theme, config }) => ({
...(config.mode === 'boxed' && {
@@ -37,20 +32,10 @@ function Layout1(props) {
return (
<Root id="fuse-layout" config={config} className="w-full flex">
{config.leftSidePanel.display && <LeftSideLayout1 />}
<div className="flex flex-auto min-w-0">
{config.navbar.display && config.navbar.position === 'left' && <NavbarWrapperLayout1 />}
<main id="fuse-main" className="flex flex-col flex-auto min-h-full min-w-0 relative z-10">
{config.toolbar.display && (
<ToolbarLayout1 className={config.toolbar.style === 'fixed' && 'sticky top-0'} />
)}
<div className="sticky top-0 z-99">
<SettingsPanel />
</div>
<div className="flex flex-col flex-auto min-h-0 relative z-10">
<FuseDialog />
@@ -58,16 +43,9 @@ function Layout1(props) {
{props.children}
</div>
{config.footer.display && (
<FooterLayout1 className={config.footer.style === 'fixed' && 'sticky bottom-0'} />
)}
</main>
{config.navbar.display && config.navbar.position === 'right' && <NavbarWrapperLayout1 />}
</div>
{config.rightSidePanel.display && <RightSideLayout1 />}
<FuseMessage />
</Root>
);

65
src/app/theme-layouts/layout1/Layout1Config.js
View File

@@ -1,5 +1,5 @@
const config = {
title: 'Layout 1 - Vertical',
title: 'Layout 1 - Dashboard',
defaults: {
mode: 'container',
containerWidth: 1570,
@@ -9,20 +9,6 @@ const config = {
folded: true,
position: 'left',
},
toolbar: {
display: true,
style: 'fixed',
},
footer: {
display: true,
style: 'fixed',
},
leftSidePanel: {
display: true,
},
rightSidePanel: {
display: true,
},
},
form: {
mode: {
@@ -47,7 +33,6 @@ const config = {
title: 'Container Width (px)',
type: 'number',
},
navbar: {
type: 'group',
title: 'Navbar',
@@ -98,54 +83,6 @@ const config = {
},
},
},
toolbar: {
type: 'group',
title: 'Toolbar',
children: {
display: {
title: 'Display',
type: 'switch',
},
style: {
title: 'Style',
type: 'radio',
options: [
{
name: 'Fixed',
value: 'fixed',
},
{
name: 'Static',
value: 'static',
},
],
},
},
},
footer: {
type: 'group',
title: 'Footer',
children: {
display: {
title: 'Display',
type: 'switch',
},
style: {
title: 'Style',
type: 'radio',
options: [
{
name: 'Fixed',
value: 'fixed',
},
{
name: 'Static',
value: 'static',
},
],
},
},
},
},
};

33
src/app/theme-layouts/layout1/components/FooterLayout1.js
View File

@@ -1,33 +0,0 @@
import AppBar from '@mui/material/AppBar';
import { ThemeProvider } from '@mui/material/styles';
import Toolbar from '@mui/material/Toolbar';
import { memo } from 'react';
import { useSelector } from 'react-redux';
import { selectFooterTheme } from 'app/store/fuse/settingsSlice';
import clsx from 'clsx';
function FooterLayout1(props) {
const footerTheme = useSelector(selectFooterTheme);
return (
<ThemeProvider theme={footerTheme}>
<AppBar
id="fuse-footer"
className={clsx('relative z-20 shadow-md', props.className)}
color="default"
sx={{
backgroundColor: (theme) =>
theme.palette.mode === 'light'
? footerTheme.palette.background.paper
: footerTheme.palette.background.default,
}}
>
<Toolbar className="min-h-48 md:min-h-64 px-8 sm:px-12 py-0 flex items-center overflow-x-auto">
Footer
</Toolbar>
</AppBar>
</ThemeProvider>
);
}
export default memo(FooterLayout1);

7
src/app/theme-layouts/layout1/components/LeftSideLayout1.js
View File

@@ -1,7 +0,0 @@
import { memo } from 'react';
function LeftSideLayout1() {
return <></>;
}
export default memo(LeftSideLayout1);

2
src/app/theme-layouts/layout1/components/NavbarWrapperLayout1.js
View File

@@ -25,7 +25,7 @@ function NavbarWrapperLayout1(props) {
</>
</ThemeProvider>
{config.navbar.display && !config.toolbar.display && !navbar.open && <NavbarToggleFab />}
{config.navbar.display && !navbar.open && <NavbarToggleFab />}
</>
);
}

15
src/app/theme-layouts/layout1/components/RightSideLayout1.js
View File

@@ -1,15 +0,0 @@
import { memo } from 'react';
import QuickPanel from '../../shared-components/quickPanel/QuickPanel';
import NotificationPanel from '../../shared-components/notificationPanel/NotificationPanel';
function RightSideLayout1(props) {
return (
<>
<QuickPanel />
<NotificationPanel />
</>
);
}
export default memo(RightSideLayout1);

103
src/app/theme-layouts/layout1/components/ToolbarLayout1.js
View File

@@ -1,103 +0,0 @@
import { ThemeProvider } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Hidden from '@mui/material/Hidden';
import Toolbar from '@mui/material/Toolbar';
import clsx from 'clsx';
import { memo } from 'react';
import { useSelector } from 'react-redux';
import { selectFuseCurrentLayoutConfig, selectToolbarTheme } from 'app/store/fuse/settingsSlice';
import { selectFuseNavbar } from 'app/store/fuse/navbarSlice';
import AdjustFontSize from '../../shared-components/AdjustFontSize';
import FullScreenToggle from '../../shared-components/FullScreenToggle';
import LanguageSwitcher from '../../shared-components/LanguageSwitcher';
import NotificationPanelToggleButton from '../../shared-components/notificationPanel/NotificationPanelToggleButton';
import NavigationShortcuts from '../../shared-components/NavigationShortcuts';
import NavigationSearch from '../../shared-components/NavigationSearch';
import NavbarToggleButton from '../../shared-components/NavbarToggleButton';
import UserMenu from '../../shared-components/UserMenu';
import QuickPanelToggleButton from '../../shared-components/quickPanel/QuickPanelToggleButton';
import ChatPanelToggleButton from '../../shared-components/chatPanel/ChatPanelToggleButton';
function ToolbarLayout1(props) {
const config = useSelector(selectFuseCurrentLayoutConfig);
const navbar = useSelector(selectFuseNavbar);
const toolbarTheme = useSelector(selectToolbarTheme);
return (
<ThemeProvider theme={toolbarTheme}>
<AppBar
id="fuse-toolbar"
className={clsx('flex relative z-20 shadow-md', props.className)}
color="default"
sx={{
backgroundColor: (theme) =>
theme.palette.mode === 'light'
? toolbarTheme.palette.background.paper
: toolbarTheme.palette.background.default,
}}
position="static"
>
<Toolbar className="p-0 min-h-48 md:min-h-64">
<div className="flex flex-1 px-16">
{config.navbar.display && config.navbar.position === 'left' && (
<>
<Hidden lgDown>
{(config.navbar.style === 'style-3' ||
config.navbar.style === 'style-3-dense') && (
<NavbarToggleButton className="w-40 h-40 p-0 mx-0" />
)}
{config.navbar.style === 'style-1' && !navbar.open && (
<NavbarToggleButton className="w-40 h-40 p-0 mx-0" />
)}
</Hidden>
<Hidden lgUp>
<NavbarToggleButton className="w-40 h-40 p-0 mx-0 sm:mx-8" />
</Hidden>
</>
)}
<Hidden lgDown>
<NavigationShortcuts />
</Hidden>
</div>
<div className="flex items-center px-8 h-full overflow-x-auto">
<LanguageSwitcher />
<AdjustFontSize />
<FullScreenToggle />
<NavigationSearch />
<Hidden lgUp>
<ChatPanelToggleButton />
</Hidden>
<QuickPanelToggleButton />
<NotificationPanelToggleButton />
<UserMenu />
</div>
{config.navbar.display && config.navbar.position === 'right' && (
<>
<Hidden lgDown>
{!navbar.open && <NavbarToggleButton className="w-40 h-40 p-0 mx-0" />}
</Hidden>
<Hidden lgUp>
<NavbarToggleButton className="w-40 h-40 p-0 mx-0 sm:mx-8" />
</Hidden>
</>
)}
</Toolbar>
</AppBar>
</ThemeProvider>
);
}
export default memo(ToolbarLayout1);