Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-11-14 00:17:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

Minor layout change

Browse source
This commit is contained in:
Manoj Vivek 2020-09-12 13:21:04 +05:30
parent 94eea6859b
commit 19262c2fc5
4 changed files with 51 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
desktop-app/app/Routes.js
View file

@ -14,9 +14,6 @@ const Routes = () => {
return (
<Fragment>
<Paper elevation={0} className={classes.root}>
<div className={classes.iconColumn}>
<LeftIconsPaneContainer />
</div>
<div className={classes.contentColumn}>
<Switch>
<Route path={routes.HOME} component={Browser} />

23
desktop-app/app/components/LeftIconsPane/index.js
View file

@ -19,9 +19,27 @@ import {
EXTENSIONS_MANAGER,
NETWORK_CONFIGURATION,
} from '../../constants/DrawerContents';
import {makeStyles} from '@material-ui/core/styles';
const useStyles = makeStyles(theme => {
console.log('theme', theme);
return {
container: {
backgroundColor: theme.palette.background.l2,
display: 'flex',
flexFlow: 'column',
width: 50,
boxShadow: `0 ${theme.palette.mode({
light: '3px',
dark: '3px',
})} 5px rgba(0, 0, 0, 0.35)`,
},
};
});
const LeftIconsPane = props => {
const commonClasses = useCommonStyles();
const mStyles = useStyles();
const iconProps = {
style: {fontSize: 30},
height: 30,
@ -35,10 +53,7 @@ const LeftIconsPane = props => {
props.openDrawerAndSetContent(content);
};
return (
<div className={styles.iconsContainer}>
<div className={cx(styles.logo, styles.icon)}>
<Logo width={40} height={40} />
</div>
<div className={mStyles.container}>
<Grid
container
spacing={1}

6
desktop-app/app/components/LeftIconsPane/styles.css
View file

@ -1,9 +1,3 @@
.iconsContainer {
display: flex;
flex-flow: column;
flex: 1;
}
.icon {
margin-bottom: 10px !important;
}

60
desktop-app/app/containers/Browser/index.js
View file

@ -8,53 +8,57 @@ import DevicePreviewerContainer from '../DevicePreviewerContainer';
import DrawerContainer from '../DrawerContainer';
import * as BrowserActions from '../../actions/browser';
import {DEVTOOLS_MODES} from '../../constants/previewerLayouts';
import LeftIconsPaneContainer from '../LeftIconsPaneContainer';
type Props = {};
const Browser = ({browser}) => (
<Fragment>
<Header />
<div
style={{
display: 'flex',
flexDirection: 'row',
overflowX: 'hidden',
flexGrow: 1,
flexBasis: 0,
}}
>
<DrawerContainer />
<div style={{display: 'flex', height: '100%'}}>
<LeftIconsPaneContainer />
<div
style={{
display: 'flex',
flex: 1,
height: '100%',
flexDirection: 'column',
overflow: 'hidden',
flexDirection: 'row',
overflowX: 'hidden',
flexGrow: 1,
flexBasis: 0,
}}
>
<DevicePreviewerContainer />
<DrawerContainer />
<div
style={{
display: 'flex',
flex: 1,
height: '100%',
flexDirection: 'column',
overflow: 'hidden',
}}
>
<DevicePreviewerContainer />
{browser.devToolsConfig.open &&
browser.devToolsConfig.mode === DEVTOOLS_MODES.BOTTOM ? (
<div
style={{
display: 'flex',
width: '100%',
height: browser.devToolsConfig.size.height,
}}
/>
) : null}
</div>
{browser.devToolsConfig.open &&
browser.devToolsConfig.mode === DEVTOOLS_MODES.BOTTOM ? (
browser.devToolsConfig.mode === DEVTOOLS_MODES.RIGHT ? (
<div
style={{
height: '100%',
width: browser.devToolsConfig.size.width,
display: 'flex',
width: '100%',
height: browser.devToolsConfig.size.height,
}}
/>
) : null}
</div>
{browser.devToolsConfig.open &&
browser.devToolsConfig.mode === DEVTOOLS_MODES.RIGHT ? (
<div
style={{
height: '100%',
width: browser.devToolsConfig.size.width,
display: 'flex',
}}
/>
) : null}
</div>
</Fragment>
);