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

This commit is contained in:
Suguru Hirahara 2023-03-21 09:10:13 +00:00 committed by GitHub
parent c238e72e47
commit d8acdd1750
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 5 deletions

View file

@ -161,8 +161,23 @@ describe("Timeline", () => {
"created and configured the room.", "created and configured the room.",
).should("exist"); ).should("exist");
cy.get(".mx_IRCLayout").within(() => {
// Check room name line-height is reset // Check room name line-height is reset
cy.get(".mx_IRCLayout .mx_NewRoomIntro h2").should("have.css", "line-height", "normal"); 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
// --resizer-a11y = 3px
// 18px + 46px + 14px + 5px + 80px + 5px - 15px - 3px
// = 150px
cy.get(".mx_ProfileResizer").should("have.css", "inset-inline-start", "150px");
});
cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout"); cy.get(".mx_MainSplit").percySnapshotElement("Configured room on IRC layout");
}); });

View file

@ -42,6 +42,7 @@ $timeline-image-border-radius: 8px;
--transition-short: 0.1s; --transition-short: 0.1s;
--transition-standard: 0.3s; --transition-standard: 0.3s;
--MessageTimestamp-width: $MessageTimestamp_width;
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {

View file

@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
:root {
--RoomView_MessageList-padding: 18px; /* TODO: use a variable */
}
.mx_RoomView_wrapper { .mx_RoomView_wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -176,7 +180,7 @@ limitations under the License.
.mx_RoomView_MessageList { .mx_RoomView_MessageList {
list-style-type: none; list-style-type: none;
padding: 18px; padding: var(--RoomView_MessageList-padding); /* mx_ProfileResizer depends on this value */
margin: 0; margin: 0;
/* needed as min-height is set to clientHeight in ScrollPanel /* needed as min-height is set to clientHeight in ScrollPanel
to prevent shrinking when WhoIsTypingTile is hidden */ to prevent shrinking when WhoIsTypingTile is hidden */

View file

@ -217,11 +217,23 @@ $irc-line-height: $font-18px;
} }
.mx_ProfileResizer { .mx_ProfileResizer {
--resizer-width: 15px;
--resizer-a11y: 3px; /* Magic number, to be replaced with something more proper from the perspective of a11y */
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 15px; width: var(--resizer-width);
left: calc(80px + var(--name-width));
cursor: col-resize; cursor: col-resize;
z-index: 100; 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 and moving
the resizer a bit to the left to make it easier to avoid selecting the resizer when highlighting 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) -
var(--resizer-a11y)
);
} }
} }