diff --git a/desktop-app/package.json b/desktop-app/package.json
index c20c06c2..69206093 100644
--- a/desktop-app/package.json
+++ b/desktop-app/package.json
@@ -42,7 +42,7 @@
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
- "cross-env NODE_ENV=development eslint --cache"
+ "cross-env NODE_ENV=development eslint --cache --fix"
],
"*.json,.{eslintrc,prettierrc}": [
"prettier --ignore-path .eslintignore --parser json --write"
diff --git a/desktop-app/src/common/constants.ts b/desktop-app/src/common/constants.ts
index 21fc5e86..76f562bc 100644
--- a/desktop-app/src/common/constants.ts
+++ b/desktop-app/src/common/constants.ts
@@ -5,3 +5,11 @@ export const DOCK_POSITION = {
RIGHT: 'RIGHT',
UNDOCKED: 'UNDOCKED',
} as const;
+
+export const PREVIEW_LAYOUTS = {
+ COLUMN: 'COLUMN',
+ FLEX: 'FLEX',
+} as const;
+
+export type PreviewLayout =
+ typeof PREVIEW_LAYOUTS[keyof typeof PREVIEW_LAYOUTS];
diff --git a/desktop-app/src/common/deviceList.ts b/desktop-app/src/common/deviceList.ts
index e9d9503b..5c388672 100644
--- a/desktop-app/src/common/deviceList.ts
+++ b/desktop-app/src/common/deviceList.ts
@@ -606,7 +606,8 @@ const devices: Device[] = [
height: 1280,
dpi: 1,
capabilities: ['touch'],
- userAgent: '',
+ userAgent:
+ 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
type: 'notebook',
isTouchCapable: true,
isMobileCapable: false,
@@ -617,7 +618,8 @@ const devices: Device[] = [
height: 1440,
dpi: 2,
capabilities: [],
- userAgent: '',
+ userAgent:
+ 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
type: 'notebook',
isTouchCapable: false,
isMobileCapable: false,
@@ -628,7 +630,20 @@ const devices: Device[] = [
height: 1280,
dpi: 1,
capabilities: [],
- userAgent: '',
+ userAgent:
+ 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
+ type: 'notebook',
+ isTouchCapable: false,
+ isMobileCapable: false,
+ },
+ {
+ name: 'Macbook Pro',
+ width: 1440,
+ height: 900,
+ dpi: 2,
+ capabilities: [],
+ userAgent:
+ 'Mozilla/5.0 (Macintosh; Intel Mac OS X 13_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
type: 'notebook',
isTouchCapable: false,
isMobileCapable: false,
diff --git a/desktop-app/src/renderer/components/Previewer/index.tsx b/desktop-app/src/renderer/components/Previewer/index.tsx
index 3a5c1799..9a74cb91 100644
--- a/desktop-app/src/renderer/components/Previewer/index.tsx
+++ b/desktop-app/src/renderer/components/Previewer/index.tsx
@@ -1,11 +1,12 @@
import { useSelector } from 'react-redux';
import cx from 'classnames';
import { selectDevices } from 'renderer/store/features/device-manager';
-import { DOCK_POSITION } from 'common/constants';
+import { DOCK_POSITION, PREVIEW_LAYOUTS } from 'common/constants';
import {
selectDockPosition,
selectIsDevtoolsOpen,
} from 'renderer/store/features/devtools';
+import { selectLayout } from 'renderer/store/features/renderer';
import Device from './Device';
import DevtoolsResizer from './DevtoolsResizer';
@@ -13,6 +14,7 @@ const Previewer = () => {
const devices = useSelector(selectDevices);
const dockPosition = useSelector(selectDockPosition);
const isDevtoolsOpen = useSelector(selectIsDevtoolsOpen);
+ const layout = useSelector(selectLayout);
return (
{
'flex-row': dockPosition === DOCK_POSITION.RIGHT,
})}
>
-
+
{devices.map((device, idx) => {
return (
diff --git a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx
new file mode 100644
index 00000000..3b721a9e
--- /dev/null
+++ b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx
@@ -0,0 +1,32 @@
+import { Icon } from '@iconify/react';
+import { PREVIEW_LAYOUTS } from 'common/constants';
+import { useDispatch, useSelector } from 'react-redux';
+import Toggle from 'renderer/components/Toggle';
+import { selectLayout, setLayout } from 'renderer/store/features/renderer';
+
+const PreviewLayout = () => {
+ const layout = useSelector(selectLayout);
+ const dispatch = useDispatch();
+
+ return (
+
+
Preview Layout
+
+
+ {
+ if (e.target.checked) {
+ dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
+ } else {
+ dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
+ }
+ }}
+ />
+
+
+
+ );
+};
+
+export default PreviewLayout;
diff --git a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx
index 99164ccc..bb71acea 100644
--- a/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx
+++ b/desktop-app/src/renderer/components/ToolBar/Menu/Flyout/index.tsx
@@ -7,6 +7,7 @@ import UITheme from './UITheme';
import Zoom from './Zoom';
import AllowInSecureSSL from './AllowInSecureSSL';
import ClearHistory from './ClearHistory';
+import PreviewLayout from './PreviewLayout';
const MenuFlyout = () => {
const dispatch = useDispatch();
@@ -14,6 +15,7 @@ const MenuFlyout = () => {
return (
+
diff --git a/desktop-app/src/renderer/store/features/renderer/index.ts b/desktop-app/src/renderer/store/features/renderer/index.ts
index f5d032f0..43cbee7e 100644
--- a/desktop-app/src/renderer/store/features/renderer/index.ts
+++ b/desktop-app/src/renderer/store/features/renderer/index.ts
@@ -1,5 +1,6 @@
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
+import { PreviewLayout } from 'common/constants';
import type { RootState } from '../..';
export interface RendererState {
@@ -7,17 +8,19 @@ export interface RendererState {
zoomFactor: number;
rotate: boolean;
isInspecting: boolean | undefined;
+ layout: PreviewLayout;
}
const zoomSteps = [
- 0.25, 0.33, 0.5, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2,
+ 0.25, 0.33, 0.5, 0.55, 0.67, 0.75, 0.8, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2,
];
const initialState: RendererState = {
address: window.electron.store.get('homepage'),
- zoomFactor: zoomSteps[4],
+ zoomFactor: zoomSteps[3],
rotate: false,
isInspecting: undefined,
+ layout: window.electron.store.get('ui.previewLayout'),
};
export const rendererSlice = createSlice({
@@ -47,17 +50,28 @@ export const rendererSlice = createSlice({
setIsInspecting: (state, action: PayloadAction
) => {
state.isInspecting = action.payload;
},
+ setLayout: (state, action: PayloadAction) => {
+ state.layout = action.payload;
+ window.electron.store.set('ui.previewLayout', action.payload);
+ },
},
});
// Action creators are generated for each case reducer function
-export const { setAddress, zoomIn, zoomOut, setRotate, setIsInspecting } =
- rendererSlice.actions;
+export const {
+ setAddress,
+ zoomIn,
+ zoomOut,
+ setRotate,
+ setIsInspecting,
+ setLayout,
+} = rendererSlice.actions;
export const selectZoomFactor = (state: RootState) => state.renderer.zoomFactor;
export const selectAddress = (state: RootState) => state.renderer.address;
export const selectRotate = (state: RootState) => state.renderer.rotate;
export const selectIsInspecting = (state: RootState) =>
state.renderer.isInspecting;
+export const selectLayout = (state: RootState) => state.renderer.layout;
export default rendererSlice.reducer;
diff --git a/desktop-app/src/store/index.ts b/desktop-app/src/store/index.ts
index 11e54943..9672c820 100644
--- a/desktop-app/src/store/index.ts
+++ b/desktop-app/src/store/index.ts
@@ -1,4 +1,4 @@
-import { DOCK_POSITION } from '../common/constants';
+import { DOCK_POSITION, PREVIEW_LAYOUTS } from '../common/constants';
const Store = require('electron-store');
@@ -10,6 +10,10 @@ const schema = {
type: 'boolean',
default: true,
},
+ previewlayout: {
+ enum: Object.values(PREVIEW_LAYOUTS),
+ default: PREVIEW_LAYOUTS.FLEX,
+ },
},
},
devtools: {
@@ -30,7 +34,7 @@ const schema = {
items: {
type: 'string',
},
- default: ['iPhone SE', 'iPhone XR', 'iPhone 12 Pro'],
+ default: ['iPhone 12 Pro', 'iPad', 'Macbook Pro'],
},
customDevices: {
type: 'array',