Tweak custom status avatar ring
Adjusts the appearance of the avatar ring to match the latest comps. In addition, we now always render the surrounding button element, which simplifies styling since the same size is now occupied both with and without the feature. This improves alignment between text in the composer and text in the message history (https://github.com/vector-im/riot-web/issues/8111).
This commit is contained in:
parent
7d6b996952
commit
eae1e4c9aa
3 changed files with 25 additions and 13 deletions
|
@ -96,21 +96,25 @@ export default class MemberStatusMessageAvatar extends React.Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
|
||||
return <MemberAvatar member={this.props.member}
|
||||
width={this.props.width}
|
||||
height={this.props.height}
|
||||
resizeMethod={this.props.resizeMethod} />;
|
||||
}
|
||||
const customStatusFeatureEnabled =
|
||||
SettingsStore.isFeatureEnabled("feature_custom_status");
|
||||
|
||||
const hasStatus = this.props.member.user ? !!this.props.member.user._unstable_statusMessage : false;
|
||||
let onClick = null;
|
||||
let hasStatus = false;
|
||||
|
||||
if (customStatusFeatureEnabled) {
|
||||
onClick = this._onClick;
|
||||
if (this.props.member.user) {
|
||||
hasStatus = !!this.props.member.user._unstable_statusMessage;
|
||||
}
|
||||
}
|
||||
|
||||
const classes = classNames({
|
||||
"mx_MemberStatusMessageAvatar": true,
|
||||
"mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
|
||||
});
|
||||
|
||||
return <AccessibleButton onClick={this._onClick} className={classes} element="div">
|
||||
return <AccessibleButton onClick={onClick} className={classes} element="div">
|
||||
<MemberAvatar member={this.props.member}
|
||||
width={this.props.width}
|
||||
height={this.props.height}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue