From 209344d443853f345552b62eb734dca862012259 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 30 Jun 2021 17:04:07 +0100 Subject: [PATCH] improvements to bubble layout --- res/css/views/rooms/_EventBubbleTile.scss | 60 +++++++++++++---------- res/css/views/rooms/_EventTile.scss | 14 +++--- src/components/views/rooms/EventTile.tsx | 3 +- src/i18n/strings/en_EN.json | 4 ++ 4 files changed, 47 insertions(+), 34 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 2009e7dcd8..284f9bb70f 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -15,17 +15,15 @@ limitations under the License. */ .mx_EventTile[data-layout=bubble] { - --avatarSize: 32px; --gutterSize: 7px; - --cornerRadius: 5px; - + --cornerRadius: 12px; --maxWidth: 70%; position: relative; margin-top: var(--gutterSize); - margin-left: var(--avatarSize); - margin-right: var(--avatarSize); + margin-left: calc(var(--avatarSize) + var(--gutterSize)); + margin-right: calc(var(--gutterSize) + var(--avatarSize)); padding: 2px 0; &:hover { @@ -46,6 +44,12 @@ limitations under the License. padding: var(--gutterSize); border-radius: var(--cornerRadius); background: var(--backgroundColor); + display: flex; + gap: var(--gutterSize); + > a { + position: absolute; + left: -33px; + } } .mx_EventTile_avatar { @@ -78,16 +82,13 @@ limitations under the License. .mx_EventTile_avatar { right: calc(-1 * var(--avatarSize)); } + --backgroundColor: #F8FDFC; } &[data-has-reply=true] { > .mx_EventTile_line { flex-direction: column; - - > a { - margin-top: -12px; - } } .mx_ReplyThread_show { @@ -95,19 +96,41 @@ limitations under the License. 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; + } + } + } } &:not([data-self=true]) { .mx_EventTile_avatar { left: calc(-1 * var(--avatarSize)); } + --backgroundColor: #F7F8F9; } &.mx_EventTile_bubbleContainer, &.mx_EventTile_info, & ~ .mx_EventListSummary[data-expanded=false] { - --backgroundColor: transparent; --gutterSize: 0; @@ -141,34 +164,21 @@ limitations under the License. margin-right: 55px; } - .mx_EventTile_line { - display: flex; - gap: var(--gutterSize); - > a { - order: 999; /* always display the timestamp as the last item */ - align-self: flex-end; - } - } - /* Special layout scenario for "Unable To Decrypt (UTD)" events */ &.mx_EventTile_bad > .mx_EventTile_line { flex-direction: column; - > a { - position: absolute; - bottom: var(--gutterSize); - } } .mx_EventTile_readAvatars { position: absolute; - right: 0; + right: -45px; bottom: 0; + top: auto; } .mx_MTextBody { /* 30px equates to the width of the timestamp */ max-width: calc(100% - 35px - var(--gutterSize)); } - } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 11b9f5e959..446c524e81 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -287,14 +287,14 @@ $hover-select-border: 4px; mask-size: contain; } - &::before { - background-color: #ffffff; - mask-image: url('$(res)/img/e2e/normal.svg'); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 80%; + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 80%; + } } -} .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { &::after { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 6040e1962f..b560209d14 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1002,8 +1002,7 @@ export default class EventTile extends React.Component { && (this.props.alwaysShowTimestamps || this.props.last || this.state.hover - || this.state.actionBarFocused) - || this.props.layout === Layout.Bubble; + || this.state.actionBarFocused); const timestamp = showTimestamp ? : null; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f0599c7e49..6253ae7d69 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -819,6 +819,7 @@ "Offline encrypted messaging using dehydrated devices": "Offline encrypted messaging using dehydrated devices", "Enable advanced debugging for the room list": "Enable advanced debugging for the room list", "Show info about bridges in room settings": "Show info about bridges in room settings", + "Explore new ways switching layouts (including a new bubble layout)": "Explore new ways switching layouts (including a new bubble layout)", "Font size": "Font size", "Use custom size": "Use custom size", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", @@ -1259,6 +1260,9 @@ "Custom theme URL": "Custom theme URL", "Add theme": "Add theme", "Theme": "Theme", + "Message layout": "Message layout", + "Modern": "Modern", + "Message bubbles": "Message bubbles", "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Set the name of a font installed on your system & %(brand)s will attempt to use it.", "Enable experimental, compact IRC style layout": "Enable experimental, compact IRC style layout", "Customise your appearance": "Customise your appearance",