Allow the UI and Map to respond to locale changes

(re: #1598)

This means that the user can change `&locale=xx` in the url hash
(or locale can change some other way) and the UI and map will redraw.

Not all of the UI is able to react to this yet, so we'll leave #1598 open,
but the main components in the tree down through the sidebar, main map,
controls, attributions, footer can handle it.

This commit also cleans up a few rtl issues in the map footer.

css/80_app.css

@@ -574,7 +574,7 @@ button.add-area {
 
 button.save .count {
   display: inline-block;
-  min-width: 32px;
+  min-width: 20px;
   text-align: center;
 }
 
@@ -4527,10 +4527,11 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
 .map-footer-info > div:empty {
   display: none;
 }
-.ideditor[dir='ltr'] .map-footer-info > div:not(:last-child) {
+.map-footer-info > div:not(:last-child) {
   border-right: 1px solid rgba(255,255,255,.5);
 }
 .ideditor[dir='rtl'] .map-footer-info > div:not(:last-child) {
+  border-right: unset;
   border-left: 1px solid rgba(255,255,255,.5);
 }
 
@@ -4578,13 +4579,20 @@ li.issue-fix-item button:not(.actionable) .fix-icon {
 .issues-info a.chip.warnings-count {
   background: #df8500;
 }
-.ideditor[dir='ltr'] .issues-info a.chip:not(:last-child) {
+.issues-info > *:not(:last-child),
+.project-links > *:not(:last-child) {
   margin-right: 5px;
 }
-.ideditor[dir='rtl'] .issues-info a.chip:not(:last-child) {
+.ideditor[dir='rtl'] .issues-info > *:not(:last-child),
+.ideditor[dir='rtl'] .project-links > *:not(:last-child) {
+  margin-right: unset;
   margin-left: 5px;
 }
 
+.project-links .icon.bugnub {
+  color: #ff26db;
+}
+
 
 /* Notification Badges
 ------------------------------------------------------- */

css/80_app_fb.css

@@ -56,15 +56,6 @@ button.rapid-features.layer-off use {
   color: rgba(0,0,0,.4);
 }
 
-button.bugnub {
-  margin-right: 2px;
-}
-
-/* bug nub */
-.ideditor .icon.bugnub {
-    color: #ff26db;
-}
-
 /* rapid logo with wordmark embedded in text */
 .icon.pre-text.rapid {
     vertical-align: text-top;

modules/core/MapSystem.js

@@ -171,6 +171,12 @@ export class MapSystem extends AbstractSystem {
             gfx.immediateRedraw();
           });
 
+        l10n
+          .on('localechange', () => {
+            scene.dirtyScene();    // labeled features can be on any layer
+            gfx.immediateRedraw();
+          });
+
         context.on('modechange', gfx.immediateRedraw);
         imagery.on('imagerychange', gfx.immediateRedraw);
         photos.on('photochange', gfx.immediateRedraw);

modules/core/UiSystem.js

@@ -107,6 +107,13 @@ export class UiSystem extends AbstractSystem {
         this.PhotoViewer = this.Overmap.PhotoViewer;
         this.Spector = this.Overmap.Spector;
 
+        // Setup Event listeners..
+        l10n.on('localechange', () => {
+          if (this._started) {
+            this.render();
+          }
+        });
+
         const osm = context.services.osm;
         if (osm) {
           osm
@@ -259,21 +266,6 @@ export class UiSystem extends AbstractSystem {
   }
 
 
-
-// Removing for now, this will not work as written (it is a good idea though)
-// For it to work, it has to live in context, and all the core systems will need to have
-// their own restart method.  They would need to do things like reload the localizations
-// and then re-init all the things, including setting up the key bindings and strings
-//  // `restart()` will destroy and rebuild the entire Rapid interface,
-//  // for example to switch the locale while Rapid is running.
-//  restart() {
-//    context.keybinding().clear();
-//    this._startPromise = null;
-//    context.container().selectAll('*').remove();
-//    this.ensureLoaded();
-//  }
-
-
   /*
    * resize
    * Handler for resize events on the window.