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

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