From 19446b01e9e55f01d341fe9696b084c00a526f9c Mon Sep 17 00:00:00 2001 From: achubai Date: Fri, 15 Nov 2019 18:53:11 +0200 Subject: [PATCH 1/2] add tablet frames and orientation --- .gitignore | 2 + components/workspace/{Phone.js => Device.js} | 35 +++++++++++----- components/workspace/PlayerFrame.js | 14 ++++--- components/workspace/Workspace.js | 6 ++- constants/{Phones.js => Devices.js} | 42 ++++++++++++++------ index.js | 4 ++ 6 files changed, 75 insertions(+), 28 deletions(-) rename components/workspace/{Phone.js => Device.js} (52%) rename constants/{Phones.js => Devices.js} (56%) diff --git a/.gitignore b/.gitignore index aa06d2b..c28ff69 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ node_modules *-bundle.js .vscode + +.idea diff --git a/components/workspace/Phone.js b/components/workspace/Device.js similarity index 52% rename from components/workspace/Phone.js rename to components/workspace/Device.js index 7409cbe..a9ed613 100644 --- a/components/workspace/Phone.js +++ b/components/workspace/Device.js @@ -2,32 +2,44 @@ import React, { Component } from 'react' import pureRender from 'pure-render-decorator' import { prefix, prefixObject } from '../../utils/PrefixInlineStyles' -import PHONES from '../../constants/Phones' +import DEVICES from '../../constants/Devices' @pureRender export default class extends Component { static defaultProps = { width: 500, - device: 'ios', + platform: 'ios', + deviceType: 'phone', + orientation: 'portrait', scale: 1, } render() { - const {children, width, device, scale} = this.props - const {deviceImageUrl, deviceImageWidth, deviceImageHeight, screenWidth, screenHeight} = PHONES[device] - + const {children, width, platform, deviceType, orientation, scale} = this.props + console.log(deviceType, platform, orientation) + const {deviceImageUrl, deviceImageWidth, deviceImageHeight, screenWidth, screenHeight} = DEVICES[deviceType][platform] + const isLandscape = orientation === 'landscape'; const imageScale = width / deviceImageWidth const height = imageScale * deviceImageHeight + const screenOrientedWidth = isLandscape ? screenHeight : screenWidth; + const screenOrientedHeight = isLandscape ? screenWidth : screenHeight; + const styles = prefixObject({ container: { + width: isLandscape ? height : width, + height: isLandscape ? width : height, + margin: '0 auto', + }, + frame: { width, height, margin: '0 auto', position: 'relative', backgroundImage: `url(${deviceImageUrl})`, backgroundSize: 'cover', + transform: isLandscape && `rotate(-90deg) translateX(${(height - width) / 2}px)`, }, screen: { position: 'absolute', @@ -39,10 +51,11 @@ export default class extends Component { }, overlay: { position: 'absolute', - top: (deviceImageHeight - screenHeight) / 2 * imageScale, - left: (deviceImageWidth - screenWidth) / 2 * imageScale, - width: screenWidth * imageScale / scale, - height: screenHeight * imageScale / scale, + top: ((isLandscape ? deviceImageWidth : deviceImageHeight) - screenOrientedHeight) / 2 * imageScale, + left: ((isLandscape ? deviceImageHeight : deviceImageWidth) - screenOrientedWidth) / 2 * imageScale, + width: screenOrientedWidth * imageScale / scale, + height: screenOrientedHeight * imageScale / scale, + transform: `scale(${scale}, ${scale})`, transformOrigin: '0 0 0px', display: 'flex', @@ -51,7 +64,9 @@ export default class extends Component { return (
-
+
+
+
{children}
diff --git a/components/workspace/PlayerFrame.js b/components/workspace/PlayerFrame.js index 2d6f27d..1791c65 100644 --- a/components/workspace/PlayerFrame.js +++ b/components/workspace/PlayerFrame.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import pureRender from 'pure-render-decorator' -import Phone from './Phone' +import Device from './Device' import { prefixObject } from '../../utils/PrefixInlineStyles' const styles = prefixObject({ @@ -17,6 +17,8 @@ export default class extends Component { static defaultProps = { platform: 'ios', + deviceType: 'phone', + orientation: 'portrait', width: 300, scale: 1, assetRoot: '', @@ -111,20 +113,22 @@ export default class extends Component { } render() { - const {width, scale, platform} = this.props + const {width, scale, platform, deviceType, orientation} = this.props if (platform === 'web') { return this.renderFrame() } return ( - {this.renderFrame()} - + ) } } diff --git a/components/workspace/Workspace.js b/components/workspace/Workspace.js index c86d5f0..0f0d608 100644 --- a/components/workspace/Workspace.js +++ b/components/workspace/Workspace.js @@ -117,6 +117,8 @@ export default class extends Component { initialTab: 'index.js', onChange: () => {}, platform: null, + deviceType: null, + orientation: null, scale: null, width: null, assetRoot: null, @@ -406,7 +408,7 @@ export default class extends Component { } renderPlayer = (key) => { - const {width, scale, platform, assetRoot, vendorComponents, externalStyles, playerStyleSheet, playerCSS, playerTitle, consoleOptions} = this.props + const {width, scale, platform, deviceType, orientation, assetRoot, vendorComponents, externalStyles, playerStyleSheet, playerCSS, playerTitle, consoleOptions} = this.props const {showLogs, logs} = this.state const style = externalStyles.playerPane @@ -432,6 +434,8 @@ export default class extends Component { width={width} scale={scale} platform={platform} + deviceType={deviceType} + orientation={orientation} assetRoot={assetRoot} vendorComponents={vendorComponents} playerStyleSheet={playerStyleSheet} diff --git a/constants/Phones.js b/constants/Devices.js similarity index 56% rename from constants/Phones.js rename to constants/Devices.js index 9ca9a78..aecb999 100644 --- a/constants/Phones.js +++ b/constants/Devices.js @@ -23,18 +23,36 @@ // Devices, taken from the framerjs codebase // Devices have pixel density of 2, but we also zoom in for visibility at small sizes. export default { - ios: { - deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/iphone-6-silver.png', - deviceImageWidth: 870, - deviceImageHeight: 1738, - screenWidth: 750, - screenHeight: 1334, + phone: { + ios: { + deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/iphone-6-silver.png', + deviceImageWidth: 870, + deviceImageHeight: 1738, + screenWidth: 750, + screenHeight: 1334, + }, + android: { + deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/google-nexus-5x.png', + deviceImageWidth: 1204, + deviceImageHeight: 2432, + screenWidth: 1080, + screenHeight: 1920, + }, }, - android: { - deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/google-nexus-5x.png', - deviceImageWidth: 1204, - deviceImageHeight: 2432, - screenWidth: 1080, - screenHeight: 1920, + tablet: { + ios: { + deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/apple-ipad-pro-silver.png', + deviceImageWidth: 2448, + deviceImageHeight: 3432, + screenWidth: 2048, + screenHeight: 2732, + }, + android: { + deviceImageUrl: 'https://cdn.rawgit.com/koenbok/Framer/master/extras/DeviceResources/google-nexus-9.png', + deviceImageWidth: 1896, + deviceImageHeight: 2648, + screenWidth: 1536, + screenHeight: 2048, + } }, } diff --git a/index.js b/index.js index 499f2df..015630c 100644 --- a/index.js +++ b/index.js @@ -27,6 +27,8 @@ let { entry = 'index.js', initialTab = 'index.js', platform = 'ios', + deviceType = 'phone', + orientation = 'portrait', width = '210', scale = '1', assetRoot = '', @@ -78,6 +80,8 @@ const root = ( entry={entry} initialTab={initialTab} platform={platform} + deviceType={deviceType} + orientation={orientation} assetRoot={assetRoot} scale={parseFloat(scale)} width={parseFloat(width)} From 97a21ee2f78045a6b9b8acb6fabcea59885b9f3e Mon Sep 17 00:00:00 2001 From: achubai Date: Mon, 18 Nov 2019 14:59:32 +0200 Subject: [PATCH 2/2] add tablet frames and orientation to readme --- README.md | 2 ++ components/workspace/Device.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d5b435..ce63e3b 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,8 @@ The `iframe` accepts the following parameters *after the hash* in the url. You m - **`width`** - The width of the device. Defaults to `210`. - **`scale`** - Zoom the device screen. Defaults to `1`. - **`platform`** - One of `ios` or `android`. Defaults to `ios`. Currently this changes the phone image, but may also have an effect on how the code is executed in the future. +- **`deviceType`** One of `phone` or `tablet`. Defaults to `phone`. This changes the frame image. +- **`orientation`** One of `portrait` or `landscape`. Defaults to `portrait`. This allows to rotate the frame image. - **`entry`** - The filename of the entry file. This is only relevant when showing multiple files with the `files` parameter. Defaults to `index.js`. - **`initialTab`** - The filename of the tab to show by default. This is only relevant when showing multiple files with the `files` parameter. Defaults to `index.js`. - **`fullscreen`** - Show a button to enable fullscreen editing. Defaults to `false`. Note that the iframe must have the `allowfullscreen` attribute for this to work. diff --git a/components/workspace/Device.js b/components/workspace/Device.js index a9ed613..7d69c5c 100644 --- a/components/workspace/Device.js +++ b/components/workspace/Device.js @@ -17,7 +17,7 @@ export default class extends Component { render() { const {children, width, platform, deviceType, orientation, scale} = this.props - console.log(deviceType, platform, orientation) + const {deviceImageUrl, deviceImageWidth, deviceImageHeight, screenWidth, screenHeight} = DEVICES[deviceType][platform] const isLandscape = orientation === 'landscape'; const imageScale = width / deviceImageWidth