From ae5cd9d7ac058f051454ace44b3d114908537e66 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 17 Jun 2021 14:11:44 +0100 Subject: [PATCH 01/22] Add new layout switcher UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Quirin Götz --- .../tabs/user/AppearanceUserSettingsTab.tsx | 110 ++++++++++++++++-- src/settings/Layout.ts | 4 +- src/settings/Settings.tsx | 8 ++ .../NewLayoutSwitcherController.ts | 26 +++++ 4 files changed, 137 insertions(+), 11 deletions(-) create mode 100644 src/settings/controllers/NewLayoutSwitcherController.ts diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx index 9e27ed968e..bc31f750c3 100644 --- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx +++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx @@ -37,6 +37,8 @@ import StyledRadioGroup from "../../../elements/StyledRadioGroup"; import { SettingLevel } from "../../../../../settings/SettingLevel"; import { UIFeature } from "../../../../../settings/UIFeature"; import { Layout } from "../../../../../settings/Layout"; +import classNames from 'classnames'; +import StyledRadioButton from '../../../elements/StyledRadioButton'; import { replaceableComponent } from "../../../../../utils/replaceableComponent"; import { compare } from "../../../../../utils/strings"; @@ -235,6 +237,19 @@ export default class AppearanceUserSettingsTab extends React.Component): void => { + let layout; + switch (e.target.value) { + case "irc": layout = Layout.IRC; break; + case "group": layout = Layout.Group; break; + case "bubble": layout = Layout.Bubble; break; + } + + this.setState({ layout: layout }); + + SettingsStore.setValue("layout", null, SettingLevel.DEVICE, layout); + }; + private onIRCLayoutChange = (enabled: boolean) => { if (enabled) { this.setState({layout: Layout.IRC}); @@ -367,6 +382,77 @@ export default class AppearanceUserSettingsTab extends React.Component; } + private renderLayoutSection = () => { + return
+ { _t("Message layout") } + +
+
+ + + { "IRC" } + +
+
+
+ + + {_t("Modern")} + +
+
+
+ + + {_t("Message bubbles")} + +
+
+
; + } + private renderAdvancedSection() { if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null; @@ -390,14 +476,17 @@ export default class AppearanceUserSettingsTab extends React.Component - this.onIRCLayoutChange(ev.target.checked)} - > - {_t("Enable experimental, compact IRC style layout")} - + + { !SettingsStore.getValue("feature_new_layout_switcher") ? + this.onIRCLayoutChange(ev.target.checked)} + > + {_t("Enable experimental, compact IRC style layout")} + : null + } {_t("Appearance Settings only affect this %(brand)s session.", { brand })}
- {this.renderThemeSection()} - {this.renderFontSection()} - {this.renderAdvancedSection()} + { this.renderThemeSection() } + { SettingsStore.getValue("feature_new_layout_switcher") ? this.renderLayoutSection() : null } + { this.renderFontSection() } + { this.renderAdvancedSection() }
); } diff --git a/src/settings/Layout.ts b/src/settings/Layout.ts index 3a42b2b510..d4e1f06c0a 100644 --- a/src/settings/Layout.ts +++ b/src/settings/Layout.ts @@ -1,5 +1,6 @@ /* Copyright 2021 Šimon Brandner +Copyright 2021 Quirin Götz Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -19,7 +20,8 @@ import PropTypes from 'prop-types'; /* TODO: This should be later reworked into something more generic */ export enum Layout { IRC = "irc", - Group = "group" + Group = "group", + Bubble = "bubble", } /* We need this because multiple components are still using JavaScript */ diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 155d039572..87edf886e0 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -41,6 +41,7 @@ import { Layout } from "./Layout"; import ReducedMotionController from './controllers/ReducedMotionController'; import IncompatibleController from "./controllers/IncompatibleController"; import SdkConfig from "../SdkConfig"; +import NewLayoutSwitcherController from './controllers/NewLayoutSwitcherController'; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = [ @@ -285,6 +286,13 @@ export const SETTINGS: {[setting: string]: ISetting} = { displayName: _td("Show info about bridges in room settings"), default: false, }, + "feature_new_layout_switcher": { + isFeature: true, + supportedLevels: LEVELS_FEATURE, + displayName: _td("Explore new ways switching layouts (including a new bubble layout)"), + default: false, + controller: new NewLayoutSwitcherController(), + }, "RoomList.backgroundImage": { supportedLevels: LEVELS_ACCOUNT_SETTINGS, default: null, diff --git a/src/settings/controllers/NewLayoutSwitcherController.ts b/src/settings/controllers/NewLayoutSwitcherController.ts new file mode 100644 index 0000000000..b1d6cac55e --- /dev/null +++ b/src/settings/controllers/NewLayoutSwitcherController.ts @@ -0,0 +1,26 @@ +/* +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. +*/ + +import SettingController from "./SettingController"; +import { SettingLevel } from "../SettingLevel"; +import SettingsStore from "../SettingsStore"; +import { Layout } from "../Layout"; + +export default class NewLayoutSwitcherController extends SettingController { + public onChange(level: SettingLevel, roomId: string, newValue: any) { + // On disabling switch back to Layout.Group if Layout.Bubble + if (!newValue && SettingsStore.getValue("layout") == Layout.Bubble) { + SettingsStore.setValue("layout", null, SettingLevel.DEVICE, Layout.Group); + } + } +} From 6271c5c3d8344e1c135f8f0736089e5d9945f39d Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Fri, 18 Jun 2021 18:59:22 +0100 Subject: [PATCH 02/22] first iteration for message bubble layout --- res/css/_components.scss | 1 + res/css/views/messages/_MImageBody.scss | 1 - res/css/views/messages/_ReactionsRow.scss | 1 + res/css/views/rooms/_EventBubbleTile.scss | 149 ++++ res/css/views/rooms/_EventTile.scss | 769 +++++++++--------- .../views/elements/EventListSummary.tsx | 8 +- src/components/views/messages/UnknownBody.js | 3 +- src/components/views/rooms/EventTile.tsx | 17 +- 8 files changed, 559 insertions(+), 390 deletions(-) create mode 100644 res/css/views/rooms/_EventBubbleTile.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 56403ea190..67831e4a60 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -194,6 +194,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"; diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index 1c773c2f06..6ac6767ffa 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -16,7 +16,6 @@ limitations under the License. .mx_MImageBody { display: block; - margin-right: 34px; } .mx_MImageBody_thumbnail { diff --git a/res/css/views/messages/_ReactionsRow.scss b/res/css/views/messages/_ReactionsRow.scss index e05065eb02..b2bca6dfb3 100644 --- a/res/css/views/messages/_ReactionsRow.scss +++ b/res/css/views/messages/_ReactionsRow.scss @@ -26,6 +26,7 @@ limitations under the License. height: 24px; vertical-align: middle; margin-left: 4px; + margin-right: 4px; &::before { content: ''; diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss new file mode 100644 index 0000000000..28dce730ff --- /dev/null +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -0,0 +1,149 @@ +/* +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] { + + --avatarSize: 32px; + --gutterSize: 7px; + --cornerRadius: 5px; + + --maxWidth: 70%; + + position: relative; + margin-top: var(--gutterSize); + margin-left: var(--avatarSize); + margin-right: var(--avatarSize); + padding: 2px 0; + + &:hover { + background: rgb(242, 242, 242); + } + + .mx_SenderProfile, + .mx_EventTile_line { + width: fit-content; + max-width: 70%; + background: var(--backgroundColor); + } + + .mx_SenderProfile { + display: none; + padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize); + border-top-left-radius: var(--cornerRadius); + border-top-right-radius: var(--cornerRadius); + } + + .mx_EventTile_line { + padding: var(--gutterSize); + border-radius: var(--cornerRadius); + } + + /* + .mx_SenderProfile + .mx_EventTile_line { + padding-top: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + */ + + .mx_EventTile_avatar { + position: absolute; + top: 0; + img { + border: 2px solid #fff; + border-radius: 50%; + } + } + + &[data-self=true] { + .mx_EventTile_line { + float: right; + } + .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: #F8FDFC; + } + + &: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; + + display: flex; + align-items: center; + justify-content: center; + + .mx_EventTile_avatar { + position: static; + order: -1; + } + } + + & ~ .mx_EventListSummary { + --maxWidth: 95%; + .mx_EventListSummary_toggle { + float: none; + margin: 0; + order: 9; + } + } + + & + .mx_EventListSummary { + .mx_EventTile { + margin-top: 0; + padding: 0; + } + } + + .mx_EventListSummary_toggle { + 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; + } + } + + .mx_EventTile_readAvatars { + position: absolute; + right: 0; + bottom: 0; + } + +} diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 3af266caee..303118d57c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -1,6 +1,6 @@ /* Copyright 2015, 2016 OpenMarket Ltd -Copyright 2020 The Matrix.org Foundation C.I.C. +Copyright 2020-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. @@ -18,101 +18,382 @@ limitations under the License. $left-gutter: 64px; $hover-select-border: 4px; -.mx_EventTile { +.mx_EventTile:not([data-layout=bubble]) { max-width: 100%; clear: both; padding-top: 18px; font-size: $font-14px; position: relative; -} -.mx_EventTile.mx_EventTile_info { - padding-top: 1px; -} - -.mx_EventTile_avatar { - top: 14px; - left: 8px; - cursor: pointer; - user-select: none; -} - -.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { - top: $font-6px; - left: $left-gutter; -} - -.mx_EventTile_continuation { - padding-top: 0px !important; - - &.mx_EventTile_isEditing { - padding-top: 5px !important; - margin-top: -5px; + .mx_EventTile.mx_EventTile_info { + padding-top: 1px; } -} -.mx_EventTile_isEditing { - background-color: $header-panel-bg-color; -} + .mx_EventTile_avatar { + top: 14px; + left: 8px; + cursor: pointer; + user-select: none; + } -.mx_EventTile .mx_SenderProfile { - color: $primary-fg-color; - font-size: $font-14px; - display: inline-block; /* anti-zalgo, with overflow hidden */ - overflow: hidden; - cursor: pointer; - padding-bottom: 0px; - padding-top: 0px; - margin: 0px; - /* the next three lines, along with overflow hidden, truncate long display names */ - white-space: nowrap; - text-overflow: ellipsis; - max-width: calc(100% - $left-gutter); -} + .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { + top: $font-6px; + left: $left-gutter; + } -.mx_EventTile .mx_SenderProfile .mx_Flair { - opacity: 0.7; - margin-left: 5px; - display: inline-block; - vertical-align: top; - overflow: hidden; - user-select: none; + .mx_EventTile_continuation { + padding-top: 0px !important; - img { - vertical-align: -2px; - margin-right: 2px; + &.mx_EventTile_isEditing { + padding-top: 5px !important; + margin-top: -5px; + } + } + + .mx_EventTile_isEditing { + background-color: $header-panel-bg-color; + } + + .mx_EventTile .mx_SenderProfile { + color: $primary-fg-color; + font-size: $font-14px; + display: inline-block; /* anti-zalgo, with overflow hidden */ + overflow: hidden; + cursor: pointer; + padding-bottom: 0px; + padding-top: 0px; + margin: 0px; + /* the next three lines, along with overflow hidden, truncate long display names */ + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - $left-gutter); + } + + .mx_EventTile .mx_SenderProfile .mx_Flair { + opacity: 0.7; + margin-left: 5px; + display: inline-block; + vertical-align: top; + overflow: hidden; + user-select: none; + + img { + vertical-align: -2px; + margin-right: 2px; + border-radius: 8px; + } + } + + .mx_EventTile_isEditing .mx_MessageTimestamp { + visibility: hidden; + } + + .mx_EventTile .mx_MessageTimestamp { + display: block; + white-space: nowrap; + left: 0px; + text-align: center; + user-select: none; + } + + .mx_EventTile_continuation .mx_EventTile_line { + clear: both; + } + + .mx_EventTile_line, .mx_EventTile_reply { + position: relative; + padding-left: $left-gutter; border-radius: 8px; } -} -.mx_EventTile_isEditing .mx_MessageTimestamp { - visibility: hidden; -} + .mx_RoomView_timeline_rr_enabled, + // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter + .mx_EventListSummary { + .mx_EventTile_line { + /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ + margin-right: 110px; + } + } -.mx_EventTile .mx_MessageTimestamp { - display: block; - white-space: nowrap; - left: 0px; - text-align: center; - user-select: none; -} + .mx_EventTile_reply { + margin-right: 10px; + } -.mx_EventTile_continuation .mx_EventTile_line { - clear: both; -} + .mx_EventTile_selected > div > a > .mx_MessageTimestamp { + left: calc(-$hover-select-border); + } -.mx_EventTile_line, .mx_EventTile_reply { - position: relative; - padding-left: $left-gutter; - border-radius: 8px; -} + .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; + } -.mx_RoomView_timeline_rr_enabled, -// on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter -.mx_EventListSummary { - .mx_EventTile_line { - /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ - margin-right: 110px; + /* this is used for the tile for the event which is selected via the URL. + * TODO: ultimately we probably want some transition on here. + */ + .mx_EventTile_selected > .mx_EventTile_line { + border-left: $accent-color 4px solid; + padding-left: calc($left-gutter - $hover-select-border); + background-color: $event-selected-color; + } + + .mx_EventTile_highlight, + .mx_EventTile_highlight .markdown-body { + color: $event-highlight-fg-color; + + .mx_EventTile_line { + background-color: $event-highlight-bg-color; + } + } + + .mx_EventTile_info .mx_EventTile_line { + padding-left: calc($left-gutter + 18px); + } + + .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { + padding-left: calc($left-gutter + 18px - $hover-select-border); + } + + .mx_EventTile:hover .mx_EventTile_line, + .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, + .mx_EventTile.focus-visible:focus-within .mx_EventTile_line { + background-color: $event-selected-color; + } + + .mx_EventTile_searchHighlight { + background-color: $accent-color; + color: $accent-fg-color; + border-radius: 5px; + padding-left: 2px; + padding-right: 2px; + cursor: pointer; + } + + .mx_EventTile_searchHighlight a { + background-color: $accent-color; + color: $accent-fg-color; + } + + .mx_EventTile_receiptSent, + .mx_EventTile_receiptSending { + // We don't use `position: relative` on the element because then it won't line + // up with the other read receipts + + &::before { + background-color: $tertiary-fg-color; + mask-repeat: no-repeat; + mask-position: center; + mask-size: 14px; + width: 14px; + height: 14px; + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + } + } + .mx_EventTile_receiptSent::before { + mask-image: url('$(res)/img/element-icons/circle-sent.svg'); + } + .mx_EventTile_receiptSending::before { + mask-image: url('$(res)/img/element-icons/circle-sending.svg'); + } + + .mx_EventTile_contextual { + opacity: 0.4; + } + + .mx_EventTile_msgOption { + float: right; + text-align: right; + position: relative; + width: 90px; + + /* Hack to stop the height of this pushing the messages apart. + Replaces margin-top: -6px. This interacts better with a read + marker being in between. Content overflows. */ + height: 1px; + + margin-right: 10px; + } + + .mx_EventTile_msgOption a { + text-decoration: none; + } + + /* all the overflow-y: hidden; are to trap Zalgos - + but they introduce an implicit overflow-x: auto. + so make that explicitly hidden too to avoid random + horizontal scrollbars occasionally appearing, like in + https://github.com/vector-im/vector-web/issues/1154 + */ + .mx_EventTile_content { + display: block; + overflow-y: hidden; + overflow-x: hidden; + margin-right: 34px; + } + + /* De-zalgoing */ + .mx_EventTile_body { + overflow-y: hidden; + } + + /* Spoiler stuff */ + .mx_EventTile_spoiler { + cursor: pointer; + } + + .mx_EventTile_spoiler_reason { + color: $event-timestamp-color; + font-size: $font-11px; + } + + .mx_EventTile_spoiler_content { + filter: blur(5px) saturate(0.1) sepia(1); + transition-duration: 0.5s; + } + + .mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content { + filter: none; + } + + .mx_EventTile_e2eIcon { + position: absolute; + top: 6px; + left: 44px; + width: 14px; + height: 14px; + display: block; + bottom: 0; + right: 0; + opacity: 0.2; + background-repeat: no-repeat; + background-size: contain; + + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + } + + &::before { + background-color: #ffffff; + mask-image: url('$(res)/img/e2e/normal.svg'); + mask-repeat: no-repeat; + mask-position: center; + mask-size: 90%; + } + } + + .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; + } + + .mx_EventTile_e2eIcon_unknown { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; + } + + .mx_EventTile_e2eIcon_unencrypted { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; + } + + .mx_EventTile_e2eIcon_unauthenticated { + &::after { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; + } + opacity: 1; + } + + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { + padding-left: calc($left-gutter - $hover-select-border); + } + + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; + } + + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; + } + + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { + border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; + } + + .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, + .mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { + padding-left: calc($left-gutter + 18px - $hover-select-border); + } + + /* End to end encryption stuff */ + .mx_EventTile:hover .mx_EventTile_e2eIcon { + opacity: 1; + } + + // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { + left: calc(-$hover-select-border); + } + + // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) + .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, + .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon, + .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon { + display: block; + left: 41px; + } + + .mx_EventTile_tileError { + color: red; + text-align: center; + + // Remove some of the default tile padding so that the error is centered + margin-right: 0; + .mx_EventTile_line { + padding-left: 0; + margin-right: 0; + } + + .mx_EventTile_line span { + padding: 4px 8px; + } + + a { + margin-left: 1em; + } + } + + .mx_MImageBody { + margin-right: 34px; } } @@ -132,121 +413,6 @@ $hover-select-border: 4px; } } -.mx_EventTile_reply { - margin-right: 10px; -} - -/* HACK to override line-height which is already marked important elsewhere */ -.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { - font-size: 48px !important; - line-height: 57px !important; -} - -.mx_EventTile_selected > div > a > .mx_MessageTimestamp { - 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. - */ -.mx_EventTile_selected > .mx_EventTile_line { - border-left: $accent-color 4px solid; - padding-left: calc($left-gutter - $hover-select-border); - background-color: $event-selected-color; -} - -.mx_EventTile_highlight, -.mx_EventTile_highlight .markdown-body { - color: $event-highlight-fg-color; - - .mx_EventTile_line { - background-color: $event-highlight-bg-color; - } -} - -.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px); -} - -.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px - $hover-select-border); -} - -.mx_EventTile:hover .mx_EventTile_line, -.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, -.mx_EventTile.focus-visible:focus-within .mx_EventTile_line { - background-color: $event-selected-color; -} - -.mx_EventTile_searchHighlight { - background-color: $accent-color; - color: $accent-fg-color; - border-radius: 5px; - padding-left: 2px; - padding-right: 2px; - cursor: pointer; -} - -.mx_EventTile_searchHighlight a { - background-color: $accent-color; - color: $accent-fg-color; -} - -.mx_EventTile_receiptSent, -.mx_EventTile_receiptSending { - // We don't use `position: relative` on the element because then it won't line - // up with the other read receipts - - &::before { - background-color: $tertiary-fg-color; - mask-repeat: no-repeat; - mask-position: center; - mask-size: 14px; - width: 14px; - height: 14px; - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - } -} -.mx_EventTile_receiptSent::before { - mask-image: url('$(res)/img/element-icons/circle-sent.svg'); -} -.mx_EventTile_receiptSending::before { - mask-image: url('$(res)/img/element-icons/circle-sending.svg'); -} - -.mx_EventTile_contextual { - opacity: 0.4; -} - -.mx_EventTile_msgOption { - float: right; - text-align: right; - position: relative; - width: 90px; - - /* Hack to stop the height of this pushing the messages apart. - Replaces margin-top: -6px. This interacts better with a read - marker being in between. Content overflows. */ - height: 1px; - - margin-right: 10px; -} - -.mx_EventTile_msgOption a { - text-decoration: none; -} - .mx_EventTile_readAvatars { position: relative; display: inline-block; @@ -277,180 +443,10 @@ $hover-select-border: 4px; position: absolute; } -/* all the overflow-y: hidden; are to trap Zalgos - - but they introduce an implicit overflow-x: auto. - so make that explicitly hidden too to avoid random - horizontal scrollbars occasionally appearing, like in - https://github.com/vector-im/vector-web/issues/1154 - */ -.mx_EventTile_content { - display: block; - overflow-y: hidden; - overflow-x: hidden; - margin-right: 34px; -} - -/* De-zalgoing */ -.mx_EventTile_body { - overflow-y: hidden; -} - -/* Spoiler stuff */ -.mx_EventTile_spoiler { - cursor: pointer; -} - -.mx_EventTile_spoiler_reason { - color: $event-timestamp-color; - font-size: $font-11px; -} - -.mx_EventTile_spoiler_content { - filter: blur(5px) saturate(0.1) sepia(1); - transition-duration: 0.5s; -} - -.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content { - filter: none; -} - -.mx_EventTile_e2eIcon { - position: absolute; - top: 6px; - left: 44px; - width: 14px; - height: 14px; - display: block; - bottom: 0; - right: 0; - opacity: 0.2; - background-repeat: no-repeat; - background-size: contain; - - &::before, &::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - } - - &::before { - background-color: #ffffff; - mask-image: url('$(res)/img/e2e/normal.svg'); - mask-repeat: no-repeat; - mask-position: center; - mask-size: 90%; - } -} - -.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; -} - -.mx_EventTile_e2eIcon_unknown { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; -} - -.mx_EventTile_e2eIcon_unencrypted { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; -} - -.mx_EventTile_e2eIcon_unauthenticated { - &::after { - mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: $composer-e2e-icon-color; - } - opacity: 1; -} - -.mx_EventTile_keyRequestInfo { - font-size: $font-12px; -} - -.mx_EventTile_keyRequestInfo_text { - opacity: 0.5; -} - -.mx_EventTile_keyRequestInfo_text a { - color: $primary-fg-color; - text-decoration: underline; - cursor: pointer; -} - -.mx_EventTile_keyRequestInfo_tooltip_contents p { - text-align: auto; - margin-left: 3px; - margin-right: 3px; -} - -.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child { - margin-top: 0px; -} - -.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child { - margin-bottom: 0px; -} - -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - padding-left: calc($left-gutter - $hover-select-border); -} - -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { - border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; -} - -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { - border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; -} - -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { - border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; -} - -.mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, -.mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { - padding-left: calc($left-gutter + 18px - $hover-select-border); -} - -/* End to end encryption stuff */ -.mx_EventTile:hover .mx_EventTile_e2eIcon { - opacity: 1; -} - -// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { - left: calc(-$hover-select-border); -} - -// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) -.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, -.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon, -.mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon { - display: block; - left: 41px; +/* HACK to override line-height which is already marked important elsewhere */ +.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { + font-size: 48px !important; + line-height: 57px !important; } .mx_EventTile_content .mx_EventTile_edited { @@ -601,24 +597,33 @@ $hover-select-border: 4px; /* end of overrides */ -.mx_EventTile_tileError { - color: red; - text-align: center; - // Remove some of the default tile padding so that the error is centered - margin-right: 0; - .mx_EventTile_line { - padding-left: 0; - margin-right: 0; - } +.mx_EventTile_keyRequestInfo { + font-size: $font-12px; +} - .mx_EventTile_line span { - padding: 4px 8px; - } +.mx_EventTile_keyRequestInfo_text { + opacity: 0.5; +} - a { - margin-left: 1em; - } +.mx_EventTile_keyRequestInfo_text a { + color: $primary-fg-color; + text-decoration: underline; + cursor: pointer; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p { + text-align: auto; + margin-left: 3px; + margin-right: 3px; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p:first-child { + margin-top: 0px; +} + +.mx_EventTile_keyRequestInfo_tooltip_contents p:last-child { + margin-bottom: 0px; } @media only screen and (max-width: 480px) { diff --git a/src/components/views/elements/EventListSummary.tsx b/src/components/views/elements/EventListSummary.tsx index 86d3e082ad..3c64337367 100644 --- a/src/components/views/elements/EventListSummary.tsx +++ b/src/components/views/elements/EventListSummary.tsx @@ -63,7 +63,7 @@ const EventListSummary: React.FC = ({ // If we are only given few events then just pass them through if (events.length < threshold) { return ( -
  • +
  • { children }
    • ); @@ -92,7 +92,7 @@ const EventListSummary: React.FC = ({ } return ( -
  • +
  • { expanded ? _t('collapse') : _t('expand') } @@ -101,4 +101,8 @@ const EventListSummary: React.FC = ({ ); }; +EventListSummary.defaultProps = { + startExpanded: false, +}; + export default EventListSummary; diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js index 786facc340..fdf0387a69 100644 --- a/src/components/views/messages/UnknownBody.js +++ b/src/components/views/messages/UnknownBody.js @@ -17,11 +17,12 @@ limitations under the License. import React, {forwardRef} from "react"; -export default forwardRef(({mxEvent}, ref) => { +export default forwardRef(({mxEvent, children}, ref) => { const text = mxEvent.getContent().body; return ( { text } + { children } ); }); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 85b9cac2c4..a76cc04660 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -29,7 +29,7 @@ import { hasText } from "../../../TextForEvent"; import * as sdk from "../../../index"; import dis from '../../../dispatcher/dispatcher'; import SettingsStore from "../../../settings/SettingsStore"; -import {Layout} from "../../../settings/Layout"; +import { Layout } from "../../../settings/Layout"; import {formatTime} from "../../../DateUtils"; import {MatrixClientPeg} from '../../../MatrixClientPeg'; import {ALL_RULE_TYPES} from "../../../mjolnir/BanList"; @@ -988,8 +988,13 @@ export default class EventTile extends React.Component { onFocusChange={this.onActionBarFocusChange} /> : undefined; - const showTimestamp = this.props.mxEvent.getTs() && - (this.props.alwaysShowTimestamps || this.props.last || this.state.hover || this.state.actionBarFocused); + const showTimestamp = this.props.mxEvent.getTs() + && (this.props.alwaysShowTimestamps + || this.props.last + || this.state.hover + || this.state.actionBarFocused) + || this.props.layout === Layout.Bubble; + const timestamp = showTimestamp ? : null; @@ -1168,6 +1173,8 @@ export default class EventTile extends React.Component { this.props.alwaysShowTimestamps || this.state.hover, ); + const isOwnEvent = this.props.mxEvent.sender.userId === MatrixClientPeg.get().getUserId(); + // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers return ( React.createElement(this.props.as || "li", { @@ -1177,6 +1184,8 @@ export default class EventTile extends React.Component { "aria-live": ariaLive, "aria-atomic": "true", "data-scroll-tokens": scrollToken, + "data-layout": this.props.layout, + "data-self": isOwnEvent, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), }, [ @@ -1198,9 +1207,9 @@ export default class EventTile extends React.Component { onHeightChanged={this.props.onHeightChanged} /> { keyRequestInfo } - { reactionsRow } { actionBar } , + reactionsRow, msgOption, avatar, From 6b9dfa37c5170ed4229eaf382b4bea1499d37f53 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 30 Jun 2021 09:00:14 +0100 Subject: [PATCH 03/22] Migrate UnknownBody to TypeScript --- .../views/messages/{UnknownBody.js => UnknownBody.tsx} | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) rename src/components/views/messages/{UnknownBody.js => UnknownBody.tsx} (78%) diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.tsx similarity index 78% rename from src/components/views/messages/UnknownBody.js rename to src/components/views/messages/UnknownBody.tsx index 78a1846b68..b09afa54e9 100644 --- a/src/components/views/messages/UnknownBody.js +++ b/src/components/views/messages/UnknownBody.tsx @@ -16,8 +16,14 @@ limitations under the License. */ import React, { forwardRef } from "react"; +import { MatrixEvent } from "matrix-js-sdk/src"; -export default forwardRef(({ mxEvent, children }, ref) => { +interface IProps { + mxEvent: MatrixEvent; + children?: React.ReactNode; +} + +export default forwardRef(({ mxEvent, children }: IProps, ref: React.RefObject) => { const text = mxEvent.getContent().body; return ( From d1c6cfe6b95c903c517cc52c31664a979d70153b Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 30 Jun 2021 12:06:16 +0100 Subject: [PATCH 04/22] Improved message bubble layout (no reply) --- res/css/views/avatars/_BaseAvatar.scss | 1 + res/css/views/rooms/_EventBubbleTile.scss | 51 +++++++++++++++++------ res/css/views/rooms/_EventTile.scss | 40 +++++++++--------- src/components/views/rooms/EventTile.tsx | 7 +++- 4 files changed, 64 insertions(+), 35 deletions(-) diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss index cbddd97e18..65e4493f19 100644 --- a/res/css/views/avatars/_BaseAvatar.scss +++ b/res/css/views/avatars/_BaseAvatar.scss @@ -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 { diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 28dce730ff..2009e7dcd8 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -36,34 +36,24 @@ limitations under the License. .mx_EventTile_line { width: fit-content; max-width: 70%; - background: var(--backgroundColor); } .mx_SenderProfile { - display: none; padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize); - border-top-left-radius: var(--cornerRadius); - border-top-right-radius: var(--cornerRadius); } .mx_EventTile_line { padding: var(--gutterSize); border-radius: var(--cornerRadius); + background: var(--backgroundColor); } - /* - .mx_SenderProfile + .mx_EventTile_line { - padding-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; - } - */ - .mx_EventTile_avatar { position: absolute; top: 0; + line-height: 1; img { - border: 2px solid #fff; + box-shadow: 0 0 0 2px #fff; border-radius: 50%; } } @@ -72,6 +62,9 @@ limitations under the License. .mx_EventTile_line { float: right; } + .mx_SenderProfile { + display: none; + } .mx_ReactionsRow { float: right; clear: right; @@ -88,6 +81,22 @@ limitations under the License. --backgroundColor: #F8FDFC; } + &[data-has-reply=true] { + > .mx_EventTile_line { + flex-direction: column; + + > a { + margin-top: -12px; + } + } + + .mx_ReplyThread_show { + order: 99999; + background: white; + box-shadow: 0 0 0 var(--gutterSize) white; + } + } + &:not([data-self=true]) { .mx_EventTile_avatar { left: calc(-1 * var(--avatarSize)); @@ -100,6 +109,7 @@ limitations under the License. & ~ .mx_EventListSummary[data-expanded=false] { --backgroundColor: transparent; + --gutterSize: 0; display: flex; align-items: center; @@ -140,10 +150,25 @@ limitations under the License. } } + /* 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; bottom: 0; } + .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 1052b87b0d..11b9f5e959 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -372,26 +372,6 @@ $hover-select-border: 4px; left: 41px; } - .mx_EventTile_tileError { - color: red; - text-align: center; - - // Remove some of the default tile padding so that the error is centered - margin-right: 0; - .mx_EventTile_line { - padding-left: 0; - margin-right: 0; - } - - .mx_EventTile_line span { - padding: 4px 8px; - } - - a { - margin-left: 1em; - } - } - .mx_MImageBody { margin-right: 34px; } @@ -626,6 +606,26 @@ $hover-select-border: 4px; margin-bottom: 0px; } +.mx_EventTile_tileError { + color: red; + text-align: center; + + // Remove some of the default tile padding so that the error is centered + margin-right: 0; + .mx_EventTile_line { + padding-left: 0; + margin-right: 0; + } + + .mx_EventTile_line span { + padding: 4px 8px; + } + + a { + margin-left: 1em; + } +} + @media only screen and (max-width: 480px) { .mx_EventTile_line, .mx_EventTile_reply { padding-left: 0; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 6a8748883b..6040e1962f 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -163,8 +163,6 @@ export function getHandlerTile(ev) { return eventTileTypes[type]; } -const MAX_READ_AVATARS = 5; - // Our component structure for EventTiles on the timeline is: // // .-EventTile------------------------------------------------. @@ -649,6 +647,10 @@ export default class EventTile extends React.Component { return ; } + const MAX_READ_AVATARS = this.props.layout == Layout.Bubble + ? 2 + : 5; + // return early if there are no read receipts if (!this.props.readReceipts || this.props.readReceipts.length === 0) { // We currently must include `mx_EventTile_readAvatars` in the DOM @@ -1194,6 +1196,7 @@ export default class EventTile extends React.Component { "data-scroll-tokens": scrollToken, "data-layout": this.props.layout, "data-self": isOwnEvent, + "data-has-reply": !!thread, "onMouseEnter": () => this.setState({ hover: true }), "onMouseLeave": () => this.setState({ hover: false }), }, [ From 209344d443853f345552b62eb734dca862012259 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 30 Jun 2021 17:04:07 +0100 Subject: [PATCH 05/22] 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", From 223b40c9d62963f60e5a4fc83c40055b7f411f15 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 14:23:00 +0100 Subject: [PATCH 06/22] Add dark theme support --- res/css/views/rooms/_EventBubbleTile.scss | 21 ++++++++++++------- res/themes/dark/css/_dark.scss | 6 ++++++ .../legacy-light/css/_legacy-light.scss | 6 ++++++ res/themes/light/css/_light.scss | 6 ++++++ 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 284f9bb70f..6d11992e48 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -26,8 +26,13 @@ limitations under the License. margin-right: calc(var(--gutterSize) + var(--avatarSize)); padding: 2px 0; + /* For replies */ + .mx_EventTile { + padding-top: 0; + } + &:hover { - background: rgb(242, 242, 242); + background: $eventbubble-bg-hover; } .mx_SenderProfile, @@ -37,7 +42,7 @@ limitations under the License. } .mx_SenderProfile { - padding: var(--gutterSize) var(--gutterSize) 0 var(--gutterSize); + padding: 0 var(--gutterSize); } .mx_EventTile_line { @@ -57,7 +62,7 @@ limitations under the License. top: 0; line-height: 1; img { - box-shadow: 0 0 0 2px #fff; + box-shadow: 0 0 0 2px $eventbubble-avatar-outline; border-radius: 50%; } } @@ -83,7 +88,7 @@ limitations under the License. right: calc(-1 * var(--avatarSize)); } - --backgroundColor: #F8FDFC; + --backgroundColor: $eventbubble-self-bg; } &[data-has-reply=true] { @@ -93,8 +98,8 @@ limitations under the License. .mx_ReplyThread_show { order: 99999; - background: white; - box-shadow: 0 0 0 var(--gutterSize) white; + /* background: white; + box-shadow: 0 0 0 var(--gutterSize) white; */ } .mx_ReplyThread { @@ -120,12 +125,12 @@ limitations under the License. } } - &:not([data-self=true]) { + &[data-self=false] { .mx_EventTile_avatar { left: calc(-1 * var(--avatarSize)); } - --backgroundColor: #F7F8F9; + --backgroundColor: $eventbubble-others-bg; } &.mx_EventTile_bubbleContainer, diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 8b5fde3bd1..e2ea8478d2 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -231,6 +231,12 @@ $groupFilterPanel-background-blur-amount: 30px; $composer-shadow-color: rgba(0, 0, 0, 0.28); +// Bubble tiles +$eventbubble-self-bg: rgba(141, 151, 165, 0.3); +$eventbubble-others-bg: rgba(141, 151, 165, 0.3); +$eventbubble-bg-hover: rgba(141, 151, 165, 0.1); +$eventbubble-avatar-outline: #15191E; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index a6b180bab4..6bfdad9e12 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -346,6 +346,12 @@ $appearance-tab-border-color: $input-darker-bg-color; $composer-shadow-color: tranparent; +// Bubble tiles +$eventbubble-self-bg: #F8FDFC; +$eventbubble-others-bg: #F7F8F9; +$eventbubble-bg-hover: rgb(242, 242, 242); +$eventbubble-avatar-outline: #fff; + // ***** Mixins! ***** @define-mixin mx_DialogButton { diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index d8dab9c9c4..4b1c56bd51 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -351,6 +351,12 @@ $groupFilterPanel-background-blur-amount: 20px; $composer-shadow-color: rgba(0, 0, 0, 0.04); +// Bubble tiles +$eventbubble-self-bg: #F8FDFC; +$eventbubble-others-bg: #F7F8F9; +$eventbubble-bg-hover: rgb(242, 242, 242); +$eventbubble-avatar-outline: #fff; + // ***** Mixins! ***** @define-mixin mx_DialogButton { From d90d1ca8dbf5de3c81fb8b939a67490f679ed076 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 14:56:34 +0100 Subject: [PATCH 07/22] event list summary alignment in bubble layout --- res/css/views/rooms/_EventBubbleTile.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 6d11992e48..0c204a19ae 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -14,11 +14,15 @@ 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_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); @@ -146,15 +150,22 @@ limitations under the License. .mx_EventTile_avatar { position: static; order: -1; + margin-right: 5px; } } & ~ .mx_EventListSummary { - --maxWidth: 95%; + --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; } } From d804df84a7bffc331440ff7379f4cd865d513835 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 15:16:47 +0100 Subject: [PATCH 08/22] Allow missing sender in event --- src/components/views/rooms/EventTile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index b560209d14..d2c6bf0ab9 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1182,7 +1182,7 @@ export default class EventTile extends React.Component { this.props.alwaysShowTimestamps || this.state.hover, ); - const isOwnEvent = this.props.mxEvent.sender.userId === MatrixClientPeg.get().getUserId(); + const isOwnEvent = this.props.mxEvent?.sender?.userId === MatrixClientPeg.get().getUserId(); // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers return ( From 19bc44e3fbbc675b7cc897d4445b7b88e47ae27f Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Thu, 1 Jul 2021 16:17:09 +0100 Subject: [PATCH 09/22] fix branch matching for element-web --- scripts/fetchdep.sh | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 0990af70ce..07efee69e6 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -46,12 +46,7 @@ BRANCH_ARRAY=(${head//:/ }) if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then if [ -n "$GITHUB_HEAD_REF" ]; then - if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then - clone $deforg $defrepo $GITHUB_HEAD_REF - else - REPO_ARRAY=(${GITHUB_REPOSITORY//\// }) - clone $REPO_ARRAY[0] $defrepo $GITHUB_HEAD_REF - fi + clone $deforg $defrepo $GITHUB_HEAD_REF else clone $deforg $defrepo $BUILDKITE_BRANCH fi From de875bbe1d39286c8a164520a3a1dd0c76aae52c Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Mon, 5 Jul 2021 16:22:18 +0200 Subject: [PATCH 10/22] fix avatar position and outline --- res/css/views/rooms/_EventBubbleTile.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 0c204a19ae..c548bfae56 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_EventTile[data-layout=bubble], .mx_EventTile[data-layout=bubble] ~ .mx_EventListSummary { --avatarSize: 32px; - --gutterSize: 7px; + --gutterSize: 11px; --cornerRadius: 12px; --maxWidth: 70%; } @@ -55,9 +55,10 @@ limitations under the License. background: var(--backgroundColor); display: flex; gap: var(--gutterSize); + margin: 0 calc(-2 * var(--gutterSize)); > a { position: absolute; - left: -33px; + left: -50px; } } @@ -66,7 +67,7 @@ limitations under the License. top: 0; line-height: 1; img { - box-shadow: 0 0 0 2px $eventbubble-avatar-outline; + box-shadow: 0 0 0 3px $eventbubble-avatar-outline; border-radius: 50%; } } @@ -89,6 +90,7 @@ limitations under the License. } } .mx_EventTile_avatar { + top: -19px; // height of the sender block right: calc(-1 * var(--avatarSize)); } From b0a1fc7b9785814aa205047e2956ff40e393a244 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 7 Jul 2021 11:23:38 +0200 Subject: [PATCH 11/22] Updated color scheme and spacing --- res/css/views/rooms/_EventBubbleTile.scss | 37 +++++++++++++++++------ res/themes/dark/css/_dark.scss | 8 ++--- res/themes/light/css/_light.scss | 4 +-- 3 files changed, 33 insertions(+), 16 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index c548bfae56..936092db7a 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -26,9 +26,12 @@ limitations under the License. position: relative; margin-top: var(--gutterSize); - margin-left: calc(var(--avatarSize) + var(--gutterSize)); - margin-right: calc(var(--gutterSize) + var(--avatarSize)); - padding: 2px 0; + margin-left: 50px; + margin-right: 50px; + + &.mx_EventTile_continuation { + margin-top: 2px; + } /* For replies */ .mx_EventTile { @@ -36,7 +39,23 @@ limitations under the License. } &:hover { - background: $eventbubble-bg-hover; + &::before { + content: ''; + position: absolute; + top: -1px; + bottom: -1px; + left: -60px; + right: -65px; + z-index: -1; + background: $eventbubble-bg-hover; + border-radius: 4px; + } + + .mx_EventTile_avatar { + img { + box-shadow: 0 0 0 3px $eventbubble-bg-hover; + } + } } .mx_SenderProfile, @@ -55,10 +74,10 @@ limitations under the License. background: var(--backgroundColor); display: flex; gap: var(--gutterSize); - margin: 0 calc(-2 * var(--gutterSize)); + margin: 0 -12px 0 -22px; > a { position: absolute; - left: -50px; + left: -57px; } } @@ -91,7 +110,7 @@ limitations under the License. } .mx_EventTile_avatar { top: -19px; // height of the sender block - right: calc(-1 * var(--avatarSize)); + right: -45px; } --backgroundColor: $eventbubble-self-bg; @@ -104,8 +123,6 @@ limitations under the License. .mx_ReplyThread_show { order: 99999; - /* background: white; - box-shadow: 0 0 0 var(--gutterSize) white; */ } .mx_ReplyThread { @@ -190,7 +207,7 @@ limitations under the License. .mx_EventTile_readAvatars { position: absolute; - right: -45px; + right: -60px; bottom: 0; top: auto; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index e2ea8478d2..5ded90230b 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -232,10 +232,10 @@ $groupFilterPanel-background-blur-amount: 30px; $composer-shadow-color: rgba(0, 0, 0, 0.28); // Bubble tiles -$eventbubble-self-bg: rgba(141, 151, 165, 0.3); -$eventbubble-others-bg: rgba(141, 151, 165, 0.3); -$eventbubble-bg-hover: rgba(141, 151, 165, 0.1); -$eventbubble-avatar-outline: #15191E; +$eventbubble-self-bg: #143A34; +$eventbubble-others-bg: #394049; +$eventbubble-bg-hover: #433C23; +$eventbubble-avatar-outline: $bg-color; // ***** Mixins! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 4b1c56bd51..c84126909e 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -354,8 +354,8 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04); // Bubble tiles $eventbubble-self-bg: #F8FDFC; $eventbubble-others-bg: #F7F8F9; -$eventbubble-bg-hover: rgb(242, 242, 242); -$eventbubble-avatar-outline: #fff; +$eventbubble-bg-hover: #FEFCF5; +$eventbubble-avatar-outline: $primary-bg-color; // ***** Mixins! ***** From 7d946ee0db5f7f1579df3955ce70403bfede0388 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 7 Jul 2021 12:04:28 +0200 Subject: [PATCH 12/22] Restore action bar --- res/css/views/rooms/_EventBubbleTile.scss | 27 ++++++++++++++++++++-- res/css/views/rooms/_EventTile.scss | 14 +++++------ src/components/structures/MessagePanel.tsx | 4 +++- 3 files changed, 35 insertions(+), 10 deletions(-) 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} From 870857f3213332c82d257f61e286a5ec52eac502 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 7 Jul 2021 13:00:31 +0200 Subject: [PATCH 13/22] Right hand side border radius --- res/css/views/rooms/_EventBubbleTile.scss | 25 +++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index aa59f53b72..4d189f78a3 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -68,12 +68,22 @@ limitations under the License. padding: 0 var(--gutterSize); } + &[data-self=false] { + .mx_EventTile_line { + border-bottom-right-radius: var(--cornerRadius); + } + } + &[data-self=true] { + .mx_EventTile_line { + border-bottom-left-radius: var(--cornerRadius); + } + } + .mx_EventTile_line { position: relative; padding: var(--gutterSize); 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); @@ -84,16 +94,19 @@ limitations under the License. } } - &.mx_EventTile_continuation .mx_EventTile_line { + &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line { border-top-left-radius: 0; } - - &.mx_EventTile_lastInSection .mx_EventTile_line { + &.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line { border-bottom-left-radius: var(--cornerRadius); } - - + &.mx_EventTile_continuation[data-self=true] .mx_EventTile_line { + border-top-right-radius: 0; + } + &.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line { + border-bottom-right-radius: var(--cornerRadius); + } .mx_EventTile_avatar { position: absolute; From 6a03ab825f2478595930dd5d3d73a9b13b4dbb89 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 7 Jul 2021 13:15:25 +0200 Subject: [PATCH 14/22] Fix style linting --- res/css/views/rooms/_EventBubbleTile.scss | 76 ++++++++++------------- 1 file changed, 34 insertions(+), 42 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 4d189f78a3..d78210a154 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -72,11 +72,45 @@ limitations under the License. .mx_EventTile_line { border-bottom-right-radius: var(--cornerRadius); } + .mx_EventTile_avatar { + left: calc(-1 * var(--avatarSize)); + } + + .mx_MessageActionBar { + right: 0; + transform: translate3d(50%, 50%, 0); + } + + --backgroundColor: $eventbubble-others-bg; } &[data-self=true] { .mx_EventTile_line { border-bottom-left-radius: var(--cornerRadius); + float: right; + > a { + left: auto; + right: -35px; + } } + .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 { + top: -19px; // height of the sender block + right: -45px; + } + + --backgroundColor: $eventbubble-self-bg; } .mx_EventTile_line { @@ -118,35 +152,6 @@ limitations under the License. } } - &[data-self=true] { - .mx_EventTile_line { - float: right; - > a { - left: auto; - right: -35px; - } - } - .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 { - top: -19px; // height of the sender block - right: -45px; - } - - --backgroundColor: $eventbubble-self-bg; - } - &[data-has-reply=true] { > .mx_EventTile_line { flex-direction: column; @@ -179,19 +184,6 @@ limitations under the License. } } - &[data-self=false] { - .mx_EventTile_avatar { - left: calc(-1 * var(--avatarSize)); - } - - .mx_MessageActionBar { - right: 0; - transform: translate3d(50%, 50%, 0); - } - - --backgroundColor: $eventbubble-others-bg; - } - &.mx_EventTile_bubbleContainer, &.mx_EventTile_info, & ~ .mx_EventListSummary[data-expanded=false] { From 55896223aa23b48c18472880ea338b8b7c8ea7ef Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 7 Jul 2021 15:13:58 +0200 Subject: [PATCH 15/22] unbubble some type of events --- res/css/views/rooms/_EventBubbleTile.scss | 58 +++++++-- res/css/views/rooms/_EventTile.scss | 139 +++++++++++---------- src/components/structures/MessagePanel.tsx | 1 + src/components/views/rooms/EventTile.tsx | 5 +- 4 files changed, 127 insertions(+), 76 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index d78210a154..313027bde6 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -27,7 +27,7 @@ limitations under the License. position: relative; margin-top: var(--gutterSize); margin-left: 50px; - margin-right: 50px; + margin-right: 100px; &.mx_EventTile_continuation { margin-top: 2px; @@ -45,7 +45,7 @@ limitations under the License. top: -1px; bottom: -1px; left: -60px; - right: -65px; + right: -60px; z-index: -1; background: $eventbubble-bg-hover; border-radius: 4px; @@ -65,7 +65,9 @@ limitations under the License. } .mx_SenderProfile { - padding: 0 var(--gutterSize); + position: relative; + top: -2px; + left: calc(-1 * var(--gutterSize)); } &[data-self=false] { @@ -73,7 +75,7 @@ limitations under the License. border-bottom-right-radius: var(--cornerRadius); } .mx_EventTile_avatar { - left: calc(-1 * var(--avatarSize)); + left: -48px; } .mx_MessageActionBar { @@ -107,7 +109,7 @@ limitations under the License. } .mx_EventTile_avatar { top: -19px; // height of the sender block - right: -45px; + right: -35px; } --backgroundColor: $eventbubble-self-bg; @@ -120,7 +122,7 @@ limitations under the License. border-top-right-radius: var(--cornerRadius); background: var(--backgroundColor); display: flex; - gap: var(--gutterSize); + gap: 5px; margin: 0 -12px 0 -22px; > a { position: absolute; @@ -214,6 +216,29 @@ limitations under the License. .mx_EventListSummary_avatars { padding-top: 0; } + + &::after { + content: ""; + clear: both; + } + + .mx_EventTile { + margin: 0 58px; + } + } + + /* events that do not require bubble layout */ + & ~ .mx_EventListSummary, + &.mx_EventTile_bad { + .mx_EventTile_line { + background: transparent; + } + + &:hover { + &::before { + background: transparent; + } + } } & + .mx_EventListSummary { @@ -229,13 +254,30 @@ limitations under the License. /* Special layout scenario for "Unable To Decrypt (UTD)" events */ &.mx_EventTile_bad > .mx_EventTile_line { - flex-direction: column; + display: grid; + grid-template: + "reply reply" auto + "shield body" auto + "shield link" auto + / auto 1fr; + .mx_EventTile_e2eIcon { + grid-area: shield; + } + .mx_UnknownBody { + grid-area: body; + } + .mx_EventTile_keyRequestInfo { + grid-area: link; + } + .mx_ReplyThread_wrapper { + grid-area: reply; + } } .mx_EventTile_readAvatars { position: absolute; - right: -60px; + right: -110px; bottom: 0; top: auto; } diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 548a852190..ca94ce86c8 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -254,73 +254,6 @@ $hover-select-border: 4px; filter: none; } - .mx_EventTile_e2eIcon { - position: absolute; - top: 6px; - left: 44px; - width: 14px; - height: 14px; - display: block; - bottom: 0; - right: 0; - opacity: 0.2; - background-repeat: no-repeat; - background-size: contain; - - &::before, &::after { - content: ""; - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - mask-repeat: no-repeat; - mask-position: center; - 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%; - } - } - - .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; - } - - .mx_EventTile_e2eIcon_unknown { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; - } - - .mx_EventTile_e2eIcon_unencrypted { - &::after { - mask-image: url('$(res)/img/e2e/warning.svg'); - background-color: $notice-primary-color; - } - opacity: 1; - } - - .mx_EventTile_e2eIcon_unauthenticated { - &::after { - mask-image: url('$(res)/img/e2e/normal.svg'); - background-color: $composer-e2e-icon-color; - } - opacity: 1; - } - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { @@ -368,6 +301,14 @@ $hover-select-border: 4px; .mx_MImageBody { margin-right: 34px; } + + .mx_EventTile_e2eIcon { + position: absolute; + top: 6px; + left: 44px; + bottom: 0; + right: 0; + } } .mx_EventTile_bubbleContainer { @@ -431,6 +372,70 @@ $hover-select-border: 4px; cursor: pointer; } + +.mx_EventTile_e2eIcon { + position: relative; + width: 14px; + height: 14px; + display: block; + opacity: 0.2; + background-repeat: no-repeat; + background-size: contain; + + &::before, &::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + mask-repeat: no-repeat; + mask-position: center; + 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%; + } +} + +.mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; +} + +.mx_EventTile_e2eIcon_unknown { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; +} + +.mx_EventTile_e2eIcon_unencrypted { + &::after { + mask-image: url('$(res)/img/e2e/warning.svg'); + background-color: $notice-primary-color; + } + opacity: 1; +} + +.mx_EventTile_e2eIcon_unauthenticated { + &::after { + mask-image: url('$(res)/img/e2e/normal.svg'); + background-color: $composer-e2e-icon-color; + } + opacity: 1; +} + /* Various markdown overrides */ .mx_EventTile_body pre { diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index e811a8c1ce..cee6011e4a 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -712,6 +712,7 @@ export default class MessagePanel extends React.Component { layout={this.props.layout} enableFlair={this.props.enableFlair} showReadReceipts={this.props.showReadReceipts} + hideSender={this.props.room.getMembers().length <= 2} /> , ); diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index a474686333..6db32a1ad5 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -289,6 +289,9 @@ interface IProps { // whether or not to always show timestamps alwaysShowTimestamps?: boolean; + + // whether or not to display the sender + hideSender?: boolean; } interface IState { @@ -978,7 +981,7 @@ export default class EventTile extends React.Component { ); } - if (needsSenderProfile) { + if (needsSenderProfile && this.props.hideSender !== true) { if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') { sender = Date: Tue, 13 Jul 2021 10:15:12 +0200 Subject: [PATCH 16/22] Fix layout regressions in message bubbles --- res/css/views/rooms/_EventBubbleTile.scss | 44 ++++++++++++++++--- res/themes/dark/css/_dark.scss | 1 + .../legacy-light/css/_legacy-light.scss | 1 + res/themes/light/css/_light.scss | 1 + 4 files changed, 40 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 313027bde6..48011951cc 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -67,7 +67,7 @@ limitations under the License. .mx_SenderProfile { position: relative; top: -2px; - left: calc(-1 * var(--gutterSize)); + left: 2px; } &[data-self=false] { @@ -75,7 +75,7 @@ limitations under the License. border-bottom-right-radius: var(--cornerRadius); } .mx_EventTile_avatar { - left: -48px; + left: -34px; } .mx_MessageActionBar { @@ -91,7 +91,7 @@ limitations under the License. float: right; > a { left: auto; - right: -35px; + right: -48px; } } .mx_SenderProfile { @@ -123,10 +123,10 @@ limitations under the License. background: var(--backgroundColor); display: flex; gap: 5px; - margin: 0 -12px 0 -22px; + margin: 0 -12px 0 -9px; > a { position: absolute; - left: -35px; + left: -48px; } } @@ -167,6 +167,7 @@ limitations under the License. margin: 0 calc(-1 * var(--gutterSize)); .mx_EventTile_reply { + max-width: 90%; padding: 0; > a { display: none !important; @@ -186,6 +187,23 @@ limitations under the License. } } + .mx_EditMessageComposer_buttons { + position: static; + padding: 0; + margin: 0; + background: transparent; + } + + .mx_ReactionsRow { + margin-right: -18px; + margin-left: -9px; + } + + .mx_ReplyThread { + border-left-width: 2px; + border-left-color: $eventbubble-reply-color; + } + &.mx_EventTile_bubbleContainer, &.mx_EventTile_info, & ~ .mx_EventListSummary[data-expanded=false] { @@ -225,6 +243,19 @@ limitations under the License. .mx_EventTile { margin: 0 58px; } + + .mx_EventTile_line { + margin: 0 5px; + > a { + left: auto; + right: 0; + transform: translateX(calc(100% + 5px)); + } + } + + .mx_MessageActionBar { + transform: translate3d(50%, 0, 0); + } } /* events that do not require bubble layout */ @@ -283,7 +314,6 @@ limitations under the License. } .mx_MTextBody { - /* 30px equates to the width of the timestamp */ - max-width: calc(100% - 35px - var(--gutterSize)); + max-width: 100%; } } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 0b3444c95b..a43936c46e 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -234,6 +234,7 @@ $eventbubble-self-bg: #143A34; $eventbubble-others-bg: #394049; $eventbubble-bg-hover: #433C23; $eventbubble-avatar-outline: $bg-color; +$eventbubble-reply-color: #C1C6CD; // ***** Mixins! ***** diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index e485028774..f349a804a8 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -352,6 +352,7 @@ $eventbubble-self-bg: #F8FDFC; $eventbubble-others-bg: #F7F8F9; $eventbubble-bg-hover: rgb(242, 242, 242); $eventbubble-avatar-outline: #fff; +$eventbubble-reply-color: #C1C6CD; // ***** Mixins! ***** diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 6f0bcadaf7..ef5f4d8c86 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -354,6 +354,7 @@ $eventbubble-self-bg: #F8FDFC; $eventbubble-others-bg: #F7F8F9; $eventbubble-bg-hover: #FEFCF5; $eventbubble-avatar-outline: $primary-bg-color; +$eventbubble-reply-color: #C1C6CD; // ***** Mixins! ***** From 290174b0313cf42391525d6b2798fa4ac1a287c7 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 13 Jul 2021 10:36:35 +0200 Subject: [PATCH 17/22] fix group layout and IRC layout regressions --- res/css/views/rooms/_EventTile.scss | 70 ++++++++++++++--------------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index bd5b8113a9..e9d71d557c 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -25,7 +25,7 @@ $hover-select-border: 4px; font-size: $font-14px; position: relative; - .mx_EventTile.mx_EventTile_info { + &.mx_EventTile_info { padding-top: 1px; } @@ -36,12 +36,12 @@ $hover-select-border: 4px; user-select: none; } - .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar { + &.mx_EventTile_info .mx_EventTile_avatar { top: $font-6px; left: $left-gutter; } - .mx_EventTile_continuation { + &.mx_EventTile_continuation { padding-top: 0px !important; &.mx_EventTile_isEditing { @@ -50,11 +50,11 @@ $hover-select-border: 4px; } } - .mx_EventTile_isEditing { + &.mx_EventTile_isEditing { background-color: $header-panel-bg-color; } - .mx_EventTile .mx_SenderProfile { + .mx_SenderProfile { color: $primary-fg-color; font-size: $font-14px; display: inline-block; /* anti-zalgo, with overflow hidden */ @@ -69,7 +69,7 @@ $hover-select-border: 4px; max-width: calc(100% - $left-gutter); } - .mx_EventTile .mx_SenderProfile .mx_Flair { + .mx_SenderProfile .mx_Flair { opacity: 0.7; margin-left: 5px; display: inline-block; @@ -84,11 +84,11 @@ $hover-select-border: 4px; } } - .mx_EventTile_isEditing .mx_MessageTimestamp { + &.mx_EventTile_isEditing .mx_MessageTimestamp { visibility: hidden; } - .mx_EventTile .mx_MessageTimestamp { + .mx_MessageTimestamp { display: block; white-space: nowrap; left: 0px; @@ -96,7 +96,7 @@ $hover-select-border: 4px; user-select: none; } - .mx_EventTile_continuation .mx_EventTile_line { + &.mx_EventTile_continuation .mx_EventTile_line { clear: both; } @@ -119,21 +119,21 @@ $hover-select-border: 4px; margin-right: 10px; } - .mx_EventTile_selected > div > a > .mx_MessageTimestamp { + &.mx_EventTile_selected > div > a > .mx_MessageTimestamp { left: calc(-$hover-select-border); } /* this is used for the tile for the event which is selected via the URL. * TODO: ultimately we probably want some transition on here. */ - .mx_EventTile_selected > .mx_EventTile_line { + &.mx_EventTile_selected > .mx_EventTile_line { border-left: $accent-color 4px solid; padding-left: calc($left-gutter - $hover-select-border); background-color: $event-selected-color; } - .mx_EventTile_highlight, - .mx_EventTile_highlight .markdown-body { + &.mx_EventTile_highlight, + &.mx_EventTile_highlight .markdown-body { color: $event-highlight-fg-color; .mx_EventTile_line { @@ -141,17 +141,17 @@ $hover-select-border: 4px; } } - .mx_EventTile_info .mx_EventTile_line { + &.mx_EventTile_info .mx_EventTile_line { padding-left: calc($left-gutter + 18px); } - .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { + &.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line { padding-left: calc($left-gutter + 18px - $hover-select-border); } - .mx_EventTile:hover .mx_EventTile_line, - .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, - .mx_EventTile.focus-visible:focus-within .mx_EventTile_line { + &.mx_EventTile:hover .mx_EventTile_line, + &.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line, + &.mx_EventTile.focus-visible:focus-within .mx_EventTile_line { background-color: $event-selected-color; } @@ -195,7 +195,7 @@ $hover-select-border: 4px; mask-image: url('$(res)/img/element-icons/circle-sending.svg'); } - .mx_EventTile_contextual { + &.mx_EventTile_contextual { opacity: 0.4; } @@ -254,46 +254,46 @@ $hover-select-border: 4px; filter: none; } - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line, - .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line, - .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { + &:hover.mx_EventTile_verified .mx_EventTile_line, + &:hover.mx_EventTile_unverified .mx_EventTile_line, + &:hover.mx_EventTile_unknown .mx_EventTile_line { padding-left: calc($left-gutter - $hover-select-border); } - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line { + &:hover.mx_EventTile_verified .mx_EventTile_line { border-left: $e2e-verified-color $EventTile_e2e_state_indicator_width solid; } - .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line { + &:hover.mx_EventTile_unverified .mx_EventTile_line { border-left: $e2e-unverified-color $EventTile_e2e_state_indicator_width solid; } - .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line { + &:hover.mx_EventTile_unknown .mx_EventTile_line { border-left: $e2e-unknown-color $EventTile_e2e_state_indicator_width solid; } - .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, - .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, - .mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { + &:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line, + &:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line, + &:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line { padding-left: calc($left-gutter + 18px - $hover-select-border); } /* End to end encryption stuff */ - .mx_EventTile:hover .mx_EventTile_e2eIcon { + &:hover .mx_EventTile_e2eIcon { opacity: 1; } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, - .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, - .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { + &:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp, + &:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp, + &:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp { left: calc(-$hover-select-border); } // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies) - .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, - .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon, - .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon { + &:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon, + &:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon, + &:hover.mx_EventTile_unknown .mx_EventTile_line > .mx_EventTile_e2eIcon { display: block; left: 41px; } From fc270b435cd559972cff5ece78613de2dc869433 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 14 Jul 2021 15:32:35 +0200 Subject: [PATCH 18/22] fix group layout --- res/css/views/rooms/_EventBubbleTile.scss | 6 +++++- res/css/views/rooms/_EventTile.scss | 26 +++++++++++++++-------- 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 48011951cc..c66f635ffe 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -241,7 +241,7 @@ limitations under the License. } .mx_EventTile { - margin: 0 58px; + margin: 0 6px; } .mx_EventTile_line { @@ -258,6 +258,10 @@ limitations under the License. } } + & ~ .mx_EventListSummary[data-expanded=false] { + padding: 0 34px; + } + /* events that do not require bubble layout */ & ~ .mx_EventListSummary, &.mx_EventTile_bad { diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index e9d71d557c..d6ad37f6bb 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -106,15 +106,6 @@ $hover-select-border: 4px; border-radius: 8px; } - .mx_RoomView_timeline_rr_enabled, - // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter - .mx_EventListSummary { - .mx_EventTile_line { - /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ - margin-right: 110px; - } - } - .mx_EventTile_reply { margin-right: 10px; } @@ -309,6 +300,23 @@ $hover-select-border: 4px; bottom: 0; right: 0; } + + .mx_ReactionsRow { + margin: 0; + padding: 6px 60px; + } +} + +.mx_RoomView_timeline_rr_enabled { + + .mx_EventTile:not([data-layout=bubble]) { + .mx_EventTile_line { + /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */ + margin-right: 110px; + } + } + + // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter } .mx_EventTile_bubbleContainer { From f4dfe9832bce35ebb15287eaba39e9c0c24d44e6 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 14 Jul 2021 16:20:25 +0200 Subject: [PATCH 19/22] change labs flag wording --- src/i18n/strings/en_EN.json | 2 +- src/settings/Settings.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4c113aae18..0839c7eec4 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -820,7 +820,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)", + "New layout switcher (with message bubbles)": "New layout switcher (with message bubbles)", "Font size": "Font size", "Use custom size": "Use custom size", "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index a3a184b908..c15ec684ad 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -325,7 +325,7 @@ export const SETTINGS: {[setting: string]: ISetting} = { "feature_new_layout_switcher": { isFeature: true, supportedLevels: LEVELS_FEATURE, - displayName: _td("Explore new ways switching layouts (including a new bubble layout)"), + displayName: _td("New layout switcher (with message bubbles)"), default: false, controller: new NewLayoutSwitcherController(), }, From a6120ef3b780a586e148dd21237e30c26a57f363 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 14 Jul 2021 16:32:29 +0200 Subject: [PATCH 20/22] Revert fetchdep script diff --- scripts/fetchdep.sh | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scripts/fetchdep.sh b/scripts/fetchdep.sh index 07efee69e6..0990af70ce 100755 --- a/scripts/fetchdep.sh +++ b/scripts/fetchdep.sh @@ -46,7 +46,12 @@ BRANCH_ARRAY=(${head//:/ }) if [[ "${#BRANCH_ARRAY[@]}" == "1" ]]; then if [ -n "$GITHUB_HEAD_REF" ]; then - clone $deforg $defrepo $GITHUB_HEAD_REF + if [[ "$GITHUB_REPOSITORY" == "$deforg"* ]]; then + clone $deforg $defrepo $GITHUB_HEAD_REF + else + REPO_ARRAY=(${GITHUB_REPOSITORY//\// }) + clone $REPO_ARRAY[0] $defrepo $GITHUB_HEAD_REF + fi else clone $deforg $defrepo $BUILDKITE_BRANCH fi From dde58d449dd22410b9d2fabf8359c2781d020b34 Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Wed, 14 Jul 2021 17:16:13 +0200 Subject: [PATCH 21/22] Only hide sender when in bubble mode --- src/components/structures/MessagePanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index cee6011e4a..bf5a47cff3 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -712,7 +712,7 @@ export default class MessagePanel extends React.Component { layout={this.props.layout} enableFlair={this.props.enableFlair} showReadReceipts={this.props.showReadReceipts} - hideSender={this.props.room.getMembers().length <= 2} + hideSender={this.props.room.getMembers().length <= 2 && this.props.layout === Layout.Bubble} /> , ); From dd65d47fbaa592bf5b648e774bd2ab7dbaba22bc Mon Sep 17 00:00:00 2001 From: Germain Souquet Date: Tue, 20 Jul 2021 11:12:17 +0200 Subject: [PATCH 22/22] lint fix --- src/components/views/rooms/EventTile.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 94dcb47341..0de203e498 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1158,11 +1158,10 @@ export default class EventTile extends React.Component { { keyRequestInfo } { actionBar } , - reactionsRow, - msgOption, - avatar, - - ]) + { reactionsRow }, + { msgOption }, + { avatar }, + ) ); } }