Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix class name of the read marker on MessagePanel (#10745)

Browse Source 
* Optimize mx_RoomView_myReadMarker

- Replace the compound selector with a type selector
- Nest the type selector in "mx_RoomView_myReadMarker_container"

* Conform the style rules to the naming policy

Including "container" in a class name is redundant as our naming policy tells that a string followed by an underscore (_) represents a container if it contains an element.

* Run prettier

* Replace `mx_RoomView_myReadMarker hr` with `mx_RoomView_myReadMarker`

- Remove a unit
- Hide hr's parent (mx_RoomView_myReadMarker) on Percy snapshots

* Change the class name from `mx_RoomView_myReadMarker` to `mx_MessagePanel_myReadMarker`

The read marker is specified on MessagePanel.tsx, and should be named so to avoid confusion.

- Create _MessagePanel.pcss for the style rules of MessagePanel

* Update permalinks.spec.ts
This commit is contained in:
Suguru Hirahara 2023-05-15 11:02:04 +00:00 committed by GitHub
parent ed06219dcd
commit 3b2216ec9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/e2e/audio-player/audio-player.spec.ts
View File

@ -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

2
cypress/e2e/permalinks/permalinks.spec.ts
View File

@ -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 });
});
});

2
cypress/e2e/polls/polls.spec.ts
View File

@ -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;

2
cypress/e2e/right-panel/file-panel.spec.ts
View File

@ -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", {

4
cypress/e2e/threads/threads.spec.ts
View File

@ -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

14
cypress/e2e/timeline/timeline.spec.ts
View File

@ -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);

1
res/css/_components.pcss
View File

@ -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";

35
res/css/structures/_MessagePanel.pcss Normal file
View File

@ -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;
}
}

20
res/css/structures/_RoomView.pcss
View File

@ -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;

7
src/components/structures/MessagePanel.tsx
View File

@ -503,14 +503,14 @@ export default class MessagePanel extends React.Component<IProps, IState> {
// algorithms which depend on its position on the screen aren't
// confused.
if (visible) {
hr = <hr className="mx_RoomView_myReadMarker" style={{ opacity: 1, width: "99%" }} />;
hr = <hr style={{ opacity: 1, width: "99%" }} />;
}
return (
<li
key={"readMarker_" + eventId}
ref={this.readMarkerNode}
className="mx_RoomView_myReadMarker_container"
className="mx_MessagePanel_myReadMarker"
data-scroll-tokens={eventId}
>
{hr}
@ -529,7 +529,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
// and TransitionGroup requires that all its children are Transitions.
const hr = (
<hr
className="mx_RoomView_myReadMarker"
ref={this.collectGhostReadMarker}
onTransitionEnd={this.onGhostTransitionEnd}
data-eventid={eventId}
@ -540,7 +539,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
// we get a new DOM node (restarting the animation) when the ghost
// moves to a different event.
return (
<li key={"_readuptoghost_" + eventId} className="mx_RoomView_myReadMarker_container">
<li key={"_readuptoghost_" + eventId} className="mx_MessagePanel_myReadMarker">
{hr}
</li>
);

12
test/components/structures/MessagePanel-test.tsx
View File

@ -353,7 +353,7 @@ describe("MessagePanel", function () {
const tiles = container.getElementsByClassName("mx_EventTile");
// find the <li> which wraps the read marker
const [rm] = container.getElementsByClassName("mx_RoomView_myReadMarker_container");
const [rm] = container.getElementsByClassName("mx_MessagePanel_myReadMarker");
// it should follow the <li> 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 <li> 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 <li> 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 <li> 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 <li> 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;