diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/services/content/ServiceWebview.js | 2 | ||||
-rw-r--r-- | src/components/ui/StatusBarTargetUrl.js | 10 | ||||
-rw-r--r-- | src/styles/status-bar-target-url.scss | 26 |
3 files changed, 11 insertions, 27 deletions
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js index 7e33d694c..3ee3155be 100644 --- a/src/components/services/content/ServiceWebview.js +++ b/src/components/services/content/ServiceWebview.js | |||
@@ -64,7 +64,7 @@ export default class ServiceWebview extends Component { | |||
64 | let statusBar = null; | 64 | let statusBar = null; |
65 | if (this.state.statusBarVisible) { | 65 | if (this.state.statusBarVisible) { |
66 | statusBar = ( | 66 | statusBar = ( |
67 | <StatusBarTargetUrl position="bottom" text={this.state.targetUrl} /> | 67 | <StatusBarTargetUrl text={this.state.targetUrl} /> |
68 | ); | 68 | ); |
69 | } | 69 | } |
70 | 70 | ||
diff --git a/src/components/ui/StatusBarTargetUrl.js b/src/components/ui/StatusBarTargetUrl.js index 1c8dce0f7..b7b198f42 100644 --- a/src/components/ui/StatusBarTargetUrl.js +++ b/src/components/ui/StatusBarTargetUrl.js | |||
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import classnames from 'classnames'; | 4 | import classnames from 'classnames'; |
5 | 5 | ||
6 | import Appear from '../ui/effects/Appear'; | ||
7 | |||
6 | @observer | 8 | @observer |
7 | export default class StatusBarTargetUrl extends Component { | 9 | export default class StatusBarTargetUrl extends Component { |
8 | static propTypes = { | 10 | static propTypes = { |
9 | // eslint-disable-next-line | ||
10 | className: PropTypes.string, | 11 | className: PropTypes.string, |
11 | position: PropTypes.string, | ||
12 | text: PropTypes.string, | 12 | text: PropTypes.string, |
13 | }; | 13 | }; |
14 | 14 | ||
@@ -21,22 +21,20 @@ export default class StatusBarTargetUrl extends Component { | |||
21 | render() { | 21 | render() { |
22 | const { | 22 | const { |
23 | className, | 23 | className, |
24 | position, | ||
25 | text, | 24 | text, |
26 | } = this.props; | 25 | } = this.props; |
27 | 26 | ||
28 | return ( | 27 | return ( |
29 | <div | 28 | <Appear |
30 | className={classnames({ | 29 | className={classnames({ |
31 | 'status-bar-target-url': true, | 30 | 'status-bar-target-url': true, |
32 | [`status-bar-target-url--${position}`]: true, | ||
33 | [`${className}`]: true, | 31 | [`${className}`]: true, |
34 | })} | 32 | })} |
35 | > | 33 | > |
36 | <div className="status-bar-target-url__content"> | 34 | <div className="status-bar-target-url__content"> |
37 | {text} | 35 | {text} |
38 | </div> | 36 | </div> |
39 | </div> | 37 | </Appear> |
40 | ); | 38 | ); |
41 | } | 39 | } |
42 | } | 40 | } |
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss index 9a45314fb..95970750c 100644 --- a/src/styles/status-bar-target-url.scss +++ b/src/styles/status-bar-target-url.scss | |||
@@ -1,33 +1,19 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .status-bar-target-url { | 3 | .status-bar-target-url { |
4 | // width: 100%; | ||
5 | height: auto; | 4 | height: auto; |
6 | background: $theme-gray-lighter; | 5 | background: $theme-gray-lighter; |
7 | padding: 2px 20px 2px 10px; | 6 | padding: 4px; |
8 | position: absolute; | 7 | position: absolute; |
9 | // z-index: 100; | ||
10 | box-shadow: 0 0 8px rgba(black, 0.2); | 8 | box-shadow: 0 0 8px rgba(black, 0.2); |
11 | 9 | font-size: 12px; | |
12 | color: $theme-gray-dark; | 10 | color: $theme-gray-dark; |
11 | order: 10; | ||
12 | bottom: 0; | ||
13 | right: 0; | ||
14 | border-top-left-radius: 5px; | ||
13 | 15 | ||
14 | .status-bar-target-url__content { | 16 | .status-bar-target-url__content { |
15 | height: auto; | 17 | 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 | } | 18 | } |
33 | } | 19 | } |