OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

show/hide legend when focusing/blurring

pull/21833/head
Bruno Windels 2019-09-02 15:59:17 +02:00
parent b7768f34f2
commit f200327ef2
2 changed files with 30 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/views/rooms/BasicMessageComposer.js
View File

@ -222,15 +222,21 @@ export default class BasicMessageEditor extends React.Component {
return this.getCaret().offset === this._lastTextLength;
}
_onBlur = () => {
_onBlur = (event) => {
document.removeEventListener("selectionchange", this._onSelectionChange);
if (this.props.onBlur) {
this.props.onBlur(event);
}
}
_onFocus = () => {
_onFocus = (event) => {
document.addEventListener("selectionchange", this._onSelectionChange);
// force to recalculate
this._lastSelection = null;
this._refreshLastCaretIfNeeded();
if (this.props.onFocus) {
this.props.onFocus(event);
}
}
_onSelectionChange = () => {

23
src/components/views/rooms/SendMessageComposer.js
View File

@ -33,6 +33,7 @@ import sdk from '../../../index';
import Modal from '../../../Modal';
import { _t } from '../../../languageHandler';
import ContentMessages from '../../../ContentMessages';
import classNames from "classnames";
function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@ -87,6 +88,7 @@ export default class SendMessageComposer extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {};
this.model = null;
this._editorRef = null;
this.currentlyComposedEditorState = null;
@ -329,7 +331,18 @@ export default class SendMessageComposer extends React.Component {
}
}
_onFocus = () => {
this.setState({focused: true});
}
_onBlur = () => {
this.setState({focused: false});
}
render() {
const legendClasses = classNames("mx_SendMessageComposer_legend", {
"mx_SendMessageComposer_legend_shown": this.state.focused,
});
return (
<div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
<div className="mx_SendMessageComposer_overlayWrapper">
@ -342,8 +355,16 @@ export default class SendMessageComposer extends React.Component {
label={this.props.placeholder}
placeholder={this.props.placeholder}
onChange={this._saveStoredEditorState}
onFocus={this._onFocus}
onBlur={this._onBlur}
/>
<div className="mx_SendMessageComposer_legend"><strong>**bold**</strong><em>_italic_</em><span>~strikethrough~</span><code>`code`</code><span>&gt; quote</span></div>
<div className={legendClasses}>
<strong>**bold**</strong>
<em>_italic_</em>
<span>&lt;del&gt;strikethrough&lt;/del&gt;</span>
<code>`code`</code>
<span>&gt; quote</span>
</div>
</div>
);
}