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 // Get the label/tooltip to show
getLabel: function(label, parent, show) { getLabel: function(label, parent, show) {
if (true) { if (show) {
var RoomTooltip = sdk.getComponent("rooms.RoomTooltip"); var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
return <RoomTooltip label={label} parent={parent} left={6} top={this.props.collapsed ? 3 : null} />; 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 = ( var tooltip = (
<div className="mx_RoomTooltip" style={style} > <div className="mx_RoomTooltip" style={style} >
<img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/> <div className="mx_RoomTooltip_chevron"></div>
{ label } { label }
</div> </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 { .mx_RoomTooltip_chevron {
position: absolute; position: absolute;
left: -9px; left: -8px;
top: 4px; 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 { .mx_RoomTooltip {
display: none; display: none;
position: fixed; position: fixed;
border: 1px solid #a4a4a4; border: 1px solid rgba(187, 187, 187, 0.5);
border-radius: 5px; border-radius: 5px;
background-color: #fff; background-color: #fff;
z-index: 2000; z-index: 2000;