From e85cd71af84edb8e604f813080ad0c83587c8e9e Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 14 Nov 2024 14:48:58 -0500 Subject: [PATCH] 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 | 6 ------ modules/ui/intro/rapid.js | 17 ++++++++++++++--- modules/ui/panes/help.js | 3 ++- modules/ui/rapid_feature_inspector.js | 4 +++- modules/ui/rapid_feature_toggle_dialog.js | 6 +++++- modules/ui/rapid_first_edit_dialog.js | 5 ++++- modules/ui/rapid_splash.js | 5 +++-- modules/ui/splash.js | 5 ++++- modules/ui/tools/UiRapidTool.js | 6 +++--- modules/ui/whats_new.js | 5 ++++- svg/rapid-sprite/graphics/logo-rapid-rtl.svg | 7 +++++++ .../graphics/logo-rapid-wordmark-rtl.svg | 6 ++++++ 12 files changed, 55 insertions(+), 20 deletions(-) create mode 100644 svg/rapid-sprite/graphics/logo-rapid-rtl.svg create mode 100644 svg/rapid-sprite/graphics/logo-rapid-wordmark-rtl.svg diff --git a/css/80_app_fb.css b/css/80_app_fb.css index debdeefa2..b0ff4d4f8 100644 --- a/css/80_app_fb.css +++ b/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; diff --git a/modules/ui/intro/rapid.js b/modules/ui/intro/rapid.js index 8cf67f403..0f6ee4893 100644 --- a/modules/ui/intro/rapid.js +++ b/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) }); diff --git a/modules/ui/panes/help.js b/modules/ui/panes/help.js index 25f8310c7..3f941b021 100644 --- a/modules/ui/panes/help.js +++ b/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: `` + rapidicon: `` }; diff --git a/modules/ui/rapid_feature_inspector.js b/modules/ui/rapid_feature_inspector.js index 72b59aa70..d0cee6b41 100644 --- a/modules/ui/rapid_feature_inspector.js +++ b/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') diff --git a/modules/ui/rapid_feature_toggle_dialog.js b/modules/ui/rapid_feature_toggle_dialog.js index 50415e59d..e793cd736 100644 --- a/modules/ui/rapid_feature_toggle_dialog.js +++ b/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') diff --git a/modules/ui/rapid_first_edit_dialog.js b/modules/ui/rapid_first_edit_dialog.js index dfddfc3ad..af0d96b1c 100644 --- a/modules/ui/rapid_first_edit_dialog.js +++ b/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') diff --git a/modules/ui/rapid_splash.js b/modules/ui/rapid_splash.js index da7c02999..1e06680fb 100644 --- a/modules/ui/rapid_splash.js +++ b/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') diff --git a/modules/ui/splash.js b/modules/ui/splash.js index faa7e8bb2..a1147a555 100644 --- a/modules/ui/splash.js +++ b/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'; diff --git a/modules/ui/tools/UiRapidTool.js b/modules/ui/tools/UiRapidTool.js index b863da944..49666ed2d 100644 --- a/modules/ui/tools/UiRapidTool.js +++ b/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,8 +115,7 @@ 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) @@ -123,7 +123,7 @@ export class UiRapidTool { $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 diff --git a/modules/ui/whats_new.js b/modules/ui/whats_new.js index b1f0e6c5c..bbd3888c7 100644 --- a/modules/ui/whats_new.js +++ b/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'; diff --git a/svg/rapid-sprite/graphics/logo-rapid-rtl.svg b/svg/rapid-sprite/graphics/logo-rapid-rtl.svg new file mode 100644 index 000000000..aaf71fe12 --- /dev/null +++ b/svg/rapid-sprite/graphics/logo-rapid-rtl.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/svg/rapid-sprite/graphics/logo-rapid-wordmark-rtl.svg b/svg/rapid-sprite/graphics/logo-rapid-wordmark-rtl.svg new file mode 100644 index 000000000..e8702d862 --- /dev/null +++ b/svg/rapid-sprite/graphics/logo-rapid-wordmark-rtl.svg @@ -0,0 +1,6 @@ + + + + + +