Reverse Rapid logo for RTL

(closes #1488)

Also - checkbox checks should not reverse in RTL, so remove that css rule

css/80_app_fb.css

@@ -687,15 +687,9 @@ hide this one and style something on top of it.  */
     height: 12px;
     width: 6px;
 }
-.ideditor[dir='rtl'] .rapid-checkbox-label input:checked ~ .rapid-checkbox-custom::after {
-    margin: 6px 6px;
-    height: 6px;
-    width: 12px;
-}
 
 
 /* Rapid Power User features */
-
 .rapid-stack.poweruser .modal-section-heading {
     display: flex;
     flex-flow: column;

modules/ui/intro/rapid.js

@@ -69,9 +69,13 @@ export function uiIntroRapid(context, curtain) {
       .setMapParamsAsync(loc, 18.5, 0, msec)
       .then(() => new Promise((resolve, reject) => {
         _rejectStep = reject;
+
+        const rtl = l10n.isRTL() ? '-rtl' : '';
         curtain.reveal({
           revealSelector: '.intro-nav-wrap .chapter-rapid',
-          tipHtml: helpHtml(context, 'intro.rapid.start', { rapid: icon('#rapid-logo-rapid-wordmark', 'pre-text rapid') }),
+          tipHtml: helpHtml(context, 'intro.rapid.start', {
+            rapid: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'pre-text rapid')
+          }),
           buttonText: l10n.t('intro.ok'),
           buttonCallback: () => resolve(showHideRoadsAsync)
         });
@@ -84,9 +88,13 @@ export function uiIntroRapid(context, curtain) {
   function showHideRoadsAsync() {
     return new Promise((resolve, reject) => {
       _rejectStep = reject;
+
+      const rtl = l10n.isRTL() ? '-rtl' : '';
       curtain.reveal({
         revealSelector: 'button.rapid-features',
-        tipHtml: helpHtml(context, 'intro.rapid.ai_roads', { rapid: icon('#rapid-logo-rapid-wordmark', 'pre-text rapid') }),
+        tipHtml: helpHtml(context, 'intro.rapid.ai_roads', {
+          rapid: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'pre-text rapid')
+        }),
         buttonText: l10n.t('intro.ok'),
         buttonCallback: () => resolve(selectRoadAsync)
       });
@@ -162,9 +170,12 @@ export function uiIntroRapid(context, curtain) {
 
         _onModeChange = reject;   // disallow mode change
 
+        const rtl = l10n.isRTL() ? '-rtl' : '';
         curtain.reveal({
           revealExtent: tulipLaneExtent,
-          tipHtml: helpHtml(context, 'intro.rapid.add_road_not_saved_yet', { rapid: icon('#rapid-logo-rapid-wordmark', 'pre-text rapid') }),
+          tipHtml: helpHtml(context, 'intro.rapid.add_road_not_saved_yet', {
+            rapid: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'pre-text rapid')
+          }),
           buttonText: l10n.t('intro.ok'),
           buttonCallback: () => resolve(showIssuesButtonAsync)
         });

modules/ui/panes/help.js

@@ -260,9 +260,10 @@ export function uiPaneHelp(context) {
   };
 
   // common replacements that we may use anywhere in the help text
+  const rtl = l10n.isRTL() ? '-rtl' : '';
   const replacements = {
     version: `**${context.version}**`,
-    rapidicon: `<svg class="icon pre-text rapid"><use xlink:href="#rapid-logo-rapid-wordmark"></use></svg>`
+    rapidicon: `<svg class="icon pre-text rapid"><use xlink:href="#rapid-logo-rapid-wordmark${rtl}"></use></svg>`
   };
 
 

modules/ui/rapid_feature_inspector.js

@@ -172,6 +172,8 @@ export function uiRapidFeatureInspector(context, keybinding) {
 
 
   function rapidInspector(selection) {
+    const rtl = l10n.isRTL() ? '-rtl' : '';
+
     let inspector = selection.selectAll('.rapid-inspector')
       .data([0]);
 
@@ -197,7 +199,7 @@ export function uiRapidFeatureInspector(context, keybinding) {
       // .attr('class', 'logo-rapid dark')
       .attr('class', 'logo-rapid')
       .append('use')
-      .attr('xlink:href', '#rapid-logo-rapid-wordmark');
+      .attr('xlink:href', `#rapid-logo-rapid-wordmark${rtl}`);
 
     headerEnter
       .append('button')

modules/ui/rapid_feature_toggle_dialog.js

@@ -110,6 +110,8 @@ export function uiRapidFeatureToggleDialog(context, AIFeatureToggleKey, featureT
     const rapidLayer = context.scene().layers.get('rapid');
     if (!rapidLayer) return;
 
+    const rtl = l10n.isRTL() ? '-rtl' : '';
+
     /* Toggle All */
     let toggleAll = selection.selectAll('.rapid-toggle-all')
       .data([0]);
@@ -127,7 +129,9 @@ export function uiRapidFeatureToggleDialog(context, AIFeatureToggleKey, featureT
     toggleAllTextEnter
       .append('div')
       .attr('class', 'rapid-feature-label')
-      .html(l10n.t('rapid_feature_toggle.toggle_all', { rapidicon: icon('#rapid-logo-rapid-wordmark', 'logo-rapid') }));
+      .html(l10n.t('rapid_feature_toggle.toggle_all', {
+        rapidicon: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'logo-rapid')
+      }));
 
     toggleAllTextEnter
       .append('span')

modules/ui/rapid_first_edit_dialog.js

@@ -8,6 +8,7 @@ export function uiRapidFirstEditDialog(context) {
 
   return function(selection) {
     const modal = uiModal(selection);
+    const rtl = l10n.isRTL() ? '-rtl' : '';
 
     modal.select('.modal')
       .attr('class', 'modal rapid-modal');
@@ -18,7 +19,9 @@ export function uiRapidFirstEditDialog(context) {
       .append('div')
       .attr('class', 'modal-section')
       .append('h3')
-      .html(l10n.t('rapid_first_edit.nice', { rapidicon: icon('#rapid-logo-rapid-wordmark', 'logo-rapid') }));
+      .html(l10n.t('rapid_first_edit.nice', {
+        rapidicon: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'logo-rapid')
+      }));
 
     content
       .append('div')

modules/ui/rapid_splash.js

@@ -17,6 +17,7 @@ export function uiRapidSplash(context) {
     storage.setItem('sawRapidSplash', true);
 
     const modalSelection = uiModal(selection);
+    const rtl = l10n.isRTL() ? '-rtl' : '';
 
     modalSelection.select('.modal')
       .attr('class', 'modal rapid-modal modal-splash');   // Rapid styling
@@ -33,7 +34,7 @@ export function uiRapidSplash(context) {
       .attr('class','modal-section')
       .append('p')
       .html(l10n.t('rapid_splash.text', {
-        rapidicon: icon('#rapid-logo-rapid-wordmark', 'logo-rapid'),
+        rapidicon: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'logo-rapid'),
         walkthrough: icon('#rapid-logo-walkthrough', 'logo-walkthrough'),
         edit: icon('#rapid-logo-features', 'logo-features')
       }));
@@ -72,7 +73,7 @@ export function uiRapidSplash(context) {
       .append('svg')
       .attr('class', 'logo logo-rapid')
       .append('use')
-      .attr('xlink:href', '#rapid-logo-rapid-wordmark');
+      .attr('xlink:href', `#rapid-logo-rapid-wordmark${rtl}`);
 
     rapidWalkthrough
       .append('div')

modules/ui/splash.js

@@ -20,6 +20,7 @@ export function uiSplash(context) {
 
 
   return function render(selection) {
+    const rtl = l10n.isRTL() ? '-rtl' : '';
     storage.setItem('sawPrivacyVersion', context.privacyVersion);
 
     // prefetch intro graph data now, while user is looking at the splash screen
@@ -34,7 +35,9 @@ export function uiSplash(context) {
       .append('div')
       .attr('class', 'modal-section')
       .append('h2')
-      .html(l10n.t('splash.welcome', { rapidicon: icon('#rapid-logo-rapid-wordmark', 'pre-text rapid') }));
+      .html(l10n.t('splash.welcome', {
+        rapidicon: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'pre-text rapid')
+      }));
 
 
     let markdown = l10n.t('splash.text', { version: context.version }) + '\n\n';

modules/ui/tools/UiRapidTool.js

@@ -74,6 +74,7 @@ export class UiRapidTool {
 
     const isPowerUser = urlhash.getParam('poweruser') === 'true';
     const isNarrow = context.container().selectAll('.map-toolbar.narrow').size();
+    const rtl = l10n.isRTL() ? '-rtl' : '';
 
     // Localize tooltips
     this.RapidTooltip
@@ -114,16 +115,15 @@ export class UiRapidTool {
     $$rapidButton
       .append('svg')
       .attr('class', 'logo-rapid')
-      .append('use')
-      .attr('xlink:href', '#rapid-logo-rapid-wordmark');
+      .append('use');
 
     // update
     $rapidButton = $rapidButton.merge($$rapidButton)
       .classed('layer-off', !this.isLayerEnabled());
 
     $rapidButton
       .selectAll('.logo-rapid use')
-      .attr('xlink:href',  isNarrow ? '#rapid-logo-rapid' : '#rapid-logo-rapid-wordmark' );
+      .attr('xlink:href',  isNarrow ? `#rapid-logo-rapid${rtl}` : `#rapid-logo-rapid-wordmark${rtl}` );
 
 
     // Poweruser Button

modules/ui/whats_new.js

@@ -18,6 +18,7 @@ export function uiWhatsNew(context) {
 
   return function render(selection) {
     const $modal = uiModal(selection);
+    const rtl = l10n.isRTL() ? '-rtl' : '';
 
     $modal.select('.modal')
       .attr('class', 'modal rapid-modal modal-whatsnew');
@@ -27,7 +28,9 @@ export function uiWhatsNew(context) {
       .append('div')
       .attr('class', 'modal-section')
       .append('h2')
-      .html(l10n.t('whats_new.welcome_v24', { rapidicon: icon('#rapid-logo-rapid-wordmark', 'pre-text rapid') }));
+      .html(l10n.t('whats_new.welcome_v24', {
+        rapidicon: icon(`#rapid-logo-rapid-wordmark${rtl}`, 'pre-text rapid')
+      }));
 
 
     const markdown = l10n.t('whats_new.text_v24') + '\n\n';