Merge pull request #529 from responsively-org/feature/live-css

Live CSS Editor Polish
responsively-org · Nov 1, 2020 · 0eb2056 · 0eb2056
2 parents df0254c + 9920a59
commit 0eb2056
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 39 deletions.
diff --git a/desktop-app/app/components/ScrollControls/index.js b/desktop-app/app/components/ScrollControls/index.js
@@ -25,6 +25,16 @@ const useStyles = makeStyles({
   },
 });
 
+const useRulerStyles = makeStyles(theme => ({
+  ruler: {borderRight: `1px solid ${theme.palette.text.inactive}`, height: 20},
+}));
+
+const VerticalRuler = () => {
+  const styles = useRulerStyles();
+
+  return <div className={styles.ruler} />;
+};
+
 const ScrollControls = ({
   browser,
   triggerScrollDown,
@@ -48,9 +58,6 @@ const ScrollControls = ({
   return (
     <div className={classes.container}>
       <Grid container spacing={1} alignItems="center">
-        <Grid item className={commonClasses.icon}>
-          <PrefersColorSchemeSwitch iconProps={iconProps} />
-        </Grid>
         <Grid
           item
           className={cx(commonClasses.icon, {
@@ -64,37 +71,6 @@ const ScrollControls = ({
             </div>
           </Tooltip>
         </Grid>
-        <Grid item className={commonClasses.icon}>
-          <Tooltip title="Take Screenshot">
-            <div onClick={screenshotAllDevices}>
-              <ScreenshotIcon {...iconProps} />
-            </div>
-          </Tooltip>
-        </Grid>
-        <Grid item className={commonClasses.icon}>
-          <Tooltip title="Tilt Devices">
-            <div onClick={flipOrientationAllDevices}>
-              <DeviceRotateIcon {...iconProps} />
-            </div>
-          </Tooltip>
-        </Grid>
-        <Grid item className={commonClasses.icon}>
-          <Tooltip
-            title={
-              browser.allDevicesMuted
-                ? 'Unmute all devices'
-                : 'Mute all devices'
-            }
-          >
-            <div onClick={onAllDevicesMutedChange}>
-              {browser.allDevicesMuted ? (
-                <MutedIcon {...iconProps} />
-              ) : (
-                <UnmutedIcon {...iconProps} />
-              )}
-            </div>
-          </Tooltip>
-        </Grid>
         <Grid
           item
           className={cx(commonClasses.icon, {
@@ -127,7 +103,48 @@ const ScrollControls = ({
             </div>
           </Tooltip>
         </Grid>
+        <Grid item>
+          <VerticalRuler />
+        </Grid>
+        <Grid item className={commonClasses.icon}>
+          <PrefersColorSchemeSwitch iconProps={iconProps} />
+        </Grid>
         <ToggleTouch iconProps={iconProps} />
+        <Grid item className={commonClasses.icon}>
+          <Tooltip
+            title={
+              browser.allDevicesMuted
+                ? 'Unmute all devices'
+                : 'Mute all devices'
+            }
+          >
+            <div onClick={onAllDevicesMutedChange}>
+              {browser.allDevicesMuted ? (
+                <MutedIcon {...iconProps} />
+              ) : (
+                <UnmutedIcon {...iconProps} />
+              )}
+            </div>
+          </Tooltip>
+        </Grid>
+        <Grid item className={commonClasses.icon}>
+          <Tooltip title="Tilt Devices">
+            <div onClick={flipOrientationAllDevices}>
+              <DeviceRotateIcon {...iconProps} />
+            </div>
+          </Tooltip>
+        </Grid>
+        <Grid item>
+          <VerticalRuler />
+        </Grid>
+        <Grid item className={commonClasses.icon}>
+          <Tooltip title="Take Screenshot">
+            <div onClick={screenshotAllDevices}>
+              <ScreenshotIcon {...iconProps} />
+            </div>
+          </Tooltip>
+        </Grid>
+
         <ZoomContainer iconProps={iconProps} />
       </Grid>
     </div>

diff --git a/desktop-app/app/components/icons/CSSEditor.js b/desktop-app/app/components/icons/CSSEditor.js
diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js
@@ -348,7 +348,7 @@ export default function browser(
       ),
     },
     isInspecting: false,
-    CSSEditor: {isOpen: true, position: CSS_EDITOR_MODES.LEFT, content: ''},
+    CSSEditor: {isOpen: false, position: CSS_EDITOR_MODES.LEFT, content: ''},
     windowSize: getWindowSize(),
     allDevicesMuted: false,
     networkConfiguration: _getNetworkConfiguration(),