Fix All of RTL (openemr#3342) (openemr#3473)

* First Phase of Portal RTL Support Fixes * Travis Fix * (BLEEDING) Second Phase of RTL Fixes * First Phase of Portal RTL Support Fixes * Travis Fix * (BLEEDING) Second Phase of RTL Fixes * Fix Travis & Fix php issue * Huge Set of Changes to RTL * Huge RTL Fix -- Now ready for review * First Phase of Portal RTL Support Fixes * Travis Fix * (BLEEDING) Second Phase of RTL Fixes * First Phase of Portal RTL Support Fixes * Travis Fix * (BLEEDING) Second Phase of RTL Fixes * Fix Travis & Fix php issue * Huge Set of Changes to RTL * Merge with Master * 2nd Merge with Master * Syntax fixes and BS4 upgrades * Quality Improvements * Bug Fixes
DiscoverAndChange · May 9, 2020 · 9554b7b · 9554b7b
1 parent 50ccd9b
commit 9554b7b
Show file tree

Hide file tree

Showing 67 changed files with 2,027 additions and 2,257 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -13,6 +13,7 @@
  "at-rule-no-unknown": null,
  "declaration-empty-line-before": null,
  "at-rule-empty-line-before": null,
- "scss/at-mixin-pattern": null
+ "scss/at-mixin-pattern": null,
+ "max-nesting-depth": null
  }
 }
diff --git a/config/config.yaml b/config/config.yaml
@@ -26,8 +26,9 @@ assets:
  link: css/bootstrap.min.css
  autoload: true
  allowNoLoad: true
+ # RTL only for no_main-theme which is rare
  rtl:
- basePath: '%assets_static_relative%/bootstrap-v4-rtl/dist/'
+ basePath: '%assets_static_relative%/bootstrap-rtl/dist/'
  link: css/bootstrap-rtl.min.css
  # keep utility and javaScript translations near top of load order.
  i18next:
@@ -55,9 +56,15 @@ assets:
  patientportal-base:
  basePath: '%webroot%/public/themes/'
  link: patientportal-base.css
+ rtl:
+ basePath: '%webroot%/public/themes/'
+ link: rtl_patientportal-base.css
  patientportal-register:
  basePath: '%webroot%/public/themes/'
  link: patientportal-register.css
+ rtl:
+ basePath: '%webroot%/public/themes/'
+ link: rtl_patientportal-register.css
  patientportal-style:
  basePath: '%webroot%/public/themes/'
  link: patientportal-style.css

diff --git a/gulpfile.js b/gulpfile.js
@@ -16,6 +16,7 @@ const rename = require('gulp-rename');
 const sass = require('gulp-sass');
 const sourcemaps = require('gulp-sourcemaps');
 const gulp_watch = require('gulp-watch');
+const injector = require('gulp-inject-string');
 
 // package.json
 const packages = require('./package.json');
@@ -32,7 +33,8 @@ let config = {
  // Source file locations
  src: {
  styles: {
- style_portal: 'interface/themes/patientportal-style.scss',
+ style_portal: 'interface/themes/patientportal-*.scss',
+ style_tabs: 'interface/themes/tabs_style_*.scss',
  style_uni: 'interface/themes/oe-styles/style_*.scss',
  style_color: 'interface/themes/colors/*.scss',
  directional: 'interface/themes/directional.scss'
@@ -70,6 +72,7 @@ const autoGeneratedHeader = `
 // standard themes css compilation
 function styles_style_portal() {
  return gulp.src(config.src.styles.style_portal)
+ .pipe(injector.replace('// bs4import', '@import "../../public/assets/bootstrap/scss/bootstrap";'))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(postcss([ prefix() ]))
@@ -81,9 +84,10 @@ function styles_style_portal() {
 // standard themes css compilation
 function styles_style_uni() {
  return gulp.src(config.src.styles.style_uni)
+ .pipe(injector.replace('// bs4import', '@import "../../../public/assets/bootstrap/scss/bootstrap";'))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
- .pipe(postcss([ prefix() ]))
+ .pipe(postcss([ prefix() ]))
  .pipe(gap.prependText(autoGeneratedHeader))
  .pipe(gulpif(!config.dev, csso()))
  .pipe(gulpif(!config.dev, sourcemaps.write()))
@@ -93,9 +97,22 @@ function styles_style_uni() {
 // color themes css compilation
 function styles_style_color() {
  return gulp.src(config.src.styles.style_color)
+ .pipe(injector.replace('// bs4import', '@import "../../../public/assets/bootstrap/scss/bootstrap";'))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
- .pipe(postcss([ prefix() ]))
+ .pipe(postcss([ prefix() ]))
+ .pipe(gap.prependText(autoGeneratedHeader))
+ .pipe(gulpif(!config.dev, csso()))
+ .pipe(gulpif(!config.dev, sourcemaps.write()))
+ .pipe(gulp.dest(config.dest.themes));
+}
+
+// Tabs CSS compilation
+function styles_style_tabs() {
+ return gulp.src(config.src.styles.style_tabs)
+ .pipe(sourcemaps.init())
+ .pipe(sass().on('error', sass.logError))
+ .pipe(postcss([ prefix() ]))
  .pipe(gap.prependText(autoGeneratedHeader))
  .pipe(gulpif(!config.dev, csso()))
  .pipe(gulpif(!config.dev, sourcemaps.write()))
@@ -106,10 +123,11 @@ function styles_style_color() {
 function rtl_style_portal() {
  return gulp.src(config.src.styles.style_portal)
  .pipe(gap.prependText('$dir: rtl;\n@import "rtl";\n@import "directional";\n')) // watch out for this relative path!
- .pipe(gap.appendText('@include if-rtl { @include rtl_style; }\n'))
+ .pipe(gap.appendText('@include if-rtl { @include rtl_style; @include portal_style; }\n'))
+ .pipe(injector.replace('// bs4import', '@import "oemr-rtl";'))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
- .pipe(postcss([ prefix() ]))
+ .pipe(postcss([ prefix() ]))
  .pipe(gap.prependText(autoGeneratedHeader))
  .pipe(gulpif(!config.dev, csso()))
  .pipe(gulpif(!config.dev, sourcemaps.write()))
@@ -122,9 +140,10 @@ function rtl_style_uni() {
  return gulp.src(config.src.styles.style_uni)
  .pipe(gap.prependText('$dir: rtl;\n@import "../rtl";\n')) // watch out for this relative path!
  .pipe(gap.appendText('@include if-rtl { @include rtl_style; #bigCal { border-right: 1px solid $black !important; } }\n'))
+ .pipe(injector.replace('// bs4import', '@import "../oemr-rtl";'))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
- .pipe(postcss([ prefix() ]))
+ .pipe(postcss([ prefix() ]))
  .pipe(gap.prependText(autoGeneratedHeader))
  .pipe(gulpif(!config.dev, csso()))
  .pipe(gulpif(!config.dev, sourcemaps.write()))
@@ -137,6 +156,7 @@ function rtl_style_color() {
  return gulp.src(config.src.styles.style_color)
  .pipe(gap.prependText('$dir: rtl;\n@import "../rtl";\n')) // watch out for this relative path!
  .pipe(gap.appendText('@include if-rtl { @include rtl_style; #bigCal { border-right: 1px solid $black !important; } }\n'))
+ .pipe(injector.replace('// bs4import', '@import "../oemr-rtl";'))
  .pipe(sourcemaps.init())
  .pipe(sass().on('error', sass.logError))
  .pipe(postcss([ prefix() ]))
@@ -147,8 +167,22 @@ function rtl_style_color() {
  .pipe(gulp.dest(config.dest.themes));
 }
 
+// rtl standard themes css compilation
+function rtl_style_tabs() {
+ return gulp.src(config.src.styles.style_tabs)
+ .pipe(gap.prependText('$dir: rtl;\n@import "rtl";\n')) // watch out for this relative path!
+ .pipe(sourcemaps.init())
+ .pipe(sass().on('error', sass.logError))
+ .pipe(postcss([ prefix() ]))
+ .pipe(gap.prependText(autoGeneratedHeader))
+ .pipe(gulpif(!config.dev, csso()))
+ .pipe(gulpif(!config.dev, sourcemaps.write()))
+ .pipe(rename({ prefix: "rtl_" }))
+ .pipe(gulp.dest(config.dest.themes));
+}
+
 // compile themes
-const styles = gulp.parallel(styles_style_color, styles_style_uni, styles_style_portal, rtl_style_color, rtl_style_uni, rtl_style_portal);
+const styles = gulp.parallel(styles_style_color, styles_style_uni, styles_style_portal, styles_style_tabs, rtl_style_color, rtl_style_uni, rtl_style_portal, rtl_style_tabs);
 
 // Copies (and distills, if possible) assets from node_modules to public/assets
 function install(done) {
@@ -171,7 +205,7 @@ function install(done) {
  .pipe(gulp.dest(config.dist.assets + key + '/decoders'));
  gulp.src('node_modules/' + key + '/locales/**/*')
  .pipe(gulp.dest(config.dist.assets + key + '/locales'));
- } else if (key == 'bootstrap' || key == 'bootstrap-v4-rtl' || key == 'bootswatch') {
+ } else if (key == 'bootstrap' || key == 'bootstrap-rtl' || key == 'bootswatch') {
  // bootstrap, bootstrap-v4-rtl, and bootswatch are special and need to copy dist and scss
  gulp.src('node_modules/' + key + '/dist/**/*')
  .pipe(gulp.dest(config.dist.assets + key + '/dist'));

diff --git a/interface/main/tabs/main.php b/interface/main/tabs/main.php
@@ -353,6 +353,11 @@ function setupI18n(lang_id) {
  $('#attendantData').slideToggle();
  $('#patient_caret').toggleClass('fa-caret-down').toggleClass('fa-caret-up');
  });
+ if($('body').css('direction') == "rtl") {
+ $('.dropdown-menu-right').each(function() {
+ $(this).removeClass('dropdown-menu-right');
+ });
+ }
  });
  $(function () {
  $('#logo_menu').focus();

diff --git a/interface/main/tabs/templates/user_data_template.php b/interface/main/tabs/templates/user_data_template.php
@@ -19,17 +19,17 @@
 <script type="text/html" id="user-data-template">
  <!-- ko with: user -->
  <div id="username" class="appMenu">
- <div class='menuLabel nav-item dropdown' id="username" title="<?php echo xla('Current user') ?>" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <div class='menuLabel dropdown' id="username" title="<?php echo xla('Current user') ?>" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <div><i class="fa fa-2x fa-user oe-show" aria-hidden="true" id="user_icon"></i></div>
  <span data-bind="text:fname"></span>
  <span data-bind="text:lname"></span>
- </div>
  <ul id="userdropdown" class="userfunctions menuEntries dropdown-menu dropdown-menu-right menu-shadow-ovr rounded-0 border-0">
  <li class="menuLabel" data-bind="click: editSettings"><?php echo xlt("Settings");?></li>
  <li class="menuLabel" data-bind="click: changePassword"><?php echo xlt("Change Password");?></li>
  <li class="menuLabel" data-bind="click: changeMFA"><?php echo xlt("MFA Management");?></li>
  <li class="menuLabel" data-bind="click: logout"><?php echo xlt("Logout");?></li>
  </ul>
+ </div>
  </div>
  <!-- /ko -->
 </script>