From 67dc3fad9de2fa6f3f1b6201068932810b22d33c Mon Sep 17 00:00:00 2001
From: Manoj Vivek
Date: Sun, 4 Oct 2020 13:31:26 +0530
Subject: [PATCH] All docked direction positioning fixed
---
.../components/DevicesPreviewer/useStyles.js | 1 +
desktop-app/app/components/Drawer.js | 3 +-
.../app/components/LiveCssEditor/index.js | 58 ++++++++++++++++---
.../app/components/LiveCssEditor/useStyles.js | 12 +++-
4 files changed, 63 insertions(+), 11 deletions(-)
diff --git a/desktop-app/app/components/DevicesPreviewer/useStyles.js b/desktop-app/app/components/DevicesPreviewer/useStyles.js
index 5ddadb51..286b05da 100644
--- a/desktop-app/app/components/DevicesPreviewer/useStyles.js
+++ b/desktop-app/app/components/DevicesPreviewer/useStyles.js
@@ -22,6 +22,7 @@ const useStyles = makeStyles(theme => ({
devicesContainer: {
display: 'flex',
paddingBottom: '100px',
+ paddingLeft: 5,
},
tab: {
display: 'none',
diff --git a/desktop-app/app/components/Drawer.js b/desktop-app/app/components/Drawer.js
index 9a85d5e2..1bdcf875 100644
--- a/desktop-app/app/components/Drawer.js
+++ b/desktop-app/app/components/Drawer.js
@@ -52,11 +52,12 @@ const useStyles = makeStyles(theme => ({
overflow: 'hidden',
transition: 'margin-left 0.2s',
background: theme.palette.header.main,
- margin: '0 10px 0 -310px',
+ margin: '0 0 0 -310px',
padding: '5px 5px 0 5px',
},
drawerOpen: {
marginLeft: 0,
+ marginRight: 5,
flexShrink: 0,
boxShadow: `${theme.palette.mode({
light: '0px 2px 4px',
diff --git a/desktop-app/app/components/LiveCssEditor/index.js b/desktop-app/app/components/LiveCssEditor/index.js
index d62243ee..8efa34d2 100644
--- a/desktop-app/app/components/LiveCssEditor/index.js
+++ b/desktop-app/app/components/LiveCssEditor/index.js
@@ -22,16 +22,34 @@ import {
isHorizontallyStacked,
isVeriticallyStacked,
} 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 classes = useStyles();
const commonClasses = useCommonStyles();
const [css, setCss] = useState(null);
const [height, setHeight] = useState(
- isVeriticallyStacked(position) ? '100%' : 200
+ isVeriticallyStacked(position) ? 'calc(100vh - 70px - 30px)' : 300
);
const [width, setWidth] = useState(
- isHorizontallyStacked(position) ? '100%' : 400
+ isHorizontallyStacked(position) ? 'calc(100vw - 50px)' : 400
);
const onApply = () => {
@@ -43,15 +61,24 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
useEffect(onApply, [css]);
+ const enableResizing = useMemo(() => getResizingDirections(position), [
+ position,
+ ]);
+ const disableDragging = useMemo(
+ () => position !== CSS_EDITOR_MODES.UNDOCKED,
+ [position]
+ );
+
return (
{
}}
>
-
Live CSS Editor
-
+
+ Live CSS Editor{' '}
+
+ {}}>
+ Dock to Right{' '}
+ {}}>
+
+
+
+
+
+
{
highlightActiveLine={true}
value={css}
width="100%"
- height="auto"
+ height="100%"
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
diff --git a/desktop-app/app/components/LiveCssEditor/useStyles.js b/desktop-app/app/components/LiveCssEditor/useStyles.js
index 5874a9b3..31804606 100644
--- a/desktop-app/app/components/LiveCssEditor/useStyles.js
+++ b/desktop-app/app/components/LiveCssEditor/useStyles.js
@@ -5,8 +5,12 @@ const useStyles = makeStyles(theme => ({
position: 'relative',
display: 'flex',
flexShrink: 0,
+ marginBottom: 10,
},
container: {
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
background: theme.palette.background.l2,
margin: 5,
padding: 10,
@@ -20,9 +24,13 @@ const useStyles = makeStyles(theme => ({
cursor: 'move',
padding: '5px 0',
},
+ mainContent: {
+ display: 'flex',
+ flexDirection: 'column',
+ flex: 1,
+ },
editor: {
- minHeight: 200,
- height: 'auto',
+ height: '100%',
marginBottom: 10,
},
}));