PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Improve message editing UI (#8483)

Browse source 
* Improve message editing UI

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove weird padding on bubble layout

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2022-05-12 12:27:06 +02:00 committed by GitHub
parent ab26aad406
commit 1e73184b78
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
res/css/views/rooms/_EditMessageComposer.scss
View file

@ -16,13 +16,13 @@ limitations under the License.
*/ */
.mx_EditMessageComposer { .mx_EditMessageComposer {
display: flex;
flex-direction: column;
gap: 5px;
padding: 3px; padding: 3px;
// this is to try not make the text move but still have some
// padding around and in the editor. // Make sure the formatting bar is visible
// Actual values from fiddling around in inspector overflow: visible !important; // override mx_EventTile_content
margin: -7px -10px -5px -10px;
overflow: visible !important; // override mx_EventTile_content
.mx_BasicMessageComposer_input { .mx_BasicMessageComposer_input {
border-radius: 4px; border-radius: 4px;
@ -40,23 +40,10 @@ limitations under the License.
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
padding: 5px; gap: 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 { .mx_AccessibleButton {
margin-left: 5px;
padding: 5px 40px; padding: 5px 40px;
} }
} }
} }
.mx_EventTile_last .mx_EditMessageComposer_buttons {
position: static;
margin-right: -147px;
}

7
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -423,13 +423,6 @@ limitations under the License.
} }
} }
.mx_EditMessageComposer_buttons {
position: static;
padding: 0;
margin: 8px 0 0;
background: transparent;
}
.mx_ReactionsRow { .mx_ReactionsRow {
margin-right: -18px; margin-right: -18px;
margin-left: -9px; margin-left: -9px;

10
res/css/views/rooms/_EventTile.scss
View file

@ -121,15 +121,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
&.mx_EventTile_continuation { &.mx_EventTile_continuation {
padding-top: 0px !important; 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 { .mx_DisambiguatedProfile {
@ -177,6 +168,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
/* this is used for the tile for the event which is selected via the URL. /* this is used for the tile for the event which is selected via the URL.
* TODO: ultimately we probably want some transition on here. * TODO: ultimately we probably want some transition on here.
*/ */
&.mx_EventTile_isEditing > .mx_EventTile_line,
&.mx_EventTile_selected > .mx_EventTile_line { &.mx_EventTile_selected > .mx_EventTile_line {
box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent; box-shadow: inset calc(50px + $selected-message-border-width) 0 0 -50px $accent;
background-color: $event-selected-color; background-color: $event-selected-color;