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

Correct text alignment in RTL languages #9026

Closed
wants to merge 4 commits into from
Closed

Correct text alignment in RTL languages #9026

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1c61191
Correct text direction for RTL languages
luixxiul Apr 6, 2023
2204703
margin-left to margin-inline-start
luixxiul Apr 6, 2023
6e6d06e
margin-right to margin-inline-end
luixxiul Apr 6, 2023
963389f
padding-left to padding-inline-start
luixxiul Apr 6, 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
59 changes: 36 additions & 23 deletions res/css/views/rooms/_EventTile.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@ $left-gutter: 64px;
overflow-y: hidden;
}

.mx_EventTile_line,
.mx_EventTile_reply {
text-align: start;
}

.mx_EventTile_receiptSent,
.mx_EventTile_receiptSending {
position: relative;
Expand Down Expand Up @@ -142,7 +147,7 @@ $left-gutter: 64px;
grid-template-columns: 1fr 100px;

.mx_EventTile_line {
margin-right: 0;
margin-inline-end: 0;
grid-column: 1 / 3;
padding: 0 !important; /* override default padding of mx_EventTile_line so that we can be centered */
}
Expand Down Expand Up @@ -187,7 +192,7 @@ $left-gutter: 64px;
}

.mx_EventTile_reply {
margin-right: 10px;
margin-inline-end: 10px;
}

.mx_EventTile_msgOption {
Expand Down Expand Up @@ -320,7 +325,7 @@ $left-gutter: 64px;
.mx_EventTile_avatar {
left: var(--EventTile_irc_line_info-margin-inline-start);
top: 0;
margin-right: var(--right-padding);
margin-inline-end: var(--right-padding);
padding-block: var(--EventTile_irc_line-padding-block);
}

Expand All @@ -340,7 +345,7 @@ $left-gutter: 64px;
.mx_EventTile_reply {
padding-top: var(--EventTile_group_line-spacing-block-start);
padding-bottom: var(--EventTile_group_line-spacing-block-end);
padding-left: var(--EventTile_group_line-spacing-inline-start);
padding-inline-start: var(--EventTile_group_line-spacing-inline-start);
line-height: var(--EventTile_group_line-line-height);
}

Expand All @@ -367,7 +372,7 @@ $left-gutter: 64px;

.mx_ThreadSummary,
.mx_ThreadSummary_icon {
margin-left: $left-gutter;
margin-inline-start: $left-gutter;
}

.mx_ReactionsRow {
Expand All @@ -376,7 +381,7 @@ $left-gutter: 64px;

> .mx_DisambiguatedProfile {
line-height: $font-20px;
margin-left: $left-gutter;
margin-inline-start: $left-gutter;
max-width: calc(100% - $left-gutter);
}

Expand All @@ -391,7 +396,7 @@ $left-gutter: 64px;
.mx_ThreadSummary,
.mx_ThreadSummary_icon,
.mx_EventTile_line {
margin-right: $inline-end-margin;
margin-inline-end: $inline-end-margin;
min-height: $font-14px;
}

Expand Down Expand Up @@ -501,19 +506,19 @@ $left-gutter: 64px;
> .mx_EventTile_line {
/* add --right-padding value of MessageTimestamp and avatar only */
/* stylelint-disable-next-line declaration-colon-space-after */
padding-left: calc(
padding-inline-start: calc(
var(--name-width) + var(--icon-width) + $MessageTimestamp_width + 2 * var(--right-padding)
);
}
}

&[data-layout="group"] {
.mx_EventTile_line {
padding-left: $left-gutter;
padding-inline-start: $left-gutter;
}

.mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
/* override padding-left $left-gutter */
/* override padding-inline-start $left-gutter */
padding-inline-start: calc(var(--EventTile_group_line-spacing-inline-start) + 20px);
}
}
Expand All @@ -529,15 +534,15 @@ $left-gutter: 64px;
*/
overflow-y: hidden;
overflow-x: hidden;
margin-right: var(--EventTile_content-margin-inline-end);
margin-inline-end: var(--EventTile_content-margin-inline-end);

.mx_EventTile_edited,
.mx_EventTile_pendingModeration {
user-select: none;
font-size: $font-12px;
color: $roomtopic-color;
display: inline-block;
margin-left: 9px;
margin-inline-start: 9px; /* TODO: use a spacing variable */
}

.mx_EventTile_edited {
Expand All @@ -551,6 +556,11 @@ $left-gutter: 64px;
color: inherit; /* inherit the colour from the dark or light theme by default (but not for code blocks) */
font-size: $font-14px;

ol,
ul {
padding-inline: 2em 0; /* replace with logical ones for correct text alignment in RTL languages */
}

pre,
code {
font-family: $monospace-font-family !important;
Expand All @@ -566,7 +576,7 @@ $left-gutter: 64px;
// Avoid inline code blocks to be sticked when on multiple lines
line-height: $font-22px;
// Avoid the border to be glued to the other words
margin-right: $spacing-2;
margin-inline-end: $spacing-2;
}

code {
Expand Down Expand Up @@ -617,7 +627,10 @@ $left-gutter: 64px;
}

blockquote {
border-left: 2px solid $blockquote-bar-color;
/* Override the default values with logical ones */
border-inline-start: 2px solid $blockquote-bar-color;
border-inline-end: 0;

border-radius: 2px;
padding: 0 10px;
}
Expand Down Expand Up @@ -802,7 +815,7 @@ $left-gutter: 64px;
& span {
text-align: right;
display: block;
padding-left: 1em;
padding-inline-start: 1em;
}
}

Expand Down Expand Up @@ -830,19 +843,19 @@ $left-gutter: 64px;
text-align: center;

/* Remove some of the default tile padding so that the error is centered */
margin-right: 0;
margin-inline-end: 0;

.mx_EventTile_line {
padding-left: 0;
margin-right: 0;
padding-inline-start: 0;
margin-inline-end: 0;

span {
padding: $spacing-4 $spacing-8;
}
}

a {
margin-left: 1em;
margin-inline-start: 1em;
}
}

Expand Down Expand Up @@ -1006,7 +1019,7 @@ $left-gutter: 64px;
overflow: hidden; /* ensure correct overflow behavior */
text-overflow: ellipsis;
position: initial;
margin-left: auto; /* to ensure it's end-aligned even if it's the only element of its parent */
margin-inline-start: auto; /* to ensure it's end-aligned even if it's the only element of its parent */
}

&:hover {
Expand Down Expand Up @@ -1153,7 +1166,7 @@ $left-gutter: 64px;
align-items: center;

.mx_DisambiguatedProfile {
margin-left: 8px;
margin-inline-start: 8px;
flex: 1;
}
}
Expand Down Expand Up @@ -1323,7 +1336,7 @@ $left-gutter: 64px;
align-items: center;
justify-content: space-between;
gap: $spacing-8;
margin-left: var(--leftOffset);
margin-inline-start: var(--leftOffset);
.mx_EventTile_truncated {
flex: 1;
overflow: hidden;
Expand All @@ -1335,6 +1348,6 @@ $left-gutter: 64px;
/* Media query for mobile UI */
@media only screen and (max-width: 480px) {
.mx_EventTile_content {
margin-right: 0;
margin-inline-end: 0;
}
}