make tasks in task properties widget collapsible (#2502)

* make tasks in task properties widget collapsible

* simplify dropdown logic and improve styles

src/components/EnhancedMap/PropertyList/PropertyList.jsx

@@ -59,16 +59,16 @@ const PropertyList = props => {
 
     return (
       <tr key={key} className="property">
-        <td className={classNames("name", {"mr-border-none mr-links-green-lighter mr-pr-3": darkMode})}>{link}</td>
-        <td className={classNames("value", {"mr-border-none mr-pb-1": darkMode})}>{value}</td>
+        <td className={classNames("name", {"mr-border-none mr-break-words mr-links-green-lighter mr-pr-3": darkMode})}>{link}</td>
+        <td className={classNames("value", {"mr-border-none mr-break-words mr-pb-1": darkMode})}>{value}</td>
       </tr>
     )
   }))
 
   return (
     <div className="feature-properties mr-ml-4" style={{ maxHeight: "300px", overflow: "auto" }}>
       {!props.hideHeader && header}
-      <table className={classNames("property-list", {"mr-bg-transparent mr-text-white": darkMode, "table": !darkMode})}>
+      <table className={classNames("property-list", {"mr-bg-transparent mr-text-white": darkMode, "table": !darkMode})} style={{ width: "100%", tableLayout: "fixed" }}>
         <tbody>{rows}</tbody>
       </table>
     </div>

src/components/Widgets/TaskPropertiesWidget/Messages.js

@@ -18,4 +18,14 @@ export default defineMessages({
     id: "Widgets.TaskPropertiesWidget.task.label",
     defaultMessage: "Task {taskId}",
   },
+
+  expandAll: {
+    id: "Widgets.TaskPropertiesWidget.expandAll",
+    defaultMessage: "Expand All",
+  },
+
+  collapseAll: {
+    id: "Widgets.TaskPropertiesWidget.collapseAll",
+    defaultMessage: "Collapse All",
+  },
 })

src/components/Widgets/TaskPropertiesWidget/TaskPropertiesWidget.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react'
+import React, { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 import _get from 'lodash/get'
 import _map from 'lodash/map'
@@ -8,6 +8,7 @@ import PropertyList from '../../EnhancedMap/PropertyList/PropertyList'
 import AsMappableTask from '../../../interactions/Task/AsMappableTask'
 import QuickWidget from '../../QuickWidget/QuickWidget'
 import messages from './Messages'
+import './TaskPropertiesWidget.scss'
 
 const descriptor = {
   widgetKey: 'TaskPropertiesWidget',
@@ -19,45 +20,59 @@ const descriptor = {
   defaultHeight: 6,
 }
 
-export default class TaskPropertiesWidget extends Component {
-  render() {
-    const taskList = _get(this.props.taskBundle, 'tasks') || [this.props.task]
-    const propertyLists = _map(taskList, (task) => {
-      const featurePropertiesList = AsMappableTask(task).osmFeatureProperties(this.props.osmElements)
-
-      return (
-        <div key={task.id} className="mr-mb-6">
-          <div className="mr-text-yellow">
-            <FormattedMessage {...messages.taskLabel} values={{taskId: task.id}}/>
-          </div>
-          {
-            featurePropertiesList.map((feature, index) => {
-              return (
-                <div key={index}>
-                  <div className="mr-text-yellow mr-ml-2">
-                    {feature.properties?.id || feature.geometry?.type}
-                  </div>
-                  <PropertyList featureProperties={feature.properties} hideHeader
-                    lightMode={false} {...this.props} />
-                </div>
-              )
-            })
-          }
-        </div>
-      )
-    })
+const TaskPropertiesWidget = (props) => {
+  const taskList = _get(props.taskBundle, 'tasks') || [props.task];
+  const [collapsed, setCollapsed] = useState();
 
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  }
+
+  const propertyLists = _map(taskList, (task) => {
+    const featurePropertiesList = AsMappableTask(task).osmFeatureProperties(props.osmElements);
 
     return (
-      <QuickWidget
-        {...this.props}
-        className="task-properties-widget"
-        widgetTitle={<FormattedMessage {...messages.title} />}
-      >
-        {propertyLists}
-      </QuickWidget>
+      <div key={task.id} className="mr-mb-4 border-b mr-border-gray-300 pb-2">
+        {
+          featurePropertiesList.map((feature, index) => {
+            const featureIndex = `${task.id}-${index}`;
+            return (
+              <details key={featureIndex} open={!collapsed} className="mr-pb-2 mr-border-b mr-bg-gray-100">
+                <summary className="mr-text-yellow mr-cursor-pointer mr-p-1 mr-rounded mr-flex mr-justify-between mr-items-center">
+                  <div className="mr-flex mr-items-center">
+                    <div className="mr-text-yellow mr-font-bold mr-text-lg">
+                      <FormattedMessage {...messages.taskLabel} values={{taskId: task.id}}/>
+                    </div>
+                    <span className="mr-text-grey-lighter mr-mx-2 mr-mt-1">
+                      {feature.properties?.id || feature.geometry?.type}
+                    </span>
+                  </div>
+                </summary>
+                <PropertyList featureProperties={feature.properties} hideHeader lightMode={false} {...props} />
+              </details>
+            )
+          })
+        }
+      </div>
     )
-  }
+  })
+
+  return (
+    <QuickWidget
+      {...props}
+      className="task-properties-widget"
+      widgetTitle={<FormattedMessage {...messages.title} />}
+      rightHeaderControls={
+        <div onClick={toggleCollapsed} className="mr-cursor-pointer mr-button mr-button--small mr-text-sm mr-ml-4">
+          {collapsed ? <FormattedMessage {...messages.expandAll} /> : <FormattedMessage {...messages.collapseAll} />}
+        </div>
+      }
+    >
+      {propertyLists}
+    </QuickWidget>
+  )
 }
 
 registerWidgetType(TaskPropertiesWidget, descriptor)
+
+export default TaskPropertiesWidget;

src/components/Widgets/TaskPropertiesWidget/TaskPropertiesWidget.scss

@@ -0,0 +1,29 @@
+details {
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  max-height: 100px;
+}
+
+details[open] {
+  max-height: 500px;
+}
+
+details > summary {
+  position: relative; 
+  padding-left: 1.5em; 
+  cursor: pointer; 
+  transition: transform 0.2s ease;
+}
+
+details > summary::before {
+  content: '▶'; 
+  position: absolute;
+  right: 10px;
+  color: #FFFD86; 
+  font-size: 1.2em; 
+  transition: transform 0.2s ease; 
+}
+
+details[open] > summary::before {
+  transform: rotate(90deg); 
+}