From 02b9298fcab4374f4371e22602becd11b8b5d939 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 24 Jan 2022 14:34:38 +0000 Subject: [PATCH 1/5] Fix bubble corners of file and audio pills to match image & messages --- res/css/views/rooms/_EventBubbleTile.scss | 33 ++++++++++++----------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 8ab391facf6..9f863f2b8a6 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -124,8 +124,9 @@ limitations under the License. .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MImageBody::before, + .mx_MediaBody, .mx_MLocationBody_map { - border-bottom-right-radius: var(--cornerRadius); + border-bottom-right-radius: var(--cornerRadius) !important; } } @@ -147,8 +148,9 @@ limitations under the License. .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MImageBody::before, + .mx_MediaBody, .mx_MLocationBody_map { - border-bottom-left-radius: var(--cornerRadius); + border-bottom-left-radius: var(--cornerRadius) !important; } } @@ -244,26 +246,23 @@ limitations under the License. } } - //noinspection CssReplaceWithShorthandSafely .mx_MImageBody { width: 100%; height: 100%; - //noinspection CssReplaceWithShorthandSafely - .mx_MImageBody_thumbnail { - // Note: This is intentionally not compressed because the browser gets confused - // when it is all combined. We're effectively unsetting the border radius then - // setting the two corners we care about manually. - border-radius: unset; - border-top-left-radius: var(--cornerRadius); - border-top-right-radius: var(--cornerRadius); - - &.mx_MImageBody_thumbnail--blurhash { - position: unset; - } + .mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash { + position: unset; } } + //noinspection CssReplaceWithShorthandSafely + .mx_MImageBody .mx_MImageBody_thumbnail, + .mx_MediaBody { + border-radius: unset; + border-top-left-radius: var(--cornerRadius); + border-top-right-radius: var(--cornerRadius); + } + .mx_EventTile_e2eIcon { flex-shrink: 0; // keep it at full size } @@ -280,6 +279,7 @@ limitations under the License. .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MImageBody::before, + .mx_MediaBody, .mx_MLocationBody_map { border-top-left-radius: 0; } @@ -289,6 +289,7 @@ limitations under the License. .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MImageBody::before, + .mx_MediaBody, .mx_MLocationBody_map { border-bottom-left-radius: var(--cornerRadius); } @@ -299,6 +300,7 @@ limitations under the License. .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MImageBody::before, + .mx_MediaBody, .mx_MLocationBody_map { border-top-right-radius: 0; } @@ -308,6 +310,7 @@ limitations under the License. .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MImageBody::before, + .mx_MediaBody, .mx_MLocationBody_map { border-bottom-right-radius: var(--cornerRadius); } From ea8b16f5b7f8475be3d3bdba24e93304c06a3822 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 24 Jan 2022 14:40:27 +0000 Subject: [PATCH 2/5] Correct the timestamp colour for non-image media too --- res/css/views/rooms/_EventBubbleTile.scss | 5 +++-- src/components/views/rooms/EventTile.tsx | 4 ++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 3f736f4132d..dbb16844ac3 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -217,8 +217,9 @@ limitations under the License. z-index: 3; // above media and location share maps } - // we put the timestamps for media (other than stickers) atop the media along with a gradient to aid visibility - &.mx_EventTile_mediaLine:not(.mx_EventTile_sticker) { + // we put the timestamps for media (other than stickers) atop the media + // for images we also apply a linear gradient and change the timestamp colour to aid readability + &.mx_EventTile_mediaLine.mx_EventTile_image { .mx_MessageTimestamp { color: #ffffff; // regardless of theme, always visible on the below gradient } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 446245108ef..956998a9fee 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1121,6 +1121,10 @@ export default class EventTile extends React.Component { const lineClasses = classNames("mx_EventTile_line", { mx_EventTile_mediaLine: isProbablyMedia, + mx_EventTile_image: ( + this.props.mxEvent.getType() === EventType.RoomMessage && + this.props.mxEvent.getContent().msgtype === MsgType.Image + ), mx_EventTile_sticker: this.props.mxEvent.getType() === EventType.Sticker, mx_EventTile_emote: ( this.props.mxEvent.getType() === EventType.RoomMessage && From 56722d63d1478718546dbd353fb99102de8b94e2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 24 Jan 2022 15:03:27 +0000 Subject: [PATCH 3/5] Fix audio messages not properly shrinking at narrow widths in bubble layout --- res/css/views/rooms/_EventBubbleTile.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index dbb16844ac3..a7211957b32 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -217,6 +217,11 @@ limitations under the License. z-index: 3; // above media and location share maps } + &.mx_EventTile_mediaLine .mx_MVoiceMessageBody { + // allow the event to be collapsed, this causes the waveform to get cropped + min-width: 0; + } + // we put the timestamps for media (other than stickers) atop the media // for images we also apply a linear gradient and change the timestamp colour to aid readability &.mx_EventTile_mediaLine.mx_EventTile_image { From 95ea23a0b0168d8b57aee9e0e5be5e3468d055e8 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 24 Jan 2022 15:32:55 +0000 Subject: [PATCH 4/5] Fix ELS issues which broke redactions in bubble layout --- res/css/views/rooms/_EventBubbleTile.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index a7211957b32..8f04e30843b 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -529,12 +529,17 @@ limitations under the License. padding: 0 49px; } +.mx_EventListSummary[data-expanded=true][data-layout=bubble] { + display: flex; + flex-direction: column; +} + // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. .mx_EventListSummary[data-expanded=true][data-layout=bubble] { margin: 0; - .mx_EventTile { + .mx_EventTile_info { padding: 2px 0; margin-right: 0; From 16c4987eb3665e69172a8796a70d50aee2f292a7 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 24 Jan 2022 16:03:02 +0000 Subject: [PATCH 5/5] delint --- res/css/views/rooms/_EventBubbleTile.scss | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 8f04e30843b..04ab1661494 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -529,14 +529,11 @@ limitations under the License. padding: 0 49px; } -.mx_EventListSummary[data-expanded=true][data-layout=bubble] { - display: flex; - flex-direction: column; -} - // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse. .mx_EventListSummary[data-expanded=true][data-layout=bubble] { + display: flex; + flex-direction: column; margin: 0; .mx_EventTile_info {