Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Improve message editing UI #5876

Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
d5af882
Add rounded corners
SimonBrandner Apr 16, 2021
51b752e
Avoid timeline jumps
SimonBrandner Apr 16, 2021
c582e28
Make the edit message composer smaller
SimonBrandner Apr 16, 2021
7e5e358
Remove commented lines
SimonBrandner Apr 17, 2021
ed57fc3
Rework editMessageComposer with absolute position
SimonBrandner Apr 17, 2021
26969cb
Increase avatar z-index
SimonBrandner Apr 17, 2021
df29f89
Avoid overlap with sender profile
SimonBrandner Apr 17, 2021
2c273e9
More properly fix hover jumps
SimonBrandner Apr 17, 2021
fc81134
Contain sender name
SimonBrandner Apr 17, 2021
daceb2f
Increase padding
SimonBrandner Apr 17, 2021
672d9b0
Fix left margin
SimonBrandner Apr 17, 2021
c4f7696
Place buttons above the sender profile
SimonBrandner Apr 17, 2021
c32332e
Fix jumps on sender profile hovered
SimonBrandner Apr 17, 2021
3677d61
A little saner solution to z-indexes
SimonBrandner Apr 17, 2021
79a7b41
Add padding to the last event if edited
SimonBrandner Apr 17, 2021
4ea6193
Make comments inline
SimonBrandner May 11, 2021
a6956db
Add missing "above"
SimonBrandner May 11, 2021
46d418e
Merge branch 'develop' into improve-message-editing-ui
SimonBrandner May 11, 2021
bc131a2
Add explenation about moving up the last event when editing
SimonBrandner May 11, 2021
0b49910
Add comment about mx_EditMessageComposer's position
SimonBrandner May 11, 2021
f6126e3
Comment about mx_EditMessageComposer's z-index
SimonBrandner May 11, 2021
81c944c
Make comments inline
SimonBrandner May 11, 2021
f79761b
Add comment about why we use important here
SimonBrandner May 11, 2021
292ed30
Merge remote-tracking branch 'upstream/develop' into improve-message-…
SimonBrandner Jul 20, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions res/css/views/rooms/_EditMessageComposer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,39 +16,37 @@ limitations under the License.
*/

.mx_EditMessageComposer {

padding: 3px;
// 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;
overflow: visible !important; // override mx_EventTile_content


.mx_BasicMessageComposer_input {
border-radius: 4px;
border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color;
max-height: 200px;
padding: 3px 6px;

&:focus {
border-color: $accent-color-50pct;
background-color: $header-panel-bg-color;
position: absolute; // The mx_EditMessageComposer is positioned relatively to the corresponding EventTile_line
left: 0;
right: 0;
border-radius: 8px;
padding: 4px; // To contain the avatar and sender
padding-top: 32px; // padding 32px + mx_BasicMessageComposer_input padding 2px
top: -34px;
z-index: 100; // Place the mx_EditMessageComposer above the timeline

.mx_BasicMessageComposer {
.mx_BasicMessageComposer_input {
border-radius: 4px;
border: solid 1px $primary-hairline-color;
background-color: $primary-bg-color;
max-height: 200px;
padding: 2px 6px; // mx_EventTile left-gutter 64px - border 1px - padding 6px - mx_EditMessageComposer 4px
margin-left: 53px;

&:focus {
border-color: $accent-color-50pct;
}
}
}

.mx_EditMessageComposer_buttons {
position: relative;
padding-top: 6px; // Match padding of mx_EditMessageComposer
display: flex;
flex-direction: row;
justify-content: flex-end;
padding: 5px;
position: absolute;
left: 0;
background: $header-panel-bg-color;
z-index: 100;
right: 0;
margin: 0 -110px 0 0;
padding-right: 147px;

.mx_AccessibleButton {
margin-left: 5px;
Expand All @@ -57,7 +55,9 @@ limitations under the License.
}
}

.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
.mx_EventTile_continuation {
.mx_EditMessageComposer {
padding: 4px;
top: -6px; // padding 4px + mx_BasicMessageComposer_input padding 2px
}
}
22 changes: 21 additions & 1 deletion res/css/views/rooms/_EventTile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,30 @@ $hover-select-border: 4px;
}

&.mx_EventTile_isEditing {
background-color: $header-panel-bg-color;
&:hover {
.mx_EventTile_line {
border-left: none !important; // Override .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line
}
}

.mx_EventTile_avatar {
z-index: 101; // Place this avatar above the editor
}

.mx_SenderProfile {
z-index: 101; // Place sender profile above the editor
}
}

.mx_EventTile_isEditing.mx_EventTile_last {
// This number is from fiddling with this with inspector. It moves the last
// event up when editing to avoid the edit message composer being below the
// main composer
padding-bottom: 28px;
}

.mx_SenderProfile {
position: relative;
color: $primary-fg-color;
font-size: $font-14px;
display: inline-block; /* anti-zalgo, with overflow hidden */
Expand Down
13 changes: 12 additions & 1 deletion src/components/views/messages/TextualBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -495,6 +495,7 @@ export default class TextualBody extends React.Component<IProps, IState> {
}

render() {
let editor;
if (this.props.editState) {
return <EditMessageComposer editState={this.props.editState} className="mx_EventTile_content" />;
}
Expand Down Expand Up @@ -536,6 +537,7 @@ export default class TextualBody extends React.Component<IProps, IState> {
/>;
}

let textualBody;
switch (content.msgtype) {
case MsgType.Emote:
return (
Expand All @@ -559,13 +561,22 @@ export default class TextualBody extends React.Component<IProps, IState> {
{ widgets }
</span>
);
break;
default: // including "m.text"
return (
textualBody = (
<span className="mx_MTextBody mx_EventTile_content">
{ body }
{ widgets }
</span>
);
break;
}

return (
<div>
{ editor }
{ textualBody }
</div>
);
}
}
36 changes: 19 additions & 17 deletions src/components/views/rooms/EditMessageComposer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -458,23 +458,25 @@ export default class EditMessageComposer extends React.Component<IProps, IState>
};

render() {
return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
<BasicMessageComposer
ref={this.editorRef}
model={this.model}
room={this.getRoom()}
initialCaret={this.props.editState.getCaret()}
label={_t("Edit message")}
onChange={this.onChange}
/>
<div className="mx_EditMessageComposer_buttons">
<AccessibleButton kind="secondary" onClick={this.cancelEdit}>
{ _t("Cancel") }
</AccessibleButton>
<AccessibleButton kind="primary" onClick={this.sendEdit} disabled={this.state.saveDisabled}>
{ _t("Save") }
</AccessibleButton>
return (
<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this.onKeyDown}>
<BasicMessageComposer
ref={this.editorRef}
model={this.model}
room={this.getRoom()}
initialCaret={this.props.editState.getCaret()}
label={_t("Edit message")}
onChange={this.onChange}
/>
<div className="mx_EditMessageComposer_buttons">
<AccessibleButton kind="secondary" onClick={this.cancelEdit}>
{ _t("Cancel") }
</AccessibleButton>
<AccessibleButton kind="primary" onClick={this.sendEdit} disabled={this.state.saveDisabled}>
{ _t("Save") }
</AccessibleButton>
</div>
</div>
</div>);
);
}
}