imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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