OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

New design for long names

pull/21833/head
wmwragg 2016-08-02 14:46:47 +01:00
parent d16aa276e2
commit 2c2f689361
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/rooms/RoomList.js
View File

@ -268,9 +268,11 @@ module.exports = React.createClass({
}, },
_repositionTooltip: function(e) { _repositionTooltip: function(e) {
if (this.tooltip && this.tooltip.parentElement) { // We access the parent of the parent, as the tooltip is inside a container
// Needs refactoring into a better multipurpose tooltip
if (this.tooltip && this.tooltip.parentElement && this.tooltip.parentElement.parentElement) {
var scroll = ReactDOM.findDOMNode(this); var scroll = ReactDOM.findDOMNode(this);
this.tooltip.style.top = (3 + scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; this.tooltip.style.top = (3 + scroll.parentElement.offsetTop + this.tooltip.parentElement.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px";
} }
}, },

18
src/components/views/rooms/RoomTile.js
View File

@ -99,7 +99,8 @@ module.exports = React.createClass({
badgeOnMouseEnter: function() { badgeOnMouseEnter: function() {
// Only allow none guests to access the context menu // Only allow none guests to access the context menu
if (!MatrixClientPeg.get().isGuest()) { // and only change it if it needs to change
if (!MatrixClientPeg.get().isGuest() && !this.state.badgeHover) {
this.setState( { badgeHover : true } ); this.setState( { badgeHover : true } );
} }
}, },
@ -185,9 +186,9 @@ module.exports = React.createClass({
} }
if (this.state.areNotifsMuted && !(this.state.badgeHover || this.state.menu)) { if (this.state.areNotifsMuted && !(this.state.badgeHover || this.state.menu)) {
badge = <div className={ badgeClasses } onClick={this.onBadgeClicked} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}><img className="mx_RoomTile_badgeIcon" src="img/icon-context-mute.svg" width="16" height="12" /></div>; badge = <div className={ badgeClasses } onClick={this.onBadgeClicked}><img className="mx_RoomTile_badgeIcon" src="img/icon-context-mute.svg" width="16" height="12" /></div>;
} else { } else {
badge = <div className={ badgeClasses } onClick={this.onBadgeClicked} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>{ badgeContent }</div>; badge = <div className={ badgeClasses } onClick={this.onBadgeClicked}>{ badgeContent }</div>;
} }
var label; var label;
@ -197,15 +198,16 @@ module.exports = React.createClass({
'mx_RoomTile_name': true, 'mx_RoomTile_name': true,
'mx_RoomTile_invite': this.props.isInvite, 'mx_RoomTile_invite': this.props.isInvite,
'mx_RoomTile_mute': this.state.areNotifsMuted, 'mx_RoomTile_mute': this.state.areNotifsMuted,
'mx_RoomTile_badgeShown': this.props.highlight || notificationCount > 0 || this.state.badgeHover || this.state.menu || this.state.areNotifsMuted,
}); });
let nameHTML = emojifyText(name); let nameHTML = emojifyText(name);
if (this.props.selected) { if (this.props.selected) {
let nameSelected = <span dangerouslySetInnerHTML={nameHTML}></span>; let nameSelected = <span dangerouslySetInnerHTML={nameHTML}></span>;
label = <div title={ name } onClick={this.onClick} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave} className={ nameClasses }>{ nameSelected }</div>; label = <div title={ name } onClick={this.onClick} className={ nameClasses }>{ nameSelected }</div>;
} else { } else {
label = <div title={ name } onClick={this.onClick} onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave} className={ nameClasses } dangerouslySetInnerHTML={nameHTML}></div>; label = <div title={ name } onClick={this.onClick} className={ nameClasses } dangerouslySetInnerHTML={nameHTML}></div>;
} }
} }
else if (this.state.hover) { else if (this.state.hover) {
@ -232,8 +234,10 @@ module.exports = React.createClass({
<div className={avatarClasses}> <div className={avatarClasses}>
<RoomAvatar onClick={this.onClick} room={this.props.room} width={24} height={24} /> <RoomAvatar onClick={this.onClick} room={this.props.room} width={24} height={24} />
</div> </div>
{ label } <div className="mx_RoomTile_nameContainer" onMouseEnter={this.badgeOnMouseEnter} onMouseLeave={this.badgeOnMouseLeave}>
{ badge } { label }
{ badge }
</div>
{ incomingCallBox } { incomingCallBox }
{ tooltip } { tooltip }
</div> </div>