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

Merge pull request #4384 from matrix-org/t3chguy/composer_pills

Browse source 
Composer pills respect showPillAvatar setting
This commit is contained in:
Michael Telatynski 2020-04-10 16:45:46 +01:00 committed by GitHub
commit c000583099
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
res/css/views/rooms/_BasicMessageComposer.scss
View file

@ -44,27 +44,29 @@ limitations under the License.
outline: none;
overflow-x: hidden;
span.mx_UserPill, span.mx_RoomPill {
padding-left: 21px;
position: relative;
&.mx_BasicMessageComposer_input_shouldShowPillAvatar {
span.mx_UserPill, span.mx_RoomPill {
padding-left: 21px;
position: relative;
// avatar psuedo element
&::before {
position: absolute;
left: 2px;
top: 2px;
content: var(--avatar-letter);
width: 16px;
height: 16px;
background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: $font-16px;
font-size: $font-10-4px;
// avatar psuedo element
&::before {
position: absolute;
left: 2px;
top: 2px;
content: var(--avatar-letter);
width: 16px;
height: 16px;
background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color;
background-repeat: no-repeat;
background-size: 16px;
border-radius: 8px;
text-align: center;
font-weight: normal;
line-height: $font-16px;
font-size: $font-10-4px;
}
}
}
}

28
src/components/views/rooms/BasicMessageComposer.js
View file

@ -85,6 +85,7 @@ export default class BasicMessageEditor extends React.Component {
super(props);
this.state = {
autoComplete: null,
showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
};
this._editorRef = null;
this._autocompleteRef = null;
@ -93,6 +94,7 @@ export default class BasicMessageEditor extends React.Component {
this._isIMEComposing = false;
this._hasTextSelected = false;
this._emoticonSettingHandle = null;
this._shouldShowPillAvatarSettingHandle = null;
}
componentDidUpdate(prevProps) {
@ -518,10 +520,15 @@ export default class BasicMessageEditor extends React.Component {
this.setState({completionIndex});
}
_configureEmoticonAutoReplace() {
_configureEmoticonAutoReplace = () => {
const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
this.props.model.setTransformCallback(shouldReplace ? this._replaceEmoticon : null);
}
};
_configureShouldShowPillAvatar = () => {
const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
this.setState({ showPillAvatar });
};
componentWillUnmount() {
document.removeEventListener("selectionchange", this._onSelectionChange);
@ -529,15 +536,17 @@ export default class BasicMessageEditor extends React.Component {
this._editorRef.removeEventListener("compositionstart", this._onCompositionStart, true);
this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true);
SettingsStore.unwatchSetting(this._emoticonSettingHandle);
SettingsStore.unwatchSetting(this._shouldShowPillAvatarSettingHandle);
}
componentDidMount() {
const model = this.props.model;
model.setUpdateCallback(this._updateEditorState);
this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null, () => {
this._configureEmoticonAutoReplace();
});
this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
this._configureEmoticonAutoReplace);
this._configureEmoticonAutoReplace();
this._shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
this._configureShouldShowPillAvatar);
const partCreator = model.partCreator;
// TODO: does this allow us to get rid of EditorStateTransfer?
// not really, but we could not serialize the parts, and just change the autoCompleter
@ -615,9 +624,12 @@ export default class BasicMessageEditor extends React.Component {
/>
</div>);
}
const classes = classNames("mx_BasicMessageComposer", {
const wrapperClasses = classNames("mx_BasicMessageComposer", {
"mx_BasicMessageComposer_input_error": this.state.showVisualBell,
});
const classes = classNames("mx_BasicMessageComposer_input", {
"mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
});
const MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
const shortcuts = {
@ -628,11 +640,11 @@ export default class BasicMessageEditor extends React.Component {
const {completionIndex} = this.state;
return (<div className={classes}>
return (<div className={wrapperClasses}>
{ autoComplete }
<MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
<div
className="mx_BasicMessageComposer_input"
className={classes}
contentEditable="true"
tabIndex="0"
onBlur={this._onBlur}