Merge pull request #56 from GustavoKatel/showUrlOnLinkHover

Show url when mouse enters a link

Author: adlk

src/components/services/content/ServiceWebview.js

@@ -6,6 +6,7 @@ import Webview from 'react-electron-web-view';
 import classnames from 'classnames';
 
 import ServiceModel from '../../../models/Service';
+import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
 
 @observer
 export default class ServiceWebview extends Component {
@@ -20,6 +21,8 @@ export default class ServiceWebview extends Component {
 
   state = {
     forceRepaint: false,
+    targetUrl: '',
+    statusBarVisible: false,
   };
 
   componentDidMount() {
@@ -33,6 +36,17 @@ export default class ServiceWebview extends Component {
     });
   }
 
+  updateTargetUrl = (event) => {
+    let visible = true;
+    if (event.url === '' || event.url === '#') {
+      visible = false;
+    }
+    this.setState({
+      targetUrl: event.url,
+      statusBarVisible: visible,
+    });
+  }
+
   webview = null;
 
   render() {
@@ -47,6 +61,13 @@ export default class ServiceWebview extends Component {
       'services__webview--force-repaint': this.state.forceRepaint,
     });
 
+    let statusBar = null;
+    if (this.state.statusBarVisible) {
+      statusBar = (
+        <StatusBarTargetUrl position="bottom" text={this.state.targetUrl} />
+      );
+    }
+
     return (
       <div className={webviewClasses}>
         <Webview
@@ -62,11 +83,14 @@ export default class ServiceWebview extends Component {
             webview: this.webview.view,
           })}
 
+          onUpdateTargetUrl={this.updateTargetUrl}
+
           useragent={service.userAgent}
 
           disablewebsecurity
           allowpopups
         />
+        {statusBar}
       </div>
     );
   }

src/components/ui/StatusBarTargetUrl.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+@observer
+export default class StatusBarTargetUrl extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    className: PropTypes.string,
+    position: PropTypes.string,
+    text: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    position: 'bottom',
+    text: '',
+  };
+
+  render() {
+    const {
+      className,
+      position,
+      text,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames({
+          'status-bar-target-url': true,
+          [`status-bar-target-url--${position}`]: true,
+          [`${className}`]: true,
+        })}
+      >
+        <div className="status-bar-target-url__content">
+          {text}
+        </div>
+      </div>
+    );
+  }
+}

src/styles/main.scss

@@ -20,6 +20,7 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './auth.scss';
 @import './tooltip.scss';
 @import './info-bar.scss';
+@import './status-bar-target-url.scss';
 @import './animations.scss';
 @import './infobox.scss';
 @import './badge.scss';

src/styles/status-bar-target-url.scss

@@ -0,0 +1,33 @@
+@import './config.scss';
+
+.status-bar-target-url {
+  // width: 100%;
+  height: auto;
+  background: $theme-gray-lighter;
+  padding: 2px 20px 2px 10px;
+  position: absolute;
+  // z-index: 100;
+  box-shadow: 0 0 8px rgba(black, 0.2);
+
+  color: $theme-gray-dark;
+
+  .status-bar-target-url__content {
+    height: auto;
+
+    .mdi {
+      margin-right: 5px;
+    }
+  }
+
+  &.status-bar-target-url--bottom {
+    order: 10;
+    bottom: 0;
+    border-top-right-radius: 5px;
+  }
+
+  &.status-bar-target-url--top {
+    order: 10;
+    top: 0;
+    border-bottom-right-radius: 5px;
+  }
+}