From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 22 Nov 2023 17:13:35 +0000 (+0000)
Subject: Merge pull request #4353 from tomhughes/rtlcss
X-Git-Tag: live~486
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/5e90b569db1b0f09063d1eed0aada7a513b60dcb?hp=5fdddf2a8a98362ee646fb9cd22fadeaea185b46

Merge pull request #4353 from tomhughes/rtlcss

Improve handling of RTL styling
---

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index 2050aaf3f..0608b699b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -19,6 +19,7 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: ${{ env.ruby }}
+        rubygems: 3.4.10
         bundler-cache: true
     - name: Run rubocop
       run: bundle exec rubocop --format fuubar
@@ -32,6 +33,7 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: ${{ env.ruby }}
+        rubygems: 3.4.10
         bundler-cache: true
     - name: Run erblint
       run: bundle exec erblint .
@@ -45,6 +47,7 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: ${{ env.ruby }}
+        rubygems: 3.4.10
         bundler-cache: true
     - name: Cache node modules
       uses: actions/cache@v3
@@ -69,6 +72,7 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: ${{ env.ruby }}
+        rubygems: 3.4.10
         bundler-cache: true
     - name: Run brakeman
       run: bundle exec brakeman -q
@@ -84,6 +88,7 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: ${{ env.ruby }}
+        rubygems: 3.4.10
         bundler-cache: true
     - name: Setup database
       run: |
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index 3ee6129e1..2588a737f 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -23,6 +23,7 @@ jobs:
       uses: ruby/setup-ruby@v1
       with:
         ruby-version: ${{ matrix.ruby }}
+        rubygems: 3.4.10
         bundler-cache: true
     - name: Cache node modules
       uses: actions/cache@v3
diff --git a/Gemfile b/Gemfile
index f9f12d64e..98b035188 100644
--- a/Gemfile
+++ b/Gemfile
@@ -26,8 +26,8 @@ gem "jbuilder", "~> 2.7"
 # Reduces boot times through caching; required in config/boot.rb
 gem "bootsnap", ">= 1.4.2", :require => false
 
-# Use R2 for RTL conversion
-gem "r2", "~> 0.2.7"
+# Use rtlcss for RTL conversion
+gem "rtlcss"
 
 # Use autoprefixer to generate CSS prefixes
 gem "autoprefixer-rails"
diff --git a/Gemfile.lock b/Gemfile.lock
index 6a58c6e1d..885de22b4 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -305,6 +305,7 @@ GEM
     kramdown (2.4.0)
       rexml
     language_server-protocol (3.17.0.3)
+    libv8-node (18.16.0.0)
     libxml-ruby (4.1.2)
     listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
@@ -326,6 +327,8 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.5)
+    mini_racer (0.8.0)
+      libv8-node (~> 18.16.0.0)
     minitest (5.20.0)
     msgpack (1.7.2)
     multi_json (1.15.0)
@@ -403,7 +406,6 @@ GEM
     puma (5.6.7)
       nio4r (~> 2.0)
     quad_tile (1.0.1)
-    r2 (0.2.8)
     racc (1.7.3)
     rack (2.2.8)
     rack-cors (2.0.1)
@@ -473,6 +475,8 @@ GEM
     rinku (2.0.6)
     rotp (6.3.0)
     rouge (4.2.0)
+    rtlcss (0.2.1)
+      mini_racer (>= 0.6.3)
     rubocop (1.57.2)
       json (~> 2.3)
       language_server-protocol (>= 3.17.0)
@@ -639,7 +643,6 @@ DEPENDENCIES
   pg
   puma (~> 5.6)
   quad_tile (~> 1.0.1)
-  r2 (~> 0.2.7)
   rack-cors
   rack-uri_sanitizer
   rails (~> 7.1.0)
@@ -647,6 +650,7 @@ DEPENDENCIES
   rails-i18n (~> 7.0.0)
   rinku (>= 2.0.6)
   rotp
+  rtlcss
   rubocop
   rubocop-capybara
   rubocop-factory_bot
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1f5d0398e..6236d3c3d 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -2,34 +2,6 @@
 @import "bootstrap";
 @import "rails_bootstrap_forms";
 
-/* Bootstrap + r2 fixes */
-
-:root[dir=rtl] {
-  .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
-    /* no-r2 */
-    right: unset !important;
-    left: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
-
-    &::before {
-      /* no-r2 */
-      left: unset !important;
-      right: -1px !important;
-    }
-  }
-
-  .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
-    /* no-r2 */
-    left: unset !important;
-    right: calc(-1 * var(--bs-tooltip-arrow-height)) !important;
-
-    &::before {
-      /* no-r2 */
-      right: unset !important;
-      left: -1px !important;
-    }
-  }
-}
-
 /* Styles common to large and small screens */
 
 /* Default rules for the body of every page */
@@ -71,23 +43,23 @@ time[title] {
   overflow: hidden;
 }
 
-.icon.search      { /* no-r2 */ background-position: 0 0; }
-.icon.donate      { /* no-r2 */ background-position: -20px 0; }
-.icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
-.icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
-.icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
-.active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
-.icon.layers      { /* no-r2 */ background-position: -100px 0; }
-.icon.key         { /* no-r2 */ background-position: -120px 0; }
-.icon.share       { /* no-r2 */ background-position: -140px 0; }
-.icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
-.icon.link        { /* no-r2 */ background-position: -180px 0; }
-.icon.close       { /* no-r2 */ background-position: -200px 0; }
-.icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
-.icon.check       { /* no-r2 */ background-position: -220px 0; }
-.icon.note        { /* no-r2 */ background-position: -240px 0; }
-.icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
-.icon.query       { /* no-r2 */ background-position: -260px 0; }
+.icon.search      { /*rtl:ignore*/ background-position: 0 0; }
+.icon.donate      { /*rtl:ignore*/ background-position: -20px 0; }
+.icon.zoomin      { /*rtl:ignore*/ background-position: -40px 0; }
+.icon.zoomout     { /*rtl:ignore*/ background-position: -60px 0; }
+.icon.geolocate   { /*rtl:ignore*/ background-position: -80px 0; }
+.active .icon.geolocate   { /*rtl:ignore*/ background-position: -80px -20px; }
+.icon.layers      { /*rtl:ignore*/ background-position: -100px 0; }
+.icon.key         { /*rtl:ignore*/ background-position: -120px 0; }
+.icon.share       { /*rtl:ignore*/ background-position: -140px 0; }
+.icon.clipboard   { /*rtl:ignore*/ background-position: -160px 0; }
+.icon.link        { /*rtl:ignore*/ background-position: -180px 0; }
+.icon.close       { /*rtl:ignore*/ background-position: -200px 0; }
+.icon.close:hover { /*rtl:ignore*/ background-position: -200px -20px; }
+.icon.check       { /*rtl:ignore*/ background-position: -220px 0; }
+.icon.note        { /*rtl:ignore*/ background-position: -240px 0; }
+.icon.note.grey   { /*rtl:ignore*/ background-position: -240px -20px; }
+.icon.query       { /*rtl:ignore*/ background-position: -260px 0; }
 
 /* Utility for de-emphasizing content */
 
@@ -757,6 +729,12 @@ tr.turn:hover {
   }
 }
 
+/* Force LTR/RTL alignment for placeholder text */
+
+.form-control::placeholder {
+  text-align: left;
+}
+
 /* Rules for export sidebar */
 
 .export_form {
@@ -779,11 +757,11 @@ tr.turn:hover {
     #maxlat { margin-top: -1px; }
     #minlon {
       float: left;
-      /* no-r2 */ margin-left: -1px;
+      /*rtl:ignore*/ margin-left: -1px;
     }
     #maxlon {
       float: right;
-      /* no-r2 */ margin-right: -1px;
+      /*rtl:ignore*/ margin-right: -1px;
     }
     #minlat { margin-bottom: -1px; }
   }
@@ -1048,7 +1026,7 @@ div.secondary-actions {
   }
 
   .sprite.x {
-    /* no-r2 */ background-position: -50px 0;
+    /*rtl:ignore*/ background-position: -50px 0;
   }
 
   .sprite.term {
@@ -1057,27 +1035,27 @@ div.secondary-actions {
   }
 
   .sprite.node {
-    /* no-r2 */ background-position: -100px 0;
+    /*rtl:ignore*/ background-position: -100px 0;
   }
 
   .sprite.way {
-    /* no-r2 */ background-position: -150px 0;
+    /*rtl:ignore*/ background-position: -150px 0;
   }
 
   .sprite.tag {
-    /* no-r2 */ background-position: -200px 0;
+    /*rtl:ignore*/ background-position: -200px 0;
   }
 
   .sprite.editor {
-    /* no-r2 */ background-position: -250px 0;
+    /*rtl:ignore*/ background-position: -250px 0;
   }
 
   .sprite.question {
-    /* no-r2 */ background-position: -300px 0;
+    /*rtl:ignore*/ background-position: -300px 0;
   }
 
   .sprite.rules {
-    /* no-r2 */ background-position: -350px 0;
+    /*rtl:ignore*/ background-position: -350px 0;
   }
 
   .icon.note {
@@ -1128,27 +1106,27 @@ div.secondary-actions {
     background: 40px 40px image-url('about/sprite.png') no-repeat;
 
     &.local {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px 0px;
     }
     &.community {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -40px;
     }
     &.open {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -80px;
     }
     &.partners {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -120px;
     }
     &.infringement {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: 0px -160px;
     }
     &.legal {
-      /* no-r2 */
+      /*rtl:ignore*/
       background-position: -45px -160px;
     }
   }
diff --git a/app/assets/stylesheets/print-rtl.r2.scss b/app/assets/stylesheets/print-rtl.rtlcss.scss
similarity index 100%
rename from app/assets/stylesheets/print-rtl.r2.scss
rename to app/assets/stylesheets/print-rtl.rtlcss.scss
diff --git a/app/assets/stylesheets/screen-rtl.r2.scss b/app/assets/stylesheets/screen-rtl.rtlcss.scss
similarity index 100%
rename from app/assets/stylesheets/screen-rtl.r2.scss
rename to app/assets/stylesheets/screen-rtl.rtlcss.scss
diff --git a/config/initializers/r2.rb b/config/initializers/r2.rb
deleted file mode 100644
index 4f951b30c..000000000
--- a/config/initializers/r2.rb
+++ /dev/null
@@ -1,16 +0,0 @@
-require "r2"
-
-class R2ScssProcessor < SassC::Rails::ScssTemplate
-  def self.call(input)
-    output = super(input)
-    data = R2.r2(output[:data])
-    output.delete(:map)
-    output.merge(:data => data)
-  end
-end
-
-Rails.application.config.assets.configure do |env|
-  env.register_mime_type "text/r2+scss", :extensions => [".r2.scss"]
-  env.register_transformer "text/r2+scss", "text/css", R2ScssProcessor
-  env.register_preprocessor "text/r2+scss", Sprockets::DirectiveProcessor.new(:comments => ["//", ["/*", "*/"]])
-end
diff --git a/config/initializers/rtlcss.rb b/config/initializers/rtlcss.rb
new file mode 100644
index 000000000..11e4e0d5c
--- /dev/null
+++ b/config/initializers/rtlcss.rb
@@ -0,0 +1,16 @@
+require "rtlcss"
+
+class RtlcssSCSSProcessor < SassC::Rails::ScssTemplate
+  def self.call(input)
+    output = super(input)
+    data = Rtlcss.flip_css(output[:data])
+    output.delete(:map)
+    output.merge(:data => data)
+  end
+end
+
+Rails.application.config.assets.configure do |env|
+  env.register_mime_type "text/rtlcss+scss", :extensions => [".rtlcss.scss"]
+  env.register_transformer "text/rtlcss+scss", "text/css", RtlcssSCSSProcessor
+  env.register_preprocessor "text/rtlcss+scss", Sprockets::DirectiveProcessor.new(:comments => ["//", ["/*", "*/"]])
+end