jenkins-bot has submitted this change and it was merged.
Change subject: Correctly display Flow in RTL interface and content
......................................................................
Correctly display Flow in RTL interface and content
There are two types of directionalities Flow should adhere to -
content language and interface language. CSSJanus flips directions
dependent on interface language, but some of those operations are
not correct, since they are content-dependent. For instance, the
topic subject is content-dependent regardless of the interface.
For those content dependent cases, make sure the display flips
between content directionalities and add @noflip rules so that
CSSJanus does not touch those regardless of interface.
On top of that there are several elements that should flip for
interface values, like the flow-board-navigation elements. For
those to work properly we have to add LTR rules so CSSJanus flips
those in RTL.
Bug: T95717
Change-Id: I5e8112b2259cbc8badf2b3ce93b53b38b0ade319
---
M modules/styles/board/menu.less
M modules/styles/board/navigation.less
M modules/styles/board/terms-of-use.less
M modules/styles/board/timestamps.less
M modules/styles/board/topic/meta.less
M modules/styles/board/topic/post.less
M modules/styles/board/topic/titlebar.less
M modules/styles/board/topic/watchlist.less
M modules/styles/common.less
9 files changed, 235 insertions(+), 46 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/styles/board/menu.less b/modules/styles/board/menu.less
index 5aa8ce2..8c59506 100644
--- a/modules/styles/board/menu.less
+++ b/modules/styles/board/menu.less
@@ -8,7 +8,6 @@
top: 0;
clear: both;
position: static;
- right: 0;
bottom: 0;
ul {
@@ -30,6 +29,24 @@
// Hide the menu trigger completely in no-js mode
.flow-menu-js-drop {
display: none;
+ }
+
+ // Correctly display positions based on content language
+ .mw-content-ltr & {
+ /* @noflip */
+ right: 0;
+ }
+
+ // Correctly display positions based on content language
+ .mw-content-rtl & {
+ /* @noflip */
+ left: 0;
+ }
+ // This is the TOC popup for browsing topics, and we want this
+ // to flip in interface language because the TOC flips too
+ &.flow-board-sort-menu {
+ left: auto;
+ right: 0;
}
}
@@ -114,7 +131,6 @@
// This is the menu opener handler; it contains an anchor which
triggers the menu in touch devices, without JS
.flow-menu-js-drop {
display: block;
- text-align: right;
text-indent: 0;
cursor: pointer;
@@ -126,6 +142,17 @@
border-width: 0;
color: @colorTextLight;
}
+ }
+
+ // Correct positioning for ltr/rtl content direction
+ .mw-content-ltr & .flow-menu-js-drop {
+ /* @noflip */
+ text-align: right;
+ }
+ // Correct positioning for ltr/rtl content direction
+ .mw-content-rtl & .flow-menu-js-drop {
+ /* @noflip */
+ text-align: left;
}
// This is a hidden menu trigger; used when the menu is opened from a
secondary handler via menuToggle
@@ -150,5 +177,9 @@
// On desktop, the flow-menu is no longer inline
.flow-menu {
position: absolute;
+ li a .wikiglyph {
+ // This will be flipped in RTL
+ float: left;
+ }
}
}
diff --git a/modules/styles/board/navigation.less
b/modules/styles/board/navigation.less
index 9641992..784fbe0 100644
--- a/modules/styles/board/navigation.less
+++ b/modules/styles/board/navigation.less
@@ -15,11 +15,25 @@
padding: 0.2em 0.3em;
}
+ // We need these because CSSJanus will flip it in rtl
+ a.flow-board-navigator-first {
+ float: left;
+ position: static;
+ }
+
a.flow-board-navigator-last {
float: right;
position: static;
}
+ a.flow-board-navigator-first .wikiglyph {
+ float: left;
+ }
+
+ a.flow-board-navigator-last .wikiglyph {
+ float: right;
+ }
+
.flow-board-navigation-inner {
overflow: hidden;
border-bottom: 1px solid @colorGrayLight;
diff --git a/modules/styles/board/terms-of-use.less
b/modules/styles/board/terms-of-use.less
index 7aa0ef6..65c1370 100644
--- a/modules/styles/board/terms-of-use.less
+++ b/modules/styles/board/terms-of-use.less
@@ -13,6 +13,9 @@
color: @colorTextLight;
font-size: .75em;
line-height: 1.4;
+ // These two will flip in RTL interface
+ text-align: left;
+ direction: ltr;
}
@media all and (min-width: @wgFlowDeviceWidthTablet) {
diff --git a/modules/styles/board/timestamps.less
b/modules/styles/board/timestamps.less
index 3219df2..dda6473 100644
--- a/modules/styles/board/timestamps.less
+++ b/modules/styles/board/timestamps.less
@@ -4,6 +4,7 @@
.flow-timestamp {
text-align: left;
+ padding-left: 0.5em;
span {
unicode-bidi: embed;
@@ -14,6 +15,8 @@
}
.flow-timestamp-ago {
display: inline;
+ // This should flip with interface language
+ direction: ltr;
}
&:hover {
diff --git a/modules/styles/board/topic/meta.less
b/modules/styles/board/topic/meta.less
index d3cd82b..56bcfad 100644
--- a/modules/styles/board/topic/meta.less
+++ b/modules/styles/board/topic/meta.less
@@ -6,4 +6,18 @@
// Topic metadata
.flow-topic-meta {
color: @colorTextLight;
+ // This should flip in regards to interface language
+ direction: ltr;
+
+ // This placement depends on content language
+ .mw-content-ltr & {
+ /* @noflip */
+ text-align: left;
+ }
+
+ // This placement depends on content language
+ .mw-content-rtl & {
+ /* @noflip */
+ text-align: right;
+ }
}
diff --git a/modules/styles/board/topic/post.less
b/modules/styles/board/topic/post.less
index aba5c5b..dd2b32d 100644
--- a/modules/styles/board/topic/post.less
+++ b/modules/styles/board/topic/post.less
@@ -18,47 +18,8 @@
.flow-post {
position: relative;
- margin: .5em 0 0 .75em;
- padding: 0 .5em 0 0;
color: @colorText;
word-wrap: break-word;
-
- // Nested comments (replies & reply forms)
- .flow-replies {
- margin-left: @topicIndent;
- padding-left: 0.5em;
- border-left: 1px dotted @colorGrayLighter;
- }
-
- &.flow-post-max-depth .flow-replies {
- margin-left: 0;
- padding-left: 0;
- border-left-width: 0;
-
- .flow-post-max-depth {
- margin-left: 0;
- }
- }
-
- .flow-post-main {
- margin-left: 0.1em;
- }
-
- // Highlights a post (no IE6 support, but acceptable degradation)
- &.flow-post-highlighted {
- > .flow-post-main {
- @highlightedIndent: @topicIndent - 0.75em;
- padding-left: @highlightedIndent;
- border-left: solid @highlightedIndent @colorHighlight;
- }
- }
-
- // Highlights all posts newer than a specific post
- &.flow-post-highlight-newer {
- .flow-post-content {
- border-left: solid @highlightedIndent
@colorHighlightNewer;
- }
- }
&.flow-post-highlight-newer {
.flow-post-content {
@@ -110,6 +71,115 @@
opacity: 1;
}
}
+
+ .mw-content-ltr & {
+ /* @noflip */
+ margin: .5em 0 0 .75em;
+
+ // Nested comments (replies & reply forms)
+ .flow-replies {
+ /* @noflip */
+ margin-left: @topicIndent;
+ /* @noflip */
+ padding-left: 0.5em;
+ /* @noflip */
+ border-left: 1px dotted @colorGrayLighter;
+ }
+
+ &.flow-post-max-depth .flow-replies {
+ /* @noflip */
+ margin-left: 0;
+ /* @noflip */
+ padding-left: 0;
+ /* @noflip */
+ border-left-width: 0;
+
+ .flow-post-max-depth {
+ /* @noflip */
+ margin-left: 0;
+ }
+ }
+
+ .flow-post-main {
+ /* @noflip */
+ margin-left: 0.1em;
+ }
+
+ // Highlights a post (no IE6 support, but acceptable
degradation)
+ &.flow-post-highlighted {
+ > .flow-post-main {
+ /* @noflip */
+ @highlightedIndent: @topicIndent - 0.75em;
+ /* @noflip */
+ padding-left: @highlightedIndent;
+ /* @noflip */
+ border-left: solid @highlightedIndent
@colorHighlight;
+ }
+ }
+
+ // Highlights all posts newer than a specific post
+ &.flow-post-highlight-newer {
+ .flow-post-content {
+ /* @noflip */
+ border-left: solid @highlightedIndent
@colorHighlightNewer;
+ }
+ }
+ }
+
+ .mw-content-rtl & {
+ /* @noflip */
+ margin: .5em 0.75em 0 0;
+
+ // Nested comments (replies & reply forms)
+ .flow-replies {
+ /* @noflip */
+ margin-right: @topicIndent;
+ /* @noflip */
+ padding-right: 0.5em;
+ /* @noflip */
+ border-right: 1px dotted @colorGrayLighter;
+ }
+
+ &.flow-post-max-depth .flow-replies {
+ /* @noflip */
+ margin-right: 0;
+ /* @noflip */
+ padding-right: 0;
+ /* @noflip */
+ border-right-width: 0;
+
+ .flow-post-max-depth {
+ /* @noflip */
+ margin-right: 0;
+ }
+ }
+
+ .flow-post-main {
+ /* @noflip */
+ margin-right: 0.1em;
+ }
+
+ // Highlights a post (no IE6 support, but acceptable
degradation)
+ &.flow-post-highlighted {
+ > .flow-post-main {
+ /* @noflip */
+ @highlightedIndent: @topicIndent - 0.75em;
+ /* @noflip */
+ padding-right: @highlightedIndent;
+ /* @noflip */
+ border-right: solid @highlightedIndent
@colorHighlight;
+ }
+ }
+
+ // Highlights all posts newer than a specific post
+ &.flow-post-highlight-newer {
+ .flow-post-content {
+ /* @noflip */
+ border-right: solid @highlightedIndent
@colorHighlightNewer;
+ }
+ }
+ }
+
}
// Comment metadata
@@ -117,11 +187,29 @@
// @todo needs overflow: hidden but crops button border at bottom
color: @colorGrayDark;
font-size: .875em;
- text-align: right;
+
+ .mw-content-ltr & {
+ /* @noflip */
+ text-align: right;
+ }
+ .mw-content-rtl & {
+ /* @noflip */
+ text-align: left;
+ }
}
.flow-post-meta-actions {
- float: left;
+
+ .mw-content-ltr & {
+ /* @noflip */
+ float: left;
+ }
+
+ .mw-content-rtl & {
+ /* @noflip */
+ float: right;
+ }
+
a {
&::after {
content: "\2022";
diff --git a/modules/styles/board/topic/titlebar.less
b/modules/styles/board/topic/titlebar.less
index 018a41c..41b94bf 100644
--- a/modules/styles/board/topic/titlebar.less
+++ b/modules/styles/board/topic/titlebar.less
@@ -21,12 +21,23 @@
div#content .flow-topic-title {
padding: 0;
border-bottom: none;
- margin: 0 2.5em .15em 0;
font-family: sans-serif;
font-weight: bold;
word-break: break-word;
word-wrap: break-word;
overflow: visible;
+}
+
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-ltr .flow-topic-title {
+ /* @noflip */
+ margin: 0 2.5em .15em 0;
+}
+
+// Correct positioning for ltr/rtl content direction
+div#content .mw-content-rtl .flow-topic-title {
+ /* @noflip */
+ margin: 0 0 .15em 2.5em;
}
.flow-moderated-topic-title {
@@ -66,6 +77,14 @@
// MEDIA QUERIES
@media all and (min-width: @wgFlowDeviceWidthTablet) {
.flow-topic-titlebar {
- padding: 1em (@topicIndent + 1) 1em @topicIndent;
+ .mw-content-ltr & {
+ /* @noflip */
+ padding: 1em (@topicIndent + 1) 1em @topicIndent;
+ }
+
+ .mw-content-rtl & {
+ /* @noflip */
+ padding: 1em @topicIndent 1em (@topicIndent + 1);
+ }
}
}
diff --git a/modules/styles/board/topic/watchlist.less
b/modules/styles/board/topic/watchlist.less
index 95081b0..2c28078 100644
--- a/modules/styles/board/topic/watchlist.less
+++ b/modules/styles/board/topic/watchlist.less
@@ -6,7 +6,6 @@
.flow-watch-link {
position: absolute;
top: 0;
- right: 0;
&.flow-board-watch-link {
font-size: 1.5em;
@@ -48,6 +47,19 @@
display: none;
}
}
+
+ // Correct positioning for ltr/rtl content direction
+ .mw-content-ltr & {
+ /* @noflip */
+ right: 0;
+ }
+
+ // Correct positioning for ltr/rtl content direction
+ .mw-content-rtl & {
+ /* @noflip */
+ left: 0;
+ }
+
}
.flow-topic-watchlist {
diff --git a/modules/styles/common.less b/modules/styles/common.less
index b7022af..203c816 100644
--- a/modules/styles/common.less
+++ b/modules/styles/common.less
@@ -4,6 +4,8 @@
@import 'flow.variables';
.flow-component {
+ // This should flip with interface directionality
+ float: left;
.flow-list {
list-style: none;
@@ -55,6 +57,9 @@
.flow-undo {
font-size: .875em;
color: #777777;
+ // These two will flip in RTL interface
+ text-align: left;
+ direction: ltr;
}
.flow-topic-meta {
--
To view, visit https://gerrit.wikimedia.org/r/206321
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I5e8112b2259cbc8badf2b3ce93b53b38b0ade319
Gerrit-PatchSet: 11
Gerrit-Project: mediawiki/extensions/Flow
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Amire80 <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: Matthias Mullie <[email protected]>
Gerrit-Reviewer: Mooeypoo <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
