Merge pull request #56 from GustavoKatel/showUrlOnLinkHover

Show url when mouse enters a link

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;
  }
}