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

Made the navigator icons lively

Browse source
This commit is contained in:
Manoj Vivek 2019-08-23 18:55:09 +05:30
parent c5de6a7a4a
commit d64e7c160d
22 changed files with 168 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
desktop-app/app/actions/browser.js
View file

@ -12,6 +12,7 @@ import {
export const NEW_ADDRESS = 'NEW_ADDRESS';
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 function newAddress(address) {
return {
@ -34,6 +35,13 @@ export function newScrollPosition(scrollPosition) {
};
}
export function newNavigatorStatus(navigatorStatus) {
return {
type: NEW_NAVIGATOR_STATUS,
navigatorStatus,
};
}
export function onAddressChange(newURL) {
return (dispatch: Dispatch, getState: RootStateType) => {
const {
@ -66,7 +74,6 @@ export function onZoomChange(newLevel) {
export function onScrollChange({x: newX, y: newY}) {
return (dispatch: Dispatch, getState: RootStateType) => {
console.log('In onScrollChange', getState());
const {
browser: {
scrollPosition: {x, y},
@ -81,6 +88,33 @@ export function onScrollChange({x: newX, y: newY}) {
};
}
export function updateNavigatorStatus({
backEnabled: newBackEnabled,
forwardEnabled: newForwardEnabled,
}) {
return (dispatch: Dispatch, getState: RootStateType) => {
const {
browser: {
navigatorStatus: {backEnabled, forwardEnabled},
},
} = getState();
if (
newBackEnabled === backEnabled &&
newForwardEnabled === forwardEnabled
) {
return;
}
dispatch(
newNavigatorStatus({
backEnabled: newBackEnabled,
forwardEnabled: newForwardEnabled,
})
);
};
}
export function triggerScrollDown() {
return (dispatch: Dispatch, getState: RootStateType) => {
console.log('triggerScrollDown');

3
desktop-app/app/components/DevicesPreviewer/index.js
View file

@ -13,12 +13,13 @@ class DevicesPreviewer extends Component {
} = this.props;
return (
<div className={cx(styles.container)}>
{devices.map(device => (
{devices.map((device, index) => (
<Renderer
key={device.id}
device={device}
src={address}
zoomLevel={zoomLevel}
transmitNavigatorStatus={index === 0}
/>
))}
</div>

32
desktop-app/app/components/NavigationControls/index.js
View file

@ -1,5 +1,6 @@
// @flow
import React, {Component} from 'react';
import cx from 'classnames';
import Grid from '@material-ui/core/Grid';
import ArrowLeftIcon from '../icons/ArrowLeft';
import ArrowRightIcon from '../icons/ArrowRight';
@ -15,22 +16,45 @@ class NavigationControls extends Component {
height: 25,
width: 25,
};
const {backEnabled, forwardEnabled} = this.props;
return (
<div className={styles.navigationControls}>
<Grid container spacing={1} alignItems="center">
<Grid item className={styles.icons}>
<Grid
item
className={cx(styles.icons, {
[styles.disabled]: !backEnabled,
[styles.enabled]: backEnabled,
})}
>
<div
className={cx(styles.iconDisabler, {
[styles.disabled]: !backEnabled,
})}
/>
<div onClick={this.props.triggerNavigationBack}>
<ArrowLeftIcon {...iconProps} />
</div>
</Grid>
<Grid item className={styles.icons}>
<Grid
item
className={cx(styles.icons, {
[styles.disabled]: !forwardEnabled,
[styles.enabled]: forwardEnabled,
})}
>
<div
className={cx(styles.iconDisabler, {
[styles.disabled]: !forwardEnabled,
})}
/>
<div onClick={this.props.triggerNavigationForward}>
<ArrowRightIcon {...iconProps} />
</div>
</Grid>
<Grid item className={styles.icons}>
<Grid item className={cx(styles.icons, styles.enabled)}>
<div onClick={this.props.triggerNavigationReload}>
<ReloadIcon {...iconProps} height={15} width={15} />
<ReloadIcon {...iconProps} height={15} width={15} padding={5} />
</div>
</Grid>
</Grid>

26
desktop-app/app/components/NavigationControls/styles.module.css
View file

@ -4,4 +4,30 @@
.icons {
cursor: pointer;
position: relative;
opacity: 0.8;
}
.icons.disabled {
opacity: 0.3;
cursor: auto;
}
.icons.enabled:hover {
opacity: 1;
background: #00000042;
}
.iconDisabler {
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 2;
height: 100%;
width: 100%;
}
.iconDisabler.disabled {
display: block;
}

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

@ -12,7 +12,10 @@ class Renderer extends Component {
<div className={cx(styles.container)}>
<h3 className={cx(styles.deviceTitle)}>{this.props.device.name}</h3>
<div className={cx(styles.deviceWrapper)}>
<WebViewContainer device={this.props.device} />
<WebViewContainer
device={this.props.device}
transmitNavigatorStatus={this.props.transmitNavigatorStatus}
/>
</div>
</div>
);

10
desktop-app/app/components/WebView/index.js
View file

@ -64,6 +64,15 @@ class WebView extends Component {
this.props.onAddressChange(url);
});
this.webviewRef.current.addEventListener('did-navigate', ({url}) => {
if (this.props.transmitNavigatorStatus) {
this.props.updateNavigatorStatus({
backEnabled: this.webviewRef.current.canGoBack(),
forwardEnabled: this.webviewRef.current.canGoForward(),
});
}
});
this.webviewRef.current.addEventListener('devtools-opened', () => {
this.webviewRef.current
.getWebContents()
@ -169,6 +178,7 @@ class WebView extends Component {
acceptFirstMouse: true,
show: true,
});
//devtools.hide();
this.webviewRef.current
.getWebContents()

3
desktop-app/app/components/icons/ArrowLeft.js
View file

@ -1,11 +1,12 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
xmlns="http://www.w3.org/2000/svg"
data-name="Layer 1"
viewBox="0 0 24 24"

3
desktop-app/app/components/icons/ArrowRight.js
View file

@ -1,11 +1,12 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
xmlns="http://www.w3.org/2000/svg"
data-name="Layer 1"
viewBox="0 0 24 24"

2
desktop-app/app/components/icons/Bug.js
View file

@ -1,6 +1,6 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
width={width}

3
desktop-app/app/components/icons/Cross.js
View file

@ -1,11 +1,12 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>

3
desktop-app/app/components/icons/DeviceRotate.js
View file

@ -1,11 +1,12 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"

17
desktop-app/app/components/icons/GoArrow.js
View file

@ -1,11 +1,20 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg width={width} height={height} fill={color} version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlnsXlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
<svg
width={width}
height={height}
fill={color}
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 129 129"
xmlnsXlink="http://www.w3.org/1999/xlink"
enable-background="new 0 0 129 129"
>
<g>
<path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z"/>
<path d="m40.4,121.3c-0.8,0.8-1.8,1.2-2.9,1.2s-2.1-0.4-2.9-1.2c-1.6-1.6-1.6-4.2 0-5.8l51-51-51-51c-1.6-1.6-1.6-4.2 0-5.8 1.6-1.6 4.2-1.6 5.8,0l53.9,53.9c1.6,1.6 1.6,4.2 0,5.8l-53.9,53.9z" />
</g>
</svg>
</Fragment>
);
);

2
desktop-app/app/components/icons/Logo.js
View file

@ -2,6 +2,6 @@
import React from 'react';
import logoImage from '../../../resources/logo.svg';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<img src={logoImage} height={height} width={width} alt="" />
);

3
desktop-app/app/components/icons/Reload.js
View file

@ -1,11 +1,12 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>

2
desktop-app/app/components/icons/Screenshot.js
View file

@ -1,6 +1,6 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
width={width}

3
desktop-app/app/components/icons/ScrollDown.js
View file

@ -1,11 +1,12 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100"

3
desktop-app/app/components/icons/ScrollUp.js
View file

@ -1,11 +1,12 @@
import React, {Fragment} from 'react';
export default ({width, height, color}) => (
export default ({width, height, color, padding}) => (
<Fragment>
<svg
height={height}
width={width}
fill={color}
style={{padding}}
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 100 100"

2
desktop-app/app/constants/colors.js
View file

@ -1 +1 @@
export const iconsColor = 'lightgrey';
export const iconsColor = 'white'; //'lightgrey';

7
desktop-app/app/containers/NavigationControlsContainer/index.js
View file

@ -7,9 +7,10 @@ import * as BrowserActions from '../../actions/browser';
import NavigationControls from '../../components/NavigationControls';
function mapStateToProps(state) {
return {
browser: state.browser,
};
const {
navigatorStatus: {backEnabled, forwardEnabled},
} = state.browser;
return {backEnabled, forwardEnabled};
}
function mapDispatchToProps(dispatch) {

12
desktop-app/app/reducers/browser.js
View file

@ -3,6 +3,7 @@ import {
NEW_ADDRESS,
NEW_ZOOM_LEVEL,
NEW_SCROLL_POSITION,
NEW_NAVIGATOR_STATUS,
} from '../actions/browser';
import type {Action} from './types';
import devices from '../constants/devices';
@ -13,19 +14,26 @@ type ScrollPositionType = {
y: number,
};
type NavigatorStatusType = {
backEnabled: boolean,
forwardEnabled: boolean,
};
export type BrowserStateType = {
devices: Array<Device>,
address: string,
zoomLevel: number,
scrollPosition: ScrollPositionType,
navigatorStatus: NavigatorStatusType,
};
export default function counter(
state: BrowserStateType = {
devices,
address: 'https://www.github.com',
address: 'https://www.google.com',
zoomLevel: 0.5,
scrollPosition: {x: 0, y: 0},
navigatorStatus: {backEnabled: false, forwardEnabled: false},
},
action: Action
) {
@ -36,6 +44,8 @@ export default function counter(
return {...state, zoomLevel: action.zoomLevel};
case NEW_SCROLL_POSITION:
return {...state, scrollPosition: action.scrollPosition};
case NEW_NAVIGATOR_STATUS:
return {...state, navigatorStatus: action.navigatorStatus};
default:
return state;
}

2
desktop-app/package.json
View file

@ -240,7 +240,7 @@
"pubsub.js": "^1.5.2",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-hot-loader": "^4.3.12",
"react-hot-loader": "^4.8",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",

27
desktop-app/yarn.lock
View file

@ -6120,10 +6120,6 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
hoist-non-react-statics@^2.5.0:
version "2.5.5"
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
hoist-non-react-statics@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz#42414ccdfff019cd2168168be998c7b3bd5245c0"
@ -10128,16 +10124,19 @@ react-dom@^16.9.0:
prop-types "^15.6.2"
scheduler "^0.15.0"
react-hot-loader@^4.3.12:
version "4.3.12"
resolved "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.3.12.tgz#0d56688884e7330c63a00a17217866280616b07a"
react-hot-loader@^4.8:
version "4.12.11"
resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.11.tgz#06bd618d0a7343c8afa4a31206844f651193bae5"
integrity sha512-ySsg1hPwr/5dkZCJVp1nZRbwbpbEQ+3e2+bn/D681Wvr9+o+5bLKkTGq0TXskj8HgCS3ScysXddOng9Cg+JKzw==
dependencies:
fast-levenshtein "^2.0.6"
global "^4.3.0"
hoist-non-react-statics "^2.5.0"
hoist-non-react-statics "^3.3.0"
loader-utils "^1.1.0"
prop-types "^15.6.1"
react-lifecycles-compat "^3.0.4"
shallowequal "^1.0.2"
shallowequal "^1.1.0"
source-map "^0.7.3"
react-is@^16.3.2, react-is@^16.6.0:
version "16.6.0"
@ -11119,9 +11118,10 @@ shallow-clone@^1.0.0:
kind-of "^5.0.0"
mixin-object "^2.0.1"
shallowequal@^1.0.2:
shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
shebang-command@^1.2.0:
version "1.2.0"
@ -11299,6 +11299,11 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
version "0.6.1"
resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
source-map@^0.7.3:
version "0.7.3"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
spawn-args@0.2.0:
version "0.2.0"
resolved "https://registry.npmjs.org/spawn-args/-/spawn-args-0.2.0.tgz#fb7d0bd1d70fd4316bd9e3dec389e65f9d6361bb"