diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 043ff42ea..7e33d694c 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/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 = (
+
+ );
+ }
+
return (
+ {statusBar}
);
}
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js
new file mode 100644
index 000000000..1c8dce0f7
--- /dev/null
+++ b/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 (
+
+ );
+ }
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 8afc86f98..0a082729c 100644
--- a/src/styles/main.scss
+++ b/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';
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss
new file mode 100644
index 000000000..9a45314fb
--- /dev/null
+++ b/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;
+ }
+}