[MediaWiki-commits] [Gerrit] RTL styling fix for language button - change (apps...wikipedia)

[Brion VIBBER (Code Review)]

Brion VIBBER has submitted this change and it was merged.

Change subject: RTL styling fix for language button
......................................................................


RTL styling fix for language button

* fix styles so padding/border are correct when in RTL
* check the UI language to set proper 'dir' on the button

Change-Id: If5271d59a7d9fd36fefeda904721fe509c5a8b87
---
M wikipedia/View Controllers/WebView/WebViewController.m
M wikipedia/assets/styles.css
M www/less/langbutton.less
3 files changed, 51 insertions(+), 12 deletions(-)

Approvals:
  Brion VIBBER: Verified; Looks good to me, approved



diff --git a/wikipedia/View Controllers/WebView/WebViewController.m 
b/wikipedia/View Controllers/WebView/WebViewController.m
index d4c6340..fe16032 100644
--- a/wikipedia/View Controllers/WebView/WebViewController.m
+++ b/wikipedia/View Controllers/WebView/WebViewController.m
@@ -1342,11 +1342,15 @@
 -(NSString *)renderLanguageButtonForCount:(NSInteger)count
 {
     if (count > 0) {
+        NSString *langCode = [[NSLocale preferredLanguages] objectAtIndex:0];
+        MWLanguageInfo *lang = [MWLanguageInfo languageInfoForCode:langCode];
+        NSString *dir = lang.dir;
+
         NSString *aa = @"<span class=\"mw-language-icon\">Aあ</span>";
         NSString *countStr = [NSString stringWithFormat:@"<span 
class=\"mw-language-count\">%d</span>", (int)count];
         NSString *otherLanguages = [NSString stringWithFormat:@"<span 
class=\"mw-language-label\">%@</span>", 
MWLocalizedString(@"language-button-other-languages", nil)];
         
-        return [NSString stringWithFormat:@"<button 
class=\"mw-language-button\"><span 
class=\"mw-language-items\">%@%@%@</span></button>", aa, countStr, 
otherLanguages];
+        return [NSString stringWithFormat:@"<button dir=\"%@\" 
class=\"mw-language-button\"><span 
class=\"mw-language-items\">%@%@%@</span></button>", dir, aa, countStr, 
otherLanguages];
     } else {
         return @"";
     }
diff --git a/wikipedia/assets/styles.css b/wikipedia/assets/styles.css
index 67a0dd5..92679ab 100644
--- a/wikipedia/assets/styles.css
+++ b/wikipedia/assets/styles.css
@@ -177,19 +177,37 @@
   height: 24px;
 }
 .mw-language-icon {
-  text-align: right;
   color: white;
-  padding-right: 12px;
-  border-right: solid 1px #aaa;
   white-space: nowrap;
   font-family: "AvenirNextCondensed-Medium";
 }
-.mw-language-count {
-  text-align: center;
+.mw-language-button[dir=ltr] .mw-language-icon {
+  text-align: right;
+  padding-right: 12px;
+  border-right: solid 1px #aaa;
+}
+.mw-language-button[dir=rtl] .mw-language-icon {
+  text-align: left;
+  border-left: solid 1px #aaa;
   padding-left: 12px;
 }
+.mw-language-count {
+  text-align: center;
+}
+.mw-language-button[dir=ltr] .mw-language-count {
+  padding-left: 12px;
+}
+.mw-language-button[dir=rtl] .mw-language-count {
+  padding-right: 12px;
+}
 .mw-language-label {
+  font-size: 10px;
+}
+.mw-language-button[dir=ltr] .mw-language-label {
   text-align: left;
   padding-left: 12px;
-  font-size: 10px;
+}
+.mw-language-button[dir=rtl] .mw-language-label {
+  text-align: right;
+  padding-right: 12px;
 }
diff --git a/www/less/langbutton.less b/www/less/langbutton.less
index bb205f6..5550f0b 100644
--- a/www/less/langbutton.less
+++ b/www/less/langbutton.less
@@ -24,22 +24,39 @@
 }
 
 .mw-language-icon {
-       text-align: right;
        color: white;
+       white-space: nowrap;
+       font-family: "AvenirNextCondensed-Medium";
+}
+.mw-language-button[dir=ltr] .mw-language-icon {
+       text-align: right;
        padding-right: 12px;
        border-right: solid 1px #aaa;
-       white-space: nowrap;
-
-       font-family: "AvenirNextCondensed-Medium";
+}
+.mw-language-button[dir=rtl] .mw-language-icon {
+       text-align: left;
+       border-left: solid 1px #aaa;
+       padding-left: 12px;
 }
 
 .mw-language-count {
        text-align: center;
+}
+.mw-language-button[dir=ltr] .mw-language-count {
        padding-left: 12px;
+}
+.mw-language-button[dir=rtl] .mw-language-count {
+       padding-right: 12px;
 }
 
 .mw-language-label {
+       font-size: 10px;
+}
+.mw-language-button[dir=ltr] .mw-language-label {
        text-align: left;
        padding-left: 12px;
-       font-size: 10px;
+}
+.mw-language-button[dir=rtl] .mw-language-label {
+       text-align: right;
+       padding-right: 12px;
 }

-- 
To view, visit https://gerrit.wikimedia.org/r/135104
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: If5271d59a7d9fd36fefeda904721fe509c5a8b87
Gerrit-PatchSet: 1
Gerrit-Project: apps/ios/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Brion VIBBER <br...@wikimedia.org>
Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits