imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

show/hide legend when focusing/blurring

Browse source
This commit is contained in:
Bruno Windels 2019-09-02 15:59:17 +02:00
parent b7768f34f2
commit f200327ef2
2 changed files with 30 additions and 3 deletions
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; return this.getCaret().offset === this._lastTextLength;
} }
_onBlur = () => { _onBlur = (event) => {
document.removeEventListener("selectionchange", this._onSelectionChange); document.removeEventListener("selectionchange", this._onSelectionChange);
if (this.props.onBlur) {
this.props.onBlur(event);
}
} }
_onFocus = () => { _onFocus = (event) => {
document.addEventListener("selectionchange", this._onSelectionChange); document.addEventListener("selectionchange", this._onSelectionChange);
// force to recalculate // force to recalculate
this._lastSelection = null; this._lastSelection = null;
this._refreshLastCaretIfNeeded(); this._refreshLastCaretIfNeeded();
if (this.props.onFocus) {
this.props.onFocus(event);
}
} }
_onSelectionChange = () => { _onSelectionChange = () => {

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

@ -33,6 +33,7 @@ import sdk from '../../../index';
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import { _t } from '../../../languageHandler'; import { _t } from '../../../languageHandler';
import ContentMessages from '../../../ContentMessages'; import ContentMessages from '../../../ContentMessages';
import classNames from "classnames";
function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) { function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent); const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@ -87,6 +88,7 @@ export default class SendMessageComposer extends React.Component {
constructor(props, context) { constructor(props, context) {
super(props, context); super(props, context);
this.state = {};
this.model = null; this.model = null;
this._editorRef = null; this._editorRef = null;
this.currentlyComposedEditorState = 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() { render() {
const legendClasses = classNames("mx_SendMessageComposer_legend", {
"mx_SendMessageComposer_legend_shown": this.state.focused,
});
return ( return (
<div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}> <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
<div className="mx_SendMessageComposer_overlayWrapper"> <div className="mx_SendMessageComposer_overlayWrapper">
@ -342,8 +355,16 @@ export default class SendMessageComposer extends React.Component {
label={this.props.placeholder} label={this.props.placeholder}
placeholder={this.props.placeholder} placeholder={this.props.placeholder}
onChange={this._saveStoredEditorState} 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> </div>
); );
} }