gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated tooltip styling to be better inline with the design

This commit is contained in:
wmwragg 2016-09-03 13:57:49 +01:00
parent ab9f48cd47
commit d1dd4bd3d8
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/structures/BottomLeftMenu.js
View File

@ -77,7 +77,7 @@ module.exports = React.createClass({
// Get the label/tooltip to show
getLabel: function(label, parent, show) {
if (true) {
if (show) {
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
return <RoomTooltip label={label} parent={parent} left={6} top={this.props.collapsed ? 3 : null} />;
}

4
src/components/views/rooms/RoomTooltip.js
View File

@ -103,8 +103,8 @@ module.exports = React.createClass({
var tooltip = (
<div className="mx_RoomTooltip" style={style} >
<img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
{ label }
<div className="mx_RoomTooltip_chevron"></div>
{ label }
</div>
);

22
src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
View File

@ -16,15 +16,31 @@ limitations under the License.
.mx_RoomTooltip_chevron {
position: absolute;
left: -9px;
left: -8px;
top: 4px;
pointer-events: none;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 8px solid rgba(187, 187, 187, 0.5);
border-bottom: 8px solid transparent;
}
.mx_RoomTooltip_chevron:after{
content:'';
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #fff;
border-bottom: 7px solid transparent;
position:absolute;
top: -7px;
left: 1px;
}
.mx_RoomTooltip {
display: none;
position: fixed;
border: 1px solid #a4a4a4;
border: 1px solid rgba(187, 187, 187, 0.5);
border-radius: 5px;
background-color: #fff;
z-index: 2000;