apply mx_EventTile_content to editor, so it gets the same right margin

this way we don't have to include it in the magic number
This commit is contained in:
Bruno Windels 2019-05-21 12:18:20 +02:00
parent 2bacabc002
commit b00a38a1e5
3 changed files with 6 additions and 4 deletions

View file

@ -20,7 +20,8 @@ limitations under the License.
// this is to try not make the text move but still have some // this is to try not make the text move but still have some
// padding around and in the editor. // padding around and in the editor.
// Actual values from fiddling around in inspector // Actual values from fiddling around in inspector
margin: -7px 24px -5px -10px; // right margin: -10px + 34px margin: -7px -10px -5px -10px;
overflow: visible !important; // override mx_EventTile_content
.mx_MessageEditor_editor { .mx_MessageEditor_editor {
border-radius: 4px; border-radius: 4px;
@ -90,7 +91,7 @@ limitations under the License.
z-index: 100; z-index: 100;
right: 0; right: 0;
margin: 0 -110px 0 0; margin: 0 -110px 0 0;
padding-right: 138px; padding-right: 147px;
.mx_AccessibleButton { .mx_AccessibleButton {
margin-left: 5px; margin-left: 5px;

View file

@ -27,6 +27,7 @@ import Autocomplete from '../rooms/Autocomplete';
import {PartCreator} from '../../../editor/parts'; import {PartCreator} from '../../../editor/parts';
import {renderModel} from '../../../editor/render'; import {renderModel} from '../../../editor/render';
import {MatrixEvent, MatrixClient} from 'matrix-js-sdk'; import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
import classNames from 'classnames';
export default class MessageEditor extends React.Component { export default class MessageEditor extends React.Component {
static propTypes = { static propTypes = {
@ -177,7 +178,7 @@ export default class MessageEditor extends React.Component {
</div>; </div>;
} }
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return <div className="mx_MessageEditor"> return <div className={classNames("mx_MessageEditor", this.props.className)}>
{ autoComplete } { autoComplete }
<div <div
className="mx_MessageEditor_editor" className="mx_MessageEditor_editor"

View file

@ -471,7 +471,7 @@ module.exports = React.createClass({
render: function() { render: function() {
if (this.props.isEditing) { if (this.props.isEditing) {
const MessageEditor = sdk.getComponent('elements.MessageEditor'); const MessageEditor = sdk.getComponent('elements.MessageEditor');
return <MessageEditor event={this.props.mxEvent} />; return <MessageEditor event={this.props.mxEvent} className="mx_EventTile_content" />;
} }
const EmojiText = sdk.getComponent('elements.EmojiText'); const EmojiText = sdk.getComponent('elements.EmojiText');
const mxEvent = this.props.mxEvent; const mxEvent = this.props.mxEvent;