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

💭 Message bubble layout #6291

Merged
merged 28 commits into from
Jul 20, 2021
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
ae5cd9d
Add new layout switcher UI
germain-gg Jun 17, 2021
6271c5c
first iteration for message bubble layout
germain-gg Jun 18, 2021
d9eec1c
Merge branch 'develop' into gsouquet/message-bubbles-4635
germain-gg Jun 30, 2021
6b9dfa3
Migrate UnknownBody to TypeScript
germain-gg Jun 30, 2021
d1c6cfe
Improved message bubble layout (no reply)
germain-gg Jun 30, 2021
209344d
improvements to bubble layout
germain-gg Jun 30, 2021
223b40c
Add dark theme support
germain-gg Jul 1, 2021
d90d1ca
event list summary alignment in bubble layout
germain-gg Jul 1, 2021
d804df8
Allow missing sender in event
germain-gg Jul 1, 2021
19bc44e
fix branch matching for element-web
germain-gg Jul 1, 2021
de875bb
fix avatar position and outline
germain-gg Jul 5, 2021
b0a1fc7
Updated color scheme and spacing
germain-gg Jul 7, 2021
7d946ee
Restore action bar
germain-gg Jul 7, 2021
870857f
Right hand side border radius
germain-gg Jul 7, 2021
10bdb3c
Merge branch 'develop' into gsouquet/message-bubbles-4635
germain-gg Jul 7, 2021
6a03ab8
Fix style linting
germain-gg Jul 7, 2021
5589622
unbubble some type of events
germain-gg Jul 7, 2021
1061cb0
Fix layout regressions in message bubbles
germain-gg Jul 13, 2021
ba3e7e2
Merge branch 'develop' into gsouquet/message-bubbles-4635
germain-gg Jul 13, 2021
290174b
fix group layout and IRC layout regressions
germain-gg Jul 13, 2021
fc270b4
fix group layout
germain-gg Jul 14, 2021
f4dfe98
change labs flag wording
germain-gg Jul 14, 2021
789d078
Merge branch 'develop' into gsouquet/message-bubbles-4635
germain-gg Jul 14, 2021
a6120ef
Revert fetchdep script diff
germain-gg Jul 14, 2021
dde58d4
Only hide sender when in bubble mode
germain-gg Jul 14, 2021
51c5094
Merge branch 'develop' into gsouquet/message-bubbles-4635
germain-gg Jul 14, 2021
06c9a06
Merge branch 'develop' into gsouquet/message-bubbles-4635
germain-gg Jul 20, 2021
dd65d47
lint fix
germain-gg 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
1 change: 1 addition & 0 deletions res/css/_components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@
@import "./views/rooms/_EditMessageComposer.scss";
@import "./views/rooms/_EntityTile.scss";
@import "./views/rooms/_EventTile.scss";
@import "./views/rooms/_EventBubbleTile.scss";
@import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
Expand Down
1 change: 1 addition & 0 deletions res/css/views/avatars/_BaseAvatar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ limitations under the License.
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
display: inline-block;
user-select: none;
line-height: 1;
}

.mx_BaseAvatar_initial {
Expand Down
1 change: 0 additions & 1 deletion res/css/views/messages/_MImageBody.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ limitations under the License.

.mx_MImageBody {
display: block;
margin-right: 34px;
}

.mx_MImageBody_thumbnail {
Expand Down
1 change: 1 addition & 0 deletions res/css/views/messages/_ReactionsRow.scss
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ limitations under the License.
height: 24px;
vertical-align: middle;
margin-left: 4px;
margin-right: 4px;

&::before {
content: '';
Expand Down
200 changes: 200 additions & 0 deletions res/css/views/rooms/_EventBubbleTile.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,200 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.mx_EventTile[data-layout=bubble],
.mx_EventTile[data-layout=bubble] ~ .mx_EventListSummary {
--avatarSize: 32px;
--gutterSize: 7px;
--cornerRadius: 12px;
--maxWidth: 70%;
}

.mx_EventTile[data-layout=bubble] {

position: relative;
margin-top: var(--gutterSize);
margin-left: calc(var(--avatarSize) + var(--gutterSize));
margin-right: calc(var(--gutterSize) + var(--avatarSize));
padding: 2px 0;

/* For replies */
.mx_EventTile {
padding-top: 0;
}

&:hover {
background: $eventbubble-bg-hover;
}

.mx_SenderProfile,
.mx_EventTile_line {
width: fit-content;
max-width: 70%;
}

.mx_SenderProfile {
padding: 0 var(--gutterSize);
}

.mx_EventTile_line {
padding: var(--gutterSize);
border-radius: var(--cornerRadius);
background: var(--backgroundColor);
display: flex;
gap: var(--gutterSize);
> a {
position: absolute;
left: -33px;
}
}

.mx_EventTile_avatar {
position: absolute;
top: 0;
line-height: 1;
img {
box-shadow: 0 0 0 2px $eventbubble-avatar-outline;
border-radius: 50%;
}
}

&[data-self=true] {
.mx_EventTile_line {
float: right;
}
.mx_SenderProfile {
display: none;
}
.mx_ReactionsRow {
float: right;
clear: right;
display: flex;

/* Moving the "add reaction button" before the reactions */
> :last-child {
order: -1;
}
}
.mx_EventTile_avatar {
right: calc(-1 * var(--avatarSize));
}

--backgroundColor: $eventbubble-self-bg;
}

&[data-has-reply=true] {
> .mx_EventTile_line {
flex-direction: column;
}

.mx_ReplyThread_show {
order: 99999;
/* background: white;
box-shadow: 0 0 0 var(--gutterSize) white; */
}

.mx_ReplyThread {
margin: 0 calc(-1 * var(--gutterSize));

.mx_EventTile_reply {
padding: 0;
> a {
display: none !important;
}
}

.mx_EventTile {
display: flex;
gap: var(--gutterSize);
.mx_EventTile_avatar {
position: static;
}
.mx_SenderProfile {
display: none;
}
}
}
}

&[data-self=false] {
.mx_EventTile_avatar {
left: calc(-1 * var(--avatarSize));
}

--backgroundColor: $eventbubble-others-bg;
}

&.mx_EventTile_bubbleContainer,
&.mx_EventTile_info,
& ~ .mx_EventListSummary[data-expanded=false] {
--backgroundColor: transparent;
--gutterSize: 0;

display: flex;
align-items: center;
justify-content: center;

.mx_EventTile_avatar {
position: static;
order: -1;
margin-right: 5px;
}
}

& ~ .mx_EventListSummary {
--maxWidth: 80%;
margin-left: calc(var(--avatarSize) + var(--gutterSize));
margin-right: calc(var(--gutterSize) + var(--avatarSize));
.mx_EventListSummary_toggle {
float: none;
margin: 0;
order: 9;
margin-left: 5px;
}
.mx_EventListSummary_avatars {
padding-top: 0;
}
}

& + .mx_EventListSummary {
.mx_EventTile {
margin-top: 0;
padding: 0;
}
}

.mx_EventListSummary_toggle {
margin-right: 55px;
}

/* Special layout scenario for "Unable To Decrypt (UTD)" events */
&.mx_EventTile_bad > .mx_EventTile_line {
flex-direction: column;
}


.mx_EventTile_readAvatars {
position: absolute;
right: -45px;
bottom: 0;
top: auto;
}

.mx_MTextBody {
/* 30px equates to the width of the timestamp */
max-width: calc(100% - 35px - var(--gutterSize));
}
}
Loading