From 32ca473fd493d5f8b113401c0a422a9c144d6581 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Tue, 18 May 2021 18:55:22 +0200
Subject: [PATCH] Make SaveButton functional

---
 ts/components/WithDropdownMenu.svelte             |  9 +++++++--
 ts/deckoptions/ConfigSelector.svelte              |  4 ++--
 ts/deckoptions/DeckOptionsPage.svelte             |  4 ++--
 .../{OptionsDropdown.svelte => SaveButton.svelte} |  4 ++--
 ts/deckoptions/deckoptions-base.scss              |  1 +
 ts/sass/button_mixins.scss                        | 15 ++++++++++++---
 6 files changed, 26 insertions(+), 11 deletions(-)
 rename ts/deckoptions/{OptionsDropdown.svelte => SaveButton.svelte} (94%)

diff --git a/ts/components/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte
index b1b11e374..068942b2b 100644
--- a/ts/components/WithDropdownMenu.svelte
+++ b/ts/components/WithDropdownMenu.svelte
@@ -15,6 +15,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 
     const menuId = Math.random().toString(36).substring(2);
+    let dropdown: Dropdown;
+
+    function activateDropdown(_event: MouseEvent): void {
+        dropdown.toggle();
+    }
 
     /* Normally dropdown and trigger are associated with a
     /* common ancestor with .dropdown class */
@@ -31,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
         } else {
-            const dropdown = new Dropdown(button);
+            dropdown = new Dropdown(button);
 
             /* Set custom menu without using common element with .dropdown */
             (dropdown as any)._menu = menu;
@@ -39,4 +44,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </script>
 
-<slot {createDropdown} {menuId} />
+<slot {createDropdown} {activateDropdown} {menuId} />
diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte
index f32f90bfa..12c8d3e10 100644
--- a/ts/deckoptions/ConfigSelector.svelte
+++ b/ts/deckoptions/ConfigSelector.svelte
@@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     import SelectButton from "components/SelectButton.svelte";
     import SelectOption from "components/SelectOption.svelte";
-    import OptionsDropdown from "./OptionsDropdown.svelte";
+    import SaveButton from "./SaveButton.svelte";
 
     export let state: DeckOptionsState;
     let configList = state.configList;
@@ -52,7 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </ButtonToolbarItem>
 
             <ButtonToolbarItem>
-                <OptionsDropdown {state} />
+                <SaveButton {state} />
             </ButtonToolbarItem>
         </ButtonToolbar>
     </WithTheming>
diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deckoptions/DeckOptionsPage.svelte
index bacffa186..809c93bda 100644
--- a/ts/deckoptions/DeckOptionsPage.svelte
+++ b/ts/deckoptions/DeckOptionsPage.svelte
@@ -48,13 +48,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 </style>
 
+<ConfigSelector {state} />
+
 <div>
     <div id="modal">
         <!-- filled in later-->
     </div>
 
-    <ConfigSelector {state} />
-
     <div class="editor">
         <ConfigEditor {state} />
     </div>
diff --git a/ts/deckoptions/OptionsDropdown.svelte b/ts/deckoptions/SaveButton.svelte
similarity index 94%
rename from ts/deckoptions/OptionsDropdown.svelte
rename to ts/deckoptions/SaveButton.svelte
index bf0f9ff00..9bc6d1f31 100644
--- a/ts/deckoptions/OptionsDropdown.svelte
+++ b/ts/deckoptions/SaveButton.svelte
@@ -75,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </ButtonGroupItem>
 
     <ButtonGroupItem>
-        <WithDropdownMenu let:createDropdown let:menuId>
-            <LabelButton on:mount={createDropdown} />
+        <WithDropdownMenu let:createDropdown let:activateDropdown let:menuId>
+            <LabelButton on:mount={createDropdown} on:click={activateDropdown} />
             <DropdownMenu id={menuId}>
                 <DropdownItem on:click={addConfig}>Add Config</DropdownItem>
                 <DropdownItem on:click={renameConfig}>Rename Config</DropdownItem>
diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deckoptions/deckoptions-base.scss
index b178fba05..79bdada4b 100644
--- a/ts/deckoptions/deckoptions-base.scss
+++ b/ts/deckoptions/deckoptions-base.scss
@@ -1,3 +1,4 @@
+@use "ts/sass/vars";
 @use "ts/sass/scrollbar";
 @use "ts/sass/bootstrap-dark";
 
diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss
index 15956c196..a4c62c956 100644
--- a/ts/sass/button_mixins.scss
+++ b/ts/sass/button_mixins.scss
@@ -17,7 +17,12 @@ $btn-base-color-day: white;
     border-color: var(--medium-border) !important;
 }
 
-@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
+@mixin btn-day(
+    $with-hover: true,
+    $with-active: true,
+    $with-disabled: true,
+    $with-margin: true
+) {
     .btn-day {
         @include btn-day-base;
         @content ($btn-base-color-day);
@@ -60,8 +65,12 @@ $btn-base-color-night: #666;
     border-color: $btn-base-color-night;
 }
 
-@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) {
-
+@mixin btn-night(
+    $with-hover: true,
+    $with-active: true,
+    $with-disabled: true,
+    $with-margin: true
+) {
     .btn-night {
         @include btn-night-base;
         @content ($btn-base-color-night);