From 86444b8ca0adb3698b3a6aebc2fe01d8d1c2176a Mon Sep 17 00:00:00 2001 From: Wojtek Bazant Date: Mon, 15 Dec 2025 15:21:47 +0000 Subject: [PATCH 1/6] Dropdown for 'on the map' and longer verbiage --- public/locales/ar.json | 8 ++- public/locales/de.json | 7 ++- public/locales/el.json | 8 ++- public/locales/en.json | 8 ++- public/locales/es.json | 7 ++- public/locales/fr.json | 8 ++- public/locales/he.json | 8 ++- public/locales/it.json | 8 ++- public/locales/nl.json | 8 ++- public/locales/pl.json | 8 ++- public/locales/pt.json | 7 ++- public/locales/ru.json | 8 ++- public/locales/sv.json | 8 ++- public/locales/tr.json | 8 ++- public/locales/uk.json | 8 ++- public/locales/vi.json | 8 ++- public/locales/zh-hans.json | 8 ++- public/locales/zh-hant.json | 8 ++- src/components/filter/Filter.js | 79 +++++++++++++++---------- src/components/filter/FilterButtons.js | 15 +++-- src/components/filter/TreeSelectView.js | 2 +- 21 files changed, 150 insertions(+), 87 deletions(-) diff --git a/public/locales/ar.json b/public/locales/ar.json index 7a1d579dd..18181b580 100644 --- a/public/locales/ar.json +++ b/public/locales/ar.json @@ -62,9 +62,11 @@ "unknown_error": "خطأ غير معروف" }, "filter": { - "deselect_all": "إلغاء تحديد الكل", - "only_on_map": "على الخريطة", - "select_all": "تحديد الكل" + "all_types": "جميع الأنواع", + "deselect_shown": "إلغاء تحديد الكل المعروض", + "include_tree_inventories": "تضمين جرد الأشجار", + "select_shown": "تحديد الكل المعروض", + "within_this_area": "ضمن هذه المنطقة" }, "form": { "button": { diff --git a/public/locales/de.json b/public/locales/de.json index b843d5d84..a3f97863d 100644 --- a/public/locales/de.json +++ b/public/locales/de.json @@ -62,9 +62,14 @@ "unknown_error": "Unbekannter Fehler" }, "filter": { + "all_types": "Alle Typen", "deselect_all": "Alle abwählen", + "deselect_shown": "Alle angezeigten abwählen", + "include_tree_inventories": "Bauminventare einbeziehen", "only_on_map": "Auf der Karte", - "select_all": "Alle auswählen" + "select_all": "Alle auswählen", + "select_shown": "Alle angezeigten auswählen", + "within_this_area": "In diesem Bereich" }, "form": { "button": { diff --git a/public/locales/el.json b/public/locales/el.json index 927804834..3571114e0 100644 --- a/public/locales/el.json +++ b/public/locales/el.json @@ -62,9 +62,11 @@ "unknown_error": "Άγνωστο σφάλμα" }, "filter": { - "deselect_all": "Αποεπιλογή όλων", - "only_on_map": "Στον χάρτη", - "select_all": "Επιλογή όλων" + "all_types": "Όλοι οι τύποι", + "deselect_shown": "Αποεπιλογή όλων των εμφανιζόμενων", + "include_tree_inventories": "Συμπερίληψη απογραφών δέντρων", + "select_shown": "Επιλογή όλων των εμφανιζόμενων", + "within_this_area": "Εντός αυτής της περιοχής" }, "form": { "button": { diff --git a/public/locales/en.json b/public/locales/en.json index be000c14d..c48f8b962 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -62,9 +62,11 @@ "unknown_error": "Unknown error" }, "filter": { - "deselect_all": "Deselect all", - "only_on_map": "On the map", - "select_all": "Select all" + "all_types": "All types", + "deselect_shown": "Deselect all shown", + "include_tree_inventories": "Include tree inventories", + "select_shown": "Select all shown", + "within_this_area": "Within this area" }, "form": { "button": { diff --git a/public/locales/es.json b/public/locales/es.json index 11053f7f1..74c892a53 100644 --- a/public/locales/es.json +++ b/public/locales/es.json @@ -62,9 +62,14 @@ "unknown_error": "Error desconocido" }, "filter": { + "all_types": "Todos los tipos", "deselect_all": "Deseleccionar todo", + "deselect_shown": "Deseleccionar todos los mostrados", + "include_tree_inventories": "Incluir inventarios de árboles", "only_on_map": "En el mapa", - "select_all": "Seleccionar todo" + "select_all": "Seleccionar todo", + "select_shown": "Seleccionar todos los mostrados", + "within_this_area": "Dentro de esta área" }, "form": { "button": { diff --git a/public/locales/fr.json b/public/locales/fr.json index ef6f25333..0bb89ba8c 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -62,9 +62,11 @@ "unknown_error": "Erreur inconnue" }, "filter": { - "deselect_all": "Désélectionner tous", - "only_on_map": "Sur la carte", - "select_all": "Sélectionner tous" + "all_types": "Tous les types", + "deselect_shown": "Tout désélectionner", + "include_tree_inventories": "Inclure les inventaires d'arbres", + "select_shown": "Tout sélectionner", + "within_this_area": "Dans cette zone" }, "form": { "button": { diff --git a/public/locales/he.json b/public/locales/he.json index 81933fa71..b5eaff9e4 100644 --- a/public/locales/he.json +++ b/public/locales/he.json @@ -62,9 +62,11 @@ "unknown_error": "שגיאה לא ידועה" }, "filter": { - "deselect_all": "בטל בחירת הכל", - "only_on_map": "על המפה", - "select_all": "בחר הכל" + "all_types": "כל הסוגים", + "deselect_shown": "בטל בחירת כל המוצגים", + "include_tree_inventories": "כלול מלאי עצים", + "select_shown": "בחר את כל המוצגים", + "within_this_area": "בתוך אזור זה" }, "form": { "button": { diff --git a/public/locales/it.json b/public/locales/it.json index 69675f25f..b521f38aa 100644 --- a/public/locales/it.json +++ b/public/locales/it.json @@ -62,9 +62,11 @@ "unknown_error": "Errore sconosciuto" }, "filter": { - "deselect_all": "Deselect all", - "only_on_map": "On the map", - "select_all": "Select all" + "all_types": "Tutti i tipi", + "deselect_shown": "Deseleziona tutti i mostrati", + "include_tree_inventories": "Includi inventari degli alberi", + "select_shown": "Seleziona tutti i mostrati", + "within_this_area": "In quest'area" }, "form": { "button": { diff --git a/public/locales/nl.json b/public/locales/nl.json index b748179bd..1efb044a5 100644 --- a/public/locales/nl.json +++ b/public/locales/nl.json @@ -62,9 +62,11 @@ "unknown_error": "Onbekende fout" }, "filter": { - "deselect_all": "Deselect all", - "only_on_map": "On the map", - "select_all": "Select all" + "all_types": "Alle types", + "deselect_shown": "Deselecteer alle getoonde", + "include_tree_inventories": "Inclusief boominventarissen", + "select_shown": "Selecteer alle getoonde", + "within_this_area": "Binnen dit gebied" }, "form": { "button": { diff --git a/public/locales/pl.json b/public/locales/pl.json index 5de76581f..d85670a48 100644 --- a/public/locales/pl.json +++ b/public/locales/pl.json @@ -62,9 +62,11 @@ "unknown_error": "Nieznany błąd" }, "filter": { - "deselect_all": "Odznacz wszystko", - "only_on_map": "Na mapie", - "select_all": "Zaznacz wszystko" + "all_types": "Wszystkie typy", + "deselect_shown": "Odznacz wszystkie pokazane", + "include_tree_inventories": "Uwzględnij inwentaryzacje drzew", + "select_shown": "Zaznacz wszystkie pokazane", + "within_this_area": "W tym obszarze" }, "form": { "button": { diff --git a/public/locales/pt.json b/public/locales/pt.json index 318193c93..487639fe5 100644 --- a/public/locales/pt.json +++ b/public/locales/pt.json @@ -62,9 +62,14 @@ "unknown_error": "Erro desconhecido" }, "filter": { + "all_types": "Todos os tipos", "deselect_all": "Desmarcar todos", + "deselect_shown": "Desmarcar todos os exibidos", + "include_tree_inventories": "Incluir inventários de árvores", "only_on_map": "No mapa", - "select_all": "Selecionar todos" + "select_all": "Selecionar todos", + "select_shown": "Selecionar todos os exibidos", + "within_this_area": "Dentro desta área" }, "form": { "button": { diff --git a/public/locales/ru.json b/public/locales/ru.json index 296f53dd3..8a1cc4691 100644 --- a/public/locales/ru.json +++ b/public/locales/ru.json @@ -62,9 +62,11 @@ "unknown_error": "Неизвестная ошибка" }, "filter": { - "deselect_all": "Снять все", - "only_on_map": "На карте", - "select_all": "Выбрать все" + "all_types": "Все типы", + "deselect_shown": "Снять выделение со всех показанных", + "include_tree_inventories": "Включить инвентаризацию деревьев", + "select_shown": "Выбрать все показанные", + "within_this_area": "В этой области" }, "form": { "button": { diff --git a/public/locales/sv.json b/public/locales/sv.json index 144c860ba..7988a28f6 100644 --- a/public/locales/sv.json +++ b/public/locales/sv.json @@ -62,9 +62,11 @@ "unknown_error": "Okänt fel" }, "filter": { - "deselect_all": "Avmarkera alla", - "only_on_map": "På kartan", - "select_all": "Markera alla" + "all_types": "Alla typer", + "deselect_shown": "Avmarkera alla visade", + "include_tree_inventories": "Inkludera trädinventeringar", + "select_shown": "Markera alla visade", + "within_this_area": "Inom detta område" }, "form": { "button": { diff --git a/public/locales/tr.json b/public/locales/tr.json index c9cfc9a7c..ac124147c 100644 --- a/public/locales/tr.json +++ b/public/locales/tr.json @@ -62,9 +62,11 @@ "unknown_error": "Bilinmeyen hata" }, "filter": { - "deselect_all": "Tümünü kaldır", - "only_on_map": "Haritada", - "select_all": "Tümünü seç" + "all_types": "Tüm türler", + "deselect_shown": "Gösterilenlerin seçimini kaldır", + "include_tree_inventories": "Ağaç envanterlerini dahil et", + "select_shown": "Gösterilenlerin tümünü seç", + "within_this_area": "Bu alan içinde" }, "form": { "button": { diff --git a/public/locales/uk.json b/public/locales/uk.json index 5739a1735..bf09ad8f9 100644 --- a/public/locales/uk.json +++ b/public/locales/uk.json @@ -62,9 +62,11 @@ "unknown_error": "Невідома помилка" }, "filter": { - "deselect_all": "Скасувати вибір", - "only_on_map": "На карті", - "select_all": "Вибрати все" + "all_types": "Усі типи", + "deselect_shown": "Скасувати вибір усіх показаних", + "include_tree_inventories": "Включити інвентаризацію дерев", + "select_shown": "Вибрати всі показані", + "within_this_area": "В межах цієї області" }, "form": { "button": { diff --git a/public/locales/vi.json b/public/locales/vi.json index 80b20481c..6a23610c5 100644 --- a/public/locales/vi.json +++ b/public/locales/vi.json @@ -62,9 +62,11 @@ "unknown_error": "Lỗi không xác định" }, "filter": { - "deselect_all": "Bỏ chọn tất cả", - "only_on_map": "Trên bản đồ", - "select_all": "Chọn tất cả" + "all_types": "Tất cả các loại", + "deselect_shown": "Bỏ chọn tất cả đã hiển thị", + "include_tree_inventories": "Bao gồm kiểm kê cây", + "select_shown": "Chọn tất cả đã hiển thị", + "within_this_area": "Trong khu vực này" }, "form": { "button": { diff --git a/public/locales/zh-hans.json b/public/locales/zh-hans.json index 514e27532..514605cf0 100644 --- a/public/locales/zh-hans.json +++ b/public/locales/zh-hans.json @@ -62,9 +62,11 @@ "unknown_error": "未知错误" }, "filter": { - "deselect_all": "取消全选", - "only_on_map": "在地图上", - "select_all": "全选" + "all_types": "所有类型", + "deselect_shown": "取消选择所有显示的", + "include_tree_inventories": "包括树木清单", + "select_shown": "选择所有显示的", + "within_this_area": "在此区域内" }, "form": { "button": { diff --git a/public/locales/zh-hant.json b/public/locales/zh-hant.json index 4b875612b..3ed1d02bc 100644 --- a/public/locales/zh-hant.json +++ b/public/locales/zh-hant.json @@ -62,9 +62,11 @@ "unknown_error": "未知錯誤" }, "filter": { - "deselect_all": "取消全選", - "only_on_map": "在地圖上", - "select_all": "全選" + "all_types": "所有類型", + "deselect_shown": "取消選擇所有顯示的項目", + "include_tree_inventories": "包含樹木清單", + "select_shown": "選擇所有顯示的項目", + "within_this_area": "在此區域內" }, "form": { "button": { diff --git a/src/components/filter/Filter.js b/src/components/filter/Filter.js index b14acc24b..3920c7195 100644 --- a/src/components/filter/Filter.js +++ b/src/components/filter/Filter.js @@ -9,6 +9,7 @@ import { muniChanged, selectionChanged } from '../../redux/viewChange' import buildSelectTree from '../../utils/buildSelectTree' import { useIsDesktop } from '../../utils/useBreakpoint' import Input from '../ui/Input' +import { Select } from '../ui/Select' import FilterButtons from './FilterButtons' import LabeledCheckbox from './LabeledCheckbox' import RCTreeSelectSkeleton from './RCTreeSelectSkeleton' @@ -29,20 +30,28 @@ const EdibleTypeText = styled.p` const TreeFiltersContainer = styled.div` margin-block: 0.5em; - /* Provide vertical space when buttons wrap over multiple lines */ - line-height: 1.5rem; + display: flex; + gap: 5px; +` + +const SearchAndSelectContainer = styled.div` + display: flex; + gap: 5px; + margin-block-end: 0.5em; ` const SearchInput = styled(Input)` - height: 2.5em; - padding: 0; - flex: 0; + flex: 1; + height: 2.65em; input { margin-block: 1em; - margin-inline: 0.75em; - height: 100%; } ` + +const MapAreaSelectWrapper = styled.div` + width: 13em; +` + const MuniCheckbox = styled.div` margin-block: 1em; ` @@ -74,24 +83,45 @@ const Filter = () => { const isDesktop = useIsDesktop() const { t } = useTranslation() + const mapAreaOptions = [ + { value: 'map', label: t('filter.within_this_area') }, + { value: 'all', label: t('filter.all_types') }, + ] return ( <>
{t('glossary.type.other')} - setSearchValueDebounced(e.target.value)} - placeholder={t('glossary.type.one')} - /> - - dispatch(setShowOnlyOnMap(checked))} - style={{ display: 'inline-block', marginInlineEnd: '5px' }} + + + option.value === (showOnlyOnMap ? 'map' : 'all'), - )} - onChange={(selectedOption) => - dispatch(setShowOnlyOnMap(selectedOption.value === 'map')) - } - options={mapAreaOptions} - /> - - setSearchValueDebounced(e.target.value)} - placeholder={t('form.search')} - /> - - {typesAccess.isEmpty ? ( - - ) : ( - - dispatch(selectionChanged(selectedTypes)) - } - selectTree={selectTree} - /> - )} - - { - const newSelection = [...new Set([...types, ...visibleTypeIds])] - dispatch(selectionChanged(newSelection)) - }} - onDeselectAllClick={() => { - const remainingSelection = types.filter( - (typeId) => !visibleTypeIds.some((t) => t === typeId), - ) - dispatch(selectionChanged(remainingSelection)) - }} - isSelectAllDisabled={visibleTypeIds.every((typeId) => - types.includes(typeId), - )} - isDeselectAllDisabled={visibleTypeIds.every( - (typeId) => !types.includes(typeId), - )} - /> - -
- +
{ onChange={(checked) => dispatch(muniChanged(checked))} /> - + + {t('glossary.type.other')} + + + +