From 13b853a5c61ba089df20da72ab07ae2f84999ea4 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 3 Oct 2019 17:14:20 +0200
Subject: Add open in browser & tooltips

---
 src/features/webControls/components/WebControls.js | 55 ++++++++++++++++++++--
 .../webControls/containers/WebControlsScreen.js    | 13 ++++-
 2 files changed, 64 insertions(+), 4 deletions(-)

(limited to 'src/features/webControls')

diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
index 03f601a17..a39fcfe0e 100644
--- a/src/features/webControls/components/WebControls.js
+++ b/src/features/webControls/components/WebControls.js
@@ -3,11 +3,35 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
+import { defineMessages, intlShape } from 'react-intl';
 
 import {
-  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline,
+  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth,
 } from '@mdi/js';
 
+const messages = defineMessages({
+  goHome: {
+    id: 'webControls.goHome',
+    defaultMessage: '!!!Home',
+  },
+  openInBrowser: {
+    id: 'webControls.openInBrowser',
+    defaultMessage: '!!!Open in Browser',
+  },
+  back: {
+    id: 'webControls.back',
+    defaultMessage: '!!!Back',
+  },
+  forward: {
+    id: 'webControls.forward',
+    defaultMessage: '!!!Forward',
+  },
+  reload: {
+    id: 'webControls.reload',
+    defaultMessage: '!!!Reload',
+  },
+});
+
 const styles = theme => ({
   root: {
     background: theme.colorBackground,
@@ -18,7 +42,7 @@ const styles = theme => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    padding: [0, 20],
+    padding: [0, 10],
 
     '& + div': {
       height: 'calc(100% - 50px)',
@@ -45,7 +69,7 @@ const styles = theme => ({
   input: {
     marginBottom: 0,
     height: 'auto',
-    marginLeft: 10,
+    margin: [0, 10],
     flex: 1,
     border: 0,
     padding: [4, 10],
@@ -68,10 +92,15 @@ class WebControls extends Component {
     canGoForward: PropTypes.bool.isRequired,
     goForward: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
+    openInBrowser: PropTypes.func.isRequired,
     url: PropTypes.string.isRequired,
     navigate: PropTypes.func.isRequired,
   }
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   static getDerivedStateFromProps(props, state) {
     const { url } = props;
     const { editUrl } = state;
@@ -100,6 +129,7 @@ class WebControls extends Component {
       canGoForward,
       goForward,
       reload,
+      openInBrowser,
       url,
       navigate,
     } = this.props;
@@ -109,12 +139,15 @@ class WebControls extends Component {
       editUrl,
     } = this.state;
 
+    const { intl } = this.context;
+
     return (
       <div className={classes.root}>
         <button
           onClick={goHome}
           type="button"
           className={classes.button}
+          data-tip={intl.formatMessage(messages.goHome)}
         >
           <Icon
             icon={mdiHomeOutline}
@@ -126,6 +159,7 @@ class WebControls extends Component {
           type="button"
           className={classes.button}
           disabled={!canGoBack}
+          data-tip={intl.formatMessage(messages.back)}
         >
           <Icon
             icon={mdiArrowLeft}
@@ -137,6 +171,7 @@ class WebControls extends Component {
           type="button"
           className={classes.button}
           disabled={!canGoForward}
+          data-tip={intl.formatMessage(messages.forward)}
         >
           <Icon
             icon={mdiArrowRight}
@@ -147,6 +182,7 @@ class WebControls extends Component {
           onClick={reload}
           type="button"
           className={classes.button}
+          data-tip={intl.formatMessage(messages.reload)}
         >
           <Icon
             icon={mdiReload}
@@ -182,6 +218,19 @@ class WebControls extends Component {
           }}
           ref={this.inputRef}
         />
+        <button
+          onClick={openInBrowser}
+          type="button"
+          className={classes.button}
+          data-tip={intl.formatMessage(messages.openInBrowser)}
+          data-place="left"
+        >
+          <Icon
+            icon={mdiEarth}
+            className={classes.icon}
+          />
+        </button>
+        {/* <ReactTooltip place="bottom" type="dark" effect="solid" /> */}
       </div>
     );
   }
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
index 1452d5a3d..cada01a6f 100644
--- a/src/features/webControls/containers/WebControlsScreen.js
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -9,7 +9,6 @@ import Service from '../../../models/Service';
 
 const URL_EVENTS = [
   'load-commit',
-  // 'dom-ready',
   'will-navigate',
   'did-navigate',
   'did-navigate-in-page',
@@ -97,11 +96,20 @@ class WebControlsScreen extends Component {
     this.url = url;
   }
 
+  openInBrowser() {
+    const { openExternalUrl } = this.props.actions.app;
+
+    if (!this.webview) return;
+
+    openExternalUrl({ url: this.url });
+  }
+
   render() {
     return (
       <WebControls
         goHome={() => this.goHome()}
         reload={() => this.reload()}
+        openInBrowser={() => this.openInBrowser()}
         canGoBack={this.canGoBack}
         goBack={() => this.goBack()}
         canGoForward={this.canGoForward}
@@ -121,6 +129,9 @@ WebControlsScreen.wrappedComponent.propTypes = {
     services: PropTypes.instanceOf(ServicesStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
     service: PropTypes.shape({
       reloadActive: PropTypes.func.isRequired,
     }).isRequired,
-- 
cgit v1.2.3-70-g09d2