Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-11-10 14:54:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

Improvement address bar interaction and changes app name

Browse source
This commit is contained in:
Manoj Vivek 2019-08-11 13:25:58 +05:30
parent 80309858f6
commit 8a079e548b
4 changed files with 95 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
desktop-app/app/components/Addressinput/index.js
View file

@ -33,6 +33,7 @@ class AddressBar extends React.Component<Props> {
className={styles.addressInput} className={styles.addressInput}
placeholder="https://your-website.com" placeholder="https://your-website.com"
value={this.state.userTypedAddress || this.props.address} value={this.state.userTypedAddress || this.props.address}
onKeyDown={this._handleKeyDown}
onChange={e => this.setState({userTypedAddress: e.target.value})} onChange={e => this.setState({userTypedAddress: e.target.value})}
/> />
<button className={styles.goButton} onClick={this._onChange}> <button className={styles.goButton} onClick={this._onChange}>
@ -42,9 +43,25 @@ class AddressBar extends React.Component<Props> {
); );
} }
_handleKeyDown = e => {
if (e.key === 'Enter') {
this._onChange();
}
};
_onChange = () => { _onChange = () => {
console.log('in _onChange', this.props.onChange); if (!this.state.userTypedAddress) {
this.props.onChange && this.props.onChange(this.state.userTypedAddress); return;
}
this.props.onChange &&
this.props.onChange(this._normalize(this.state.userTypedAddress));
};
_normalize = address => {
if (!address.startsWith('http')) {
address = 'https://' + address;
}
return address;
}; };
} }

4
desktop-app/app/components/Renderer/index.js
View file

@ -9,7 +9,7 @@ class Renderer extends Component {
console.log('Renderer this.props', this.props); console.log('Renderer this.props', this.props);
return ( return (
<div className={cx(styles.container)}> <div className={cx(styles.container)}>
<h2>{this.props.device.name}</h2> <h3>{this.props.device.name}</h3>
<div <div
className={cx(styles.deviceWrapper)} className={cx(styles.deviceWrapper)}
style={{ style={{
@ -20,7 +20,7 @@ class Renderer extends Component {
<webview <webview
className={cx(styles.device)} className={cx(styles.device)}
title={this.props.device.name} title={this.props.device.name}
src={this.props.src} src={this.props.src || 'about:blank'}
width={this.props.device.width} width={this.props.device.width}
height={this.props.device.height} height={this.props.device.height}
style={{ style={{

126
desktop-app/app/menu.js
View file

@ -1,5 +1,5 @@
// @flow // @flow
import { app, Menu, shell, BrowserWindow } from 'electron'; import {app, Menu, shell, BrowserWindow} from 'electron';
export default class MenuBuilder { export default class MenuBuilder {
mainWindow: BrowserWindow; mainWindow: BrowserWindow;
@ -30,15 +30,15 @@ export default class MenuBuilder {
setupDevelopmentEnvironment() { setupDevelopmentEnvironment() {
this.mainWindow.openDevTools(); this.mainWindow.openDevTools();
this.mainWindow.webContents.on('context-menu', (e, props) => { this.mainWindow.webContents.on('context-menu', (e, props) => {
const { x, y } = props; const {x, y} = props;
Menu.buildFromTemplate([ Menu.buildFromTemplate([
{ {
label: 'Inspect element', label: 'Inspect element',
click: () => { click: () => {
this.mainWindow.inspectElement(x, y); this.mainWindow.inspectElement(x, y);
} },
} },
]).popup(this.mainWindow); ]).popup(this.mainWindow);
}); });
} }
@ -48,48 +48,48 @@ export default class MenuBuilder {
label: 'Electron', label: 'Electron',
submenu: [ submenu: [
{ {
label: 'About ElectronReact', label: 'About ResponsivelyApp',
selector: 'orderFrontStandardAboutPanel:' selector: 'orderFrontStandardAboutPanel:',
}, },
{ type: 'separator' }, {type: 'separator'},
{ label: 'Services', submenu: [] }, {label: 'Services', submenu: []},
{ type: 'separator' }, {type: 'separator'},
{ {
label: 'Hide ElectronReact', label: 'Hide ResponsivelyApp',
accelerator: 'Command+H', accelerator: 'Command+H',
selector: 'hide:' selector: 'hide:',
}, },
{ {
label: 'Hide Others', label: 'Hide Others',
accelerator: 'Command+Shift+H', accelerator: 'Command+Shift+H',
selector: 'hideOtherApplications:' selector: 'hideOtherApplications:',
}, },
{ label: 'Show All', selector: 'unhideAllApplications:' }, {label: 'Show All', selector: 'unhideAllApplications:'},
{ type: 'separator' }, {type: 'separator'},
{ {
label: 'Quit', label: 'Quit',
accelerator: 'Command+Q', accelerator: 'Command+Q',
click: () => { click: () => {
app.quit(); app.quit();
} },
} },
] ],
}; };
const subMenuEdit = { const subMenuEdit = {
label: 'Edit', label: 'Edit',
submenu: [ submenu: [
{ label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' }, {label: 'Undo', accelerator: 'Command+Z', selector: 'undo:'},
{ label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' }, {label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:'},
{ type: 'separator' }, {type: 'separator'},
{ label: 'Cut', accelerator: 'Command+X', selector: 'cut:' }, {label: 'Cut', accelerator: 'Command+X', selector: 'cut:'},
{ label: 'Copy', accelerator: 'Command+C', selector: 'copy:' }, {label: 'Copy', accelerator: 'Command+C', selector: 'copy:'},
{ label: 'Paste', accelerator: 'Command+V', selector: 'paste:' }, {label: 'Paste', accelerator: 'Command+V', selector: 'paste:'},
{ {
label: 'Select All', label: 'Select All',
accelerator: 'Command+A', accelerator: 'Command+A',
selector: 'selectAll:' selector: 'selectAll:',
} },
] ],
}; };
const subMenuViewDev = { const subMenuViewDev = {
label: 'View', label: 'View',
@ -99,23 +99,23 @@ export default class MenuBuilder {
accelerator: 'Command+R', accelerator: 'Command+R',
click: () => { click: () => {
this.mainWindow.webContents.reload(); this.mainWindow.webContents.reload();
} },
}, },
{ {
label: 'Toggle Full Screen', label: 'Toggle Full Screen',
accelerator: 'Ctrl+Command+F', accelerator: 'Ctrl+Command+F',
click: () => { click: () => {
this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen()); this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
} },
}, },
{ {
label: 'Toggle Developer Tools', label: 'Toggle Developer Tools',
accelerator: 'Alt+Command+I', accelerator: 'Alt+Command+I',
click: () => { click: () => {
this.mainWindow.toggleDevTools(); this.mainWindow.toggleDevTools();
} },
} },
] ],
}; };
const subMenuViewProd = { const subMenuViewProd = {
label: 'View', label: 'View',
@ -125,9 +125,9 @@ export default class MenuBuilder {
accelerator: 'Ctrl+Command+F', accelerator: 'Ctrl+Command+F',
click: () => { click: () => {
this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen()); this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
} },
} },
] ],
}; };
const subMenuWindow = { const subMenuWindow = {
label: 'Window', label: 'Window',
@ -135,12 +135,12 @@ export default class MenuBuilder {
{ {
label: 'Minimize', label: 'Minimize',
accelerator: 'Command+M', accelerator: 'Command+M',
selector: 'performMiniaturize:' selector: 'performMiniaturize:',
}, },
{ label: 'Close', accelerator: 'Command+W', selector: 'performClose:' }, {label: 'Close', accelerator: 'Command+W', selector: 'performClose:'},
{ type: 'separator' }, {type: 'separator'},
{ label: 'Bring All to Front', selector: 'arrangeInFront:' } {label: 'Bring All to Front', selector: 'arrangeInFront:'},
] ],
}; };
const subMenuHelp = { const subMenuHelp = {
label: 'Help', label: 'Help',
@ -149,7 +149,7 @@ export default class MenuBuilder {
label: 'Learn More', label: 'Learn More',
click() { click() {
shell.openExternal('http://electron.atom.io'); shell.openExternal('http://electron.atom.io');
} },
}, },
{ {
label: 'Documentation', label: 'Documentation',
@ -157,21 +157,21 @@ export default class MenuBuilder {
shell.openExternal( shell.openExternal(
'https://github.com/atom/electron/tree/master/docs#readme' 'https://github.com/atom/electron/tree/master/docs#readme'
); );
} },
}, },
{ {
label: 'Community Discussions', label: 'Community Discussions',
click() { click() {
shell.openExternal('https://discuss.atom.io/c/electron'); shell.openExternal('https://discuss.atom.io/c/electron');
} },
}, },
{ {
label: 'Search Issues', label: 'Search Issues',
click() { click() {
shell.openExternal('https://github.com/atom/electron/issues'); shell.openExternal('https://github.com/atom/electron/issues');
} },
} },
] ],
}; };
const subMenuView = const subMenuView =
@ -187,16 +187,16 @@ export default class MenuBuilder {
submenu: [ submenu: [
{ {
label: '&Open', label: '&Open',
accelerator: 'Ctrl+O' accelerator: 'Ctrl+O',
}, },
{ {
label: '&Close', label: '&Close',
accelerator: 'Ctrl+W', accelerator: 'Ctrl+W',
click: () => { click: () => {
this.mainWindow.close(); this.mainWindow.close();
} },
} },
] ],
}, },
{ {
label: '&View', label: '&View',
@ -208,7 +208,7 @@ export default class MenuBuilder {
accelerator: 'Ctrl+R', accelerator: 'Ctrl+R',
click: () => { click: () => {
this.mainWindow.webContents.reload(); this.mainWindow.webContents.reload();
} },
}, },
{ {
label: 'Toggle &Full Screen', label: 'Toggle &Full Screen',
@ -217,15 +217,15 @@ export default class MenuBuilder {
this.mainWindow.setFullScreen( this.mainWindow.setFullScreen(
!this.mainWindow.isFullScreen() !this.mainWindow.isFullScreen()
); );
} },
}, },
{ {
label: 'Toggle &Developer Tools', label: 'Toggle &Developer Tools',
accelerator: 'Alt+Ctrl+I', accelerator: 'Alt+Ctrl+I',
click: () => { click: () => {
this.mainWindow.toggleDevTools(); this.mainWindow.toggleDevTools();
} },
} },
] ]
: [ : [
{ {
@ -235,9 +235,9 @@ export default class MenuBuilder {
this.mainWindow.setFullScreen( this.mainWindow.setFullScreen(
!this.mainWindow.isFullScreen() !this.mainWindow.isFullScreen()
); );
} },
} },
] ],
}, },
{ {
label: 'Help', label: 'Help',
@ -246,7 +246,7 @@ export default class MenuBuilder {
label: 'Learn More', label: 'Learn More',
click() { click() {
shell.openExternal('http://electron.atom.io'); shell.openExternal('http://electron.atom.io');
} },
}, },
{ {
label: 'Documentation', label: 'Documentation',
@ -254,22 +254,22 @@ export default class MenuBuilder {
shell.openExternal( shell.openExternal(
'https://github.com/atom/electron/tree/master/docs#readme' 'https://github.com/atom/electron/tree/master/docs#readme'
); );
} },
}, },
{ {
label: 'Community Discussions', label: 'Community Discussions',
click() { click() {
shell.openExternal('https://discuss.atom.io/c/electron'); shell.openExternal('https://discuss.atom.io/c/electron');
} },
}, },
{ {
label: 'Search Issues', label: 'Search Issues',
click() { click() {
shell.openExternal('https://github.com/atom/electron/issues'); shell.openExternal('https://github.com/atom/electron/issues');
} },
} },
] ],
} },
]; ];
return templateDefault; return templateDefault;

55
desktop-app/package.json
View file

@ -1,8 +1,8 @@
{ {
"name": "electron-react-boilerplate", "name": "Responsively-App",
"productName": "ElectronReact", "productName": "ResponsivelyApp",
"version": "0.17.1", "version": "0.17.1",
"description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development", "description": "A developer-friendly browser for developing responsive web apps",
"scripts": { "scripts": {
"build": "concurrently \"yarn build-main\" \"yarn build-renderer\"", "build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
"build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors", "build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
@ -57,8 +57,8 @@
}, },
"main": "./app/main.prod.js", "main": "./app/main.prod.js",
"build": { "build": {
"productName": "ElectronReact", "productName": "ResponsivelyApp",
"appId": "org.develar.ElectronReact", "appId": "app.ResponsivelyApp",
"files": [ "files": [
"app/dist/", "app/dist/",
"app/app.html", "app/app.html",
@ -106,43 +106,13 @@
"private": false "private": false
} }
}, },
"repository": { "repository": {},
"type": "git", "author": {},
"url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git" "contributors": [],
},
"author": {
"name": "Electron React Boilerplte Maintainers",
"email": "electronreactboilerplate@gmail.com",
"url": "https://electron-react-boilerplate.js.org"
},
"contributors": [
{
"name": "Vikram Rangaraj",
"email": "vikr01@icloud.com",
"url": "https://github.com/vikr01"
},
{
"name": "Amila Welihinda",
"email": "amilajack@gmail.com",
"url": "https://github.com/amilajack"
}
],
"license": "MIT", "license": "MIT",
"bugs": { "bugs": {},
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues" "keywords": [],
}, "homepage": "",
"keywords": [
"electron",
"boilerplate",
"react",
"redux",
"flow",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
"jest": { "jest": {
"testURL": "http://localhost/", "testURL": "http://localhost/",
"moduleNameMapper": { "moduleNameMapper": {
@ -279,8 +249,5 @@
"npm": ">=4.x", "npm": ">=4.x",
"yarn": ">=0.21.3" "yarn": ">=0.21.3"
}, },
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": "electron 1.6" "browserslist": "electron 1.6"
} }