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

Merge pull request #1615 from matrix-org/luke/fix-sender-profile-opacity

Browse source 
Do something more sensible for sender profile name/aux opacity
This commit is contained in:
David Baker 2017-11-16 15:35:16 +00:00 committed by GitHub
commit 02629d13d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/views/messages/SenderProfile.js
View file

@ -19,7 +19,7 @@
import React from 'react'; import React from 'react';
import sdk from '../../../index'; import sdk from '../../../index';
import Flair from '../elements/Flair.js'; import Flair from '../elements/Flair.js';
import { _t, substitute } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
export default function SenderProfile(props) { export default function SenderProfile(props) {
const EmojiText = sdk.getComponent('elements.EmojiText'); const EmojiText = sdk.getComponent('elements.EmojiText');
@ -31,39 +31,30 @@ export default function SenderProfile(props) {
return <span />; // emote message must include the name so don't duplicate it return <span />; // emote message must include the name so don't duplicate it
} }
const nameElem = <EmojiText key='name'>{ name || '' }</EmojiText>;
// Name + flair // Name + flair
const nameElem = [ const nameFlair = <span>
<EmojiText key='name' className="mx_SenderProfile_name">{ name || '' }</EmojiText>, <span className="mx_SenderProfile_name">
props.enableFlair ? { nameElem }
</span>
{ props.enableFlair ?
<Flair key='flair' <Flair key='flair'
userId={mxEvent.getSender()} userId={mxEvent.getSender()}
roomId={mxEvent.getRoomId()} roomId={mxEvent.getRoomId()}
showRelated={true} /> showRelated={true} />
: null, : null
]; }
</span>;
let content; const content = props.text ?
if (props.text) { <span className="mx_SenderProfile_aux">
content = _t(props.text, { senderName: () => nameElem }); { _t(props.text, { senderName: () => nameElem }) }
} else { </span> : nameFlair;
// There is nothing to translate here, so call substitute() instead
content = substitute('%(senderName)s', { senderName: () => nameElem });
}
// The text surrounding the user name must be wrapped in order for it to have the correct opacity.
// It is not possible to wrap the whole thing, because the user name might contain flair which should
// be shown at full opacity. Sadly CSS does not make it possible to "reset" opacity so we have to do it
// in parts like this. Sometimes CSS makes me a sad panda :-(
// XXX: This could be avoided if the actual colour is set, rather than faking it with opacity
return ( return (
<div className="mx_SenderProfile" dir="auto" onClick={props.onClick}> <div className="mx_SenderProfile" dir="auto" onClick={props.onClick}>
{ content.props.children[0] ? { content }
<span className='mx_SenderProfile_aux'>{ content.props.children[0] }</span> : ''
}
{ content.props.children[1] }
{ content.props.children[2] ?
<span className='mx_SenderProfile_aux'>{ content.props.children[2] }</span> : ''
}
</div> </div>
); );
} }