mirror of https://github.com/vector-im/riot-web
Revert "New composer: show markdown legend on focus"
parent
71e13842b8
commit
1063da0ed1
|
@ -30,7 +30,7 @@ limitations under the License.
|
|||
flex-direction: column;
|
||||
// min-height at this level so the mx_BasicMessageComposer_input
|
||||
// still stays vertically centered when less than 50px
|
||||
min-height: 42px;
|
||||
min-height: 50px;
|
||||
|
||||
.mx_BasicMessageComposer_input {
|
||||
padding: 3px 0;
|
||||
|
@ -38,7 +38,7 @@ limitations under the License.
|
|||
// in it's parent vertically
|
||||
// while keeping the autocomplete at the top
|
||||
// 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: 140px;
|
||||
overflow-y: auto;
|
||||
|
@ -49,31 +49,5 @@ limitations under the License.
|
|||
position: relative;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -226,21 +226,15 @@ export default class BasicMessageEditor extends React.Component {
|
|||
return this.getCaret().offset === this._lastTextLength;
|
||||
}
|
||||
|
||||
_onBlur = (event) => {
|
||||
_onBlur = () => {
|
||||
document.removeEventListener("selectionchange", this._onSelectionChange);
|
||||
if (this.props.onBlur) {
|
||||
this.props.onBlur(event);
|
||||
}
|
||||
}
|
||||
|
||||
_onFocus = (event) => {
|
||||
_onFocus = () => {
|
||||
document.addEventListener("selectionchange", this._onSelectionChange);
|
||||
// force to recalculate
|
||||
this._lastSelection = null;
|
||||
this._refreshLastCaretIfNeeded();
|
||||
if (this.props.onFocus) {
|
||||
this.props.onFocus(event);
|
||||
}
|
||||
}
|
||||
|
||||
_onSelectionChange = () => {
|
||||
|
|
|
@ -33,7 +33,6 @@ 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);
|
||||
|
@ -88,7 +87,6 @@ export default class SendMessageComposer extends React.Component {
|
|||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {};
|
||||
this.model = null;
|
||||
this._editorRef = 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() {
|
||||
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">
|
||||
|
@ -356,16 +343,7 @@ 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={legendClasses}>
|
||||
<strong>**bold**</strong>
|
||||
<em>_italic_</em>
|
||||
<span><del>strikethrough</del></span>
|
||||
<code>`code`</code>
|
||||
<span>> quote</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue