Merge pull request #1277 from matrix-org/luke/feature-pills-hide-avatar-setting
Add optional setting for hiding avatars in <Pill>s
This commit is contained in:
commit
ca2273519d
5 changed files with 28 additions and 5 deletions
|
@ -101,6 +101,10 @@ const SETTINGS_LABELS = [
|
||||||
id: 'MessageComposerInput.autoReplaceEmoji',
|
id: 'MessageComposerInput.autoReplaceEmoji',
|
||||||
label: 'Automatically replace plain text Emoji',
|
label: 'Automatically replace plain text Emoji',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'Pill.shouldHidePillAvatar',
|
||||||
|
label: 'Hide avatars in user and room mentions',
|
||||||
|
},
|
||||||
/*
|
/*
|
||||||
{
|
{
|
||||||
id: 'useFixedWidthFont',
|
id: 'useFixedWidthFont',
|
||||||
|
|
|
@ -47,6 +47,8 @@ const Pill = React.createClass({
|
||||||
inMessage: PropTypes.bool,
|
inMessage: PropTypes.bool,
|
||||||
// The room in which this pill is being rendered
|
// The room in which this pill is being rendered
|
||||||
room: PropTypes.instanceOf(Room),
|
room: PropTypes.instanceOf(Room),
|
||||||
|
// Whether to include an avatar in the pill
|
||||||
|
shouldShowPillAvatar: PropTypes.bool,
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
|
@ -155,7 +157,9 @@ const Pill = React.createClass({
|
||||||
if (member) {
|
if (member) {
|
||||||
userId = member.userId;
|
userId = member.userId;
|
||||||
linkText = member.rawDisplayName.replace(' (IRC)', ''); // FIXME when groups are done
|
linkText = member.rawDisplayName.replace(' (IRC)', ''); // FIXME when groups are done
|
||||||
|
if (this.props.shouldShowPillAvatar) {
|
||||||
avatar = <MemberAvatar member={member} width={16} height={16}/>;
|
avatar = <MemberAvatar member={member} width={16} height={16}/>;
|
||||||
|
}
|
||||||
pillClass = 'mx_UserPill';
|
pillClass = 'mx_UserPill';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -164,7 +168,9 @@ const Pill = React.createClass({
|
||||||
const room = this.state.room;
|
const room = this.state.room;
|
||||||
if (room) {
|
if (room) {
|
||||||
linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
|
linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
|
||||||
|
if (this.props.shouldShowPillAvatar) {
|
||||||
avatar = <RoomAvatar room={room} width={16} height={16}/>;
|
avatar = <RoomAvatar room={room} width={16} height={16}/>;
|
||||||
|
}
|
||||||
pillClass = 'mx_RoomPill';
|
pillClass = 'mx_RoomPill';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -170,6 +170,7 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
pillifyLinks: function(nodes) {
|
pillifyLinks: function(nodes) {
|
||||||
|
const shouldShowPillAvatar = !UserSettingsStore.getSyncedSetting("Pill.shouldHidePillAvatar", false);
|
||||||
for (let i = 0; i < nodes.length; i++) {
|
for (let i = 0; i < nodes.length; i++) {
|
||||||
const node = nodes[i];
|
const node = nodes[i];
|
||||||
if (node.tagName === "A" && node.getAttribute("href")) {
|
if (node.tagName === "A" && node.getAttribute("href")) {
|
||||||
|
@ -181,7 +182,12 @@ module.exports = React.createClass({
|
||||||
const pillContainer = document.createElement('span');
|
const pillContainer = document.createElement('span');
|
||||||
|
|
||||||
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
|
||||||
const pill = <Pill url={href} inMessage={true} room={room}/>;
|
const pill = <Pill
|
||||||
|
url={href}
|
||||||
|
inMessage={true}
|
||||||
|
room={room}
|
||||||
|
shouldShowPillAvatar={shouldShowPillAvatar}
|
||||||
|
/>;
|
||||||
|
|
||||||
ReactDOM.render(pill, pillContainer);
|
ReactDOM.render(pill, pillContainer);
|
||||||
node.parentNode.replaceChild(pillContainer, node);
|
node.parentNode.replaceChild(pillContainer, node);
|
||||||
|
|
|
@ -204,13 +204,19 @@ export default class MessageComposerInput extends React.Component {
|
||||||
createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
|
createEditorState(richText: boolean, contentState: ?ContentState): EditorState {
|
||||||
const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
|
const decorators = richText ? RichText.getScopedRTDecorators(this.props) :
|
||||||
RichText.getScopedMDDecorators(this.props);
|
RichText.getScopedMDDecorators(this.props);
|
||||||
|
const shouldShowPillAvatar = !UserSettingsStore.getSyncedSetting("Pill.shouldHidePillAvatar", false);
|
||||||
decorators.push({
|
decorators.push({
|
||||||
strategy: this.findLinkEntities.bind(this),
|
strategy: this.findLinkEntities.bind(this),
|
||||||
component: (entityProps) => {
|
component: (entityProps) => {
|
||||||
const Pill = sdk.getComponent('elements.Pill');
|
const Pill = sdk.getComponent('elements.Pill');
|
||||||
const {url} = entityProps.contentState.getEntity(entityProps.entityKey).getData();
|
const {url} = entityProps.contentState.getEntity(entityProps.entityKey).getData();
|
||||||
if (Pill.isPillUrl(url)) {
|
if (Pill.isPillUrl(url)) {
|
||||||
return <Pill url={url} room={this.props.room} offsetKey={entityProps.offsetKey}/>;
|
return <Pill
|
||||||
|
url={url}
|
||||||
|
room={this.props.room}
|
||||||
|
offsetKey={entityProps.offsetKey}
|
||||||
|
shouldShowPillAvatar={shouldShowPillAvatar}
|
||||||
|
/>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -966,5 +966,6 @@
|
||||||
"Edit Group": "Edit Group",
|
"Edit Group": "Edit Group",
|
||||||
"Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
|
"Automatically replace plain text Emoji": "Automatically replace plain text Emoji",
|
||||||
"Failed to upload image": "Failed to upload image",
|
"Failed to upload image": "Failed to upload image",
|
||||||
"Failed to update group": "Failed to update group"
|
"Failed to update group": "Failed to update group",
|
||||||
|
"Hide avatars in user and room mentions": "Hide avatars in user and room mentions"
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue