From 1c611917dde33cb71c965f420e1d295f32c60416 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 6 Apr 2023 23:42:39 +0900 Subject: [PATCH 1/4] Correct text direction for RTL languages - Apply logical properties for ol, ul, and blockquote Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index ef75fc154bd..91eee733c80 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -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; @@ -537,7 +542,7 @@ $left-gutter: 64px; 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 { @@ -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; @@ -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; } From 2204703ee38398c1ea84380b1723d542d64f81fc Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 6 Apr 2023 23:20:05 +0900 Subject: [PATCH 2/4] margin-left to margin-inline-start Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 91eee733c80..c01d67f7162 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -372,7 +372,7 @@ $left-gutter: 64px; .mx_ThreadSummary, .mx_ThreadSummary_icon { - margin-left: $left-gutter; + margin-inline-start: $left-gutter; } .mx_ReactionsRow { @@ -381,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); } @@ -855,7 +855,7 @@ $left-gutter: 64px; } a { - margin-left: 1em; + margin-inline-start: 1em; } } @@ -1019,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 { @@ -1166,7 +1166,7 @@ $left-gutter: 64px; align-items: center; .mx_DisambiguatedProfile { - margin-left: 8px; + margin-inline-start: 8px; flex: 1; } } @@ -1336,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; From 6e6d06e77b7404b45a9a76c922b71ee1d2655d86 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 6 Apr 2023 23:20:32 +0900 Subject: [PATCH 3/4] margin-right to margin-inline-end Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index c01d67f7162..98331f5c37c 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -147,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 */ } @@ -192,7 +192,7 @@ $left-gutter: 64px; } .mx_EventTile_reply { - margin-right: 10px; + margin-inline-end: 10px; } .mx_EventTile_msgOption { @@ -325,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); } @@ -396,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; } @@ -534,7 +534,7 @@ $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 { @@ -576,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 { @@ -843,11 +843,11 @@ $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; + margin-inline-end: 0; span { padding: $spacing-4 $spacing-8; @@ -1348,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; } } From 963389fc0c32299f1107301a7fcfbaff9ebe1a19 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 6 Apr 2023 23:22:14 +0900 Subject: [PATCH 4/4] padding-left to padding-inline-start Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_EventTile.pcss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 98331f5c37c..4860224e723 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -345,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); } @@ -506,7 +506,7 @@ $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) ); } @@ -514,11 +514,11 @@ $left-gutter: 64px; &[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); } } @@ -815,7 +815,7 @@ $left-gutter: 64px; & span { text-align: right; display: block; - padding-left: 1em; + padding-inline-start: 1em; } } @@ -846,7 +846,7 @@ $left-gutter: 64px; margin-inline-end: 0; .mx_EventTile_line { - padding-left: 0; + padding-inline-start: 0; margin-inline-end: 0; span {