PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Tweak custom status avatar ring

Browse source 
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:
J. Ryan Stinnett 2019-01-14 10:26:11 -06:00
parent 7d6b996952
commit eae1e4c9aa
3 changed files with 25 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
res/css/views/avatars/_MemberStatusMessageAvatar.scss
View file

@ -14,8 +14,16 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_MemberStatusMessageAvatar_hasStatus {
border: 2px solid $accent-color;
border-radius: 40px;
padding-right: 0 !important; /* Override AccessibleButton styling */
.mx_MemberStatusMessageAvatar .mx_BaseAvatar {
padding: 1.5px;
border: 1.2px solid transparent;
border-radius: 14px;
}
.mx_MemberStatusMessageAvatar .mx_BaseAvatar_initial {
left: 1.5px;
}
.mx_MemberStatusMessageAvatar_hasStatus .mx_BaseAvatar {
border-color: $accent-color;
}

2
res/css/views/rooms/_MessageComposer.scss
View file

@ -58,7 +58,7 @@ limitations under the License.
}
.mx_MessageComposer .mx_MessageComposer_avatar {
padding: 0 28px;
padding: 0 27px;
}
.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {

20
src/components/views/avatars/MemberStatusMessageAvatar.js
View file

@ -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}