changed layout, made clear filter buttons show always

maproulette · Oct 17, 2023 · cf0409d · cf0409d
1 parent 36750fc
commit cf0409d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 20 deletions.
diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js b/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js
@@ -241,6 +241,7 @@ export class ViewChallengeTasks extends Component {
         />
 
     this.boundsReset = false
+
     return (
       <div className='admin__manage-tasks'>
         <GeographicIndexingNotice challenge={this.props.challenge} />
@@ -252,12 +253,12 @@ export class ViewChallengeTasks extends Component {
         </div>
 
         <div className="mr-my-4 mr-space-y-3">
-          <div className='mr-flex mr-justify-between mr-flex-1 mr-px-2 xl:mr-px-4'>
+          <div className='xl:mr-flex xl:mr-justify-between xl:mr-flex-1 mr-px-2 xl:mr-px-4'>
             <div className='mr-flex'>
-              <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-8">
+              <p className="mr-text-center mr-text-base mr-uppercase mr-text-mango mr-mr-8">
                 <FormattedMessage {...messages.filterListLabel} />
               </p>
-              <ul className="mr-mb-4 xl:mr-mb-0 mr-flex mr-items-center mr-space-x-6 xl:mr-space-x-8">
+              <ul className="mr-mb-4 xl:mr-mb-0 mr-flex mr-items-center mr-space-x-4 xl:mr-space-x-8">
                 <li>
                   <TaskStatusFilter {...this.props} />
                 </li>
@@ -272,8 +273,8 @@ export class ViewChallengeTasks extends Component {
                 </li>
               </ul>
             </div>
-              <div>
-                {calculateTasksInChallenge(this.props) !== _get(this.props, 'taskInfo.totalCount', 0) ? clearFiltersControl : null}
+              <div className='mr-flex mr-justify-end'>
+                {clearFiltersControl}
               </div>
           </div>
         </div>

diff --git a/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js b/src/components/Widgets/ReviewNearbyTasksWidget/ReviewNearbyTasksWidget.js
@@ -191,7 +191,7 @@ export default class ReviewNearbyTasksWidget extends Component {
     );
 
     const clearFiltersControl = (
-      <button className="mr-flex mr-items-center mr-text-green-lighter mr-mb-4"
+      <button className="mr-flex mr-items-center mr-text-green-lighter"
         onClick={() => {
           this.props.clearAllFilters()
         }}>
@@ -229,12 +229,12 @@ export default class ReviewNearbyTasksWidget extends Component {
               <MapPane showLasso>{map}</MapPane>
             )}
           </div>
-          <div className="mr-my-4 mr-px-4 mr-justify-between mr-flex">
-            <div className='mr-flex'>
+          <div className="mr-mt-4 mr-px-4 xl:mr-justify-between xl:mr-flex xl:mr-items-center">
+            <div className='mr-flex mr-mb-4 mr-items-center'>
               <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-8">
                 <FormattedMessage {...messages.filterListLabel} />
               </p>
-              <ul className="md:mr-space-x-6 mr-mb-4 xl:mr-mb-0 md:mr-flex">
+              <ul className="md:mr-space-x-6 md:mr-flex">
                 <li>
                   <TaskStatusFilter {...this.props} />
                 </li>
@@ -249,7 +249,9 @@ export default class ReviewNearbyTasksWidget extends Component {
                 </li>
               </ul>
             </div>
-            {clearFiltersControl}
+            <div className='mr-flex mr-justify-end mr-mb-4'>
+              {clearFiltersControl}
+            </div>
           </div>
         </div>
       </QuickWidget>

diff --git a/src/components/Widgets/TaskBundleWidget/Messages.js b/src/components/Widgets/TaskBundleWidget/Messages.js
@@ -24,6 +24,11 @@ export default defineMessages({
     defaultMessage: "Save Current Filters"
   },
 
+  clearFiltersLabel: {
+    id: "Widgets.TaskBundleWidget.controls.clearFilters.label",
+    defaultMessage: "Clear Filters"
+  },
+
   filterListLabel: {
     id: "Widgets.TaskBundleWidget.controls.filterList.label",
     defaultMessage: "Filter By:"

diff --git a/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js b/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js
@@ -185,7 +185,7 @@ export default class TaskBundleWidget extends Component {
     this.props.updateUserAppSetting(this.props.user.id, {'taskBundleFilters': searchURL})
   }
 
-  clearFilters = () => {
+  revertFilters = () => {
     if(this.props.clearAllFilters) {
       this.props.clearAllFilters()
     }
@@ -252,7 +252,7 @@ export default class TaskBundleWidget extends Component {
         <WidgetContent
           {...this.props}
           saveFilters={this.saveFilters}
-          clearFilters={this.clearFilters}
+          revertFilters={this.revertFilters}
           updateBounds={this.updateBounds}
           bundleTasks={this.bundleTasks}
           unbundleTasks={this.unbundleTasks}
@@ -396,12 +396,12 @@ const BuildBundle = props => {
           <MapPane showLasso>{map}</MapPane>
         }
       </div>
-      <div className="mr-my-4 mr-px-4 mr-flex mr-justify-between">
-        <div className='mr-flex'>
+      <div className="mr-my-4 mr-px-4 lg:mr-flex lg:mr-flex-row lg:mr-justify-between mr-items-center">
+        <div className='mr-flex mr-items-center'>
           <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-8">
             <FormattedMessage {...messages.filterListLabel} />
           </p>
-          <ul className="mr-mb-4 xl:mr-mb-0 md:mr-flex">
+          <ul className="md:mr-flex">
             <li className="md:mr-mr-8">
               <TaskStatusFilter {...props} isUsedInTaskBundleContext={true} />
             </li>
@@ -413,7 +413,9 @@ const BuildBundle = props => {
             </li>
           </ul>
         </div>
-        <div>
+
+        <div className='mr-flex mr-space-x-3 mr-items-center mr-justify-end'>
+        {<ClearFiltersControl clearFilters={props.clearAllFilters}/>}
           <Dropdown
           className='mr-flex mr-items-center'
             dropdownButton={(dropdown) => (
@@ -431,7 +433,7 @@ const BuildBundle = props => {
             dropdownContent={(dropdown) => (
               <div className='mr-flex mr-flex-col mr-space-y-2'>
                 <SaveFiltersControl saveFilters={props.saveFilters} closeDropdown={dropdown.closeDropdown}/>
-                <ClearFiltersControl clearFilters={props.clearFilters}/>
+                <RevertFiltersControl revertFilters={props.revertFilters}/>
               </div>
             )}
           />
@@ -493,8 +495,8 @@ registerWidgetType(
   ), descriptor
 )
 
-const ClearFiltersControl = ({clearFilters}) => {
-  const handleClick = () => {clearFilters()}
+const RevertFiltersControl = ({revertFilters}) => {
+  const handleClick = () => {revertFilters()}
   return (
     <button className="mr-flex mr-items-center mr-text-current hover:mr-text-green-lighter mr-transition-colors"
       onClick={handleClick}>
@@ -514,4 +516,14 @@ const SaveFiltersControl = ({saveFilters, closeDropdown}) => {
       <FormattedMessage {...messages.saveCurrentFiltersLabel} />
     </button>
   )
-}
+}
+
+const ClearFiltersControl = ({clearFilters}) => (
+  <button className="mr-flex mr-items-center mr-text-green-lighter"
+    onClick={clearFilters}>
+    <SvgSymbol sym="close-icon"
+      viewBox='0 0 20 20'
+      className="mr-fill-current mr-w-5 mr-h-5 mr-mr-1" />
+    <FormattedMessage {...messages.clearFiltersLabel} />
+  </button>
+)