Move wishlist export form styles to component, add more interactivity…

…, minor visual update

src/css/augmentedsteam.css

@@ -923,38 +923,6 @@ video.highlight_movie:hover + .html5_video_overlay {
   color: black;
 }
 
-.es-wexport {
-  margin-bottom: 30px;
-}
-.es-wexport__label {
-  margin-right: 30px;
-  vertical-align: baseline;
-}
-.es-wexport__label input[type=radio] {
-  position: relative;
-  top: 2px;
-}
-.es-wexport__input {
-  width: 400px;
-  color: #b9bfc6;
-  background-color: #313c48;
-  box-shadow: 1px 1px 0 rgba(0,0,0,0.2) inset;
-  border-radius: 3px;
-  font-size: 12px;
-  padding: 3px 4px;
-  border: none;
-}
-.es-wexport__symbols {
-  margin-top: 2px;
-  font-size: 11px;
-}
-.es-wexport__format.es-grayout {
-  opacity: 0.4;
-  pointer-events: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
 /***************************************
  * App pages
  * Common/UserNotes

src/js/Content/Features/Store/Wishlist/Components/ExportWishlistForm.svelte

@@ -3,25 +3,125 @@
 <script lang="ts">
     import {L} from "@Core/Localization/Localization";
     import {__export_format, __export_text, __export_type} from "@Strings/_strings";
+    import {slide} from "svelte/transition";
+    import {createEventDispatcher, onMount} from "svelte";
+
+    const dispatch = createEventDispatcher<{setup: void}>();
 
     export let type: "text"|"json";
     export let format: string;
+
+    let input: HTMLInputElement;
+
+    function add(value: string): void {
+        if (!input) { return; }
+        format = input.value;
+
+        if (input.selectionStart !== null) {
+            const selection = input.selectionStart;
+            if (input.selectionEnd && selection !== input.selectionEnd) {
+                format = format.slice(0, selection) + format.slice(input.selectionEnd);
+            }
+            format = format.slice(0, selection) + value + format.slice(selection);
+            input.selectionStart = selection + value.length;
+        } else {
+            format = format + value;
+            input.selectionStart = format.length;
+        }
+        input.selectionEnd = input.selectionStart;
+        input.focus();
+    }
+
+    $: type, format, dispatch("setup");
+
+    onMount(() => {
+        window.dispatchEvent(new Event("resize"));
+    });
 </script>
 
 
 <div class="es-wexport">
     <h2>{L(__export_type)}</h2>
-    <div>
-        <label class="es-wexport__label"><input type="radio" name="es_wexport_type" value="text" bind:group={type} on:change> {L(__export_text)}</label>
-        <label class="es-wexport__label"><input type="radio" name="es_wexport_type" value="json" bind:group={type} on:change> JSON</label>
+    <div class="es-wexport__buttons">
+        <label><input type="radio" value="text" bind:group={type} on:change> {L(__export_text)}</label>
+        <label><input type="radio" value="json" bind:group={type} on:change> JSON</label>
     </div>
 </div>
-<div class="es-wexport es-wexport__format" class:es-grayout={type === "json"}>
-    <h2>{L(__export_format)}</h2>
-    <div>
-        <input type="text" id="es-wexport-format" class="es-wexport__input" bind:value={format} on:change><br>
-        <div class="es-wexport__symbols">%title%, %id%, %appid%, %url%, %release_date%, %price%, %discount%, %base_price%, %type%, %note%</div>
+
+{#if type === "text"}
+    <div class="es-wexport" transition:slide={{axis: "y", duration: 200}}>
+        <h2>{L(__export_format)}</h2>
+        <div>
+            <input type="text" id="es-wexport-format" bind:value={format} bind:this={input} on:change>
+            <div class="es-wexport__symbols">
+                {#each ["%title%", "%id%", "%appid%", "%url%", "%release_date%", "%price%", "%discount%", "%base_price%", "%type%", "%note%"] as str, index}
+                    {#if index > 0}, {/if}
+                    <button type="button" on:click={() => add(str)}>{str}</button>
+                {/each}
+            </div>
+        </div>
     </div>
-</div>
+{/if}
+
+
+<style>
+    .es-wexport {
+        margin-bottom: 30px;
+    }
+    .es-wexport__buttons {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px
+    }
+    .es-wexport__symbols {
+        margin-top: 2px;
+        font-size: 11px;
+    }
+
+    label {
+        display: inline-flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 15px;
+        border-radius: 8px;
+        border: 1px solid #333643;
+        text-align: left;
+        cursor: pointer;
+    }
+    label:hover {
+        color: white;
+        border-color: white;
+    }
+    label:has(input[type=radio]:checked) {
+        color: white;
+        border-color: #1a97ff
+    }
+    label input[type=radio]{
+        display: none;
+    }
 
+    input[type=text] {
+        width: 100%;
+        color: #b9bfc6;
+        background-color: #313c48;
+        box-shadow: 1px 1px 0 rgba(0,0,0,0.2) inset;
+        border-radius: 3px;
+        font-size: 12px;
+        padding: 10px;
+        border: none;
+        box-sizing: border-box;
+    }
 
+    button {
+        background: inherit;
+        border: 0;
+        outline: 0;
+        padding: 0;
+        color: #acb2b8;
+        cursor: pointer;
+    }
+    button:hover {
+        text-decoration: underline;
+        color: white;
+    }
+</style>

src/js/Content/Features/Store/Wishlist/FExportWishlist.ts

@@ -130,7 +130,7 @@ export default class FExportWishlist extends Feature<CWishlist> {
                         format: this.format
                     }
                 });
-                form.$on("change", () => {
+                form.$on("setup", () => {
                     this.format = form.format;
                     this.type = form.type;
                 });
@@ -144,7 +144,7 @@ export default class FExportWishlist extends Feature<CWishlist> {
 
         const response = await SteamFacade.showConfirmDialog(
             L(__export_wishlist),
-            `<div id="as_export_form"></div>`,
+            `<div id="as_export_form" style="width:580px"></div>`,
             L(__export_download),
             null, // use default "Cancel"
             L(__export_copyClipboard)
@@ -154,16 +154,9 @@ export default class FExportWishlist extends Feature<CWishlist> {
             return;
         }
 
-        this.exportWishlist(
-            response === "OK"
-                ? ExportMethod.download
-                : ExportMethod.copy,
-            this.type,
-            this.format
-        )
-    }
-
-    private async exportWishlist(method: ExportMethod, type: "text"|"json", format: string): Promise<void> {
+        const method = response === "OK"
+            ? ExportMethod.download
+            : ExportMethod.copy;
 
         const appInfo = await SteamFacade.global("g_rgAppInfo");
         const wl: WishlistData = (await SteamFacade.global<{rgVisibleApps: string[]}>("g_Wishlist")).rgVisibleApps.map(
@@ -174,12 +167,12 @@ export default class FExportWishlist extends Feature<CWishlist> {
         let data = "";
         let filename = "";
         let filetype = "";
-        if (type === "json") {
+        if (this.type === "json") {
             data = await wishlist.toJson();
             filename = "wishlist.json";
             filetype = "application/json";
-        } else if (type === "text" && format) {
-            data = await wishlist.toText(format);
+        } else if (this.type === "text" && this.format) {
+            data = await wishlist.toText(this.format);
             filename = "wishlist.txt";
             filetype = "text/plain";
         }