{session && isFavorited != null && (
)}
{downloadLink &&
}
diff --git a/src/app/map_list_presenter.ts b/src/app/map_list_presenter.ts
index 388f59e..5cfe884 100644
--- a/src/app/map_list_presenter.ts
+++ b/src/app/map_list_presenter.ts
@@ -30,7 +30,7 @@ export class MapListStore {
constructor(
query: string,
- readonly tableSortStore: TableSortStore
,
+ readonly tableSortStore: TableSortStore,
initialFilter?: FilterNode
) {
this.query = query;
diff --git a/src/app/page.module.css b/src/app/page.module.css
index e45a5fd..15729b4 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -59,26 +59,28 @@
box-shadow: 0 0 0 1px var(--colorGreyA15);
}
-.bulkSelectEnabled .mapListRow::after {
- content: '';
- display: flex;
+/* Pin the selection column to a fixed width (scoped to bulk-select mode so it collapses
+ to nothing when off) and centre the checkbox in it, rather than letting the table's
+ slack flow into the column and leave empty space beside the checkbox. */
+.bulkSelectEnabled .mapListTable td:last-child,
+.bulkSelectEnabled .mapListTable th:last-child {
+ width: calc(var(--gridBaseline) * 8);
+ text-align: center;
+}
+
+.selectBox {
+ display: inline-flex;
justify-content: center;
align-items: center;
- position: absolute;
- top: 50%;
- right: var(--gridBaseline);
- transform: translateY(-50%);
+ vertical-align: middle;
width: calc(var(--gridBaseline) * 3);
height: calc(var(--gridBaseline) * 3);
border: 1px solid var(--colorGreyA15);
- pointer-events: none;
+ color: var(--colorAccent);
+ cursor: pointer;
}
-.bulkSelectEnabled .mapListRow.mapListRowSelected::after {
- content: '✔';
- color: var(--colorAccent);
- font-weight: bolder;
- font-size: 20px;
+.selectBoxChecked {
border: 2px solid var(--colorAccent);
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d8dc31e..81cf4ba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,6 +4,7 @@ import { useApi } from 'app/api/api_provider';
import { MapListPresenter, MapListStore } from 'app/map_list_presenter';
import { useSkeletonRef } from 'app/skeleton_provider';
import classNames from 'classnames';
+import { Check } from 'lucide-react';
import { action, computed, observable, reaction } from 'mobx';
import { observer, useLocalObservable } from 'mobx-react-lite';
import { useSearchParams } from 'next/navigation';
@@ -60,6 +61,8 @@ const Home = observer(() => {
sortLabel: 'submissionDate',
style: { width: `${metrics.gridBaseline * 20}px` },
},
+ // Trailing selection column; only shows a checkbox when bulk select is enabled.
+ { content: },
],
6,
'desc'
@@ -140,8 +143,9 @@ const MapListTable = observer((props: { store: MapListStore; presenter: MapListP
const [tableStore] = useState(() => new TableStore(computed(() => store.maps)));
- const getRow = (map: PDMap): Row<7> => {
- const onSelect = action((e: React.MouseEvent) => {
+ const getRow = (map: PDMap): Row<8> => {
+ const selected = presenter.isSelected(map.id);
+ const onSelect = action((e: React.MouseEvent) => {
if (!store.enableBulkSelect) {
return;
}
@@ -160,7 +164,7 @@ const MapListTable = observer((props: { store: MapListStore; presenter: MapListP
);
return {
- className: classNames({ [styles.mapListRowSelected]: presenter.isSelected(map.id) }),
+ className: classNames({ [styles.mapListRowSelected]: selected }),
Cells: [
React.memo(() => ),
React.memo(() => wrapWithMapRoute({map.title})),
@@ -173,6 +177,16 @@ const MapListTable = observer((props: { store: MapListStore; presenter: MapListP
React.memo(() =>
wrapWithMapRoute({formatDate(map.submissionDate)}, styles.centeredCell)
),
+ React.memo(() =>
+ store.enableBulkSelect ? (
+
+ {selected && }
+
+ ) : null
+ ),
],
};
};
diff --git a/src/app/search.tsx b/src/app/search.tsx
index 6759011..e67644a 100644
--- a/src/app/search.tsx
+++ b/src/app/search.tsx
@@ -3,13 +3,12 @@
import { ActiveFilterPills, FilterBuilder } from 'app/filter_builder';
import { MapListPresenter, MapListStore } from 'app/map_list_presenter';
import classNames from 'classnames';
+import { Download, Filter, Search as SearchIcon } from 'lucide-react';
import { action } from 'mobx';
import { observer } from 'mobx-react-lite';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { encodeFilter } from 'schema/map_filter';
import { Button } from 'ui/base/button/button';
-import { filterIcon } from 'ui/base/icons/filter_icon';
-import { searchIcon } from 'ui/base/icons/search_icon';
import { T } from 'ui/base/text/text';
import { Textbox } from 'ui/base/textbox/textbox';
import styles from './search.module.css';
@@ -50,14 +49,16 @@ export const Search = observer((props: { store: MapListStore; presenter: MapList
})}
onClick={action(() => (store.filtersExpanded = !store.filtersExpanded))}
>
- {filterIcon}
+
);
const BulkSelectActions = observer(() => {
return store.enableBulkSelect ? (
<>
-
+
) : (
@@ -79,7 +80,9 @@ export const Search = observer((props: { store: MapListStore; presenter: MapList
onSubmit={onSearch}
trailing={filterToggle}
/>
-
+