diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/services/content/ServiceWebview.js | 24 | ||||
-rw-r--r-- | src/components/ui/StatusBarTargetUrl.js | 42 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/status-bar-target-url.scss | 33 |
4 files changed, 100 insertions, 0 deletions
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'; | |||
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | 7 | ||
8 | import ServiceModel from '../../../models/Service'; | 8 | import ServiceModel from '../../../models/Service'; |
9 | import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl'; | ||
9 | 10 | ||
10 | @observer | 11 | @observer |
11 | export default class ServiceWebview extends Component { | 12 | export default class ServiceWebview extends Component { |
@@ -20,6 +21,8 @@ export default class ServiceWebview extends Component { | |||
20 | 21 | ||
21 | state = { | 22 | state = { |
22 | forceRepaint: false, | 23 | forceRepaint: false, |
24 | targetUrl: '', | ||
25 | statusBarVisible: false, | ||
23 | }; | 26 | }; |
24 | 27 | ||
25 | componentDidMount() { | 28 | componentDidMount() { |
@@ -33,6 +36,17 @@ export default class ServiceWebview extends Component { | |||
33 | }); | 36 | }); |
34 | } | 37 | } |
35 | 38 | ||
39 | updateTargetUrl = (event) => { | ||
40 | let visible = true; | ||
41 | if (event.url === '' || event.url === '#') { | ||
42 | visible = false; | ||
43 | } | ||
44 | this.setState({ | ||
45 | targetUrl: event.url, | ||
46 | statusBarVisible: visible, | ||
47 | }); | ||
48 | } | ||
49 | |||
36 | webview = null; | 50 | webview = null; |
37 | 51 | ||
38 | render() { | 52 | render() { |
@@ -47,6 +61,13 @@ export default class ServiceWebview extends Component { | |||
47 | 'services__webview--force-repaint': this.state.forceRepaint, | 61 | 'services__webview--force-repaint': this.state.forceRepaint, |
48 | }); | 62 | }); |
49 | 63 | ||
64 | let statusBar = null; | ||
65 | if (this.state.statusBarVisible) { | ||
66 | statusBar = ( | ||
67 | <StatusBarTargetUrl position="bottom" text={this.state.targetUrl} /> | ||
68 | ); | ||
69 | } | ||
70 | |||
50 | return ( | 71 | return ( |
51 | <div className={webviewClasses}> | 72 | <div className={webviewClasses}> |
52 | <Webview | 73 | <Webview |
@@ -62,11 +83,14 @@ export default class ServiceWebview extends Component { | |||
62 | webview: this.webview.view, | 83 | webview: this.webview.view, |
63 | })} | 84 | })} |
64 | 85 | ||
86 | onUpdateTargetUrl={this.updateTargetUrl} | ||
87 | |||
65 | useragent={service.userAgent} | 88 | useragent={service.userAgent} |
66 | 89 | ||
67 | disablewebsecurity | 90 | disablewebsecurity |
68 | allowpopups | 91 | allowpopups |
69 | /> | 92 | /> |
93 | {statusBar} | ||
70 | </div> | 94 | </div> |
71 | ); | 95 | ); |
72 | } | 96 | } |
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 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import classnames from 'classnames'; | ||
5 | |||
6 | @observer | ||
7 | export default class StatusBarTargetUrl extends Component { | ||
8 | static propTypes = { | ||
9 | // eslint-disable-next-line | ||
10 | className: PropTypes.string, | ||
11 | position: PropTypes.string, | ||
12 | text: PropTypes.string, | ||
13 | }; | ||
14 | |||
15 | static defaultProps = { | ||
16 | className: '', | ||
17 | position: 'bottom', | ||
18 | text: '', | ||
19 | }; | ||
20 | |||
21 | render() { | ||
22 | const { | ||
23 | className, | ||
24 | position, | ||
25 | text, | ||
26 | } = this.props; | ||
27 | |||
28 | return ( | ||
29 | <div | ||
30 | className={classnames({ | ||
31 | 'status-bar-target-url': true, | ||
32 | [`status-bar-target-url--${position}`]: true, | ||
33 | [`${className}`]: true, | ||
34 | })} | ||
35 | > | ||
36 | <div className="status-bar-target-url__content"> | ||
37 | {text} | ||
38 | </div> | ||
39 | </div> | ||
40 | ); | ||
41 | } | ||
42 | } | ||
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'; | |||
20 | @import './auth.scss'; | 20 | @import './auth.scss'; |
21 | @import './tooltip.scss'; | 21 | @import './tooltip.scss'; |
22 | @import './info-bar.scss'; | 22 | @import './info-bar.scss'; |
23 | @import './status-bar-target-url.scss'; | ||
23 | @import './animations.scss'; | 24 | @import './animations.scss'; |
24 | @import './infobox.scss'; | 25 | @import './infobox.scss'; |
25 | @import './badge.scss'; | 26 | @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 @@ | |||
1 | @import './config.scss'; | ||
2 | |||
3 | .status-bar-target-url { | ||
4 | // width: 100%; | ||
5 | height: auto; | ||
6 | background: $theme-gray-lighter; | ||
7 | padding: 2px 20px 2px 10px; | ||
8 | position: absolute; | ||
9 | // z-index: 100; | ||
10 | box-shadow: 0 0 8px rgba(black, 0.2); | ||
11 | |||
12 | color: $theme-gray-dark; | ||
13 | |||
14 | .status-bar-target-url__content { | ||
15 | height: auto; | ||
16 | |||
17 | .mdi { | ||
18 | margin-right: 5px; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | &.status-bar-target-url--bottom { | ||
23 | order: 10; | ||
24 | bottom: 0; | ||
25 | border-top-right-radius: 5px; | ||
26 | } | ||
27 | |||
28 | &.status-bar-target-url--top { | ||
29 | order: 10; | ||
30 | top: 0; | ||
31 | border-bottom-right-radius: 5px; | ||
32 | } | ||
33 | } | ||