wire up editor component (somewhat hacky)
Bruno Windels
parent
66aabdca9e
commit
6599d605cd
|
|
@ -89,6 +89,7 @@
|
|||
@import "./views/elements/_InlineSpinner.scss";
|
||||
@import "./views/elements/_ManageIntegsButton.scss";
|
||||
@import "./views/elements/_MemberEventListSummary.scss";
|
||||
@import "./views/elements/_MessageEditor.scss";
|
||||
@import "./views/elements/_PowerSelector.scss";
|
||||
@import "./views/elements/_ProgressBar.scss";
|
||||
@import "./views/elements/_ReplyThread.scss";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
Copyright 2019 Vector Creations Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_MessageEditor {
|
||||
border-radius: 4px;
|
||||
background-color: #f3f8fd;
|
||||
padding: 10px;
|
||||
|
||||
.editor {
|
||||
border-radius: 4px;
|
||||
border: solid 1px #e9edf1;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
padding: 5px 0;
|
||||
|
||||
.mx_AccessibleButton {
|
||||
background-color: $button-bg-color;
|
||||
border-radius: 4px;
|
||||
padding: 5px 40px;
|
||||
color: $button-fg-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,6 +69,10 @@ limitations under the License.
|
|||
mask-image: url('$(res)/img/reply.svg');
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_editButton::after {
|
||||
mask-image: url('$(res)/img/edit.svg');
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_optionsButton::after {
|
||||
mask-image: url('$(res)/img/icon_context.svg');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="15.093"
|
||||
height="14.865319"
|
||||
viewBox="0 0 15.093 14.865319"
|
||||
version="1.1"
|
||||
id="svg21"
|
||||
sodipodi:docname="edit.svg"
|
||||
inkscape:version="0.92.4 (unknown)">
|
||||
<metadata
|
||||
id="metadata25">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="816"
|
||||
inkscape:window-height="480"
|
||||
id="namedview23"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="3.5223881"
|
||||
inkscape:cx="7.7965"
|
||||
inkscape:cy="4.5141283"
|
||||
inkscape:window-x="416"
|
||||
inkscape:window-y="116"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg21" />
|
||||
<defs
|
||||
id="defs15">
|
||||
<filter
|
||||
id="a"
|
||||
width="1.118"
|
||||
height="1.158"
|
||||
x="-0.059"
|
||||
y="-0.079000004"
|
||||
filterUnits="objectBoundingBox">
|
||||
<feOffset
|
||||
dy="2"
|
||||
in="SourceAlpha"
|
||||
result="shadowOffsetOuter1"
|
||||
id="feOffset2" />
|
||||
<feGaussianBlur
|
||||
in="shadowOffsetOuter1"
|
||||
result="shadowBlurOuter1"
|
||||
stdDeviation="16"
|
||||
id="feGaussianBlur4" />
|
||||
<feColorMatrix
|
||||
in="shadowBlurOuter1"
|
||||
result="shadowMatrixOuter1"
|
||||
values="0 0 0 0 0 0 0 0 0 0.473684211 0 0 0 0 1 0 0 0 0.241258741 0"
|
||||
id="feColorMatrix6" />
|
||||
<feMerge
|
||||
id="feMerge12">
|
||||
<feMergeNode
|
||||
in="shadowMatrixOuter1"
|
||||
id="feMergeNode8" />
|
||||
<feMergeNode
|
||||
in="SourceGraphic"
|
||||
id="feMergeNode10" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g
|
||||
transform="translate(-1048.2035,-582.14881)"
|
||||
id="g19"
|
||||
style="fill:none;fill-rule:evenodd;stroke:#2e2f32;stroke-width:0.75;stroke-linecap:round;stroke-linejoin:round;filter:url(#a)">
|
||||
<path
|
||||
d="m 1055.75,596 h 6.75 m -3.375,-12.375 a 1.591,1.591 0 0 1 2.25,2.25 l -9.375,9.375 -3,0.75 0.75,-3 z"
|
||||
id="path17"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -450,9 +450,14 @@ module.exports = React.createClass({
|
|||
|
||||
_getTilesForEvent: function(prevEvent, mxEv, last) {
|
||||
const EventTile = sdk.getComponent('rooms.EventTile');
|
||||
const MessageEditor = sdk.getComponent('elements.MessageEditor');
|
||||
const DateSeparator = sdk.getComponent('messages.DateSeparator');
|
||||
const ret = [];
|
||||
|
||||
if (this.props.editEvent && this.props.editEvent.getId() === mxEv.getId()) {
|
||||
return [<MessageEditor key={mxEv.getId()} event={mxEv} />];
|
||||
}
|
||||
|
||||
// is this a continuation of the previous message?
|
||||
let continuation = false;
|
||||
|
||||
|
|
|
|||
|
|
@ -402,6 +402,9 @@ const TimelinePanel = React.createClass({
|
|||
if (payload.action === 'ignore_state_changed') {
|
||||
this.forceUpdate();
|
||||
}
|
||||
if (payload.action === "edit_event") {
|
||||
this.setState({editEvent: payload.event});
|
||||
}
|
||||
},
|
||||
|
||||
onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
|
||||
|
|
@ -1244,6 +1247,7 @@ const TimelinePanel = React.createClass({
|
|||
tileShape={this.props.tileShape}
|
||||
resizeNotifier={this.props.resizeNotifier}
|
||||
getRelationsForEvent={this.getRelationsForEvent}
|
||||
editEvent={this.state.editEvent}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
/*
|
||||
Copyright 2019 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import sdk from '../../../index';
|
||||
import {_t} from '../../../languageHandler';
|
||||
import PropTypes from 'prop-types';
|
||||
import dis from '../../../dispatcher';
|
||||
import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
|
||||
|
||||
export default class MessageEditor extends React.Component {
|
||||
static propTypes = {
|
||||
// the latest event in this chain of replies
|
||||
event: PropTypes.instanceOf(MatrixEvent).isRequired,
|
||||
// called when the ReplyThread contents has changed, including EventTiles thereof
|
||||
// onHeightChanged: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
|
||||
};
|
||||
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {};
|
||||
this._onCancelClicked = this._onCancelClicked.bind(this);
|
||||
}
|
||||
|
||||
_onCancelClicked() {
|
||||
dis.dispatch({action: "edit_event", event: null});
|
||||
}
|
||||
|
||||
render() {
|
||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||
return <div className="mx_MessageEditor">
|
||||
<div className="editor" contentEditable="true">
|
||||
{this.props.event.getContent().body}
|
||||
</div>
|
||||
<div className="buttons">
|
||||
<AccessibleButton onClick={this._onCancelClicked}>{_t("Cancel")}</AccessibleButton>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
@ -58,6 +58,13 @@ export default class MessageActionBar extends React.PureComponent {
|
|||
});
|
||||
}
|
||||
|
||||
onEditClick = (ev) => {
|
||||
dis.dispatch({
|
||||
action: 'edit_event',
|
||||
event: this.props.mxEvent,
|
||||
});
|
||||
}
|
||||
|
||||
onOptionsClick = (ev) => {
|
||||
const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
|
||||
const buttonRect = ev.target.getBoundingClientRect();
|
||||
|
|
@ -128,6 +135,7 @@ export default class MessageActionBar extends React.PureComponent {
|
|||
let agreeDimensionReactionButtons;
|
||||
let likeDimensionReactionButtons;
|
||||
let replyButton;
|
||||
let editButton;
|
||||
|
||||
if (isContentActionable(this.props.mxEvent)) {
|
||||
agreeDimensionReactionButtons = this.renderAgreeDimension();
|
||||
|
|
@ -136,12 +144,17 @@ export default class MessageActionBar extends React.PureComponent {
|
|||
title={_t("Reply")}
|
||||
onClick={this.onReplyClick}
|
||||
/>;
|
||||
editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
|
||||
title={_t("Edit")}
|
||||
onClick={this.onEditClick}
|
||||
/>;
|
||||
}
|
||||
|
||||
return <div className="mx_MessageActionBar">
|
||||
{agreeDimensionReactionButtons}
|
||||
{likeDimensionReactionButtons}
|
||||
{replyButton}
|
||||
{editButton}
|
||||
<span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
|
||||
title={_t("Options")}
|
||||
onClick={this.onOptionsClick}
|
||||
|
|
|
|||
Loading…
Reference in New Issue