diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 936092db7a..aa59f53b72 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -69,18 +69,32 @@ limitations under the License. } .mx_EventTile_line { + position: relative; padding: var(--gutterSize); - border-radius: var(--cornerRadius); + border-top-left-radius: var(--cornerRadius); + border-top-right-radius: var(--cornerRadius); + border-bottom-right-radius: var(--cornerRadius); background: var(--backgroundColor); display: flex; gap: var(--gutterSize); margin: 0 -12px 0 -22px; > a { position: absolute; - left: -57px; + left: -35px; } } + &.mx_EventTile_continuation .mx_EventTile_line { + border-top-left-radius: 0; + } + + &.mx_EventTile_lastInSection .mx_EventTile_line { + border-bottom-left-radius: var(--cornerRadius); + } + + + + .mx_EventTile_avatar { position: absolute; top: 0; @@ -94,6 +108,10 @@ limitations under the License. &[data-self=true] { .mx_EventTile_line { float: right; + > a { + left: auto; + right: -35px; + } } .mx_SenderProfile { display: none; @@ -153,6 +171,11 @@ limitations under the License. left: calc(-1 * var(--avatarSize)); } + .mx_MessageActionBar { + right: 0; + transform: translate3d(50%, 50%, 0); + } + --backgroundColor: $eventbubble-others-bg; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 446c524e81..548a852190 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -123,13 +123,6 @@ $hover-select-border: 4px; left: calc(-$hover-select-border); } - .mx_EventTile:hover .mx_MessageActionBar, - .mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar, - [data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar, - .mx_EventTile.focus-visible:focus-within .mx_MessageActionBar { - visibility: visible; - } - /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ @@ -626,6 +619,13 @@ $hover-select-border: 4px; } } +.mx_EventTile:hover .mx_MessageActionBar, +.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar, +[data-whatinput='keyboard'] .mx_EventTile:focus-within .mx_MessageActionBar, +.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar { + visibility: visible; +} + @media only screen and (max-width: 480px) { .mx_EventTile_line, .mx_EventTile_reply { padding-left: 0; diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index a0a1ac9b10..e811a8c1ce 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -644,8 +644,10 @@ export default class MessagePanel extends React.Component { } let willWantDateSeparator = false; + let lastInSection = true; if (nextEvent) { willWantDateSeparator = this.wantsDateSeparator(mxEv, nextEvent.getDate() || new Date()); + lastInSection = willWantDateSeparator || mxEv.getSender() !== nextEvent.getSender(); } // is this a continuation of the previous message? @@ -702,7 +704,7 @@ export default class MessagePanel extends React.Component { isTwelveHour={this.props.isTwelveHour} permalinkCreator={this.props.permalinkCreator} last={last} - lastInSection={willWantDateSeparator} + lastInSection={lastInSection} lastSuccessful={isLastSuccessful} isSelectedEvent={highlight} getRelationsForEvent={this.props.getRelationsForEvent}