Add open in browser & tooltips

6 files changed, 211 insertions, 9 deletions

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,
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 0dfe2055a..e77590a58 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -4023,6 +4023,76 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Home",
+        "end": {
+          "column": 3,
+          "line": 17
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.goHome",
+        "start": {
+          "column": 10,
+          "line": 14
+        }
+      },
+      {
+        "defaultMessage": "!!!Open in Browser",
+        "end": {
+          "column": 3,
+          "line": 21
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.openInBrowser",
+        "start": {
+          "column": 17,
+          "line": 18
+        }
+      },
+      {
+        "defaultMessage": "!!!Back",
+        "end": {
+          "column": 3,
+          "line": 25
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.back",
+        "start": {
+          "column": 8,
+          "line": 22
+        }
+      },
+      {
+        "defaultMessage": "!!!Forward",
+        "end": {
+          "column": 3,
+          "line": 29
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.forward",
+        "start": {
+          "column": 11,
+          "line": 26
+        }
+      },
+      {
+        "defaultMessage": "!!!Reload",
+        "end": {
+          "column": 3,
+          "line": 33
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.reload",
+        "start": {
+          "column": 10,
+          "line": 30
+        }
+      }
+    ],
+    "path": "src/features/webControls/components/WebControls.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Create workspace",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index dcb9d92a2..e164b64a4 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -370,6 +370,11 @@
   "validation.oneRequired": "At least one is required",
   "validation.required": "{field} is required",
   "validation.url": "{field} is not a valid URL",
+  "webControls.back": "Back",
+  "webControls.forward": "Forward",
+  "webControls.goHome": "Home",
+  "webControls.openInBrowser": "Open in Browser",
+  "webControls.reload": "Reload",
   "welcome.loginButton": "Login to your account",
   "welcome.signupButton": "Create a free account",
   "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace",
@@ -383,4 +388,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/src/features/webControls/components/WebControls.json b/src/i18n/messages/src/features/webControls/components/WebControls.json
new file mode 100644
index 000000000..969437e98
--- /dev/null
+++ b/src/i18n/messages/src/features/webControls/components/WebControls.json
@@ -0,0 +1,67 @@
+[
+  {
+    "id": "webControls.goHome",
+    "defaultMessage": "!!!Home",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 13,
+      "column": 10
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.openInBrowser",
+    "defaultMessage": "!!!Open in Browser",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 17,
+      "column": 17
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.back",
+    "defaultMessage": "!!!Back",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 21,
+      "column": 8
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.forward",
+    "defaultMessage": "!!!Forward",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 25,
+      "column": 11
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.reload",
+    "defaultMessage": "!!!Reload",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 29,
+      "column": 10
+    },
+    "end": {
+      "line": 32,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json
index 4ff190606..1b6664787 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!No services added yet",
     "file": "src/features/workspaces/components/WorkspaceDrawerItem.js",
     "start": {
-      "line": 12,
+      "line": 13,
       "column": 22
     },
     "end": {
-      "line": 15,
+      "line": 16,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!edit",
     "file": "src/features/workspaces/components/WorkspaceDrawerItem.js",
     "start": {
-      "line": 16,
+      "line": 17,
       "column": 19
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   }