Use same close-buttons everywhere

assets/layers/picnic_table/picnic_table.json

@@ -147,10 +147,13 @@
             "cs": "Tento piknikový stůl je vyroben z plastu (recyklované)"
           }
         },
-        {"if":"material=metal",
+        {
-          "then":{"en": "This picnic table is made from metal",
+          "if": "material=metal",
+          "then": {
+            "en": "This picnic table is made from metal",
             "nl": "Deze picnictafel is gemaakt uit metaal"
-          }}
+          }
+        }
       ],
       "id": "picnic_table-material"
     }

assets/layers/playground/playground.json

@@ -136,20 +136,32 @@
   "tagRenderings": [
     "images",
     "reviews",
-    {"question": {
+    {
-      "en": "Does one have to pay to use this playground?",
+      "question": {
-      "nl": "Moet men betalen om deze speeltuin te gebruiken?"
+        "en": "Does one have to pay to use this playground?",
-    },"id":"fee",
+        "nl": "Moet men betalen om deze speeltuin te gebruiken?"
-    "mappings": [
+      },
-{"if": "fee=no",
+      "id": "fee",
-  "alsoShowIf": "fee=",
+      "mappings": [
-  "then": {"en": "Free to use", "nl": "Gratis te gebruiken"}
+        {
-},{"if": "fee=yes",
+          "if": "fee=no",
-  
+          "alsoShowIf": "fee=",
-  "then": {"en": "Paid playground", "nl": "Betalend"}
+          "then": {
-}],
+            "en": "Free to use",
+            "nl": "Gratis te gebruiken"
+          }
+        },
+        {
+          "if": "fee=yes",
+          "then": {
+            "en": "Paid playground",
+            "nl": "Betalend"
+          }
+        }
+      ],
       "filter": true
-    },    {
+    },
+    {
       "question": {
         "nl": "Wat is de ondergrond van deze speeltuin?",
         "en": "Which is the surface of this playground?",

assets/themes/mapcomplete-changes/mapcomplete-changes.json

@@ -3,14 +3,17 @@
   "title": {
     "en": "Changes made with MapComplete"
   },
-  "description": {
-    "en": "This maps shows all the changes made with MapComplete"
-  },
   "shortDescription": {
     "en": "Shows changes made by MapComplete"
   },
+  "description": {
+    "en": "This maps shows all the changes made with MapComplete"
+  },
   "icon": "./assets/svg/logo.svg",
   "hideFromOverview": true,
+  "startLat": 0,
+  "startLon": 0,
+  "startZoom": 1,
   "layers": [
     {
       "id": "mapcomplete-changes",

langs/en.json

@@ -242,6 +242,7 @@
             "downloadGeojson": "Download visible data as GeoJSON",
             "downloadGpx": "Download as GPX-file",
             "downloadGpxHelper": "A GPX-file can be used with most navigation devices and applications",
+            "downloadImage": "Download image",
             "exporting": "Exporting…",
             "includeMetaData": "Include metadata (last editor, calculated values, …)",
             "licenseInfo": "<h3>Copyright notice</h3>The provided data is available under ODbL. Reusing it is gratis for any purpose, but <ul><li>the attribution <b>© OpenStreetMap contributors</b> must be shown<li><li>Any change must be published under the same license</li></ul> Please read the full <a href='https://www.openstreetmap.org/copyright' target='_blank'>copyright notice</a> for details.",
@@ -304,7 +305,8 @@
             "aboutMapComplete": "About MapComplete",
             "filter": "Filter data",
             "moreUtilsTitle": "Discover more",
-            "showIntroduction": "Show introduction"
+            "showIntroduction": "Show introduction",
+            "title": "Menu"
         },
         "morescreen": {
             "createYourOwnTheme": "Create your own MapComplete theme from scratch",

langs/layers/nl.json

@@ -5832,6 +5832,9 @@
                     },
                     "2": {
                         "then": "Deze picknictafel is gemaakt uit (gerecycleerd) plastiek"
+                    },
+                    "3": {
+                        "then": "Deze picnictafel is gemaakt uit metaal"
                     }
                 },
                 "question": "Van welk materiaal is deze picknicktafel gemaakt?",
@@ -5887,6 +5890,17 @@
                 },
                 "question": "Is deze speeltuin toegankelijk voor rolstoelgebruikers?"
             },
+            "fee": {
+                "mappings": {
+                    "0": {
+                        "then": "Gratis te gebruiken"
+                    },
+                    "1": {
+                        "then": "Betalend"
+                    }
+                },
+                "question": "Moet men betalen om deze speeltuin te gebruiken?"
+            },
             "playground-access": {
                 "mappings": {
                     "0": {

public/css/index-tailwind-output.css

@@ -1168,6 +1168,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   right: 0px;
 }
 
+.top-4 {
+  top: 1rem;
+}
+
+.right-4 {
+  right: 1rem;
+}
+
 .right-10 {
   right: 2.5rem;
 }
@@ -1236,10 +1244,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   top: 0.75rem;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
 .top-1 {
   top: 0.25rem;
 }
@@ -1522,14 +1526,14 @@ input[type="range"].range-lg::-moz-range-thumb {
   margin-left: 1rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-8 {
   margin-top: 2rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1753,6 +1757,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   height: 1.25rem;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-14 {
   height: 3.5rem;
 }
@@ -1777,10 +1785,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   height: 20rem;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
 .h-20 {
   height: 5rem;
 }
@@ -2007,6 +2011,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   width: 1.25rem;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
 .w-14 {
   width: 3.5rem;
 }
@@ -2029,10 +2037,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   width: min-content;
 }
 
-.w-10 {
-  width: 2.5rem;
-}
-
 .w-20 {
   width: 5rem;
 }
@@ -2949,10 +2953,6 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-width: 2px;
 }
 
-.border-0 {
-  border-width: 0px;
-}
-
 .\!border-0 {
   border-width: 0px !important;
 }
@@ -2973,6 +2973,10 @@ input[type="range"].range-lg::-moz-range-thumb {
   border-width: 10px;
 }
 
+.border-0 {
+  border-width: 0px;
+}
+
 .border-x {
   border-left-width: 1px;
   border-right-width: 1px;

src/Logic/State/UserSettingsMetaTagging.ts

@@ -1,42 +1,14 @@
 import { Utils } from "../../Utils"
 /** This code is autogenerated - do not edit. Edit ./assets/layers/usersettings/usersettings.json instead */
 export class ThemeMetaTagging {
-    public static readonly themeName = "usersettings"
+   public static readonly themeName = "usersettings"
 
-    public metaTaggging_for_usersettings(feat: { properties: Record<string, string> }) {
+   public metaTaggging_for_usersettings(feat: {properties: Record<string, string>}) {
-        Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_md", () =>
+      Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_md', () => feat.properties._description.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)?.at(1) ) 
-            feat.properties._description
+      Utils.AddLazyProperty(feat.properties, '_d', () => feat.properties._description?.replace(/&lt;/g,'<')?.replace(/&gt;/g,'>') ?? '' ) 
-                .match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)
+      Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_a', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.href.match(/mastodon|en.osm.town/) !== null)[0]?.href   }) (feat)  ) 
-                ?.at(1)
+      Utils.AddLazyProperty(feat.properties, '_mastodon_link', () => (feat => {const e = document.createElement('div');e.innerHTML = feat.properties._d;return Array.from(e.getElementsByTagName("a")).filter(a => a.getAttribute("rel")?.indexOf('me') >= 0)[0]?.href})(feat)  ) 
-        )
+      Utils.AddLazyProperty(feat.properties, '_mastodon_candidate', () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a ) 
-        Utils.AddLazyProperty(
+      feat.properties['__current_backgroun'] = 'initial_value'
-            feat.properties,
+   }
-            "_d",
+}
-            () => feat.properties._description?.replace(/&lt;/g, "<")?.replace(/&gt;/g, ">") ?? ""
-        )
-        Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_a", () =>
-            ((feat) => {
-                const e = document.createElement("div")
-                e.innerHTML = feat.properties._d
-                return Array.from(e.getElementsByTagName("a")).filter(
-                    (a) => a.href.match(/mastodon|en.osm.town/) !== null
-                )[0]?.href
-            })(feat)
-        )
-        Utils.AddLazyProperty(feat.properties, "_mastodon_link", () =>
-            ((feat) => {
-                const e = document.createElement("div")
-                e.innerHTML = feat.properties._d
-                return Array.from(e.getElementsByTagName("a")).filter(
-                    (a) => a.getAttribute("rel")?.indexOf("me") >= 0
-                )[0]?.href
-            })(feat)
-        )
-        Utils.AddLazyProperty(
-            feat.properties,
-            "_mastodon_candidate",
-            () => feat.properties._mastodon_candidate_md ?? feat.properties._mastodon_candidate_a
-        )
-        feat.properties["__current_backgroun"] = "initial_value"
-    }
-}

src/Models/MenuState.ts

@@ -19,14 +19,13 @@ export class MenuState {
     public static readonly pageNames = [
         "copyright", "copyright_icons", "community_index", "hotkeys",
         "privacy", "filter", "background", "about_theme", "download", "favourites",
-        "usersettings", "share", "menu"
+        "usersettings", "share", "menu",
     ] as const
 
-    public readonly menuIsOpened 
     public readonly pageStates: Record<PageType, UIEventSource<boolean>>
 
     public readonly highlightedLayerInFilters: UIEventSource<string> = new UIEventSource<string>(
-        undefined
+        undefined,
     )
     public highlightedUserSetting: UIEventSource<string> = new UIEventSource<string>(undefined)
 
@@ -38,19 +37,20 @@ export class MenuState {
             states[pageName] = toggle
         }
         this.pageStates = <Record<PageType, UIEventSource<boolean>>>states
-this.menuIsOpened = this.pageStates.menu
 
- for (const pageName of MenuState.pageNames) {
+        for (const pageName of MenuState.pageNames) {
-            
+            if(pageName === "menu"){
+                continue
+            }
             this.pageStates[pageName].addCallback(enabled => {
                 if (enabled) {
-                    this.menuIsOpened.set(false)
+                    this.pageStates.menu.set(false)
                 }
             })
         }
-        
+
         const visitedBefore = LocalStorageSource.GetParsed<boolean>(
-            themeid + "thememenuisopened", false
+            themeid + "thememenuisopened", false,
         )
         if (!visitedBefore.data && shouldShowWelcomeMessage) {
             this.pageStates.about_theme.set(true)
@@ -85,8 +85,8 @@ this.menuIsOpened = this.pageStates.menu
                 Utils.sortedByLevenshteinDistance(
                     highlightTagRendering,
                     UserRelatedState.availableUserSettingsIds,
-                    (x) => x
+                    (x) => x,
-                )
+                ),
             )
         }
         this.highlightedUserSetting.setData(highlightTagRendering)
@@ -101,16 +101,17 @@ this.menuIsOpened = this.pageStates.menu
      * Returns 'true' if at least one menu was opened
      */
     public closeAll(): boolean {
-        for (const key in this.pageStates) {
+        const ps = this.pageStates
-            const toggle = this.pageStates[key]
+        for (const key in ps) {
+            const toggle = ps[key]
             const wasOpen = toggle.data
             toggle.setData(false)
             if (wasOpen) {
                 return true
             }
         }
-        if (this.menuIsOpened.data) {
+        if (ps.menu.data) {
-            this.menuIsOpened.set(false)
+            ps.menu.set(false)
             return true
         }
     }

src/UI/Base/FloatOver.svelte

@@ -3,6 +3,7 @@
   import { ariaLabel } from "../../Utils/ariaLabel"
   import Translations from "../i18n/Translations"
   import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+  import { CloseButton } from "flowbite-svelte"
 
   /**
    * The slotted element will be shown on top, with a lower-opacity border
@@ -29,7 +30,7 @@
   }}
 >
   <div
-    class="content normal-background pointer-events-auto h-full"
+    class="content relative normal-background pointer-events-auto h-full"
     on:click|stopPropagation={() => {}}
   >
     <div class="h-full rounded-xl">
@@ -37,22 +38,21 @@
     </div>
     <slot name="close-button">
       <!-- The close button is placed _after_ the default slot in order to always paint it on top -->
-      <div
+      <div class="absolute top-0 right-0">
-        class="absolute right-10 top-10 m-0 cursor-pointer rounded-full border-0 border-none bg-white p-0"
+
-        style="margin: -0.25rem"
+        <CloseButton class="normal-background mt-2 mr-2"
-        on:click={() => dispatch("close")}
+                     on:click={() => dispatch("close")}
-        use:ariaLabel={Translations.t.general.backToMap}
+        />
-      >
-        <XCircleIcon class="h-8 w-8" />
       </div>
+
     </slot>
   </div>
 </div>
 
 <style>
-  .content {
+    .content {
-    border-radius: 0.5rem;
+        border-radius: 0.5rem;
-    overflow-x: hidden;
+        overflow-x: hidden;
-    box-shadow: 0 0 1rem #00000088;
+        box-shadow: 0 0 1rem #00000088;
-  }
+    }
 </style>

src/UI/BigComponents/MenuDrawer.svelte

@@ -11,7 +11,7 @@
   import CommunityIndexView from "./CommunityIndexView.svelte"
   import Community from "../../assets/svg/Community.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
-  import { Sidebar } from "flowbite-svelte"
+  import { CloseButton, Sidebar } from "flowbite-svelte"
   import HotkeyTable from "./HotkeyTable.svelte"
   import { Utils } from "../../Utils"
   import Constants from "../../Models/Constants"
@@ -47,6 +47,8 @@
   import LogoutButton from "../Base/LogoutButton.svelte"
   import { BoltIcon } from "@babeard/svelte-heroicons/mini"
   import Copyright from "../../assets/svg/Copyright.svelte"
+  import Pencil from "../../assets/svg/Pencil.svelte"
+  import Squares2x2 from "@babeard/svelte-heroicons/mini/Squares2x2"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -62,20 +64,22 @@
 </script>
 
 <div class="flex flex-col p-2 sm:p-3 low-interaction gap-y-2 sm:gap-y-3 h-screen overflow-y-auto">
-<div class="flex justify-between">
+  <div class="flex justify-between">
-<h2>Menu<h2>
+    <h2>
-<button on:click={() => {pg.menu.set(false)}}>Close</button>
+      <Tr t={t.title}/>
-</div>
+    </h2>
-{#if $showHome}
+    <CloseButton on:click={() => {pg.menu.set(false)}} />
-      <a class="flex button primary" href={Utils.HomepageLink()}>
+  </div>
-        <Add class="h-6 w-6" />
+  {#if $showHome}
-        {#if Utils.isIframe}
+    <a class="flex button primary" href={Utils.HomepageLink()}>
-          <Tr t={Translations.t.general.seeIndex} />
+      <Squares2x2 class="h-10 w-10" />
-        {:else}
+      {#if Utils.isIframe}
-          <Tr t={Translations.t.general.backToIndex} />
+        <Tr t={Translations.t.general.seeIndex} />
-        {/if}
+      {:else}
-      </a>
+        <Tr t={Translations.t.general.backToIndex} />
-    {/if}
+      {/if}
+    </a>
+  {/if}
 
 
   <!-- User related: avatar, settings, favourits, logout -->
@@ -128,6 +132,8 @@
           <HeartIcon class="h-6 w-6" />
           <Tr t={Translations.t.favouritePoi.tab} />
         </div>
+
+
         <h3>
 
           <Tr t={Translations.t.favouritePoi.title} />
@@ -221,7 +227,7 @@
     <h3>
       <Tr t={t.moreUtilsTitle} />
     </h3>
-    
+
 
     <Page {onlyLink} shown={pg.community_index}>
       <div class="flex" slot="header">
@@ -248,8 +254,15 @@
       <Tr t={Translations.t.general.menu.aboutMapComplete} />
     </h3>
 
-    <div class="hidden-on-mobile">
+    <a
+      class="flex"
+      href={window.location.protocol + "//" + window.location.host + "/studio.html"}
+    >
+      <Pencil class="mr-2 h-6 w-6" />
+      <Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
+    </a>
 
+    <div class="hidden-on-mobile w-full">
       <Page {onlyLink} shown={pg.hotkeys}>
         <div class="flex" slot="header">
           <BoltIcon class="w-6 h-6" />
@@ -346,12 +359,14 @@
     }
 
 
-    :global(.sidebar-button, .sidebar-button, .sidebar-unit > a) {
+    :global(.sidebar-button, .sidebar-unit > a) {
         display: flex;
         align-items: center;
         border-radius: 0.25rem !important;
         padding: 0.4rem 0.75rem !important;
         text-decoration: none !important;
+        width: 100%;
+        text-align: start;
     }
 
     :global(.sidebar-button > svg , .sidebar-button > img, .sidebar-unit a > img, .sidebar-unit > a svg) {

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -8,6 +8,7 @@
   import Tr from "../Base/Tr.svelte"
   import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
   import { ariaLabel } from "../../Utils/ariaLabel"
+  import { CloseButton } from "flowbite-svelte"
 
   export let state: SpecialVisualizationState
   export let layer: LayerConfig
@@ -72,14 +73,10 @@
     {/if}
   </div>
   <slot name="close-button">
-    <button
+    <div class="mt-4">
-      class="mt-2 h-fit shrink-0 cursor-pointer self-center rounded-full border-none p-0"
+    <CloseButton  on:click={() => state.selectedElement.setData(undefined)}/>
-      on:click={() => state.selectedElement.setData(undefined)}
+    </div>
-      style="border: 0 !important; padding: 0 !important;"
+
-      use:ariaLabel={Translations.t.general.backToMap}
-    >
-      <XCircleIcon aria-hidden={true} class="h-8 w-8" />
-    </button>
   </slot>
 </div>
 

src/UI/Favourites/FavouriteSummary.svelte

@@ -21,7 +21,7 @@
     state.mapProperties.location.setData({ lon, lat })
     const z = state.mapProperties.zoom.data
     state.mapProperties.zoom.setData(Math.min(17, Math.max(12, z)))
-    state.guistate.menuIsOpened.setData(false)
+    state.guistate.pageStates.menu.setData(false)
   }
 
   function select() {

src/UI/Image/ImageOperations.svelte

@@ -11,6 +11,8 @@
   import { twMerge } from "tailwind-merge"
   import { UIEventSource } from "../../Logic/UIEventSource"
   import Loading from "../Base/Loading.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
 
   export let image: ProvidedImage
   export let clss: string = undefined
@@ -48,7 +50,7 @@
       on:click={() => download()}
     >
       <DownloadIcon class="h-6 w-6 px-2 opacity-100" />
-      Download
+      <Tr t={Translations.t.general.download.downloadImage}/>
     </button>
   </div>
 </div>

src/UI/ThemeViewGUI.svelte

@@ -196,7 +196,7 @@
         <MapControlButton
           cls="m-0.5 p-0.5 sm:p-1"
           arialabel={Translations.t.general.labels.menu}
-          on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
+          on:click={() => {console.log("Opening...."); state.guistate.pageStates.menu.setData(true)}}
           on:keydown={forwardEventToMap}
         >
           <MenuIcon class="h-6 w-6 cursor-pointer" />
@@ -404,7 +404,7 @@
     <svelte:fragment slot="error" />
   </LoginToggle>
 
-  <DrawerLeft shown={state.guistate.menuIsOpened}>
+  <DrawerLeft shown={state.guistate.pageStates.menu}>
     <div class="h-screen overflow-y-auto">
       <MenuDrawer onlyLink={true} {state} />
     </div>