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

Fix profile resizer to make first character of a line selectable in IRC layout #10396

Merged
merged 9 commits into from
Mar 21, 2023
Merged

Fix profile resizer to make first character of a line selectable in IRC layout #10396

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2367498
Replace the magic number for the profile resizer with variables on IR…
luixxiul Mar 16, 2023
6eb76e9
Add a test
luixxiul Mar 16, 2023
0f8f9a6
lint
luixxiul Mar 16, 2023
d796bf7
Remove the deprecated rules
luixxiul Mar 17, 2023
8a31cb1
Add --resizer-a11y 3px
luixxiul Mar 20, 2023
c7a5abd
Merge branch 'develop' into fix-irc-ProfileResizer
luixxiul Mar 20, 2023
f32f0c9
Merge branch 'develop' into fix-irc-ProfileResizer
luixxiul Mar 20, 2023
2fe0a93
Merge branch 'develop' into fix-irc-ProfileResizer
luixxiul Mar 20, 2023
4146859
Fix the declaration
luixxiul Mar 20, 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
18 changes: 16 additions & 2 deletions cypress/e2e/timeline/timeline.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,8 +161,22 @@ describe("Timeline", () => {
"created and configured the room.",
).should("exist");

// Check room name line-height is reset
cy.get(".mx_IRCLayout .mx_NewRoomIntro h2").should("have.css", "line-height", "normal");
cy.get(".mx_IRCLayout").within(() => {
// Check room name line-height is reset
cy.get(".mx_NewRoomIntro h2").should("have.css", "line-height", "normal");

// Check the profile resizer's place
// See: _IRCLayout
// --RoomView_MessageList-padding = 18px (See: _RoomView.pcss)
// --MessageTimestamp-width = $MessageTimestamp_width = 46px (See: _common.pcss)
// --icon-width = 14px
// --right-padding = 5px
// --name-width = 80px
// --resizer-width = 15px
// 18px + 46px + 14px + 5px + 80px + 5px - 15px
// = 153px
cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "153px");
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the resizer is transparent, it is not possible to use a screenshot test to detect a regression.

});

cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout");
});
Expand Down
1 change: 1 addition & 0 deletions res/css/_common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ $timeline-image-border-radius: 8px;

--transition-short: 0.1s;
--transition-standard: 0.3s;
--MessageTimestamp-width: $MessageTimestamp_width;
}

@media (prefers-reduced-motion) {
Expand Down
6 changes: 5 additions & 1 deletion res/css/structures/_RoomView.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

:root {
--RoomView_MessageList-padding: 18px; /* TODO: use a variable */
}

.mx_RoomView_wrapper {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -176,7 +180,7 @@ limitations under the License.

.mx_RoomView_MessageList {
list-style-type: none;
padding: 18px;
padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
margin: 0;
/* needed as min-height is set to clientHeight in ScrollPanel
to prevent shrinking when WhoIsTypingTile is hidden */
Expand Down
13 changes: 11 additions & 2 deletions res/css/views/rooms/_IRCLayout.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,11 +217,20 @@ $irc-line-height: $font-18px;
}

.mx_ProfileResizer {
--resizer-width: 15px;

position: absolute;
height: 100%;
width: 15px;
left: calc(80px + var(--name-width));
width: var(--resizer-width);
cursor: col-resize;
z-index: 100;

/* Add width of every element rendered before the resizer (including padding for the avatar and the display
name), subtracting the resizer width itself to prevent the resizer from overlapping the text.
Please note that MessageTimestamp does not have inline padding. */
inset-inline-start: calc(
var(--RoomView_MessageList-padding) + var(--MessageTimestamp-width) + var(--icon-width) +
var(--right-padding) + var(--name-width) + var(--right-padding) - var(--resizer-width)
);
}
}