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; outline: none;
overflow-x: hidden; overflow-x: hidden;
span.mx_UserPill, span.mx_RoomPill { &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
padding-left: 21px; span.mx_UserPill, span.mx_RoomPill {
position: relative; padding-left: 21px;
position: relative;
// avatar psuedo element // avatar psuedo element
&::before { &::before {
position: absolute; position: absolute;
left: 2px; left: 2px;
top: 2px; top: 2px;
content: var(--avatar-letter); content: var(--avatar-letter);
width: 16px; width: 16px;
height: 16px; height: 16px;
background: var(--avatar-background), $avatar-bg-color; background: var(--avatar-background), $avatar-bg-color;
color: $avatar-initial-color; color: $avatar-initial-color;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 16px; background-size: 16px;
border-radius: 8px; border-radius: 8px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
line-height: $font-16px; line-height: $font-16px;
font-size: $font-10-4px; 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); super(props);
this.state = { this.state = {
autoComplete: null, autoComplete: null,
showPillAvatar: SettingsStore.getValue("Pill.shouldShowPillAvatar"),
}; };
this._editorRef = null; this._editorRef = null;
this._autocompleteRef = null; this._autocompleteRef = null;
@ -93,6 +94,7 @@ export default class BasicMessageEditor extends React.Component {
this._isIMEComposing = false; this._isIMEComposing = false;
this._hasTextSelected = false; this._hasTextSelected = false;
this._emoticonSettingHandle = null; this._emoticonSettingHandle = null;
this._shouldShowPillAvatarSettingHandle = null;
} }
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
@ -518,10 +520,15 @@ export default class BasicMessageEditor extends React.Component {
this.setState({completionIndex}); this.setState({completionIndex});
} }
_configureEmoticonAutoReplace() { _configureEmoticonAutoReplace = () => {
const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji'); const shouldReplace = SettingsStore.getValue('MessageComposerInput.autoReplaceEmoji');
this.props.model.setTransformCallback(shouldReplace ? this._replaceEmoticon : null); this.props.model.setTransformCallback(shouldReplace ? this._replaceEmoticon : null);
} };
_configureShouldShowPillAvatar = () => {
const showPillAvatar = SettingsStore.getValue("Pill.shouldShowPillAvatar");
this.setState({ showPillAvatar });
};
componentWillUnmount() { componentWillUnmount() {
document.removeEventListener("selectionchange", this._onSelectionChange); 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("compositionstart", this._onCompositionStart, true);
this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true); this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true);
SettingsStore.unwatchSetting(this._emoticonSettingHandle); SettingsStore.unwatchSetting(this._emoticonSettingHandle);
SettingsStore.unwatchSetting(this._shouldShowPillAvatarSettingHandle);
} }
componentDidMount() { componentDidMount() {
const model = this.props.model; const model = this.props.model;
model.setUpdateCallback(this._updateEditorState); model.setUpdateCallback(this._updateEditorState);
this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null, () => { this._emoticonSettingHandle = SettingsStore.watchSetting('MessageComposerInput.autoReplaceEmoji', null,
this._configureEmoticonAutoReplace(); this._configureEmoticonAutoReplace);
});
this._configureEmoticonAutoReplace(); this._configureEmoticonAutoReplace();
this._shouldShowPillAvatarSettingHandle = SettingsStore.watchSetting("Pill.shouldShowPillAvatar", null,
this._configureShouldShowPillAvatar);
const partCreator = model.partCreator; const partCreator = model.partCreator;
// TODO: does this allow us to get rid of EditorStateTransfer? // TODO: does this allow us to get rid of EditorStateTransfer?
// not really, but we could not serialize the parts, and just change the autoCompleter // 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>); </div>);
} }
const classes = classNames("mx_BasicMessageComposer", { const wrapperClasses = classNames("mx_BasicMessageComposer", {
"mx_BasicMessageComposer_input_error": this.state.showVisualBell, "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 MessageComposerFormatBar = sdk.getComponent('rooms.MessageComposerFormatBar');
const shortcuts = { const shortcuts = {
@ -628,11 +640,11 @@ export default class BasicMessageEditor extends React.Component {
const {completionIndex} = this.state; const {completionIndex} = this.state;
return (<div className={classes}> return (<div className={wrapperClasses}>
{ autoComplete } { autoComplete }
<MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} /> <MessageComposerFormatBar ref={ref => this._formatBarRef = ref} onAction={this._onFormatAction} shortcuts={shortcuts} />
<div <div
className="mx_BasicMessageComposer_input" className={classes}
contentEditable="true" contentEditable="true"
tabIndex="0" tabIndex="0"
onBlur={this._onBlur} onBlur={this._onBlur}