Add buttons to go back to the index

UI/BigComponents/ActionButtons.ts

@@ -1,6 +1,6 @@
 import Combine from "../Base/Combine"
 import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
-import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import { Store } from "../../Logic/UIEventSource"
 import { BBox } from "../../Logic/BBox"
 import Loc from "../../Models/Loc"
 import { OsmConnection } from "../../Logic/Osm/OsmConnection"
@@ -11,6 +11,28 @@ import { Utils } from "../../Utils"
 import { MapillaryLink } from "./MapillaryLink"
 import TranslatorsPanel from "./TranslatorsPanel"
 import { OpenIdEditor, OpenJosm } from "./CopyrightPanel"
+import Toggle from "../Input/Toggle"
+
+export class BackToThemeOverview extends Toggle {
+    constructor(
+        state: {
+            readonly featureSwitchMoreQuests: Store<boolean>
+        },
+        options: {
+            imgSize: string
+        }
+    ) {
+        const t = Translations.t.general
+        const button = new SubtleButton(Svg.add_ui(), t.backToIndex, options).onClick(() => {
+            const path = window.location.href.split("/")
+            path.pop()
+            path.push("index.html")
+            window.location.href = path.join("/")
+        })
+
+        super(button, undefined, state.featureSwitchMoreQuests)
+    }
+}
 
 export class ActionButtons extends Combine {
     constructor(state: {
@@ -19,12 +41,15 @@ export class ActionButtons extends Combine {
         readonly locationControl: Store<Loc>
         readonly osmConnection: OsmConnection
         readonly isTranslator: Store<boolean>
+        readonly featureSwitchMoreQuests: Store<boolean>
     }) {
         const imgSize = "h-6 w-6"
         const iconStyle = "height: 1.5rem; width: 1.5rem"
         const t = Translations.t.general.attribution
 
         super([
+            new BackToThemeOverview(state, { imgSize }),
+
             new SubtleButton(Svg.liberapay_ui(), t.donate, {
                 url: "https://liberapay.com/pietervdvn/",
                 newTab: true,

UI/BigComponents/FilterView.ts

@@ -22,16 +22,18 @@ import { DropDown } from "../Input/DropDown"
 import { FixedUiElement } from "../Base/FixedUiElement"
 import BaseLayer from "../../Models/BaseLayer"
 import Loc from "../../Models/Loc"
+import { BackToThemeOverview } from "./ActionButtons"
 
 export default class FilterView extends VariableUiElement {
     constructor(
         filteredLayer: Store<FilteredLayer[]>,
         tileLayers: { config: TilesourceConfig; isDisplayed: UIEventSource<boolean> }[],
         state: {
-            availableBackgroundLayers?: Store<BaseLayer[]>
-            featureSwitchBackgroundSelection?: UIEventSource<boolean>
-            featureSwitchIsDebugging?: UIEventSource<boolean>
-            locationControl?: UIEventSource<Loc>
+            readonly availableBackgroundLayers?: Store<BaseLayer[]>
+            readonly featureSwitchBackgroundSelection?: UIEventSource<boolean>
+            readonly featureSwitchIsDebugging?: UIEventSource<boolean>
+            readonly locationControl?: UIEventSource<Loc>
+            readonly featureSwitchMoreQuests: Store<boolean>
         }
     ) {
         const backgroundSelector = new Toggle(
@@ -53,8 +55,12 @@ export default class FilterView extends VariableUiElement {
                 elements = elements.concat(
                     tileLayers.map((tl) => FilterView.createOverlayToggle(state, tl))
                 )
-                // ... and add the dropdown to select a different background
-                return elements.concat(backgroundSelector)
+
+                elements.push(
+                    backgroundSelector,
+                    new BackToThemeOverview(state, { imgSize: "h-6 w-6" }).SetClass("block mt-12")
+                )
+                return elements
             })
         )
     }

UI/BigComponents/ThemeIntroductionPanel.ts

@@ -83,20 +83,6 @@ export default class ThemeIntroductionPanel extends Combine {
             layout.descriptionTail?.Clone().SetClass("block mt-4"),
 
             languagePicker?.SetClass("block mt-4 pb-8 border-b-2 border-dotted border-gray-400"),
-
-            Toggle.If(state.featureSwitchMoreQuests, () =>
-                new Combine([
-                    t.welcomeExplanation.browseOtherThemesIntro,
-                    new SubtleButton(
-                        Svg.add_ui().SetClass("h-6"),
-                        t.welcomeExplanation.browseMoreMaps
-                    )
-                        .onClick(() =>
-                            currentTab.setData(FullWelcomePaneWithTabs.MoreThemesTabIndex)
-                        )
-                        .SetClass("h-12"),
-                ]).SetClass("flex flex-col mt-6")
-            ),
             new ActionButtons(state),
 
             ...layout.CustomCodeSnippets(),

css/index-tailwind-output.css

@@ -844,6 +844,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mt-12 {
+  margin-top: 3rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -2501,22 +2505,6 @@ input {
   /* The checkbox that toggles a single layer */
 }
 
-.layer-filters {
-  /* If needed, the panel which contains the extra filters for a layer */
-  margin-bottom: 1rem;
-  border-bottom: 2px solid var(--foreground-color);
-}
-
-.filter-panel {
-  /* The panel for a single layer, containing both the toggle and the filters (if any) */
-  border-bottom: 2px solid lightgrey;
-  margin-bottom: 0.5rem;
-}
-
-.first-filter-panel {
-  /* Additional class on the first layer filter */
-}
-
 .mapping-icon-small-height {
   /* A mapping icon type */
   height: 1.5rem;

index.css

@@ -637,21 +637,7 @@ input {
   /* The checkbox that toggles a single layer */
 }
 
-.layer-filters {
-  /* If needed, the panel which contains the extra filters for a layer */
-  margin-bottom: 1rem;
-  border-bottom: 2px solid var(--foreground-color);
-}
 
-.filter-panel {
-  /* The panel for a single layer, containing both the toggle and the filters (if any) */
-  border-bottom: 2px solid lightgrey;
-  margin-bottom: 0.5rem;
-}
-
-.first-filter-panel {
-  /* Additional class on the first layer filter */
-}
 
 .mapping-icon-small-height {
   /* A mapping icon type */

langs/da.json

@@ -252,8 +252,6 @@
         "welcomeBack": "Du er logget ind, velkommen tilbage!",
         "welcomeExplanation": {
             "addNew": "Klik på kortet for at tilføje et nyt POI.",
-            "browseMoreMaps": "Se flere kort",
-            "browseOtherThemesIntro": "Forskellige tematiske kort findes på MapComplete",
             "general": "På dette kort kan du se, redigere og tilføje <i> interessepunkter</i>. Zoom rundt for at se POI'et, tryk på et for at se eller redigere oplysningerne. Alle data er hentet fra og gemt i OpenStreetMap, som frit kan genbruges."
         },
         "wikipedia": {

langs/de.json

@@ -330,8 +330,6 @@
         "welcomeBack": "Willkommen zurück!",
         "welcomeExplanation": {
             "addNew": "Tippen oden klicken Sie auf die Karte, um einen neuen Ort hinzuzufügen.",
-            "browseMoreMaps": "Weitere Karten entdecken",
-            "browseOtherThemesIntro": "Auf MapComplete gibt es verschiedene thematische Karten",
             "general": "Auf dieser Karte können Sie <i>Interessante Orte</i> sehen, bearbeiten und hinzufügen. Verschieben Sie den Kartenausschnitt, um die Orte zu entdecken, tippen Sie auf einen, um weitere Informationen zu sehen oder zu bearbeiten. Alle Daten stammen von OpenStreetMap und sind dort gespeichert, so dass sie frei weiterverwendet werden können."
         },
         "wikipedia": {

langs/en.json

@@ -141,6 +141,7 @@
             "translatedBy": "MapComplete has been translated by {contributors} and <a href='https://github.com/pietervdvn/MapComplete/graphs/contributors' target='_blank'>{hiddenCount} more contributors</a>"
         },
         "back": "Back",
+        "backToIndex": "Go back to the overview with all thematic maps",
         "backToMapcomplete": "Back to the theme overview",
         "backgroundMap": "Background map",
         "cancel": "Cancel",
@@ -334,8 +335,6 @@
         "welcomeBack": "Welcome back!",
         "welcomeExplanation": {
             "addNew": "Tap the map to add a new POI.",
-            "browseMoreMaps": "Discover more maps",
-            "browseOtherThemesIntro": "Various thematic maps exist on MapComplete",
             "general": "On this map, you can see, edit and add <i>points of interest</i>. Zoom around to see the POI, tap one to see or edit the information. All data is sourced from and saved to OpenStreetMap, which can be freely reused."
         },
         "wikipedia": {

langs/fr.json

@@ -277,8 +277,6 @@
         "welcomeBack": "Vous êtes connecté. Bienvenue !",
         "welcomeExplanation": {
             "addNew": "Cliquez sur la carte pour ajouter un nouveau POI.",
-            "browseMoreMaps": "Découvrez d’autres cartes",
-            "browseOtherThemesIntro": "De nombreuses cartes thématiques existent sur MapComplete",
             "general": "Cette carte permet de visualiser et ajouter des <i>points d’intérêt</i>. Zoomez sur un POI et cliquez dessus pour en voir les détails ou les modifier. Les données proviennent et sont transmises avec OpenStreetMap, qui peut être librement réutilisé."
         },
         "wikipedia": {

langs/it.json

@@ -253,8 +253,6 @@
         "welcomeBack": "Hai effettuato l’accesso. Bentornato/a!",
         "welcomeExplanation": {
             "addNew": "Tocca la mappa per aggiungere un nuovo punto di interesse.",
-            "browseMoreMaps": "Scopri ulteriori mappe",
-            "browseOtherThemesIntro": "In MapComplete esistono diverse mappe tematiche",
             "general": "Su questa mappa puoi vedere, modificare ed aggiungere <i>punti di interesse</i>. Esplora per trovare il punto di interesse, toccane uno per vedere o modificarne le informazioni. Tutti i dati sono raccolti e salvati su OpenStreetMap, e potranno essere riutilizzati liberamente."
         },
         "wikipedia": {

langs/nl.json

@@ -330,8 +330,6 @@
         "welcomeBack": "Je bent aangemeld. Welkom terug!",
         "welcomeExplanation": {
             "addNew": "Klik op de kaart om een nieuw punt toe te voegen.",
-            "browseMoreMaps": "Ontdek meer kaarten",
-            "browseOtherThemesIntro": "Er zijn diverse thematische kaarten op MapComplete",
             "general": "Op deze kaart kan je <i>interessepunten</i> bekijken, bewerken en toevoegen. Zoom in om de interessepunten te zien, duid eentje aan om alle informatie te zien en te bewerken. Alle informatie komt van OpenStreetMap die gratis hergebruikt mag worden."
         },
         "wikipedia": {

langs/pt.json

@@ -253,8 +253,6 @@
         "welcomeBack": "Iniciou a sessão, bem-vindo de volta!",
         "welcomeExplanation": {
             "addNew": "Toque no mapa para adicionar um novo POI.",
-            "browseMoreMaps": "Descobrir mais mapas",
-            "browseOtherThemesIntro": "Existem vários mapas temáticos no MapComplete",
             "general": "Neste mapa, pode ver, editar e adicionar <i>pontos de interesse</i>. Aproxime a visualização para ver o POI, toque num para ver ou editar a informação. Todos os dados são obtidos e guardados no OpenStreetMap, que pode ser livremente reutilizado."
         },
         "wikipedia": {

langs/zh_Hant.json

@@ -259,8 +259,6 @@
         "welcomeBack": "你已經登入了，歡迎回來！",
         "welcomeExplanation": {
             "addNew": "點一下地圖來新增新興趣點。",
-            "browseMoreMaps": "探索更多地圖",
-            "browseOtherThemesIntro": "MapComplete 上有相當多樣的主題地圖",
             "general": "在這份地圖，你可以檢視、編輯與新增<i>興趣點</i>。在附近放大來檢視興趣點，點一個來檢視或是編輯資訊。所有資料來源以及儲存到開放街圖，能夠自由被再利用。"
         },
         "wikipedia": {