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

Reduce height of toggle on expanded view source event #10283

Merged
merged 2 commits into from
Mar 6, 2023
Merged

Reduce height of toggle on expanded view source event #10283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab45e14
Reduce height of toggle on expanded view source event
luixxiul Jul 17, 2022
ff56930
Add a test to check size and position of toggle on expanded view sour…
luixxiul Mar 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 17 additions & 11 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Open in desktop
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
View file
Open in desktop
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;
}
}