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

Improve message editing UI #8483

Merged
merged 4 commits into from
May 12, 2022
Merged

Improve message editing UI #8483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7971f60
Improve message editing UI
SimonBrandner May 3, 2022
47f5309
Merge remote-tracking branch 'upstream/develop' into SimonBrandner/fe…
SimonBrandner May 4, 2022
469c696
Merge branch 'develop' into SimonBrandner/feature/improve-composer
SimonBrandner May 7, 2022
5b5822d
Remove weird padding on bubble layout
SimonBrandner May 8, 2022
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
27 changes: 7 additions & 20 deletions res/css/views/rooms/_EditMessageComposer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ limitations under the License.
*/
Copy link
Contributor

@MadLittleMods MadLittleMods May 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue description only includes an after screenshot which makes it hard to tell what changed. Can we add a before and after screenshot for easy comparison?

A bulleted text summary would also be good to check off in your mind as you look at the screenshots.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated the description

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SimonBrandner It looks like it's two different sections of a room which threw me off for a bit. The viewport could also be a lot narrower in these cases since we're only trying to show off the message editing form which has a bunch of dead space which is cumbersome to compare big images. I realize aspect ratio of components is sometimes important for full app context and feel but could definitely be a lot narrower here.

Thanks for the text summary 👍


.mx_EditMessageComposer {

display: flex;
flex-direction: column;
gap: 5px;
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

// Make sure the formatting bar is visible
overflow: visible !important; // override mx_EventTile_content

.mx_BasicMessageComposer_input {
border-radius: 4px;
Expand All @@ -40,23 +40,10 @@ limitations under the License.
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;
gap: 5px;

.mx_AccessibleButton {
margin-left: 5px;
padding: 5px 40px;
}
}
}

.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
}
7 changes: 0 additions & 7 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,13 +418,6 @@ limitations under the License.
}
}

.mx_EditMessageComposer_buttons {
position: static;
padding: 0;
margin: 8px 0 0;
background: transparent;
}

.mx_ReactionsRow {
margin-right: -18px;
margin-left: -9px;
Expand Down
10 changes: 1 addition & 9 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss

&.mx_EventTile_continuation {
padding-top: 0px !important;

&.mx_EventTile_isEditing {
padding-top: 5px !important;
margin-top: -5px;
}
}

&.mx_EventTile_isEditing {
background-color: $header-panel-bg-color;
}

.mx_DisambiguatedProfile {
Expand Down Expand Up @@ -157,6 +148,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
/* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here.
*/
&.mx_EventTile_isEditing > .mx_EventTile_line,
&.mx_EventTile_selected > .mx_EventTile_line {
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent;
background-color: $event-selected-color;
Expand Down