Use same close-buttons everywhere

2024-09-02 00:26:02 +02:00 · 2024-09-02 00:26:02 +02:00 · 2f1b0c0ae2
commit 2f1b0c0ae2
parent b353be5360
14 changed files with 161 additions and 136 deletions
--- a/assets/layers/picnic_table/picnic_table.json
+++ b/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"
    }
--- a/assets/layers/playground/playground.json
+++ b/assets/layers/playground/playground.json
@ -136,20 +136,32 @@
  "tagRenderings": [
    "images",
    "reviews",
-    {"question": {
-      "en": "Does one have to pay to use this playground?",
-      "nl": "Moet men betalen om deze speeltuin te gebruiken?"
-    },"id":"fee",
-    "mappings": [
-{"if": "fee=no",
-  "alsoShowIf": "fee=",
-  "then": {"en": "Free to use", "nl": "Gratis te gebruiken"}
-},{"if": "fee=yes",
-  
-  "then": {"en": "Paid playground", "nl": "Betalend"}
-}],
+    {
+      "question": {
+        "en": "Does one have to pay to use this playground?",
+        "nl": "Moet men betalen om deze speeltuin te gebruiken?"
+      },
+      "id": "fee",
+      "mappings": [
+        {
+          "if": "fee=no",
+          "alsoShowIf": "fee=",
+          "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?",
--- a/assets/themes/mapcomplete-changes/mapcomplete-changes.json
+++ b/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",
--- a/langs/en.json
+++ b/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",
--- a/langs/layers/nl.json
+++ b/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": {
--- a/public/css/index-tailwind-output.css
+++ b/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;
--- a/src/Logic/State/UserSettingsMetaTagging.ts
+++ b/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> }) {
-        Utils.AddLazyProperty(feat.properties, "_mastodon_candidate_md", () =>
-            feat.properties._description
-                .match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)
-                ?.at(1)
-        )
-        Utils.AddLazyProperty(
-            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"
-    }
-}
+   public metaTaggging_for_usersettings(feat: {properties: Record<string, string>}) {
+      Utils.AddLazyProperty(feat.properties, '_mastodon_candidate_md', () => feat.properties._description.match(/\[[^\]]*\]\((.*(mastodon|en.osm.town).*)\).*/)?.at(1) ) 
+      Utils.AddLazyProperty(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'
+   }
+}
--- a/src/Models/MenuState.ts
+++ b/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 toggle = this.pageStates[key]
+        const ps = this.pageStates
+        for (const key in ps) {
+            const toggle = ps[key]
            const wasOpen = toggle.data
            toggle.setData(false)
            if (wasOpen) {
                return true
            }
        }
-        if (this.menuIsOpened.data) {
-            this.menuIsOpened.set(false)
+        if (ps.menu.data) {
+            ps.menu.set(false)
            return true
        }
    }
--- a/src/UI/Base/FloatOver.svelte
+++ b/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
-        class="absolute right-10 top-10 m-0 cursor-pointer rounded-full border-0 border-none bg-white p-0"
-        style="margin: -0.25rem"
-        on:click={() => dispatch("close")}
-        use:ariaLabel={Translations.t.general.backToMap}
-      >
-        <XCircleIcon class="h-8 w-8" />
+      <div class="absolute top-0 right-0">
+
+        <CloseButton class="normal-background mt-2 mr-2"
+                     on:click={() => dispatch("close")}
+        />
      </div>
+
    </slot>
  </div>
 </div>

 <style>
-  .content {
-    border-radius: 0.5rem;
-    overflow-x: hidden;
-    box-shadow: 0 0 1rem #00000088;
-  }
+    .content {
+        border-radius: 0.5rem;
+        overflow-x: hidden;
+        box-shadow: 0 0 1rem #00000088;
+    }
 </style>
--- a/src/UI/BigComponents/MenuDrawer.svelte
+++ b/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">
-<h2>Menu<h2>
-<button on:click={() => {pg.menu.set(false)}}>Close</button>
-</div>
-{#if $showHome}
-      <a class="flex button primary" href={Utils.HomepageLink()}>
-        <Add class="h-6 w-6" />
-        {#if Utils.isIframe}
-          <Tr t={Translations.t.general.seeIndex} />
-        {:else}
-          <Tr t={Translations.t.general.backToIndex} />
-        {/if}
-      </a>
-    {/if}
+  <div class="flex justify-between">
+    <h2>
+      <Tr t={t.title}/>
+    </h2>
+    <CloseButton on:click={() => {pg.menu.set(false)}} />
+  </div>
+  {#if $showHome}
+    <a class="flex button primary" href={Utils.HomepageLink()}>
+      <Squares2x2 class="h-10 w-10" />
+      {#if Utils.isIframe}
+        <Tr t={Translations.t.general.seeIndex} />
+      {:else}
+        <Tr t={Translations.t.general.backToIndex} />
+      {/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) {
--- a/src/UI/BigComponents/SelectedElementTitle.svelte
+++ b/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
-      class="mt-2 h-fit shrink-0 cursor-pointer self-center rounded-full border-none p-0"
-      on:click={() => state.selectedElement.setData(undefined)}
-      style="border: 0 !important; padding: 0 !important;"
-      use:ariaLabel={Translations.t.general.backToMap}
-    >
-      <XCircleIcon aria-hidden={true} class="h-8 w-8" />
-    </button>
+    <div class="mt-4">
+    <CloseButton  on:click={() => state.selectedElement.setData(undefined)}/>
+    </div>
+
  </slot>
 </div>

--- a/src/UI/Favourites/FavouriteSummary.svelte
+++ b/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() {
--- a/src/UI/Image/ImageOperations.svelte
+++ b/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>
--- a/src/UI/ThemeViewGUI.svelte
+++ b/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>