Permalink
Browse files

Merge pull request #56 from GustavoKatel/showUrlOnLinkHover

Show url when mouse enters a link
  • Loading branch information...
adlk committed Oct 22, 2017
2 parents eae93c0 + 4c3aee0 commit a0cec4d5bc92fb90429523c28e5d3426040a8723
@@ -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>
);
}
@@ -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>
);
}
}
@@ -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';
@@ -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;
}
}

0 comments on commit a0cec4d

Please sign in to comment.