change default lat/lon default and make the order of lat/lon its own …

…user setting in location widget (#2172) * change lat/lon default in location widget * make reverseLonLat a usersetting
maproulette · Nov 27, 2023 · 40b439d · 40b439d
1 parent 69402a0
commit 40b439d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 48 deletions.
diff --git a/src/components/Widgets/TaskLocationWidget/Messages.js b/src/components/Widgets/TaskLocationWidget/Messages.js
@@ -14,9 +14,9 @@ export default defineMessages({
     defaultMessage: "Location",
   },
 
-  showPrompt: {
-    id: "Widgets.TaskLocationWidget.show",
-    defaultMessage: "Show:",
+  switchPrompt: {
+    id: "Widgets.TaskLocationWidget.switch",
+    defaultMessage: "Switch to:",
   },
 
   lonLatLabel: {

diff --git a/src/components/Widgets/TaskLocationWidget/TaskLocationWidget.js b/src/components/Widgets/TaskLocationWidget/TaskLocationWidget.js
@@ -1,14 +1,12 @@
 import React, { Component } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { WidgetDataTarget, registerWidgetType }
-       from '../../../services/Widget/Widget'
+import { WidgetDataTarget, registerWidgetType } 
+from '../../../services/Widget/Widget'
 import MapPane from '../../EnhancedMap/MapPane/MapPane'
 import TaskLocationMap from '../../TaskPane/TaskLocationMap/TaskLocationMap'
 import PlaceDescription from '../../TaskPane/PlaceDescription/PlaceDescription'
 import TaskLatLon from '../../TaskPane/TaskLatLon/TaskLatLon'
 import QuickWidget from '../../QuickWidget/QuickWidget'
-import Dropdown from '../../Dropdown/Dropdown'
-import SvgSymbol from '../../SvgSymbol/SvgSymbol'
 import messages from './Messages'
 
 const descriptor = {
@@ -19,58 +17,39 @@ const descriptor = {
   defaultWidth: 3,
   minHeight: 6,
   defaultHeight: 8,
-  defaultConfiguration: {
-    reverseLonLat: false,
-  }
 }
 
 export default class TaskLocationWidget extends Component {
+  toggleReverseLonLat = (reverseLonLat) => {
+    this.props.updateUserAppSetting(this.props.user.id, {
+      'reverseLonLat': !reverseLonLat,
+    })
+  }
+
   render() {
+    const reverseLonLat = this.props.user?.properties?.mr3Frontend?.settings?.reverseLonLat || false
+
     return (
       <QuickWidget
         {...this.props}
         className="task-location-widget"
         widgetTitle={<FormattedMessage {...messages.title} />}
         noMain
-        rightHeaderControls = {
-          <Dropdown
-            className="mr-dropdown--right"
-            dropdownButton={dropdown => (
-              <button
-                onClick={dropdown.toggleDropdownVisible}
-                className="mr-flex mr-items-center mr-text-green-lighter"
-              >
-                <SvgSymbol
-                  sym="cog-icon"
-                  viewBox="0 0 20 20"
-                  className="mr-fill-green-lighter mr-w-4 mr-h-4"
-                />
+        rightHeaderControls={
+          <>
+            <span className="mr-mr-2">
+              <FormattedMessage {...messages.switchPrompt} />
+            </span>
+            {reverseLonLat ? (
+              <button className="mr-button mr-button--xsmall" onClick={() => this.toggleReverseLonLat(reverseLonLat)}>
+                {this.props.intl.formatMessage(messages.lonLatLabel)}
+              </button>
+            ) : (
+              <button className="mr-button mr-button--xsmall" onClick={() => this.toggleReverseLonLat(reverseLonLat)}>
+                {this.props.intl.formatMessage(messages.latLonLabel)}
               </button>
             )}
-            dropdownContent={dropdown => (
-              <React.Fragment>
-                <span className="mr-mr-2">
-                  <FormattedMessage {...messages.showPrompt} />
-                </span>
-
-                <select
-                  value={this.props.widgetConfiguration.reverseLonLat ? "latlon" : "lonlat"}
-                  onChange={e => {
-                    this.props.updateWidgetConfiguration({reverseLonLat: e.target.value === "latlon"})
-                    dropdown.closeDropdown()
-                  }}
-                  className="mr-select mr-p-1 mr-pr-4"
-                >
-                  <option key="lonlat" value="lonlat">
-                    {this.props.intl.formatMessage(messages.lonLatLabel)}
-                  </option>
-                  <option key="latlon" value="latlon">
-                    {this.props.intl.formatMessage(messages.latLonLabel)}
-                  </option>
-                </select>
-              </React.Fragment>
-            )}
-          />
+          </>
         }
       >
         <div
@@ -94,7 +73,7 @@ export default class TaskLocationWidget extends Component {
 
         <TaskLatLon
           task={this.props.task}
-          reverse={this.props.widgetConfiguration.reverseLonLat}
+          reverse={reverseLonLat}
           className="mr-text-xs mr-mt-3"
         />
       </QuickWidget>