Allow the Rapid button to go narrow

(closes #1500) This also introduces a `uichange` event emitted from our UiSystem, which allows other parts of the code to watch for changes like this. Using this event to tell the Rapid button to rerender, also using this in the photo viewer code (it was previously called directly on resize)
facebook · Aug 1, 2024 · 853c3bd · 853c3bd
1 parent fd4bd27
commit 853c3bd
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 59 deletions.
diff --git a/css/80_app_fb.css b/css/80_app_fb.css
@@ -1,63 +1,68 @@
 /* possibly existed before and was removed? */
 svg.icon.icon-30 {
-    width: 30px;
-    height: 30px;
+  width: 30px;
+  height: 30px;
 }
 
 svg.logo-rapid,
 .icon.rapid {
-    fill: #333;
-    color: #da26d3;
+  fill: #333;
+  color: #da26d3;
 }
 
 svg.logo-rapid.dark,
 .dark .icon.rapid,
 .icon.rapid.dark {
-    fill: #eee;
-    color: #da26d3;
+  fill: #eee;
+  color: #da26d3;
 }
 
 /* beta badge */
 .beta {
-    display: inline-block;
-    text-align: center;
-    font-weight: bold;
-    color: #eee;
-    margin: 0 10px;
-    width: 1.8em;
-    height: 1.8em;
-    border: 1px solid #909;
-    border-radius: 5px;
-    background: rgb(203,16,237);
-    background: linear-gradient(0deg, rgba(108,1,167,1) 6%, rgba(203,16,237,1) 50%, rgb(229, 140, 253) 90%, rgb(201, 42, 251) 100%);
-    cursor: default;
+  display: inline-block;
+  text-align: center;
+  font-weight: bold;
+  color: #eee;
+  margin: 0 10px;
+  width: 1.8em;
+  height: 1.8em;
+  border: 1px solid #909;
+  border-radius: 5px;
+  background: rgb(203,16,237);
+  background: linear-gradient(0deg, rgba(108,1,167,1) 6%, rgba(203,16,237,1) 50%, rgb(229, 140, 253) 90%, rgb(201, 42, 251) 100%);
+  cursor: default;
 }
 .beta:before {
-    content: '\03b2';  /* β */
+  content: '\03b2';  /* β */
 }
 
 
 /* Toolbar buttons */
 button.rapid-features svg.logo-rapid {
-    width: 60px;
-    height: 16px;
+  width: 60px;
+  height: 16px;
 }
+.top-toolbar.narrow button.rapid-features svg.logo-rapid {
+  width: 22px;
+  height: 22px;
+}
+
 button.rapid-poweruser-features .beta {
-    font-size: 1.2em;
-    margin: 0;
+  font-size: 1.2em;
+  margin: 0;
 }
 button.rapid-features.layer-off use {
-    fill: rgba(0,0,0,.4);
-    color: rgba(0,0,0,.4);
+  fill: rgba(0,0,0,.4);
+  color: rgba(0,0,0,.4);
 }
 
 .fb-road-license a {
-    padding: 2px 4px 4px 4px;
-    border-radius: 2px;
+  padding: 2px 4px 4px 4px;
+  border-radius: 2px;
 }
 
 button.bugnub {
-    margin-right: 2px;
+  margin-right: 2px;
 }
 
 /* bug nub */

diff --git a/modules/core/UiSystem.js b/modules/core/UiSystem.js
@@ -20,7 +20,10 @@ import {
 
 
 /**
- * `UiSystem` maintains the user interface
+ * `UiSystem` maintains the user interface.
+ *
+ * Events available:
+ *   `uichange`  Fires on any change in the ui (such as resize)
  */
 export class UiSystem extends AbstractSystem {
 
@@ -523,12 +526,13 @@ const overscan = 50;
 dims = vecAdd(dims, [overscan * 2, overscan * 2]);
 
     viewport.dimensions = dims;
-    this.photoviewer.onMapResize();
 
     // check if header or footer have overflowed
     this.checkOverflow('.top-toolbar');
     this.checkOverflow('.map-footer-bar');
 
+    this.emit('uichange');
+
 // this was for the restrictions editor?
 // or any other component that needs to know when resizing is happening
 //    // Use outdated code so it works on Explorer

diff --git a/modules/ui/photo_viewer.js b/modules/ui/photo_viewer.js
@@ -7,7 +7,8 @@ import { utilGetDimensions, utilRebind } from '../util/index.js';
 
 
 export function uiPhotoViewer(context) {
-  let dispatch = d3_dispatch('resize');
+  const ui = context.systems.ui;
+  const dispatch = d3_dispatch('resize');
 
 
   function photoviewer(selection) {
@@ -23,6 +24,7 @@ export function uiPhotoViewer(context) {
       .append('div')
       .call(uiIcon('#rapid-icon-close'));
 
+
     function preventDefault(d3_event) {
       d3_event.preventDefault();
     }
@@ -110,7 +112,7 @@ export function uiPhotoViewer(context) {
   }
 
 
-  photoviewer.onMapResize = function() {
+  function _onMapResize() {
     const photoviewer = context.container().select('.photoviewer');
     const content = context.container().select('.main-content');
     const mapDimensions = utilGetDimensions(content, true);
@@ -129,7 +131,9 @@ export function uiPhotoViewer(context) {
 
       dispatch.call('resize', photoviewer, setPhotoDimensions);
     }
-  };
+  }
+
+  ui.on('uichange', _onMapResize);
 
   return utilRebind(photoviewer, dispatch, 'on');
 }
diff --git a/modules/ui/tools/rapid_features.js b/modules/ui/tools/rapid_features.js
@@ -9,16 +9,19 @@ import { uiTooltip } from '../tooltip.js';
 export function uiToolRapidFeatures(context) {
   const l10n = context.systems.l10n;
   const map = context.systems.map;
+  const ui = context.systems.ui;
   const urlhash = context.systems.urlhash;
 
   const toggleKeyDispatcher = d3_dispatch('ai_feature_toggle');
   const rapidFeaturesToggleKey = uiCmd('⇧' + l10n.t('map_data.layers.rapid.key'));
-  const datasetDialog = uiRapidFeatureToggleDialog(context, rapidFeaturesToggleKey, toggleKeyDispatcher);
-  const powerUserDialog = uiRapidPowerUserFeaturesDialog(context);
 
-  let _wrap;
+  // Create child components
+  const DatasetDialog = uiRapidFeatureToggleDialog(context, rapidFeaturesToggleKey, toggleKeyDispatcher);
+  const PowerUserDialog = uiRapidPowerUserFeaturesDialog(context);
 
-  let tool = {
+  let $wrap = null;
+
+  const tool = {
     id: 'rapid_features',
     label: l10n.t('toolbar.rapid_features')
   };
@@ -38,28 +41,29 @@ export function uiToolRapidFeatures(context) {
 
 
   function showFeatureToggleDialog() {
-    context.container().call(datasetDialog);
+    context.container().call(DatasetDialog);
   }
 
 
   function showPowerUserFeaturesDialog() {
-    context.container().call(powerUserDialog);
+    context.container().call(PowerUserDialog);
   }
 
 
-  function update() {
-    if (!_wrap) return;
+  function render() {
+    if (!$wrap) return;  // called too early?
 
     const isPowerUser = urlhash.getParam('poweruser') === 'true';
+    const isNarrow = context.container().selectAll('.top-toolbar.narrow').size();
 
-    _wrap
+    $wrap
       .attr('class', isPowerUser ? 'joined' : null);
 
-    let rapidButton = _wrap.selectAll('.rapid-features')
+    let $rapidButton = $wrap.selectAll('.rapid-features')
       .data([0]);
 
     // enter
-    let rapidButtonEnter = rapidButton.enter()
+    let $$rapidButton = $rapidButton.enter()
       .append('button')
       .attr('class', 'bar-button rapid-features')
       .attr('tabindex', -1)
@@ -70,24 +74,28 @@ export function uiToolRapidFeatures(context) {
         .shortcut(rapidFeaturesToggleKey)
       );
 
-    rapidButtonEnter
+    $$rapidButton
       .append('svg')
       .attr('class', 'logo-rapid')
       .append('use')
       .attr('xlink:href', '#rapid-logo-rapid-wordmark');
 
     // update
-    rapidButton.merge(rapidButtonEnter)
+    $rapidButton = $rapidButton.merge($$rapidButton)
       .classed('layer-off', !layerEnabled());
 
+    $rapidButton
+      .selectAll('.logo-rapid use')
+      .attr('xlink:href',  isNarrow ? '#rapid-logo-rapid' : '#rapid-logo-rapid-wordmark' );
+
 
-    let powerUserButton = _wrap.selectAll('.rapid-poweruser-features')
+    let $powerUserButton = $wrap.selectAll('.rapid-poweruser-features')
       .data(isPowerUser ? [0] : []);
 
-    powerUserButton.exit()
+    $powerUserButton.exit()
       .remove();
 
-    powerUserButton.enter()
+    $powerUserButton.enter()
       .append('button')
       .attr('class', 'bar-button rapid-poweruser-features')
       .attr('tabindex', -1)
@@ -102,7 +110,7 @@ export function uiToolRapidFeatures(context) {
 
 
 
-  tool.install = (selection) => {
+  tool.install = ($parent) => {
     context.keybinding().off(rapidFeaturesToggleKey);
     context.keybinding()
       .on(rapidFeaturesToggleKey, d3_event => {
@@ -111,24 +119,26 @@ export function uiToolRapidFeatures(context) {
         toggleFeatures();
       });
 
-    urlhash.on('hashchange', update);
-    map.scene.on('layerchange', update);
-    context.on('modechange', update);
+    ui.on('uichange', render);
+    urlhash.on('hashchange', render);
+    map.scene.on('layerchange', render);
+    context.on('modechange', render);
 
-    _wrap = selection
+    $wrap = $parent
       .append('div')
       .style('display', 'flex');
 
-    update();
+    render();
   };
 
 
   tool.uninstall = function () {
     context.keybinding().off(rapidFeaturesToggleKey);
-    urlhash.off('hashchange', update);
-    map.scene.off('layerchange', update);
-    context.off('modechange', update);
-    _wrap = null;
+    ui.off('uichange', render);
+    urlhash.off('hashchange', render);
+    map.scene.off('layerchange', render);
+    context.off('modechange', render);
+    $wrap = null;
   };
 
   return tool;