feat: RTL support

CMDBrew · Nov 2, 2021 · b9fe977 · b9fe977
1 parent 508cac0
commit b9fe977
Show file tree

Hide file tree

Showing 27 changed files with 1,166 additions and 725 deletions.
diff --git a/Gemfile b/Gemfile
@@ -18,7 +18,7 @@ group :development, :test do
   gem "pg"
   gem "mysql2"
   gem "sqlite3"
-  gem "webpacker", "~> 5.0"
+  gem "webpacker", "~> 5.4.3"
 
   # Use Factory to create fake data
   gem "faker"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -366,7 +366,7 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.0)
+    webpacker (5.4.3)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -411,7 +411,7 @@ DEPENDENCIES
   vcr
   webdrivers
   webmock
-  webpacker (~> 5.0)
+  webpacker (~> 5.4.3)
 
 BUNDLED WITH
    2.2.15
diff --git a/app/assets/stylesheets/adminterface/components/_form.scss b/app/assets/stylesheets/adminterface/components/_form.scss
@@ -119,6 +119,7 @@
       -webkit-box-align: end;
       -webkit-box-direction: reverse;
       flex-direction: row-reverse;
+      justify-content: flex-start;
     }
 
     li {

diff --git a/app/assets/stylesheets/adminterface/mixins/_utilities.scss b/app/assets/stylesheets/adminterface/mixins/_utilities.scss
@@ -37,3 +37,7 @@
   -webkit-box-shadow: #{$value};
   -moz-box-shadow: #{$value};
 }
+
+@mixin lang-dir-rtl {
+  @at-root { html[dir="rtl"] & { @content; } }
+}
diff --git a/app/assets/stylesheets/adminterface/vendors/bootstrap/_all.scss b/app/assets/stylesheets/adminterface/vendors/bootstrap/_all.scss
@@ -1,3 +1,4 @@
+@import './components/breadcrumb';
 @import './components/buttons';
 @import './components/dropdowns';
 @import './components/form/labels';

diff --git a/app/assets/stylesheets/adminterface/vendors/bootstrap/components/_breadcrumb.scss b/app/assets/stylesheets/adminterface/vendors/bootstrap/components/_breadcrumb.scss
@@ -0,0 +1 @@
+ol.breadcrumb { padding-left: 0; }
diff --git a/.../adminterface/vendors/flatpickr/main.scss → ...adminterface/vendors/flatpickr/_main.scss b/.../adminterface/vendors/flatpickr/main.scss → ...adminterface/vendors/flatpickr/_main.scss
@@ -6,6 +6,12 @@
     .flatpickr-next-month {
       padding: 5px 10px;
 
+      svg {
+        @include lang-dir-rtl {
+          @include transform(rotate(180deg));
+        }
+      }
+
       &:hover svg {
         fill: $flatpickr-ctrl-hover-bg;
       }

diff --git a/app/views/layouts/active_admin_logged_out.html.erb b/app/views/layouts/active_admin_logged_out.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="<%=I18n.locale%>">
+<html lang="<%=I18n.locale%>" dir="<%= ActiveAdmin.application.lang_dir(self) %>">
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
     <title><%= [@page_title, ActiveAdmin.application.site_title(self)].compact.join(" | ") %></title>

diff --git a/gemfiles/rails_6_0.gemfile b/gemfiles/rails_6_0.gemfile
@@ -14,7 +14,7 @@ group :development, :test do
   gem "pg"
   gem "mysql2"
   gem "sqlite3"
-  gem "webpacker", "~> 5.0"
+  gem "webpacker", "~> 5.4.3"
   gem "faker"
   gem "factory_bot_rails"
   gem "devise"

diff --git a/gemfiles/rails_6_0.gemfile.lock b/gemfiles/rails_6_0.gemfile.lock
@@ -364,7 +364,7 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.0)
+    webpacker (5.4.3)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -410,7 +410,7 @@ DEPENDENCIES
   vcr
   webdrivers
   webmock
-  webpacker (~> 5.0)
+  webpacker (~> 5.4.3)
 
 BUNDLED WITH
    2.2.15
diff --git a/gemfiles/rails_6_1.gemfile b/gemfiles/rails_6_1.gemfile
@@ -14,7 +14,7 @@ group :development, :test do
   gem "pg"
   gem "mysql2"
   gem "sqlite3"
-  gem "webpacker", "~> 5.0"
+  gem "webpacker", "~> 5.4.3"
   gem "faker"
   gem "factory_bot_rails"
   gem "devise"

diff --git a/gemfiles/rails_6_1.gemfile.lock b/gemfiles/rails_6_1.gemfile.lock
@@ -367,7 +367,7 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.0)
+    webpacker (5.4.3)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -413,7 +413,7 @@ DEPENDENCIES
   vcr
   webdrivers
   webmock
-  webpacker (~> 5.0)
+  webpacker (~> 5.4.3)
 
 BUNDLED WITH
    2.2.15
diff --git a/lib/adminterface/configs.rb b/lib/adminterface/configs.rb
@@ -10,7 +10,11 @@ module Configs
     }.call.freeze
 
     module Configurable
-      attr_writer :components, :css_classes, :comments_pager, :comments_per_page, :pager, :comments_input
+      attr_writer :lang_dir, :components, :css_classes, :comments_pager, :comments_per_page, :pager, :comments_input
+
+      def lang_dir(...)
+        @lang_dir || namespace.lang_dir(...)
+      end
 
       def components
         namespace.components.deep_merge(@components || {})

diff --git a/lib/adminterface/extensions/namespace_settings.rb b/lib/adminterface/extensions/namespace_settings.rb
@@ -6,6 +6,9 @@ module NamespaceSettings
       CONFIGS = Adminterface::Configs::DEFAULTS
 
       included do
+        # Language direction ltr or rtl
+        register :lang_dir, "ltr", :string_symbol_or_proc
+
         # The default component configs
         register :components, CONFIGS[:components]
 

diff --git a/lib/adminterface/extensions/views/pages/base.rb b/lib/adminterface/extensions/views/pages/base.rb
@@ -5,6 +5,8 @@ module Pages
         module Base
           def build(*args)
             super
+            set_attribute :dir,
+              render_or_call_method_or_proc_on(self, active_admin_config.lang_dir(self))
             build_breakpoint_helpers
             build_meta_tags_for_js
           end

diff --git a/test/dummy/config/initializers/active_admin.rb b/test/dummy/config/initializers/active_admin.rb
@@ -1,4 +1,7 @@
 ActiveAdmin.setup do |config|
+  # == Language Dir
+  config.lang_dir = proc { !!params[:rtl] ? "rtl" : "ltr" }
+
   # == Site Title
   #
   # Set the title that is displayed on the main layout

diff --git a/test/dummy/config/webpack/environment.js b/test/dummy/config/webpack/environment.js
@@ -1,5 +1,17 @@
 const { environment } = require('@rails/webpacker')
 
+// @TODO: hotfix for: ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema
+// https://github.com/rails/webpacker/issues/2784#issuecomment-730636299
+environment.loaders.keys().forEach(loaderName => {
+  const loader = environment.loaders.get(loaderName)
+  loader.use.forEach(loaderConfig => {
+    if (loaderConfig.options && loaderConfig.options.config) {
+      loaderConfig.options.postcssOptions = loaderConfig.options.config
+      delete loaderConfig.options.config
+    }
+  })
+})
+
 environment.loaders.get('sass').use.splice(-1, 0, {
   loader: 'resolve-url-loader'
 })

diff --git a/test/dummy/package.json b/test/dummy/package.json
@@ -8,7 +8,11 @@
   },
   "dependencies": {
     "@rails/actiontext": "^6.1.3-2",
-    "@rails/webpacker": "5.4.0",
+    "@rails/webpacker": "5.4.3",
+    "postcss": "^8.3.11",
+    "postcss-loader": "4.2.0",
+    "postcss-rtlcss": "^3.4.1",
+    "rtlcss": "^3.4.0",
     "trix": "^1.2.0",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12"

diff --git a/test/dummy/postcss.config.js b/test/dummy/postcss.config.js
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: [
+    require('postcss-rtlcss'),
+    // require('rtlcss'),
     require('postcss-import'),
     require('postcss-flexbugs-fixes'),
     require('postcss-preset-env')({