mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Revert "New composer: show markdown legend on focus"

Browse source
This commit is contained in:
Bruno Windels 2019-09-03 08:27:45 +00:00 committed by GitHub
parent 71e13842b8
commit 1063da0ed1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
res/css/views/rooms/_SendMessageComposer.scss
View file

@ -30,7 +30,7 @@ limitations under the License.
flex-direction: column; flex-direction: column;
// min-height at this level so the mx_BasicMessageComposer_input // min-height at this level so the mx_BasicMessageComposer_input
// still stays vertically centered when less than 50px // still stays vertically centered when less than 50px
min-height: 42px; min-height: 50px;
.mx_BasicMessageComposer_input { .mx_BasicMessageComposer_input {
padding: 3px 0; padding: 3px 0;
@ -38,7 +38,7 @@ limitations under the License.
// in it's parent vertically // in it's parent vertically
// while keeping the autocomplete at the top // while keeping the autocomplete at the top
// of the composer. The parent needs to be a flex container for this to work. // of the composer. The parent needs to be a flex container for this to work.
margin: auto 0 0 0; margin: auto 0;
// max-height at this level so autocomplete doesn't get scrolled too // max-height at this level so autocomplete doesn't get scrolled too
max-height: 140px; max-height: 140px;
overflow-y: auto; overflow-y: auto;
@ -49,31 +49,5 @@ limitations under the License.
position: relative; position: relative;
height: 0; height: 0;
} }
.mx_SendMessageComposer_legend {
height: 16px;
box-sizing: content-box;
font-size: 8px;
line-height: 10px;
padding: 0 0 2px 0;
color: $light-fg-color;
user-select: none;
visibility: hidden;
* {
display: inline-block;
margin: 0 10px 0 0;
padding: 1px;
}
code {
border-radius: 2px;
background-color: $focus-bg-color;
}
&.mx_SendMessageComposer_legend_shown {
visibility: visible;
}
}
} }

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

@ -226,21 +226,15 @@ export default class BasicMessageEditor extends React.Component {
return this.getCaret().offset === this._lastTextLength; return this.getCaret().offset === this._lastTextLength;
} }
_onBlur = (event) => { _onBlur = () => {
document.removeEventListener("selectionchange", this._onSelectionChange); document.removeEventListener("selectionchange", this._onSelectionChange);
if (this.props.onBlur) {
this.props.onBlur(event);
}
} }
_onFocus = (event) => { _onFocus = () => {
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 = () => {

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

@ -33,7 +33,6 @@ 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);
@ -88,7 +87,6 @@ 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;
@ -332,18 +330,7 @@ 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">
@ -356,16 +343,7 @@ 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={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>
); );
} }