mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 11:47:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Display custom status messages in the UI

Browse source 
Part of https://github.com/vector-im/riot-web/issues/1528
This commit is contained in:
Travis Ralston 2018-12-11 21:40:11 -07:00
parent ab6566980f
commit ce7969e3d5
4 changed files with 55 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
res/css/views/rooms/_RoomTile.scss
View file

@ -35,7 +35,20 @@ limitations under the License.
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
height: 24px;
//height: 24px;
vertical-align: middle;
}
.mx_RoomTile_subtext {
display: inline-block;
font-size: 0.8em;
padding: 0 0 0 7px;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
position: relative;
bottom: 4px;
}
.mx_RoomTile_avatar_container {
@ -76,6 +89,10 @@ limitations under the License.
text-overflow: ellipsis;
}
.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
padding-top: 0;
}
.mx_RoomTile_invite {
/* color: rgba(69, 69, 69, 0.5); */
}

19
src/components/views/rooms/EntityTile.js
View file

@ -70,6 +70,7 @@ const EntityTile = React.createClass({
onClick: PropTypes.func,
suppressOnHover: PropTypes.bool,
showPresence: PropTypes.bool,
subtextLabel: PropTypes.string,
},
getDefaultProps: function() {
@ -126,18 +127,30 @@ const EntityTile = React.createClass({
if (this.props.showPresence) {
presenceLabel = <PresenceLabel activeAgo={activeAgo}
currentlyActive={this.props.presenceCurrentlyActive}
presenceState={this.props.presenceState} />;
presenceState={this.props.presenceState}/>;
nameClasses += ' mx_EntityTile_name_hover';
}
if (this.props.subtextLabel) {
presenceLabel = <span className="mx_PresenceLabel">{this.props.subtextLabel}</span>;
}
nameEl = (
<div className="mx_EntityTile_details">
<img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12" />
<img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
<EmojiText element="div" className={nameClasses} dir="auto">
{ name }
{name}
</EmojiText>
{presenceLabel}
</div>
);
} else if (this.props.subtextLabel) {
nameEl = (
<div className="mx_EntityTile_details">
<EmojiText element="div" className="mx_EntityTile_name" dir="auto">
{name}
</EmojiText>
<span className="mx_PresenceLabel">{this.props.subtextLabel}</span>
</div>
);
} else {
nameEl = (
<EmojiText element="div" className="mx_EntityTile_name" dir="auto">{ name }</EmojiText>

5
src/components/views/rooms/MemberTile.js
View file

@ -84,6 +84,7 @@ module.exports = React.createClass({
const name = this._getDisplayName();
const active = -1;
const presenceState = member.user ? member.user.presence : null;
const statusMessage = member.user ? member.user.statusMessage : null;
const av = (
<MemberAvatar member={member} width={36} height={36} />
@ -106,7 +107,9 @@ module.exports = React.createClass({
presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
name={name} powerStatus={powerStatus} showPresence={this.props.showPresence} />
name={name} powerStatus={powerStatus} showPresence={this.props.showPresence}
subtextLabel={statusMessage}
/>
);
},
});

16
src/components/views/rooms/RoomTile.js
View file

@ -251,6 +251,17 @@ module.exports = React.createClass({
const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
const badges = notifBadges || mentionBadges;
const isJoined = this.props.room.getMyMembership() === "join";
const looksLikeDm = this.props.room.currentState.getMembers().length === 2;
let subtext = null;
if (!isInvite && isJoined && looksLikeDm) {
const selfId = MatrixClientPeg.get().getUserId();
const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
if (otherMember.user && otherMember.user.statusMessage) {
subtext = otherMember.user.statusMessage;
}
}
const classes = classNames({
'mx_RoomTile': true,
'mx_RoomTile_selected': this.state.selected,
@ -261,6 +272,7 @@ module.exports = React.createClass({
'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
'mx_RoomTile_noBadges': !badges,
'mx_RoomTile_transparent': this.props.transparent,
'mx_RoomTile_hasSubtext': !!subtext && !this.props.isCollapsed,
});
const avatarClasses = classNames({
@ -291,6 +303,7 @@ module.exports = React.createClass({
const EmojiText = sdk.getComponent('elements.EmojiText');
let label;
let subtextLabel;
let tooltip;
if (!this.props.collapsed) {
const nameClasses = classNames({
@ -299,6 +312,8 @@ module.exports = React.createClass({
'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
});
subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
if (this.state.selected) {
const nameSelected = <EmojiText>{ name }</EmojiText>;
@ -339,6 +354,7 @@ module.exports = React.createClass({
</div>
<div className="mx_RoomTile_nameContainer">
{ label }
{ subtextLabel }
{ badge }
</div>
{ /* { incomingCallBox } */ }