From 76ceee0e6ca582875f560772dbf6e3eb736918e2 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 13:31:26 +0100 Subject: [PATCH 01/15] silence react warning when showing edited marker, by also giving the body a key --- src/HtmlUtils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js index 1032c52e32..97f547ceb4 100644 --- a/src/HtmlUtils.js +++ b/src/HtmlUtils.js @@ -541,8 +541,8 @@ export function bodyToHtml(content, highlights, opts={}) { }); return isDisplayedWithHtml ? - : - { strippedBody }; + : + { strippedBody }; } export function emojifyText(text, addAlt) { From 9a3752c5713e2b05bfa9f9ac68b7b8f78e52971f Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 15:30:07 +0100 Subject: [PATCH 02/15] show message editor in textual body instead of replacing event tile --- src/components/structures/MessagePanel.js | 7 ++----- src/components/views/messages/MessageEvent.js | 1 + src/components/views/messages/TextualBody.js | 5 +++++ src/components/views/rooms/EventTile.js | 1 + 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/structures/MessagePanel.js b/src/components/structures/MessagePanel.js index dbaab57adf..001097f846 100644 --- a/src/components/structures/MessagePanel.js +++ b/src/components/structures/MessagePanel.js @@ -450,14 +450,10 @@ 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 []; - } - + const isEditing = this.props.editEvent && this.props.editEvent.getId() === mxEv.getId(); // is this a continuation of the previous message? let continuation = false; @@ -527,6 +523,7 @@ module.exports = React.createClass({ continuation={continuation} isRedacted={mxEv.isRedacted()} replacingEventId={mxEv.replacingEventId()} + isEditing={isEditing} onHeightChanged={this._onHeightChanged} readReceipts={readReceipts} readReceiptMap={this._readReceiptMap} diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js index 357da1cd10..8c90ec5a46 100644 --- a/src/components/views/messages/MessageEvent.js +++ b/src/components/views/messages/MessageEvent.js @@ -90,6 +90,7 @@ module.exports = React.createClass({ tileShape={this.props.tileShape} maxImageHeight={this.props.maxImageHeight} replacingEventId={this.props.replacingEventId} + isEditing={this.props.isEditing} onHeightChanged={this.props.onHeightChanged} />; }, }); diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index 44c807e4e4..c4a60c3bab 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -148,6 +148,7 @@ module.exports = React.createClass({ nextProps.replacingEventId !== this.props.replacingEventId || nextProps.highlightLink !== this.props.highlightLink || nextProps.showUrlPreview !== this.props.showUrlPreview || + nextProps.isEditing !== this.props.isEditing || nextState.links !== this.state.links || nextState.editedMarkerHovered !== this.state.editedMarkerHovered || nextState.widgetHidden !== this.state.widgetHidden); @@ -463,6 +464,10 @@ module.exports = React.createClass({ }, render: function() { + if (this.props.isEditing) { + const MessageEditor = sdk.getComponent('elements.MessageEditor'); + return ; + } const EmojiText = sdk.getComponent('elements.EmojiText'); const mxEvent = this.props.mxEvent; const content = mxEvent.getContent(); diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index f38e3c3946..9977d10395 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -780,6 +780,7 @@ module.exports = withMatrixClient(React.createClass({ Date: Fri, 17 May 2019 15:31:09 +0100 Subject: [PATCH 03/15] update design of editor to look as close to original tile (and design) the buttons below the composer are overlayed onto the previous event. In case of the last event, for now we make them not overflow, but make the tile grow. The design says it should overlay on the main composer for the last event tile, postponing that for a bit though as not sure what is the best way to do that. --- res/css/views/elements/_MessageEditor.scss | 19 +++++++++++++++---- res/css/views/rooms/_EventTile.scss | 4 ++++ src/components/views/rooms/EventTile.js | 1 + 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index ec6d903753..15b342b436 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -16,14 +16,14 @@ limitations under the License. .mx_MessageEditor { border-radius: 4px; - background-color: $header-panel-bg-color; - padding: 11px 13px 7px 56px; + padding: 3px; + margin: -7px -7px -5px -7px; // no idea why this is working .mx_MessageEditor_editor { border-radius: 4px; border: solid 1px #e9edf1; background-color: #ffffff; - padding: 10px; + padding: 3px; white-space: pre-wrap; word-wrap: break-word; outline: none; @@ -49,7 +49,14 @@ limitations under the License. display: flex; flex-direction: row; justify-content: end; - padding: 5px 0; + padding: 5px; + position: absolute; + left: 0; + background: $header-panel-bg-color; + z-index: 100; + right: 0; + margin: 0 -110px 0 0; + padding-right: 108px; .mx_AccessibleButton { margin-left: 5px; @@ -62,3 +69,7 @@ limitations under the License. height: 0; } } + +.mx_EventTile_last .mx_MessageEditor_buttons { + position: static; +} diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index aa473ec317..93d97b2913 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -43,6 +43,10 @@ limitations under the License. padding-top: 0px ! important; } +.mx_EventTile_isEditing { + background-color: $header-panel-bg-color; +} + .mx_EventTile .mx_SenderProfile { color: $primary-fg-color; font-size: 14px; diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index 9977d10395..a4a9004041 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -540,6 +540,7 @@ module.exports = withMatrixClient(React.createClass({ const classes = classNames({ mx_EventTile: true, + mx_EventTile_isEditing: this.props.isEditing, mx_EventTile_info: isInfoMessage, mx_EventTile_12hr: this.props.isTwelveHour, mx_EventTile_encrypting: this.props.eventSendStatus === 'encrypting', From 62b8973e720531dba9fea1b714e739479280ee04 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 15:35:14 +0100 Subject: [PATCH 04/15] cancel the edit when pressing escape --- src/components/views/elements/MessageEditor.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/views/elements/MessageEditor.js b/src/components/views/elements/MessageEditor.js index c18d1f56fd..0c249d067b 100644 --- a/src/components/views/elements/MessageEditor.js +++ b/src/components/views/elements/MessageEditor.js @@ -107,10 +107,12 @@ export default class MessageEditor extends React.Component { } else if (event.key === "Enter") { this._sendEdit(); event.preventDefault(); + } else if (event.key === "Escape") { + this._cancelEdit(); } } - _onCancelClicked = () => { + _cancelEdit = () => { dis.dispatch({action: "edit_event", event: null}); } @@ -185,7 +187,7 @@ export default class MessageEditor extends React.Component { ref={ref => this._editorRef = ref} >
- {_t("Cancel")} + {_t("Cancel")} {_t("Save")}
; From 578a183f49a9f3fe239f19bfc6a5b50d6e4426ca Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 15:35:28 +0100 Subject: [PATCH 05/15] hide the action bar while editing --- src/components/views/rooms/EventTile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js index a4a9004041..39e830a228 100644 --- a/src/components/views/rooms/EventTile.js +++ b/src/components/views/rooms/EventTile.js @@ -618,14 +618,14 @@ module.exports = withMatrixClient(React.createClass({ } const MessageActionBar = sdk.getComponent('messages.MessageActionBar'); - const actionBar = ; + /> : undefined; const timestamp = this.props.mxEvent.getTs() ? : null; From 2544decab2af9b3d40be58828c0b1a032fef802b Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:00:08 +0100 Subject: [PATCH 06/15] fix chrome not right aligning buttons --- res/css/views/elements/_MessageEditor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index 15b342b436..cfa62e000f 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -48,7 +48,7 @@ limitations under the License. .mx_MessageEditor_buttons { display: flex; flex-direction: row; - justify-content: end; + justify-content: flex-end; padding: 5px; position: absolute; left: 0; From 81245e9c05bb2dd0c011ab68442ec1c9195199a6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:00:22 +0100 Subject: [PATCH 07/15] cull editor height to 200px --- res/css/views/elements/_MessageEditor.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index cfa62e000f..e48e93aa63 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -27,6 +27,8 @@ limitations under the License. white-space: pre-wrap; word-wrap: break-word; outline: none; + max-height: 200px; + overflow-x: auto; span { display: inline-block; From cf8189ed4371650293e0822db2950b2c686e08a6 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:00:39 +0100 Subject: [PATCH 08/15] align buttons perfectly with editor edge --- res/css/views/elements/_MessageEditor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index e48e93aa63..d537584f1c 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -58,7 +58,7 @@ limitations under the License. z-index: 100; right: 0; margin: 0 -110px 0 0; - padding-right: 108px; + padding-right: 107px; .mx_AccessibleButton { margin-left: 5px; From aeea4ee83a4ef4d196327bfb456bc980421b499a Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:00:58 +0100 Subject: [PATCH 09/15] a bit more horizontal padding for the editor --- res/css/views/elements/_MessageEditor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index d537584f1c..6a5f25532f 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -17,13 +17,13 @@ limitations under the License. .mx_MessageEditor { border-radius: 4px; padding: 3px; - margin: -7px -7px -5px -7px; // no idea why this is working + margin: -7px -10px -5px -10px; // from fiddling around in inspector .mx_MessageEditor_editor { border-radius: 4px; border: solid 1px #e9edf1; background-color: #ffffff; - padding: 3px; + padding: 3px 6px; white-space: pre-wrap; word-wrap: break-word; outline: none; From 5adae63555f31496494aeab08e054fe4edebca39 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:01:30 +0100 Subject: [PATCH 10/15] don't apply formatting to body when showing editor in TextualBody it throws --- src/components/views/messages/TextualBody.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index c4a60c3bab..bd37f98360 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -89,7 +89,9 @@ module.exports = React.createClass({ componentDidMount: function() { this._unmounted = false; - this._applyFormatting(); + if (!this.props.isEditing) { + this._applyFormatting(); + } }, _applyFormatting() { @@ -128,11 +130,13 @@ module.exports = React.createClass({ }, componentDidUpdate: function(prevProps) { - const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId; - if (messageWasEdited) { - this._applyFormatting(); + if (!this.props.isEditing) { + const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId; + if (messageWasEdited) { + this._applyFormatting(); + } + this.calculateUrlPreview(); } - this.calculateUrlPreview(); }, componentWillUnmount: function() { From f9462d1012d46b6f7ec0b1c2654b2c018a7ebb10 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:01:52 +0100 Subject: [PATCH 11/15] hide timestamp while editing --- res/css/views/rooms/_EventTile.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 93d97b2913..dfc560e670 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -76,6 +76,10 @@ limitations under the License. } } +.mx_EventTile_isEditing .mx_MessageTimestamp { + visibility: hidden !important; +} + .mx_EventTile .mx_MessageTimestamp { display: block; visibility: hidden; From aef9323f216ed74dac2aa17bbed519c7c1bb554e Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:10:11 +0100 Subject: [PATCH 12/15] explain negative margin --- res/css/views/elements/_MessageEditor.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index 6a5f25532f..8f3fdfb9ef 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -17,7 +17,10 @@ limitations under the License. .mx_MessageEditor { border-radius: 4px; padding: 3px; - margin: -7px -10px -5px -10px; // from fiddling around in inspector + // this is to try not make the text move but still have some + // padding around and in the editor. + // Actual values from fiddling around in inspector + margin: -7px -10px -5px -10px; .mx_MessageEditor_editor { border-radius: 4px; From 8ce8ca18ff2deaeb8362f3cbc7cbb541cff57359 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:10:21 +0100 Subject: [PATCH 13/15] theme-ify! --- res/css/views/elements/_MessageEditor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index 8f3fdfb9ef..40bc132edb 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -24,8 +24,8 @@ limitations under the License. .mx_MessageEditor_editor { border-radius: 4px; - border: solid 1px #e9edf1; - background-color: #ffffff; + border: solid 1px $primary-hairline-color; + background-color: $primary-bg-color; padding: 3px 6px; white-space: pre-wrap; word-wrap: break-word; From d81ab2464bb5cd1d52996a92f5d5a975a91cf5c7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 17 May 2019 16:15:06 +0100 Subject: [PATCH 14/15] better button alignment also fix sticking out at the right side when not overlaying --- res/css/views/elements/_MessageEditor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/res/css/views/elements/_MessageEditor.scss b/res/css/views/elements/_MessageEditor.scss index 40bc132edb..cc5649a224 100644 --- a/res/css/views/elements/_MessageEditor.scss +++ b/res/css/views/elements/_MessageEditor.scss @@ -61,7 +61,7 @@ limitations under the License. z-index: 100; right: 0; margin: 0 -110px 0 0; - padding-right: 107px; + padding-right: 104px; .mx_AccessibleButton { margin-left: 5px; @@ -77,4 +77,5 @@ limitations under the License. .mx_EventTile_last .mx_MessageEditor_buttons { position: static; + margin-right: -103px; } From 0c0052d06e0804d7e3e5e6ef017a3dfa73edf2d7 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 20 May 2019 10:19:29 +0200 Subject: [PATCH 15/15] re-apply formatting when editor is closed --- src/components/views/messages/TextualBody.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js index bd37f98360..380d04d1db 100644 --- a/src/components/views/messages/TextualBody.js +++ b/src/components/views/messages/TextualBody.js @@ -131,8 +131,9 @@ module.exports = React.createClass({ componentDidUpdate: function(prevProps) { if (!this.props.isEditing) { + const stoppedEditing = prevProps.isEditing && !this.props.isEditing; const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId; - if (messageWasEdited) { + if (messageWasEdited || stoppedEditing) { this._applyFormatting(); } this.calculateUrlPreview();