Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Merge pull request #56 from GustavoKatel/showUrlOnLinkHover
Show url when mouse enters a link
- Loading branch information
Showing
with
100 additions
and 0 deletions.
@@ -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> | ||
); | ||
} | ||
} |
@@ -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; | ||
} | ||
} |