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

Fix alignment of avatars and status messages

Browse source 
also introduce the status message to the MemberInfo pane

Part of https://github.com/vector-im/riot-web/issues/1528
This commit is contained in:
Travis Ralston 2018-12-12 12:57:48 -07:00
parent ce7969e3d5
commit cd9ea2b2d7
6 changed files with 32 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
res/css/views/rooms/_EntityTile.scss
View file

@ -111,4 +111,12 @@ limitations under the License.
opacity: 0.25;
}
.mx_EntityTile_subtext {
font-size: 11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}

7
res/css/views/rooms/_MemberInfo.scss
View file

@ -110,3 +110,10 @@ limitations under the License.
margin-left: 8px;
}
.mx_MemberInfo_statusMessage {
font-size: 11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}

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

@ -41,7 +41,7 @@ limitations under the License.
.mx_RoomTile_subtext {
display: inline-block;
font-size: 0.8em;
font-size: 11px;
padding: 0 0 0 7px;
margin: 0;
overflow: hidden;
@ -62,10 +62,14 @@ limitations under the License.
padding-left: 16px;
padding-right: 6px;
width: 24px;
height: 24px;
vertical-align: middle;
}
.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
padding-top: 0;
vertical-align: super;
}
.mx_RoomTile_dm {
display: block;
position: absolute;
@ -89,10 +93,6 @@ 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); */
}

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

@ -131,7 +131,7 @@ const EntityTile = React.createClass({
nameClasses += ' mx_EntityTile_name_hover';
}
if (this.props.subtextLabel) {
presenceLabel = <span className="mx_PresenceLabel">{this.props.subtextLabel}</span>;
presenceLabel = <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>;
}
nameEl = (
<div className="mx_EntityTile_details">
@ -148,7 +148,7 @@ const EntityTile = React.createClass({
<EmojiText element="div" className="mx_EntityTile_name" dir="auto">
{name}
</EmojiText>
<span className="mx_PresenceLabel">{this.props.subtextLabel}</span>
<span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>
</div>
);
} else {

8
src/components/views/rooms/MemberInfo.js
View file

@ -889,11 +889,13 @@ module.exports = withMatrixClient(React.createClass({
let presenceState;
let presenceLastActiveAgo;
let presenceCurrentlyActive;
let statusMessage;
if (this.props.member.user) {
presenceState = this.props.member.user.presence;
presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
presenceCurrentlyActive = this.props.member.user.currentlyActive;
statusMessage = this.props.member.user.statusMessage;
}
const room = this.props.matrixClient.getRoom(this.props.member.roomId);
@ -915,6 +917,11 @@ module.exports = withMatrixClient(React.createClass({
presenceState={presenceState} />;
}
let statusLabel = null;
if (statusMessage) {
statusLabel = <span className="mx_MemberInfo_statusMessage">{ statusMessage }</span>;
}
let roomMemberDetails = null;
if (this.props.member.roomId) { // is in room
const PowerSelector = sdk.getComponent('elements.PowerSelector');
@ -931,6 +938,7 @@ module.exports = withMatrixClient(React.createClass({
</div>
<div className="mx_MemberInfo_profileField">
{presenceLabel}
{statusLabel}
</div>
</div>;
}

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

@ -272,7 +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,
'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
});
const avatarClasses = classNames({