diff --git a/cypress/e2e/audio-player/audio-player.spec.ts b/cypress/e2e/audio-player/audio-player.spec.ts index 41f7f1a856..7a5d608cd6 100644 --- a/cypress/e2e/audio-player/audio-player.spec.ts +++ b/cypress/e2e/audio-player/audio-player.spec.ts @@ -29,7 +29,7 @@ describe("Audio player", () => { ".mx_SeekBar, " + // Exclude various components from the snapshot, for consistency ".mx_JumpToBottomButton, " + - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; const uploadFile = (file: string) => { // Upload a file from the message composer diff --git a/cypress/e2e/permalinks/permalinks.spec.ts b/cypress/e2e/permalinks/permalinks.spec.ts index 9ac8cc449a..3d9fc944a1 100644 --- a/cypress/e2e/permalinks/permalinks.spec.ts +++ b/cypress/e2e/permalinks/permalinks.spec.ts @@ -132,7 +132,7 @@ describe("permalinks", () => { cy.get(".mx_GenericEventListSummary").invoke("remove"); // Disabled because flaky - see https://github.com/vector-im/element-web/issues/25283 - //const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + //const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; //cy.get(".mx_RoomView_timeline").percySnapshotElement("Permalink rendering", { percyCSS }); }); }); diff --git a/cypress/e2e/polls/polls.spec.ts b/cypress/e2e/polls/polls.spec.ts index a3850dcdbc..1a6682a642 100644 --- a/cypress/e2e/polls/polls.spec.ts +++ b/cypress/e2e/polls/polls.spec.ts @@ -22,7 +22,7 @@ import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; import Chainable = Cypress.Chainable; -const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; +const hidePercyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; describe("Polls", () => { let homeserver: HomeserverInstance; diff --git a/cypress/e2e/right-panel/file-panel.spec.ts b/cypress/e2e/right-panel/file-panel.spec.ts index b300a8e138..b36edfb276 100644 --- a/cypress/e2e/right-panel/file-panel.spec.ts +++ b/cypress/e2e/right-panel/file-panel.spec.ts @@ -174,7 +174,7 @@ describe("FilePanel", () => { // FIXME: hide mx_SeekBar because flaky - see https://github.com/vector-im/element-web/issues/24897 // Remove this once https://github.com/vector-im/element-web/issues/24898 is fixed. const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mx_SeekBar { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mx_SeekBar { visibility: hidden !important; }"; // Take a snapshot of file tiles list on FilePanel cy.get(".mx_FilePanel .mx_RoomView_MessageList").percySnapshotElement("File tiles list on FilePanel", { diff --git a/cypress/e2e/threads/threads.spec.ts b/cypress/e2e/threads/threads.spec.ts index 465aeb9520..08e93af7ad 100644 --- a/cypress/e2e/threads/threads.spec.ts +++ b/cypress/e2e/threads/threads.spec.ts @@ -69,7 +69,7 @@ describe("Threads", () => { const MessageTimestampColor = "rgb(172, 172, 172)"; const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message @@ -445,7 +445,7 @@ describe("Threads", () => { // Exclude timestamp, read marker, and mapboxgl-map from snapshots const percyCSS = - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker, .mapboxgl-map { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mapboxgl-map { visibility: hidden !important; }"; cy.get(".mx_RoomView_body").within(() => { // User sends message diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 3419ae40ec..490e4e9bc9 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -149,7 +149,7 @@ describe("Timeline", () => { describe("configure room", () => { // Exclude timestamp and read marker from snapshots - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; beforeEach(() => { cy.injectAxe(); @@ -319,7 +319,7 @@ describe("Timeline", () => { .should("have.css", "inset-inline-start", "0px"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_MainSplit").percySnapshotElement("Event line with inline start margin on IRC layout", { percyCSS, }); @@ -452,7 +452,7 @@ describe("Timeline", () => { // Hide because flaky - See https://github.com/vector-im/element-web/issues/24957 ".mx_TopUnreadMessagesBar, " + // Exclude timestamp and read marker from snapshots - ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; sendEvent(roomId); sendEvent(roomId); // check continuation @@ -583,7 +583,7 @@ describe("Timeline", () => { cy.get(".mx_RoomView_body .mx_EventTile_info .mx_MessageTimestamp").click(); // Exclude timestamp and read marker from snapshot - //const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + //const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; // should not add inline start padding to a hidden event line on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -758,7 +758,7 @@ describe("Timeline", () => { cy.checkA11y(); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; cy.get(".mx_EventTile_last").percySnapshotElement("URL Preview", { percyCSS, widths: [800, 400], @@ -904,7 +904,7 @@ describe("Timeline", () => { cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible"); // Exclude timestamp and read marker from snapshot - const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; // Check the margin value of ReplyChains of EventTile at the bottom on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); @@ -1015,7 +1015,7 @@ describe("Timeline", () => { cy.viewport(1600, 1200); // Exclude timestamp and read marker from snapshots - //const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + //const percyCSS = ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker { visibility: hidden !important; }"; // Make sure the strings do not overflow on IRC layout cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); diff --git a/res/css/_components.pcss b/res/css/_components.pcss index a0b2604da6..2bc48d4907 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -68,6 +68,7 @@ @import "./structures/_LeftPanel.pcss"; @import "./structures/_MainSplit.pcss"; @import "./structures/_MatrixChat.pcss"; +@import "./structures/_MessagePanel.pcss"; @import "./structures/_NonUrgentToastContainer.pcss"; @import "./structures/_NotificationPanel.pcss"; @import "./structures/_QuickSettingsButton.pcss"; diff --git a/res/css/structures/_MessagePanel.pcss b/res/css/structures/_MessagePanel.pcss new file mode 100644 index 0000000000..c5e777b3e6 --- /dev/null +++ b/res/css/structures/_MessagePanel.pcss @@ -0,0 +1,35 @@ +/* +Copyright 2023 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_MessagePanel_myReadMarker { + height: 0; + margin: 0; + padding: 0; + border: 0; + + hr { + border-top: solid 1px $accent; + border-bottom: solid 1px $accent; + margin-top: 0; + position: relative; + top: -1px; + z-index: 1; + will-change: width; + transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; + width: 99%; + opacity: 1; + } +} diff --git a/res/css/structures/_RoomView.pcss b/res/css/structures/_RoomView.pcss index 91f2048b25..97f2a505f9 100644 --- a/res/css/structures/_RoomView.pcss +++ b/res/css/structures/_RoomView.pcss @@ -197,26 +197,6 @@ limitations under the License. } } -li.mx_RoomView_myReadMarker_container { - height: 0px; - margin: 0px; - padding: 0px; - border: 0px; -} - -hr.mx_RoomView_myReadMarker { - border-top: solid 1px $accent; - border-bottom: solid 1px $accent; - margin-top: 0px; - position: relative; - top: -1px; - z-index: 1; - will-change: width; - transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s; - width: 99%; - opacity: 1; -} - /* Rooms with immersive content */ .mx_RoomView_immersive .mx_RoomHeader_wrapper { border: unset; diff --git a/src/components/structures/MessagePanel.tsx b/src/components/structures/MessagePanel.tsx index 9bb8ced78b..6981b9bc31 100644 --- a/src/components/structures/MessagePanel.tsx +++ b/src/components/structures/MessagePanel.tsx @@ -503,14 +503,14 @@ export default class MessagePanel extends React.Component { // algorithms which depend on its position on the screen aren't // confused. if (visible) { - hr =
; + hr =
; } return (
  • {hr} @@ -529,7 +529,6 @@ export default class MessagePanel extends React.Component { // and TransitionGroup requires that all its children are Transitions. const hr = (
    { // we get a new DOM node (restarting the animation) when the ghost // moves to a different event. return ( -
  • +
  • {hr}
    • ); diff --git a/test/components/structures/MessagePanel-test.tsx b/test/components/structures/MessagePanel-test.tsx index e4239533f1..feef37bb78 100644 --- a/test/components/structures/MessagePanel-test.tsx +++ b/test/components/structures/MessagePanel-test.tsx @@ -353,7 +353,7 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); // it should follow the
  • which wraps the event tile for event 4 const eventContainer = tiles[4]; @@ -373,7 +373,7 @@ describe("MessagePanel", function () { const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(rm.previousSibling).toEqual(summary); @@ -395,7 +395,7 @@ describe("MessagePanel", function () { const [summary] = container.getElementsByClassName("mx_GenericEventListSummary"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(rm.previousSibling).toEqual(summary); @@ -420,7 +420,7 @@ describe("MessagePanel", function () { const tiles = container.getElementsByClassName("mx_EventTile"); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(rm.previousSibling).toEqual(tiles[4]); rerender( @@ -434,7 +434,7 @@ describe("MessagePanel", function () { ); // now there should be two RM containers - const readMarkers = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const readMarkers = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); expect(readMarkers.length).toEqual(2); @@ -510,7 +510,7 @@ describe("MessagePanel", function () { ); // find the
  • which wraps the read marker - const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container"); + const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker"); const [messageList] = container.getElementsByClassName("mx_RoomView_MessageList"); const rows = messageList.children;