mirror of
https://github.com/responsively-org/responsively-app
synced 2024-09-21 06:41:55 +00:00
All docked direction positioning fixed
This commit is contained in:
parent
f9d8ac4ff7
commit
67dc3fad9d
4 changed files with 63 additions and 11 deletions
|
@ -22,6 +22,7 @@ const useStyles = makeStyles(theme => ({
|
||||||
devicesContainer: {
|
devicesContainer: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
paddingBottom: '100px',
|
paddingBottom: '100px',
|
||||||
|
paddingLeft: 5,
|
||||||
},
|
},
|
||||||
tab: {
|
tab: {
|
||||||
display: 'none',
|
display: 'none',
|
||||||
|
|
|
@ -52,11 +52,12 @@ const useStyles = makeStyles(theme => ({
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
transition: 'margin-left 0.2s',
|
transition: 'margin-left 0.2s',
|
||||||
background: theme.palette.header.main,
|
background: theme.palette.header.main,
|
||||||
margin: '0 10px 0 -310px',
|
margin: '0 0 0 -310px',
|
||||||
padding: '5px 5px 0 5px',
|
padding: '5px 5px 0 5px',
|
||||||
},
|
},
|
||||||
drawerOpen: {
|
drawerOpen: {
|
||||||
marginLeft: 0,
|
marginLeft: 0,
|
||||||
|
marginRight: 5,
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
boxShadow: `${theme.palette.mode({
|
boxShadow: `${theme.palette.mode({
|
||||||
light: '0px 2px 4px',
|
light: '0px 2px 4px',
|
||||||
|
|
|
@ -22,16 +22,34 @@ import {
|
||||||
isHorizontallyStacked,
|
isHorizontallyStacked,
|
||||||
isVeriticallyStacked,
|
isVeriticallyStacked,
|
||||||
} from '../../constants/previewerLayouts';
|
} from '../../constants/previewerLayouts';
|
||||||
|
import KebabMenu from '../KebabMenu';
|
||||||
|
import {Tooltip} from '@material-ui/core';
|
||||||
|
import DockRight from '../icons/DockRight';
|
||||||
|
|
||||||
|
const getResizingDirections = position => {
|
||||||
|
switch (position) {
|
||||||
|
case CSS_EDITOR_MODES.LEFT:
|
||||||
|
return {right: true};
|
||||||
|
case CSS_EDITOR_MODES.RIGHT:
|
||||||
|
return {left: true};
|
||||||
|
case CSS_EDITOR_MODES.TOP:
|
||||||
|
return {bottom: true};
|
||||||
|
case CSS_EDITOR_MODES.BOTTOM:
|
||||||
|
return {top: true};
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
|
const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const commonClasses = useCommonStyles();
|
const commonClasses = useCommonStyles();
|
||||||
const [css, setCss] = useState(null);
|
const [css, setCss] = useState(null);
|
||||||
const [height, setHeight] = useState(
|
const [height, setHeight] = useState(
|
||||||
isVeriticallyStacked(position) ? '100%' : 200
|
isVeriticallyStacked(position) ? 'calc(100vh - 70px - 30px)' : 300
|
||||||
);
|
);
|
||||||
const [width, setWidth] = useState(
|
const [width, setWidth] = useState(
|
||||||
isHorizontallyStacked(position) ? '100%' : 400
|
isHorizontallyStacked(position) ? 'calc(100vw - 50px)' : 400
|
||||||
);
|
);
|
||||||
|
|
||||||
const onApply = () => {
|
const onApply = () => {
|
||||||
|
@ -43,15 +61,24 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
|
||||||
|
|
||||||
useEffect(onApply, [css]);
|
useEffect(onApply, [css]);
|
||||||
|
|
||||||
|
const enableResizing = useMemo(() => getResizingDirections(position), [
|
||||||
|
position,
|
||||||
|
]);
|
||||||
|
const disableDragging = useMemo(
|
||||||
|
() => position !== CSS_EDITOR_MODES.UNDOCKED,
|
||||||
|
[position]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.wrapper} style={{height, width}}>
|
<div className={classes.wrapper} style={{height, width}}>
|
||||||
<Rnd
|
<Rnd
|
||||||
dragHandleClassName={classes.titleBar}
|
dragHandleClassName={classes.titleBar}
|
||||||
disableDragging={position !== CSS_EDITOR_MODES.UNDOCKED}
|
disableDragging={disableDragging}
|
||||||
|
enableResizing={enableResizing}
|
||||||
style={{zIndex: 100}}
|
style={{zIndex: 100}}
|
||||||
default={{
|
default={{
|
||||||
width: isHorizontallyStacked(position) ? '100%' : 400,
|
width: '100%',
|
||||||
height: isVeriticallyStacked(position) ? '100%' : 200,
|
height: '100%',
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
}}
|
}}
|
||||||
|
@ -67,8 +94,23 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className={classes.container}>
|
<div className={classes.container}>
|
||||||
<div className={classes.titleBar}>Live CSS Editor</div>
|
<div
|
||||||
<div className="">
|
className={cx(
|
||||||
|
classes.titleBar,
|
||||||
|
commonClasses.flexContainerSpaceBetween
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Live CSS Editor{' '}
|
||||||
|
<KebabMenu>
|
||||||
|
<div onClick={() => {}}>
|
||||||
|
Dock to Right{' '}
|
||||||
|
<span className="" onClick={() => {}}>
|
||||||
|
<DockRight height={10} />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</KebabMenu>
|
||||||
|
</div>
|
||||||
|
<div className={classes.mainContent}>
|
||||||
<AceEditor
|
<AceEditor
|
||||||
className={classes.editor}
|
className={classes.editor}
|
||||||
placeholder="Enter CSS to apply"
|
placeholder="Enter CSS to apply"
|
||||||
|
@ -82,7 +124,7 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
|
||||||
highlightActiveLine={true}
|
highlightActiveLine={true}
|
||||||
value={css}
|
value={css}
|
||||||
width="100%"
|
width="100%"
|
||||||
height="auto"
|
height="100%"
|
||||||
setOptions={{
|
setOptions={{
|
||||||
enableBasicAutocompletion: true,
|
enableBasicAutocompletion: true,
|
||||||
enableLiveAutocompletion: true,
|
enableLiveAutocompletion: true,
|
||||||
|
|
|
@ -5,8 +5,12 @@ const useStyles = makeStyles(theme => ({
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
|
marginBottom: 10,
|
||||||
},
|
},
|
||||||
container: {
|
container: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
background: theme.palette.background.l2,
|
background: theme.palette.background.l2,
|
||||||
margin: 5,
|
margin: 5,
|
||||||
padding: 10,
|
padding: 10,
|
||||||
|
@ -20,9 +24,13 @@ const useStyles = makeStyles(theme => ({
|
||||||
cursor: 'move',
|
cursor: 'move',
|
||||||
padding: '5px 0',
|
padding: '5px 0',
|
||||||
},
|
},
|
||||||
|
mainContent: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
editor: {
|
editor: {
|
||||||
minHeight: 200,
|
height: '100%',
|
||||||
height: 'auto',
|
|
||||||
marginBottom: 10,
|
marginBottom: 10,
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
Loading…
Reference in a new issue