From ceddcbb992046cbe862977ff6a8e0e42cba85e03 Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Sun, 13 Sep 2020 18:12:39 +0530 Subject: [PATCH 01/12] Basic working live css editor --- desktop-app/app/components/Drawer.js | 4 ++ .../app/components/LeftIconsPane/index.js | 11 ++++ .../app/components/LiveCssEditor/index.js | 58 +++++++++++++++++++ .../app/components/LiveCssEditor/useStyles.js | 46 +++++++++++++++ desktop-app/app/components/WebView/index.js | 18 ++++++ desktop-app/app/constants/DrawerContents.js | 1 + desktop-app/app/constants/pubsubEvents.js | 1 + desktop-app/app/reducers/browser.js | 4 +- 8 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 desktop-app/app/components/LiveCssEditor/index.js create mode 100644 desktop-app/app/components/LiveCssEditor/useStyles.js diff --git a/desktop-app/app/components/Drawer.js b/desktop-app/app/components/Drawer.js index f68ce354..b585941f 100644 --- a/desktop-app/app/components/Drawer.js +++ b/desktop-app/app/components/Drawer.js @@ -11,8 +11,10 @@ import { USER_PREFERENCES, EXTENSIONS_MANAGER, NETWORK_CONFIGURATION, + LIVE_CSS_EDITOR, } from '../constants/DrawerContents'; import DoubleLeftArrowIcon from './icons/DoubleLeftArrow'; +import LiveCssEditor from './LiveCssEditor'; function Drawer(props) { const classes = useStyles(); @@ -64,6 +66,8 @@ const useStyles = makeStyles(theme => ({ function getDrawerContent(type) { switch (type) { + case LIVE_CSS_EDITOR: + return ; case DEVICE_MANAGER: return ; case USER_PREFERENCES: diff --git a/desktop-app/app/components/LeftIconsPane/index.js b/desktop-app/app/components/LeftIconsPane/index.js index 679f76b3..fa72602f 100644 --- a/desktop-app/app/components/LeftIconsPane/index.js +++ b/desktop-app/app/components/LeftIconsPane/index.js @@ -18,6 +18,7 @@ import { USER_PREFERENCES, EXTENSIONS_MANAGER, NETWORK_CONFIGURATION, + LIVE_CSS_EDITOR, } from '../../constants/DrawerContents'; import {makeStyles} from '@material-ui/core/styles'; @@ -58,6 +59,16 @@ const LeftIconsPane = props => { alignItems="center" className={cx(styles.utilitySection)} > + toggleState(LIVE_CSS_EDITOR)} + > +
CSS
+ { + const classes = useStyles(); + const commonClasses = useCommonStyles(); + const [css, setCss] = useState(`body { + background-color: black; + }`); + + const onApply = () => { + pubsub.publish(APPLY_CSS, [{css}]); + }; + + useEffect(onApply, [css]); + + return ( +
+
+ Live CSS Editor +
+
+ { + setCss(e.target.value); + }} + /> + +
+
+ ); +}; +export default LiveCssEditor; diff --git a/desktop-app/app/components/LiveCssEditor/useStyles.js b/desktop-app/app/components/LiveCssEditor/useStyles.js new file mode 100644 index 00000000..ede6a187 --- /dev/null +++ b/desktop-app/app/components/LiveCssEditor/useStyles.js @@ -0,0 +1,46 @@ +import {makeStyles} from '@material-ui/core/styles'; + +const useStyles = makeStyles(theme => ({ + preferenceName: { + fontSize: '14px', + }, + preferenceColor: { + width: '24px', + height: '20px', + margin: '0 10px', + border: 'transparent', + '& input': { + width: '26px', + height: '40px', + border: 'transparent', + }, + }, + sectionTitle: { + margin: '5px 0', + }, + sectionHeader: { + '&:after': { + content: '""', + flex: 1, + marginLeft: 5, + height: 1, + backgroundColor: theme.palette.text.primary, + }, + }, + marginTop: { + marginTop: '10px', + }, + permissionsSelectorSmallNote: { + color: theme.palette.text.primary, + margin: 0, + fontSize: '0.75rem', + marginTop: '10px', + textAlign: 'left', + fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", + fontWeight: 400, + lineHeight: 1.66, + letterSpacing: '0.03333em', + }, +})); + +export default useStyles; diff --git a/desktop-app/app/components/WebView/index.js b/desktop-app/app/components/WebView/index.js index 0d3dd0b5..d42f3870 100644 --- a/desktop-app/app/components/WebView/index.js +++ b/desktop-app/app/components/WebView/index.js @@ -29,6 +29,7 @@ import { SET_NETWORK_TROTTLING_PROFILE, OPEN_CONSOLE_FOR_DEVICE, PROXY_AUTH_ERROR, + APPLY_CSS, } from '../../constants/pubsubEvents'; import {CAPABILITIES} from '../../constants/devices'; @@ -83,6 +84,8 @@ class WebView extends Component { zoomLevel: null, }; this.subscriptions = []; + this.domLoaded = false; + this.liveCssKey = null; this.dbg = null; } @@ -95,6 +98,9 @@ class WebView extends Component { this.subscriptions.push( pubsub.subscribe('scroll', this.processScrollEvent) ); + this.subscriptions.push( + pubsub.subscribe(APPLY_CSS, this.processApplyCssEvent) + ); this.subscriptions.push(pubsub.subscribe('click', this.processClickEvent)); this.subscriptions.push( pubsub.subscribe(SCROLL_DOWN, this.processScrollDownEvent) @@ -571,6 +577,17 @@ class WebView extends Component { .catch(captureOnSentry); }; + processApplyCssEvent = async message => { + if (!message.css || !this.domLoaded) { + return; + } + if (this.liveCssKey) { + this.webviewRef.current.removeInsertedCSS(this.liveCssKey); + this.liveCssKey = null; + } + this.liveCssKey = await this.webviewRef.current.insertCSS(message.css); + }; + initEventTriggers = async webview => { await this.initBrowserSync(webview); this.getWebContentForId(webview.getWebContentsId()) @@ -584,6 +601,7 @@ class WebView extends Component { if (this.state.isUnplugged) { await this.closeBrowserSyncSocket(webview); } + this.domLoaded = true; }; hideScrollbar = () => { diff --git a/desktop-app/app/constants/DrawerContents.js b/desktop-app/app/constants/DrawerContents.js index 75341c39..c6092497 100644 --- a/desktop-app/app/constants/DrawerContents.js +++ b/desktop-app/app/constants/DrawerContents.js @@ -1,3 +1,4 @@ +export const LIVE_CSS_EDITOR = 'LIVE_CSS_EDITOR'; export const DEVICE_MANAGER = 'DEVICE_MANAGER'; export const SCREENSHOT_MANAGER = 'SCREENSHOT_MANAGER'; export const USER_PREFERENCES = 'USER_PREFERENCES'; diff --git a/desktop-app/app/constants/pubsubEvents.js b/desktop-app/app/constants/pubsubEvents.js index 16a0def9..78fbc465 100644 --- a/desktop-app/app/constants/pubsubEvents.js +++ b/desktop-app/app/constants/pubsubEvents.js @@ -10,6 +10,7 @@ export const SCREENSHOT_ALL_DEVICES = 'SCREENSHOT_ALL_DEVICES'; export const FLIP_ORIENTATION_ALL_DEVICES = 'FLIP_ORIENTATION_ALL_DEVICES'; export const TOGGLE_DEVICE_MUTED_STATE = 'TOGGLE_DEVICE_MUTED_STATE'; export const STOP_LOADING = 'STOP_LOADING'; +export const APPLY_CSS = 'APPLY_CSS'; export const SET_NETWORK_TROTTLING_PROFILE = 'SET_NETWORK_TROTTLING_PROFILE'; export const CLEAR_NETWORK_CACHE = 'CLEAR_NETWORK_CACHE'; diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js index 6661a150..22459521 100644 --- a/desktop-app/app/reducers/browser.js +++ b/desktop-app/app/reducers/browser.js @@ -38,7 +38,7 @@ import { INDIVIDUAL_LAYOUT, DEVTOOLS_MODES, } from '../constants/previewerLayouts'; -import {DEVICE_MANAGER} from '../constants/DrawerContents'; +import {DEVICE_MANAGER, LIVE_CSS_EDITOR} from '../constants/DrawerContents'; import { ACTIVE_DEVICES, USER_PREFERENCES, @@ -306,7 +306,7 @@ export default function browser( _getUserPreferences().drawerState === null ? true : _getUserPreferences().drawerState, - content: DEVICE_MANAGER, + content: LIVE_CSS_EDITOR, }, previewer: {layout: FLEXIGRID_LAYOUT}, filters: {[FILTER_FIELDS.OS]: [], [FILTER_FIELDS.DEVICE_TYPE]: []}, From f5ffe19be23cf86c8e146a3a6585ac71386deda5 Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Tue, 15 Sep 2020 21:09:03 +0530 Subject: [PATCH 02/12] Removed the Editor from sidebar and made it a floating panel --- desktop-app/app/components/Drawer.js | 3 - .../app/components/LeftIconsPane/index.js | 11 -- .../app/components/LiveCssEditor/index.js | 69 ++++++--- .../app/components/LiveCssEditor/useStyles.js | 52 ++----- .../app/components/ScrollControls/index.js | 131 +++++++++--------- desktop-app/app/constants/DrawerContents.js | 1 - desktop-app/app/reducers/browser.js | 4 +- desktop-app/package.json | 6 +- desktop-app/yarn.lock | 49 ++++++- 9 files changed, 175 insertions(+), 151 deletions(-) diff --git a/desktop-app/app/components/Drawer.js b/desktop-app/app/components/Drawer.js index b585941f..a096fbb6 100644 --- a/desktop-app/app/components/Drawer.js +++ b/desktop-app/app/components/Drawer.js @@ -11,7 +11,6 @@ import { USER_PREFERENCES, EXTENSIONS_MANAGER, NETWORK_CONFIGURATION, - LIVE_CSS_EDITOR, } from '../constants/DrawerContents'; import DoubleLeftArrowIcon from './icons/DoubleLeftArrow'; import LiveCssEditor from './LiveCssEditor'; @@ -66,8 +65,6 @@ const useStyles = makeStyles(theme => ({ function getDrawerContent(type) { switch (type) { - case LIVE_CSS_EDITOR: - return ; case DEVICE_MANAGER: return ; case USER_PREFERENCES: diff --git a/desktop-app/app/components/LeftIconsPane/index.js b/desktop-app/app/components/LeftIconsPane/index.js index fa72602f..679f76b3 100644 --- a/desktop-app/app/components/LeftIconsPane/index.js +++ b/desktop-app/app/components/LeftIconsPane/index.js @@ -18,7 +18,6 @@ import { USER_PREFERENCES, EXTENSIONS_MANAGER, NETWORK_CONFIGURATION, - LIVE_CSS_EDITOR, } from '../../constants/DrawerContents'; import {makeStyles} from '@material-ui/core/styles'; @@ -59,16 +58,6 @@ const LeftIconsPane = props => { alignItems="center" className={cx(styles.utilitySection)} > - toggleState(LIVE_CSS_EDITOR)} - > -
CSS
- { const classes = useStyles(); const commonClasses = useCommonStyles(); - const [css, setCss] = useState(`body { - background-color: black; - }`); + const [css, setCss] = useState(null); const onApply = () => { + if (!css) { + return; + } pubsub.publish(APPLY_CSS, [{css}]); }; useEffect(onApply, [css]); return ( -
-
- Live CSS Editor + +
+
Live CSS Editor
+
+ + + +
-
- { - setCss(e.target.value); - }} - /> - -
-
+ ); }; export default LiveCssEditor; diff --git a/desktop-app/app/components/LiveCssEditor/useStyles.js b/desktop-app/app/components/LiveCssEditor/useStyles.js index ede6a187..ceabd916 100644 --- a/desktop-app/app/components/LiveCssEditor/useStyles.js +++ b/desktop-app/app/components/LiveCssEditor/useStyles.js @@ -1,45 +1,23 @@ import {makeStyles} from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ - preferenceName: { - fontSize: '14px', + container: { + background: theme.palette.background.l2, + margin: 5, + padding: 10, + borderRadius: 2, + boxShadow: `0 ${theme.palette.mode({ + light: '0px', + dark: '3px', + })} 5px rgba(0, 0, 0, 0.35)`, }, - preferenceColor: { - width: '24px', - height: '20px', - margin: '0 10px', - border: 'transparent', - '& input': { - width: '26px', - height: '40px', - border: 'transparent', - }, + titleBar: { + cursor: 'move', + padding: '5px 0', }, - sectionTitle: { - margin: '5px 0', - }, - sectionHeader: { - '&:after': { - content: '""', - flex: 1, - marginLeft: 5, - height: 1, - backgroundColor: theme.palette.text.primary, - }, - }, - marginTop: { - marginTop: '10px', - }, - permissionsSelectorSmallNote: { - color: theme.palette.text.primary, - margin: 0, - fontSize: '0.75rem', - marginTop: '10px', - textAlign: 'left', - fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif", - fontWeight: 400, - lineHeight: 1.66, - letterSpacing: '0.03333em', + editor: { + minHeight: 200, + height: 'auto', }, })); diff --git a/desktop-app/app/components/ScrollControls/index.js b/desktop-app/app/components/ScrollControls/index.js index 0fb43e29..c7a5c218 100644 --- a/desktop-app/app/components/ScrollControls/index.js +++ b/desktop-app/app/components/ScrollControls/index.js @@ -1,5 +1,5 @@ // @flow -import React, {Component} from 'react'; +import React, {Component, useState} from 'react'; import cx from 'classnames'; import Grid from '@material-ui/core/Grid'; import Tooltip from '@material-ui/core/Tooltip'; @@ -16,6 +16,7 @@ import ZoomContainer from '../../containers/ZoomContainer'; import PrefersColorSchemeSwitch from '../PrefersColorSchemeSwitch'; import ToggleTouch from '../ToggleTouch'; import Muted from '../icons/Muted'; +import LiveCssEditor from '../LiveCssEditor'; const useStyles = makeStyles({ container: { @@ -41,75 +42,71 @@ const ScrollControls = ({ width: 25, }; + const [cssEditorOpen, setCssEditorOpen] = useState(true); + return ( -
- - - - - - -
- -
- - - - -
- -
- - - - -
- -
- - - - -
- -
- - - - +
+ + + + + + +
setCssEditorOpen(!cssEditorOpen)}>CSS
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ {browser.allDevicesMuted ? ( + + ) : ( + + )} +
+ + + -
- {browser.allDevicesMuted ? ( - - ) : ( - - )} -
- + +
+ +
+ + + + - - -
- -
- - - - - -
+
+ {cssEditorOpen && } + ); }; diff --git a/desktop-app/app/constants/DrawerContents.js b/desktop-app/app/constants/DrawerContents.js index c6092497..75341c39 100644 --- a/desktop-app/app/constants/DrawerContents.js +++ b/desktop-app/app/constants/DrawerContents.js @@ -1,4 +1,3 @@ -export const LIVE_CSS_EDITOR = 'LIVE_CSS_EDITOR'; export const DEVICE_MANAGER = 'DEVICE_MANAGER'; export const SCREENSHOT_MANAGER = 'SCREENSHOT_MANAGER'; export const USER_PREFERENCES = 'USER_PREFERENCES'; diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js index 22459521..6661a150 100644 --- a/desktop-app/app/reducers/browser.js +++ b/desktop-app/app/reducers/browser.js @@ -38,7 +38,7 @@ import { INDIVIDUAL_LAYOUT, DEVTOOLS_MODES, } from '../constants/previewerLayouts'; -import {DEVICE_MANAGER, LIVE_CSS_EDITOR} from '../constants/DrawerContents'; +import {DEVICE_MANAGER} from '../constants/DrawerContents'; import { ACTIVE_DEVICES, USER_PREFERENCES, @@ -306,7 +306,7 @@ export default function browser( _getUserPreferences().drawerState === null ? true : _getUserPreferences().drawerState, - content: LIVE_CSS_EDITOR, + content: DEVICE_MANAGER, }, previewer: {layout: FLEXIGRID_LAYOUT}, filters: {[FILTER_FIELDS.OS]: [], [FILTER_FIELDS.DEVICE_TYPE]: []}, diff --git a/desktop-app/package.json b/desktop-app/package.json index e3baa376..0856088e 100644 --- a/desktop-app/package.json +++ b/desktop-app/package.json @@ -277,8 +277,7 @@ "webpack-bundle-analyzer": "^3.4.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.8.0", - "webpack-merge": "^4.1.4", - "yarn": "^1.12.3" + "webpack-merge": "^4.1.4" }, "dependencies": { "@fortawesome/fontawesome-free": "^5.5.0", @@ -286,6 +285,7 @@ "@material-ui/icons": "^4.2.1", "@material-ui/lab": "^4.0.0-alpha.26", "@sentry/electron": "^1.5.2", + "ace-builds": "^1.4.12", "bluebird": "^3.7.2", "browser-sync": "^2.26.7", "classnames": "^2.2.6", @@ -309,12 +309,14 @@ "pubsub.js": "^1.5.2", "re-resizable": "^6.4.0", "react": "^16.13.1", + "react-ace": "^9.1.3", "react-beautiful-dnd": "^11.0.5", "react-dom": "^16.13.1", "react-hot-loader": "^4.8", "react-number-format": "^4.4.1", "react-redux": "^7.1.0", "react-resizable": "^1.10.1", + "react-rnd": "^10.2.2", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", "react-select": "^3.1.0", diff --git a/desktop-app/yarn.lock b/desktop-app/yarn.lock index 409d8939..e9ac6bff 100644 --- a/desktop-app/yarn.lock +++ b/desktop-app/yarn.lock @@ -2372,6 +2372,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7: mime-types "~2.1.24" negotiator "0.6.2" +ace-builds@^1.4.12, ace-builds@^1.4.6: + version "1.4.12" + resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7" + integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg== + acorn-globals@^4.1.0: version "4.3.4" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7" @@ -5967,6 +5972,11 @@ device-specs@^1.0.0: resolved "https://registry.yarnpkg.com/device-specs/-/device-specs-1.0.0.tgz#47b54577b9b159118bbb0a175177d0aa9c50a9c9" integrity sha512-fYXbFSeilT7bnKWFi4OERSPHdtaEoDGn4aUhV5Nly6/I+Tp6JZ/6Icmd7LVIF5euyodGpxz2e/bfUmDnIdSIDw== +diff-match-patch@^1.0.4: + version "1.0.5" + resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37" + integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw== + diff@^3.2.0, diff@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" @@ -13064,6 +13074,13 @@ rc@^1.2.7, rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" +re-resizable@6.3.2: + version "6.3.2" + resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.3.2.tgz#27cc984af6ea5dbafd2b79f64c5224a6e1722fbe" + integrity sha512-ngxe4XBSb46vfwXjAwpURacVDig/pPt1kHRhcKlRRIoGICmo4aQHr725jurezepp1pm5jSC6iQhyLYfx3zOC3w== + dependencies: + fast-memoize "^2.5.1" + re-resizable@^6.4.0: version "6.5.4" resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.5.4.tgz#909a1e37f9d1a3afd356893a5779a030167be641" @@ -13071,6 +13088,17 @@ re-resizable@^6.4.0: dependencies: fast-memoize "^2.5.1" +react-ace@^9.1.3: + version "9.1.3" + resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-9.1.3.tgz#848dc3741d5460f3ac73468b6c39879aab9238bc" + integrity sha512-1TZBs/9hFGgPuzu6DUiBogyhRA5Z1Po2wzPfZslbrTFGQtbNe+JXHuPoJNlUu/uerElzOLLsuJEDTO9FfLnZJA== + dependencies: + ace-builds "^1.4.6" + diff-match-patch "^1.0.4" + lodash.get "^4.4.2" + lodash.isequal "^4.5.0" + prop-types "^15.7.2" + react-beautiful-dnd@^11.0.5: version "11.0.5" resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-11.0.5.tgz#16b1dbd4d6493de0cb3f842cad57c7e9e1ff5fe7" @@ -13095,7 +13123,7 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" -react-draggable@^4.0.3: +react-draggable@4.4.3, react-draggable@^4.0.3: version "4.4.3" resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3" integrity sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w== @@ -13160,6 +13188,15 @@ react-resizable@^1.10.1: prop-types "15.x" react-draggable "^4.0.3" +react-rnd@^10.2.2: + version "10.2.2" + resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.2.2.tgz#378017178179c9e6cdca57280dee22cf48925b5a" + integrity sha512-UoQnNehseKEspimfPFaO0gN0vSVJ8uCZeG39nCibUVyGTjZ5d+bnY/zHEp9SObHQ9tKW4vFSa9+8Mf7QZrQrUw== + dependencies: + re-resizable "6.3.2" + react-draggable "4.4.3" + tslib "2.0.0" + react-router-dom@^5.0.1: version "5.2.0" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662" @@ -15779,6 +15816,11 @@ tsconfig-paths@^3.9.0: minimist "^1.2.0" strip-bom "^3.0.0" +tslib@2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3" + integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g== + tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.13.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" @@ -16898,11 +16940,6 @@ yargs@^15.1.0, yargs@^15.3.1, yargs@^15.4.1: y18n "^4.0.0" yargs-parser "^18.1.2" -yarn@^1.12.3: - version "1.22.4" - resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.4.tgz#01c1197ca5b27f21edc8bc472cd4c8ce0e5a470e" - integrity sha512-oYM7hi/lIWm9bCoDMEWgffW8aiNZXCWeZ1/tGy0DWrN6vmzjCXIKu2Y21o8DYVBUtiktwKcNoxyGl/2iKLUNGA== - yauzl@^2.10.0: version "2.10.0" resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9" From 552383b9c5137e6a866c86ab173aceded4918584 Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Wed, 30 Sep 2020 09:49:40 +0530 Subject: [PATCH 03/12] Live CSS Reducer and style changes --- desktop-app/app/actions/browser.js | 19 +++++++++++++++++++ .../app/components/LiveCssEditor/index.js | 15 +++++++++++---- .../app/components/LiveCssEditor/useStyles.js | 1 + .../app/components/PermissionPopup/index.js | 13 +++++++++---- .../PermissionPopup/styles.module.css | 4 ---- .../app/components/ScrollControls/index.js | 14 +++++++++----- desktop-app/app/reducers/browser.js | 5 +++++ 7 files changed, 54 insertions(+), 17 deletions(-) diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js index 38e5228f..dd3f3ff2 100644 --- a/desktop-app/app/actions/browser.js +++ b/desktop-app/app/actions/browser.js @@ -27,6 +27,7 @@ export const NEW_ZOOM_LEVEL = 'NEW_ZOOM_LEVEL'; export const NEW_SCROLL_POSITION = 'NEW_SCROLL_POSITION'; export const NEW_NAVIGATOR_STATUS = 'NEW_NAVIGATOR_STATUS'; export const NEW_INSPECTOR_STATUS = 'NEW_INSPECTOR_STATUS'; +export const NEW_CSS_EDITOR_STATUS = 'NEW_CSS_EDITOR_STATUS'; export const NEW_DRAWER_CONTENT = 'NEW_DRAWER_CONTENT'; export const NEW_PREVIEWER_CONFIG = 'NEW_PREVIEWER_CONFIG'; export const NEW_ACTIVE_DEVICES = 'NEW_ACTIVE_DEVICES'; @@ -85,6 +86,13 @@ export function newInspectorState(status) { }; } +export function newCSSEditorState(status) { + return { + type: NEW_CSS_EDITOR_STATUS, + status, + }; +} + export function newUserPreferences(userPreferences) { return { type: NEW_USER_PREFERENCES, @@ -706,6 +714,17 @@ export function toggleInspector() { }; } +export function toggleCSSEditor() { + console.log('toggleCSSEditor'); + return (dispatch: Dispatch, getState: RootStateType) => { + const { + browser: {isCSSEditorOpen}, + } = getState(); + + dispatch(newCSSEditorState(!isCSSEditorOpen)); + }; +} + export function deviceLoadingChange(deviceInfo) { return (dispatch: Dispatch, getState: RootStateType) => { dispatch(newDeviceLoading(deviceInfo)); diff --git a/desktop-app/app/components/LiveCssEditor/index.js b/desktop-app/app/components/LiveCssEditor/index.js index a4f68f0b..b8175fbb 100644 --- a/desktop-app/app/components/LiveCssEditor/index.js +++ b/desktop-app/app/components/LiveCssEditor/index.js @@ -15,7 +15,7 @@ import 'ace-builds/src-noconflict/theme-github'; import useCommonStyles from '../useCommonStyles'; import useStyles from './useStyles'; import TextAreaWithCopyButton from '../../utils/TextAreaWithCopyButton'; -import {Button} from '@material-ui/core'; +import Button from '@material-ui/core/Button'; import {APPLY_CSS} from '../../constants/pubsubEvents'; const LiveCssEditor = ({ @@ -55,8 +55,8 @@ const LiveCssEditor = ({ className={classes.editor} placeholder="Enter CSS to apply" mode="css" - theme="monokai" - name="blah2" + theme="twilight" + name="css" onChange={setCss} fontSize={14} showPrintMargin={true} @@ -74,7 +74,14 @@ const LiveCssEditor = ({ }} /> - +
diff --git a/desktop-app/app/components/LiveCssEditor/useStyles.js b/desktop-app/app/components/LiveCssEditor/useStyles.js index ceabd916..195ea452 100644 --- a/desktop-app/app/components/LiveCssEditor/useStyles.js +++ b/desktop-app/app/components/LiveCssEditor/useStyles.js @@ -18,6 +18,7 @@ const useStyles = makeStyles(theme => ({ editor: { minHeight: 200, height: 'auto', + marginBottom: 10, }, })); diff --git a/desktop-app/app/components/PermissionPopup/index.js b/desktop-app/app/components/PermissionPopup/index.js index 1f2cf00e..cfbbc576 100644 --- a/desktop-app/app/components/PermissionPopup/index.js +++ b/desktop-app/app/components/PermissionPopup/index.js @@ -29,6 +29,12 @@ const useStyles = makeStyles(theme => ({ top: theme.spacing(1), color: theme.palette.grey[500], }, + header: { + display: 'flex', + justifyContent: 'space-between', + margin: '10px', + fontWeight: '500', + }, themeBackground: { backgroundColor: theme.palette.mode({ light: theme.palette.grey[100], @@ -125,19 +131,18 @@ export default function PermissionPopup() { [styles.permissionPopupActive]: permissionInfos.length !== 0, })} > -

- Permission Request +
+
Permission Request
handleClose(null)} size="small" > -

+ {getMessage(permissionInfos[0])} diff --git a/desktop-app/app/components/PermissionPopup/styles.module.css b/desktop-app/app/components/PermissionPopup/styles.module.css index aa6af44b..1bad47e7 100644 --- a/desktop-app/app/components/PermissionPopup/styles.module.css +++ b/desktop-app/app/components/PermissionPopup/styles.module.css @@ -15,10 +15,6 @@ height: auto; } -.permissionPopupTitle { - margin: 14px; -} - .permissionPopupMsg { margin-bottom: 0 !important; font-size: 0.9rem !important; diff --git a/desktop-app/app/components/ScrollControls/index.js b/desktop-app/app/components/ScrollControls/index.js index c7a5c218..b9856cce 100644 --- a/desktop-app/app/components/ScrollControls/index.js +++ b/desktop-app/app/components/ScrollControls/index.js @@ -31,6 +31,7 @@ const ScrollControls = ({ screenshotAllDevices, flipOrientationAllDevices, toggleInspector, + toggleCSSEditor, onAllDevicesMutedChange, }) => { const classes = useStyles(); @@ -42,8 +43,6 @@ const ScrollControls = ({ width: 25, }; - const [cssEditorOpen, setCssEditorOpen] = useState(true); - return ( <>
@@ -51,9 +50,14 @@ const ScrollControls = ({ - + -
setCssEditorOpen(!cssEditorOpen)}>CSS
+
CSS
 @@ -105,7 +109,7 @@ const ScrollControls = ({
- {cssEditorOpen && } + {browser.isCSSEditorOpen && } ); }; diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js index b4093fa6..49dc5598 100644 --- a/desktop-app/app/reducers/browser.js +++ b/desktop-app/app/reducers/browser.js @@ -23,6 +23,7 @@ import { TOGGLE_ALL_DEVICES_MUTED, TOGGLE_DEVICE_MUTED, NEW_THEME, + NEW_CSS_EDITOR_STATUS, } from '../actions/browser'; import { CHANGE_ACTIVE_THROTTLING_PROFILE, @@ -173,6 +174,7 @@ export type BrowserStateType = { userPreferences: UserPreferenceType, bookmarks: BookmarksType, devToolsConfig: DevToolsConfigType, + isCSSEditorOpen: boolean, isInspecting: boolean, windowSize: WindowSizeType, allDevicesMuted: boolean, @@ -326,6 +328,7 @@ export default function browser( ), }, isInspecting: false, + isCSSEditorOpen: true, windowSize: getWindowSize(), allDevicesMuted: false, networkConfiguration: _getNetworkConfiguration(), @@ -427,6 +430,8 @@ export default function browser( newState.userPreferences = newUserPreferences; } return newState; + case NEW_CSS_EDITOR_STATUS: + return {...state, isCSSEditorOpen: action.status}; case NEW_INSPECTOR_STATUS: return {...state, isInspecting: action.status}; case NEW_WINDOW_SIZE: From b94a0382c3cdb9ffbd34daca386a42dd6cc105c6 Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Fri, 2 Oct 2020 16:49:23 +0530 Subject: [PATCH 04/12] CSSEditor Positioning --- desktop-app/app/actions/browser.js | 7 +- .../app/components/DevicesPreviewer/index.js | 119 +++++++++++------- .../components/DevicesPreviewer/useStyles.js | 4 + .../app/components/LiveCssEditor/index.js | 102 +++++++-------- .../app/components/LiveCssEditor/useStyles.js | 7 ++ .../app/components/ScrollControls/index.js | 7 +- desktop-app/app/constants/previewerLayouts.js | 8 ++ desktop-app/app/reducers/browser.js | 13 +- 8 files changed, 159 insertions(+), 108 deletions(-) diff --git a/desktop-app/app/actions/browser.js b/desktop-app/app/actions/browser.js index dd3f3ff2..f4f4dda8 100644 --- a/desktop-app/app/actions/browser.js +++ b/desktop-app/app/actions/browser.js @@ -715,13 +715,14 @@ export function toggleInspector() { } export function toggleCSSEditor() { - console.log('toggleCSSEditor'); return (dispatch: Dispatch, getState: RootStateType) => { const { - browser: {isCSSEditorOpen}, + browser: { + CSSEditor: {isOpen}, + }, } = getState(); - dispatch(newCSSEditorState(!isCSSEditorOpen)); + dispatch(newCSSEditorState(!isOpen)); }; } diff --git a/desktop-app/app/components/DevicesPreviewer/index.js b/desktop-app/app/components/DevicesPreviewer/index.js index 6d3f4378..9b766281 100644 --- a/desktop-app/app/components/DevicesPreviewer/index.js +++ b/desktop-app/app/components/DevicesPreviewer/index.js @@ -9,16 +9,19 @@ import { FLEXIGRID_LAYOUT, INDIVIDUAL_LAYOUT, DEVTOOLS_MODES, + CSS_EDITOR_MODES, } from '../../constants/previewerLayouts'; import {isDeviceEligible} from '../../utils/filterUtils'; import {getDeviceIcon} from '../../utils/iconUtils'; import useStyes from './useStyles'; +import LiveCssEditor from '../LiveCssEditor'; export default function DevicesPreviewer(props) { const { browser: { devices, address, + CSSEditor, zoomLevel, previewer: {layout}, }, @@ -61,56 +64,78 @@ export default function DevicesPreviewer(props) { props.setFocusedDevice(devicesAfterFiltering[newTabIndex].id); }; + const editor = CSSEditor.isOpen && ( + + ); + return ( -
- {layout === INDIVIDUAL_LAYOUT && ( - + {(CSSEditor.position === CSS_EDITOR_MODES.LEFT || + CSSEditor.position === CSS_EDITOR_MODES.UNDOCKED || + CSSEditor.position === CSS_EDITOR_MODES.TOP) && + editor} +
+ {layout === INDIVIDUAL_LAYOUT && ( + + + {devicesAfterFiltering.map(device => ( + + {getDeviceIcon(device.type)} + {device.name} + + ))} + + + )} +
- - {devicesAfterFiltering.map(device => ( - - {getDeviceIcon(device.type)} - {device.name} - - ))} - - - )} -
- {devices.map((device, index) => ( -
-
- ))} + {devices.map((device, index) => ( +
+
+ ))} +
+ {(CSSEditor.position === CSS_EDITOR_MODES.RIGHT || + CSSEditor.position === CSS_EDITOR_MODES.BOTTOM) && + editor}
); } diff --git a/desktop-app/app/components/DevicesPreviewer/useStyles.js b/desktop-app/app/components/DevicesPreviewer/useStyles.js index fecf6b2e..5ddadb51 100644 --- a/desktop-app/app/components/DevicesPreviewer/useStyles.js +++ b/desktop-app/app/components/DevicesPreviewer/useStyles.js @@ -2,6 +2,10 @@ import {makeStyles} from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ container: { + display: 'flex', + height: 'inherit', + }, + previewer: { display: 'flex', flex: '1', height: '100%', diff --git a/desktop-app/app/components/LiveCssEditor/index.js b/desktop-app/app/components/LiveCssEditor/index.js index b8175fbb..186ee2de 100644 --- a/desktop-app/app/components/LiveCssEditor/index.js +++ b/desktop-app/app/components/LiveCssEditor/index.js @@ -17,13 +17,9 @@ import useStyles from './useStyles'; import TextAreaWithCopyButton from '../../utils/TextAreaWithCopyButton'; import Button from '@material-ui/core/Button'; import {APPLY_CSS} from '../../constants/pubsubEvents'; +import {CSS_EDITOR_MODES} from '../../constants/previewerLayouts'; -const LiveCssEditor = ({ - devToolsConfig, - userPreferences, - onUserPreferencesChange, - onDevToolsModeChange, -}) => { +const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => { const classes = useStyles(); const commonClasses = useCommonStyles(); const [css, setCss] = useState(null); @@ -38,53 +34,57 @@ const LiveCssEditor = ({ useEffect(onApply, [css]); return ( - -
-
Live CSS Editor
-
- +
+ +
+
Live CSS Editor
+
+ - + +
-
- + +
); }; export default LiveCssEditor; diff --git a/desktop-app/app/components/LiveCssEditor/useStyles.js b/desktop-app/app/components/LiveCssEditor/useStyles.js index 195ea452..9290c441 100644 --- a/desktop-app/app/components/LiveCssEditor/useStyles.js +++ b/desktop-app/app/components/LiveCssEditor/useStyles.js @@ -1,6 +1,13 @@ import {makeStyles} from '@material-ui/core/styles'; const useStyles = makeStyles(theme => ({ + wrapper: { + position: 'relative', + display: 'flex', + flexShrink: 0, + width: 400, + height: 400, + }, container: { background: theme.palette.background.l2, margin: 5, diff --git a/desktop-app/app/components/ScrollControls/index.js b/desktop-app/app/components/ScrollControls/index.js index b9856cce..a8d8def6 100644 --- a/desktop-app/app/components/ScrollControls/index.js +++ b/desktop-app/app/components/ScrollControls/index.js @@ -16,7 +16,6 @@ import ZoomContainer from '../../containers/ZoomContainer'; import PrefersColorSchemeSwitch from '../PrefersColorSchemeSwitch'; import ToggleTouch from '../ToggleTouch'; import Muted from '../icons/Muted'; -import LiveCssEditor from '../LiveCssEditor'; const useStyles = makeStyles({ container: { @@ -53,11 +52,12 @@ const ScrollControls = ({ -
CSS
+
CSS
 @@ -109,7 +109,6 @@ const ScrollControls = ({
- {browser.isCSSEditorOpen && } ); }; diff --git a/desktop-app/app/constants/previewerLayouts.js b/desktop-app/app/constants/previewerLayouts.js index efd62b28..39e76a07 100644 --- a/desktop-app/app/constants/previewerLayouts.js +++ b/desktop-app/app/constants/previewerLayouts.js @@ -7,3 +7,11 @@ export const DEVTOOLS_MODES = { RIGHT: 'RIGHT', UNDOCKED: 'UNDOCKED', }; + +export const CSS_EDITOR_MODES = { + BOTTOM: 'BOTTOM', + LEFT: 'LEFT', + RIGHT: 'RIGHT', + TOP: 'TOP', + UNDOCKED: 'UNDOCKED', +}; diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js index 49dc5598..d686bc3c 100644 --- a/desktop-app/app/reducers/browser.js +++ b/desktop-app/app/reducers/browser.js @@ -38,6 +38,7 @@ import { FLEXIGRID_LAYOUT, INDIVIDUAL_LAYOUT, DEVTOOLS_MODES, + CSS_EDITOR_MODES, } from '../constants/previewerLayouts'; import {DEVICE_MANAGER} from '../constants/DrawerContents'; import { @@ -160,6 +161,12 @@ type NetworkConfigurationType = { proxy: NetworkProxyProfileType, }; +type CSSEditorStateType = { + isOpen: boolean, + position: String, + content: String, +}; + export type BrowserStateType = { devices: Array, homepage: string, @@ -174,7 +181,7 @@ export type BrowserStateType = { userPreferences: UserPreferenceType, bookmarks: BookmarksType, devToolsConfig: DevToolsConfigType, - isCSSEditorOpen: boolean, + cssEditor: CSSEditorStateType, isInspecting: boolean, windowSize: WindowSizeType, allDevicesMuted: boolean, @@ -328,7 +335,7 @@ export default function browser( ), }, isInspecting: false, - isCSSEditorOpen: true, + CSSEditor: {isOpen: true, position: CSS_EDITOR_MODES.TOP, content: ''}, windowSize: getWindowSize(), allDevicesMuted: false, networkConfiguration: _getNetworkConfiguration(), @@ -431,7 +438,7 @@ export default function browser( } return newState; case NEW_CSS_EDITOR_STATUS: - return {...state, isCSSEditorOpen: action.status}; + return {...state, CSSEditor: {...state.CSSEditor, isOpen: action.status}}; case NEW_INSPECTOR_STATUS: return {...state, isInspecting: action.status}; case NEW_WINDOW_SIZE: From b16ac6ab513d367d7dfe6327a6bc011941d0749a Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Fri, 2 Oct 2020 22:16:51 +0530 Subject: [PATCH 05/12] CSSEditor resizing implemented --- .../app/components/DevicesPreviewer/index.js | 9 +++---- .../app/components/LiveCssEditor/index.js | 27 ++++++++++++++++--- .../app/components/LiveCssEditor/useStyles.js | 2 -- desktop-app/app/constants/previewerLayouts.js | 6 +++++ desktop-app/app/reducers/browser.js | 2 +- 5 files changed, 34 insertions(+), 12 deletions(-) diff --git a/desktop-app/app/components/DevicesPreviewer/index.js b/desktop-app/app/components/DevicesPreviewer/index.js index 9b766281..dcd1ec3b 100644 --- a/desktop-app/app/components/DevicesPreviewer/index.js +++ b/desktop-app/app/components/DevicesPreviewer/index.js @@ -10,6 +10,7 @@ import { INDIVIDUAL_LAYOUT, DEVTOOLS_MODES, CSS_EDITOR_MODES, + isHorizontallyStacked, } from '../../constants/previewerLayouts'; import {isDeviceEligible} from '../../utils/filterUtils'; import {getDeviceIcon} from '../../utils/iconUtils'; @@ -72,11 +73,9 @@ export default function DevicesPreviewer(props) {
{(CSSEditor.position === CSS_EDITOR_MODES.LEFT || diff --git a/desktop-app/app/components/LiveCssEditor/index.js b/desktop-app/app/components/LiveCssEditor/index.js index 186ee2de..d62243ee 100644 --- a/desktop-app/app/components/LiveCssEditor/index.js +++ b/desktop-app/app/components/LiveCssEditor/index.js @@ -17,12 +17,22 @@ import useStyles from './useStyles'; import TextAreaWithCopyButton from '../../utils/TextAreaWithCopyButton'; import Button from '@material-ui/core/Button'; import {APPLY_CSS} from '../../constants/pubsubEvents'; -import {CSS_EDITOR_MODES} from '../../constants/previewerLayouts'; +import { + CSS_EDITOR_MODES, + isHorizontallyStacked, + isVeriticallyStacked, +} from '../../constants/previewerLayouts'; 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 + ); + const [width, setWidth] = useState( + isHorizontallyStacked(position) ? '100%' : 400 + ); const onApply = () => { if (!css) { @@ -34,18 +44,27 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => { useEffect(onApply, [css]); return ( -
+
{ + const {width: _width, height: _height} = ref.getBoundingClientRect(); + if (width !== _width) { + setWidth(_width); + } + if (height !== _height) { + setHeight(_height); + } + }} >
Live CSS Editor
diff --git a/desktop-app/app/components/LiveCssEditor/useStyles.js b/desktop-app/app/components/LiveCssEditor/useStyles.js index 9290c441..5874a9b3 100644 --- a/desktop-app/app/components/LiveCssEditor/useStyles.js +++ b/desktop-app/app/components/LiveCssEditor/useStyles.js @@ -5,8 +5,6 @@ const useStyles = makeStyles(theme => ({ position: 'relative', display: 'flex', flexShrink: 0, - width: 400, - height: 400, }, container: { background: theme.palette.background.l2, diff --git a/desktop-app/app/constants/previewerLayouts.js b/desktop-app/app/constants/previewerLayouts.js index 39e76a07..2b657eb2 100644 --- a/desktop-app/app/constants/previewerLayouts.js +++ b/desktop-app/app/constants/previewerLayouts.js @@ -15,3 +15,9 @@ export const CSS_EDITOR_MODES = { TOP: 'TOP', UNDOCKED: 'UNDOCKED', }; + +export const isVeriticallyStacked = mode => + mode === CSS_EDITOR_MODES.LEFT || mode === CSS_EDITOR_MODES.RIGHT; + +export const isHorizontallyStacked = mode => + mode === CSS_EDITOR_MODES.TOP || mode === CSS_EDITOR_MODES.BOTTOM; diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js index d686bc3c..22124766 100644 --- a/desktop-app/app/reducers/browser.js +++ b/desktop-app/app/reducers/browser.js @@ -335,7 +335,7 @@ export default function browser( ), }, isInspecting: false, - CSSEditor: {isOpen: true, position: CSS_EDITOR_MODES.TOP, content: ''}, + CSSEditor: {isOpen: true, position: CSS_EDITOR_MODES.LEFT, content: ''}, windowSize: getWindowSize(), allDevicesMuted: false, networkConfiguration: _getNetworkConfiguration(), From f9d8ac4ff701fd6e733eb6b74d15b78c706612f4 Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Sun, 4 Oct 2020 11:29:51 +0530 Subject: [PATCH 06/12] Header(and permission popup) stays above --- desktop-app/app/components/Header/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/desktop-app/app/components/Header/index.js b/desktop-app/app/components/Header/index.js index 1cc5f88a..18d8c57e 100644 --- a/desktop-app/app/components/Header/index.js +++ b/desktop-app/app/components/Header/index.js @@ -68,7 +68,7 @@ const useStyles = makeStyles(theme => ({ light: '0px', dark: '3px', })} 5px rgba(0, 0, 0, 0.35)`, - zIndex: 5, + zIndex: 500, }, firstRow: { display: 'flex', From 67dc3fad9de2fa6f3f1b6201068932810b22d33c Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Sun, 4 Oct 2020 13:31:26 +0530 Subject: [PATCH 07/12] 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, }, })); From 95a374fa3be6cdcc644ab462b2667b393b26f573 Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Sun, 4 Oct 2020 16:11:36 +0530 Subject: [PATCH 08/12] Left and undocked positioning polished --- .../app/components/DevicesPreviewer/index.js | 7 +- .../app/components/LiveCssEditor/index.js | 81 +++++++++++++------ .../app/components/LiveCssEditor/useStyles.js | 4 +- 3 files changed, 66 insertions(+), 26 deletions(-) diff --git a/desktop-app/app/components/DevicesPreviewer/index.js b/desktop-app/app/components/DevicesPreviewer/index.js index dcd1ec3b..4221334b 100644 --- a/desktop-app/app/components/DevicesPreviewer/index.js +++ b/desktop-app/app/components/DevicesPreviewer/index.js @@ -21,6 +21,7 @@ export default function DevicesPreviewer(props) { const { browser: { devices, + devToolsConfig, address, CSSEditor, zoomLevel, @@ -66,7 +67,11 @@ export default function DevicesPreviewer(props) { }; const editor = CSSEditor.isOpen && ( - + ); return ( diff --git a/desktop-app/app/components/LiveCssEditor/index.js b/desktop-app/app/components/LiveCssEditor/index.js index 8efa34d2..b55dcae9 100644 --- a/desktop-app/app/components/LiveCssEditor/index.js +++ b/desktop-app/app/components/LiveCssEditor/index.js @@ -19,6 +19,7 @@ import Button from '@material-ui/core/Button'; import {APPLY_CSS} from '../../constants/pubsubEvents'; import { CSS_EDITOR_MODES, + DEVTOOLS_MODES, isHorizontallyStacked, isVeriticallyStacked, } from '../../constants/previewerLayouts'; @@ -37,20 +38,52 @@ const getResizingDirections = position => { case CSS_EDITOR_MODES.BOTTOM: return {top: true}; default: - return null; + return true; } }; -const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => { +const computeHeight = (position, devToolsConfig) => { + if (position === CSS_EDITOR_MODES.UNDOCKED) { + return null; + } + return isVeriticallyStacked(position) + ? `calc(100vh - ${10 + + headerHeight + + statusBarHeight + + (devToolsConfig.open && devToolsConfig.mode === DEVTOOLS_MODES.BOTTOM + ? devToolsConfig.size.height + : 0)}px)` + : 300; +}; + +const computeWidth = (position, devToolsConfig) => { + if (position === CSS_EDITOR_MODES.UNDOCKED) { + return null; + } + return isHorizontallyStacked(position) ? 'calc(100vw - 50px)' : 400; +}; + +const headerHeight = 70; +const statusBarHeight = 20; + +const LiveCssEditor = ({ + browser, + isOpen, + position, + content, + boundaryClass, + devToolsConfig, +}) => { const classes = useStyles(); const commonClasses = useCommonStyles(); const [css, setCss] = useState(null); - const [height, setHeight] = useState( - isVeriticallyStacked(position) ? 'calc(100vh - 70px - 30px)' : 300 - ); - const [width, setWidth] = useState( - isHorizontallyStacked(position) ? 'calc(100vw - 50px)' : 400 - ); + console.log('devToolsConfig', devToolsConfig); + const [height, setHeight] = useState(computeHeight(position, devToolsConfig)); + const [width, setWidth] = useState(computeWidth(position, devToolsConfig)); + + useEffect(() => { + setHeight(computeHeight(position, devToolsConfig)); + }, [devToolsConfig]); const onApply = () => { if (!css) { @@ -61,13 +94,13 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => { useEffect(onApply, [css]); + const isUndocked = useMemo(() => position === CSS_EDITOR_MODES.UNDOCKED, [ + position, + ]); const enableResizing = useMemo(() => getResizingDirections(position), [ position, ]); - const disableDragging = useMemo( - () => position !== CSS_EDITOR_MODES.UNDOCKED, - [position] - ); + const disableDragging = useMemo(() => !isUndocked, [isUndocked]); return (
@@ -77,13 +110,16 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => { enableResizing={enableResizing} style={{zIndex: 100}} default={{ - width: '100%', - height: '100%', - x: 0, - y: 0, + width: isUndocked ? 400 : '100%', + height: isUndocked ? 300 : '100%', + x: isUndocked ? 100 : 0, + y: isUndocked ? 100 : 0, }} bounds={`.${boundaryClass}`} onResize={(e, dir, ref) => { + if (isUndocked) { + return; + } const {width: _width, height: _height} = ref.getBoundingClientRect(); if (width !== _width) { setWidth(_width); @@ -97,17 +133,15 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
Live CSS Editor{' '} -
{}}> - Dock to Right{' '} - {}}> - - -
+
{}}>Un-dock Editor
@@ -133,7 +167,6 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => { tabSize: 2, }} /> -
@@ -209,14 +216,28 @@ const LiveCssEditor = ({ tabSize: 2, }} /> - + setAuotApply(e.target.checked)} + name="Auto apply changes" + color="primary" + size="small" + /> + } + label="Auto apply changes" + /> + {!autoApply && ( + + )}
diff --git a/desktop-app/app/components/Renderer/index.js b/desktop-app/app/components/Renderer/index.js index 48838772..d311bbd8 100644 --- a/desktop-app/app/components/Renderer/index.js +++ b/desktop-app/app/components/Renderer/index.js @@ -62,9 +62,11 @@ function Renderer(props) {
-
+ {props.device.isMuted ? 'Unmute Audio' : 'Mute Audio'} -
+
diff --git a/desktop-app/app/components/useCreateTheme.js b/desktop-app/app/components/useCreateTheme.js index bae9bad6..054b6dd0 100644 --- a/desktop-app/app/components/useCreateTheme.js +++ b/desktop-app/app/components/useCreateTheme.js @@ -10,7 +10,10 @@ function useCreateTheme() { ]); } +const themeProps = {MuiButtonBase: {disableRipple: true}}; + const lightTheme = { + props: themeProps, palette: { type: 'light', primary: { @@ -50,6 +53,7 @@ const lightTheme = { }; const darkTheme = { + props: themeProps, palette: { type: 'dark', primary: { From 62d98123c19bd0d55dfa4426783deb9d798f1bcf Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Sun, 4 Oct 2020 20:25:01 +0530 Subject: [PATCH 11/12] Added a new icon --- .../app/components/LiveCssEditor/index.js | 11 +++++++- .../app/components/LiveCssEditor/useStyles.js | 3 +- .../app/components/ScrollControls/index.js | 5 +++- desktop-app/app/components/icons/CSSEditor.js | 28 +++++++++++++++++++ 4 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 desktop-app/app/components/icons/CSSEditor.js diff --git a/desktop-app/app/components/LiveCssEditor/index.js b/desktop-app/app/components/LiveCssEditor/index.js index b246ed4b..7d6cfed5 100644 --- a/desktop-app/app/components/LiveCssEditor/index.js +++ b/desktop-app/app/components/LiveCssEditor/index.js @@ -27,6 +27,7 @@ import KebabMenu from '../KebabMenu'; import {Tooltip} from '@material-ui/core'; import DockRight from '../icons/DockRight'; import {debounce} from 'lodash'; +import CSSEditor from '../icons/CSSEditor'; const getResizingDirections = position => { switch (position) { @@ -173,7 +174,15 @@ const LiveCssEditor = ({ } )} > - Live CSS Editor + + + Live CSS Editor + {position !== CSS_EDITOR_MODES.UNDOCKED && ( ({ })} 5px rgba(0, 0, 0, 0.35)`, }, titleBar: { - padding: '5px 0', + margin: '5px 0 10px', + alignItems: 'center', }, dragHandle: { cursor: 'move', diff --git a/desktop-app/app/components/ScrollControls/index.js b/desktop-app/app/components/ScrollControls/index.js index a8d8def6..1a737abe 100644 --- a/desktop-app/app/components/ScrollControls/index.js +++ b/desktop-app/app/components/ScrollControls/index.js @@ -16,6 +16,7 @@ import ZoomContainer from '../../containers/ZoomContainer'; import PrefersColorSchemeSwitch from '../PrefersColorSchemeSwitch'; import ToggleTouch from '../ToggleTouch'; import Muted from '../icons/Muted'; +import CSSEditor from '../icons/CSSEditor'; const useStyles = makeStyles({ container: { @@ -57,7 +58,9 @@ const ScrollControls = ({ onClick={toggleCSSEditor} > -
CSS
+
+ +
diff --git a/desktop-app/app/components/icons/CSSEditor.js b/desktop-app/app/components/icons/CSSEditor.js new file mode 100644 index 00000000..acf2bb57 --- /dev/null +++ b/desktop-app/app/components/icons/CSSEditor.js @@ -0,0 +1,28 @@ +import React from 'react'; + +const CSSEditor = ({width, height, color, padding, margin}) => ( + + + + + +); + +export default CSSEditor; From 61c6b42a1ad75e42895579054e29ab121a69251a Mon Sep 17 00:00:00 2001 From: Manoj Vivek Date: Tue, 13 Oct 2020 09:51:41 +0530 Subject: [PATCH 12/12] Disabled the touch context menu for the CSS Editor --- desktop-app/app/app.global.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/desktop-app/app/app.global.css b/desktop-app/app/app.global.css index 6d1baef7..9d6fc596 100644 --- a/desktop-app/app/app.global.css +++ b/desktop-app/app/app.global.css @@ -115,3 +115,7 @@ Add device form styles */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0); } + +.ace_mobile-menu { + display: none; +}