Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Reduce height of toggle on expanded view source event (#10283)
Browse files Browse the repository at this point in the history
* Reduce height of toggle on expanded view source event

Signed-off-by: Suguru Hirahara <[email protected]>

* Add a test to check size and position of toggle on expanded view source event

Signed-off-by: Suguru Hirahara <[email protected]>

---------

Signed-off-by: Suguru Hirahara <[email protected]>
  • Loading branch information
luixxiul authored Mar 6, 2023
1 parent 4f5a65f commit 94950c6
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 22 deletions.
28 changes: 17 additions & 11 deletions cypress/e2e/timeline/timeline.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -351,6 +351,9 @@ describe("Timeline", () => {
// 1. clickability of top left of view source event toggle
// 2. clickability of view source toggle on IRC layout

// Exclude timestamp from snapshot
const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";

sendEvent(roomId);
cy.visit("/#/room/" + roomId);
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);
Expand All @@ -376,26 +379,29 @@ describe("Timeline", () => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
});

// Make sure the expand toggle worked
cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("be.visible");

// Click again to collapse the source
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent")
.should("exist")
// Make sure the expand toggle works
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent_expanded")
.should("be.visible")
.realHover()
.within(() => {
cy.get(".mx_ViewSourceEvent_toggle").click("topLeft", { force: false });
cy.get(".mx_ViewSourceEvent_toggle")
// Check size and position of toggle on expanded view source event
// See: _ViewSourceEvent.pcss
.should("have.css", "height", "12px") // --ViewSourceEvent_toggle-size
.should("have.css", "align-self", "flex-end")

// Click again to collapse the source
.click("topLeft", { force: false });
});
cy.get(".mx_EventTile .mx_ViewSourceEvent_expanded").should("not.exist");

// Make sure the collapse toggle works
cy.get(".mx_EventTile_last[data-layout=group] .mx_ViewSourceEvent_expanded").should("not.exist");

// 2. clickability of view source toggle on IRC layout

// Enable IRC layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC);

// Exclude timestamp from snapshot
const percyCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";

// Hover the view source toggle on IRC layout
cy.get(".mx_GenericEventListSummary[data-layout=irc] .mx_EventTile .mx_ViewSourceEvent")
.should("exist")
Expand Down
24 changes: 13 additions & 11 deletions res/css/views/messages/_ViewSourceEvent.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -29,32 +29,34 @@ limitations under the License.

pre {
line-height: 1.2;
margin: 3.5px 0;
margin: 3.5px 0; /* TODO: use a variable */
}

.mx_ViewSourceEvent_toggle {
--ViewSourceEvent_toggle-size: 12px;

visibility: hidden;
/* override styles from AccessibleButton */
border-radius: 0;
/* icon */
mask-repeat: no-repeat;
mask-position: 0 center;
mask-size: auto 12px;
width: 12px;
min-width: 12px;
mask-size: auto var(--ViewSourceEvent_toggle-size);
width: var(--ViewSourceEvent_toggle-size);
min-width: var(--ViewSourceEvent_toggle-size);
background-color: $accent;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");

.mx_EventTile:hover & {
visibility: visible;
}
}

&.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
align-self: flex-end;
height: var(--ViewSourceEvent_toggle-size);
mask-position: 0 bottom;
margin-bottom: 5px;
margin-bottom: 5px; /* TODO: use a variable */
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
}

.mx_EventTile:hover {
.mx_ViewSourceEvent_toggle {
visibility: visible;
}
}

0 comments on commit 94950c6

Please sign in to comment.