From 71abc8a1c41a0435aefa309b09dc91625ca4b000 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sun, 14 May 2023 17:59:44 +0200
Subject: [PATCH] Styling: further style addNewPoint, misc style tweaks

---
 Models/ThemeConfig/Conversion/PrepareLayer.ts |  1 -
 Models/ThemeViewState.ts                      |  1 -
 UI/Map/ShowDataLayer.ts                       |  1 -
 UI/Popup/AddNewPoint/AddNewPoint.svelte       | 86 +++++++++----------
 UI/Popup/TagRendering/Questionbox.svelte      |  4 +-
 public/css/index-tailwind-output.css          |  9 ++
 6 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/Models/ThemeConfig/Conversion/PrepareLayer.ts b/Models/ThemeConfig/Conversion/PrepareLayer.ts
index 348949b70..0d3aaca2c 100644
--- a/Models/ThemeConfig/Conversion/PrepareLayer.ts
+++ b/Models/ThemeConfig/Conversion/PrepareLayer.ts
@@ -635,7 +635,6 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
 
                 metacondition: {
                     or: [
-                        "__featureSwitchIsTesting=true",
                         "__featureSwitchIsDebugging=true",
                         "mapcomplete-show_tags=full",
                         "mapcomplete-show_debug=yes",
diff --git a/Models/ThemeViewState.ts b/Models/ThemeViewState.ts
index be6da062d..b01e7e4fc 100644
--- a/Models/ThemeViewState.ts
+++ b/Models/ThemeViewState.ts
@@ -497,7 +497,6 @@ export default class ThemeViewState implements SpecialVisualizationState {
             // ... search and select an element based on the hash
             Hash.hash.mapD(
                 (hash) => {
-                    console.log("Searching for an id:", hash)
                     if (this.selectedElement.data?.properties?.id === hash) {
                         // We already have the correct hash
                         return
diff --git a/UI/Map/ShowDataLayer.ts b/UI/Map/ShowDataLayer.ts
index edd866a21..a43ecdff8 100644
--- a/UI/Map/ShowDataLayer.ts
+++ b/UI/Map/ShowDataLayer.ts
@@ -65,7 +65,6 @@ class PointRenderingLayer {
                 if (marker === undefined) {
                     return
                 }
-                console.log("Marking", marker, "as selected for config", config)
                 marker?.classList?.add("selected")
                 this._markedAsSelected.push(marker)
             })
diff --git a/UI/Popup/AddNewPoint/AddNewPoint.svelte b/UI/Popup/AddNewPoint/AddNewPoint.svelte
index 10ee30a4a..e47726f4d 100644
--- a/UI/Popup/AddNewPoint/AddNewPoint.svelte
+++ b/UI/Popup/AddNewPoint/AddNewPoint.svelte
@@ -29,6 +29,8 @@
     import {onDestroy} from "svelte";
     import NextButton from "../../Base/NextButton.svelte";
     import BackButton from "../../Base/BackButton.svelte";
+    import ToSvelte from "../../Base/ToSvelte.svelte";
+    import Svg from "../../../Svg";
 
     export let coordinate: { lon: number, lat: number };
     export let state: SpecialVisualizationState;
@@ -160,27 +162,26 @@
 
     {:else if !$layerIsDisplayed}
         <!-- Check that the layer is enabled, so that we don't add a duplicate -->
-        <div class="alert flex justify-center items-center">
+        <div class="alert flex  justify-center items-center">
             <EyeOffIcon class="w-8"/>
             <Tr t={Translations.t.general.add.layerNotEnabled
                     .Subs({ layer: selectedPreset.layer.name })
                    }/>
         </div>
 
-        <SubtleButton on:click={() => {
-      layerIsDisplayed.setData(true)
-      abort()
-    }}>
-            <EyeIcon slot="image" class="w-8"/>
-            <Tr slot="message" t={Translations.t.general.add.enableLayer.Subs({name: selectedPreset.layer.name})}/>
-        </SubtleButton>
+        <div class="flex flex-wrap-reverse md:flex-nowrap">
 
-        <SubtleButton on:click={() => {
-      abort()
-      state.guistate.openFilterView(selectedPreset.layer)    }    }>
-            <img src="./assets/svg/layers.svg" slot="image" class="w-6">
-            <Tr slot="message" t={Translations.t.general.add.openLayerControl}></Tr>
-        </SubtleButton>
+            <button class="flex w-full gap-x-1"
+                    on:click={() => {abort();state.guistate.openFilterView(selectedPreset.layer)}}>
+                <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
+                <Tr t={Translations.t.general.add.openLayerControl}/>
+            </button>
+
+            <button class="flex w-full gap-x-1 primary" on:click={() => {layerIsDisplayed.setData(true);abort()}}>
+                <EyeIcon class="w-12"/>
+                <Tr t={Translations.t.general.add.enableLayer.Subs({name: selectedPreset.layer.name})}/>
+            </button>
+        </div>
 
 
     {:else if $layerHasFilters}
@@ -189,33 +190,24 @@
             <EyeOffIcon class="w-8"/>
             <Tr t={Translations.t.general.add.disableFiltersExplanation}/>
         </div>
-
-        <SubtleButton on:click={() => {
-      abort()
-      const flayer = state.layerState.filteredLayers.get(selectedPreset.layer.id)
-      flayer.disableAllFilters()
-    }
-    }>
-            <EyeOffIcon class="w-8"/>
-            <Tr slot="message" t={Translations.t.general.add.disableFilters}></Tr>
-        </SubtleButton>
-
-
-        <SubtleButton options={{extraClasses:"secondary"}} on:click={() => {
-      abort()
-      state.guistate.openFilterView(selectedPreset.layer)
-    }
-    }>
-            <img src="./assets/svg/layers.svg" slot="image" class="w-6">
-            <Tr slot="message" t={Translations.t.general.add.openLayerControl}></Tr>
-        </SubtleButton>
+        <div class="flex flex-wrap-reverse md:flex-nowrap">
+            <button class="flex w-full gap-x-1 primary"
+                    on:click={() => {abort(); state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()}    }>
+                <EyeOffIcon class="w-12"/>
+                <Tr t={Translations.t.general.add.disableFilters}/>
+            </button>
+            <button class="flex w-full gap-x-1" on:click={() => {abort();state.guistate.openFilterView(selectedPreset.layer)}}>
+                <ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
+                <Tr t={Translations.t.general.add.openLayerControl}/>
+            </button>
+        </div>
 
     {:else if !confirmedCategory  }
         <!-- Second, confirm the category -->
         <h2>
             <Tr t={Translations.t.general.add.confirmTitle.Subs({title: selectedPreset.preset.title})}/>
         </h2>
-        
+
         <Tr t={Translations.t.general.add.confirmIntro}/>
 
 
@@ -240,7 +232,7 @@
         <TagHint embedIn={tags => t.presetInfo.Subs({tags})} {state}
                  tags={new And(selectedPreset.preset.tags)}></TagHint>
 
-        <div class="flex w-full">
+        <div class="flex w-full flex-wrap-reverse md:flex-nowrap">
 
             <BackButton on:click={() => selectedPreset = undefined} clss="w-full">
                 <Tr slot="message" t={t.backToSelect}/>
@@ -272,18 +264,18 @@
     {:else if !creating}
         <NewPointLocationInput value={preciseCoordinate} snappedTo={snappedToObject} {state} {coordinate}
                                targetLayer={selectedPreset.layer}
-                               snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}></NewPointLocationInput>
-        <div class="flex">
-            
-        <BackButton on:click={() => selectedPreset = undefined} clss="w-full">
-            <Tr slot="message" t={t.backToSelect}/>
-        </BackButton>
+                               snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}/>
+        <div class="flex flex-wrap-reverse md:flex-nowrap">
 
-        <NextButton on:click={confirm} clss="primary w-full">
-            <div class="w-full flex justify-end gap-x-2">
-            <Tr t={Translations.t.general.add.confirmLocation}/>
-            </div>
-        </NextButton>
+            <BackButton on:click={() => selectedPreset = undefined} clss="w-full">
+                <Tr slot="message" t={t.backToSelect}/>
+            </BackButton>
+
+            <NextButton on:click={confirm} clss="primary w-full">
+                <div class="w-full flex justify-end gap-x-2">
+                    <Tr t={Translations.t.general.add.confirmLocation}/>
+                </div>
+            </NextButton>
         </div>
     {:else}
         <Loading>Creating point...</Loading>
diff --git a/UI/Popup/TagRendering/Questionbox.svelte b/UI/Popup/TagRendering/Questionbox.svelte
index edca18816..122318d2e 100644
--- a/UI/Popup/TagRendering/Questionbox.svelte
+++ b/UI/Popup/TagRendering/Questionbox.svelte
@@ -124,8 +124,8 @@
             {/if}
 
             {#if skipped > 0 }
-                <button on:click={() => {skippedQuestions.setData(new Set()); skipped=0}}>
-                    Re-activate skipped questions
+                <button class="w-full" on:click={() => {skippedQuestions.setData(new Set()); skipped=0}}>
+                    <Tr t={Translations.t.general.questionBox.reactivate }/>
                 </button>
             {/if}
         {/if}
diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 207594d12..b0263c593 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -1304,6 +1304,11 @@ video {
   row-gap: 0.5rem;
 }
 
+.gap-x-1 {
+  -webkit-column-gap: 0.25rem;
+          column-gap: 0.25rem;
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -2543,6 +2548,10 @@ a.link-underline {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
   .md\:border-t-2 {
     border-top-width: 2px;
   }