From 92c12d1c9a28f3dd104f2f6501eec878a211af02 Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Sun, 9 Feb 2020 14:05:46 +0100
Subject: [PATCH] Switch instead of checkbox

---
 package.json                  |  4 ++--
 resources/styles/_popper.scss |  4 ++++
 resources/styles/main.scss    |  2 ++
 templates/app.html.twig       | 40 ++++++++++++++++++++---------------
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 07a27f5..65e7b89 100644
--- a/package.json
+++ b/package.json
@@ -9,11 +9,11 @@
     "@fortawesome/pro-regular-svg-icons": "^5.3.1",
     "@fortawesome/pro-solid-svg-icons": "^5.3.1",
     "@fortawesome/vue-fontawesome": "^0.1.1",
-    "@types/bootstrap": "^4.1.2",
+    "@types/bootstrap": "^4.3.1",
     "@types/jquery": "^3.3.6",
     "@types/moment": "^2.13.0",
     "@types/popper.js": "^1.11.0",
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^4.3.1",
     "css-loader": "^1.0.0",
     "file-loader": "^2.0.0",
     "jquery": "^3.3.1",
diff --git a/resources/styles/_popper.scss b/resources/styles/_popper.scss
index 07d5247..7b9ea5b 100644
--- a/resources/styles/_popper.scss
+++ b/resources/styles/_popper.scss
@@ -88,6 +88,10 @@
     font-size: $font-size-sm;
     font-weight: bold;
     margin-bottom: .5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   @mixin placement($placement) {
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index 73afad3..58b6f1b 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -72,6 +72,8 @@ $grid-gutter-width: $spacer * 2;
 @import "trip";
 @import "dragscroll";
 
+@import "ui/switch";
+
 body {
   min-height: 100vh;
   display: flex;
diff --git a/templates/app.html.twig b/templates/app.html.twig
index 464825c..1fb8bfb 100644
--- a/templates/app.html.twig
+++ b/templates/app.html.twig
@@ -27,19 +27,23 @@
                         <fa :icon="['fal', sections.messages ? 'chevron-up' : 'chevron-down']" fixed-width/>
                     </button>
 
-                    <popper reference="settings-messages" v-if="visibility.messages" arrow placement="left-start" @leave="visibility.messages = false">
-                        <h3 class="popper__heading flex">
-                            <fa :icon="['far', 'cog']"></fa>
-                            <label class="text" for="messages-auto-refresh">autoodświeżanie</label>
-                            <input type="checkbox" class="flex-space-left" id="messages-auto-refresh" v-model="autorefresh.messages.active"/>
-                        </h3>
-                        <div class="flex" v-show="autorefresh.messages.active">
-                            <span class="text">co</span>
-                            <label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
-                            <input type="text" class="form-control form-control-sm" id="messages-auto-refresh-interval" v-model="autorefresh.messages.interval"/>
-                            <span class="text">s</span>
-                        </div>
-                    </popper>
+                    <portal to="popups">
+                        <popper reference="settings-messages" v-if="visibility.messages" arrow placement="left-start" @leave="visibility.messages = false">
+                            <h3 class="popper__heading flex">
+                                <label class="text" for="messages-auto-refresh">
+                                    <fa :icon="['far', 'sync']" fixed-width></fa>
+                                    autoodświeżanie
+                                </label>
+                                <ui-switch id="messages-auto-refresh" v-model="autorefresh.messages.active" class="flex-space-left"></ui-switch>
+                            </h3>
+                            <div class="flex" v-if="autorefresh.messages.active">
+                                <span class="text">co</span>
+                                <label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
+                                <input type="text" class="form-control form-control-sm" id="messages-auto-refresh-interval" v-model="autorefresh.messages.interval"/>
+                                <span class="text">s</span>
+                            </div>
+                        </popper>
+                    </portal>
                 </header>
                 <fold :visible="sections.messages">
                     <messages></messages>
@@ -64,11 +68,13 @@
                     <portal to="popups">
                         <popper reference="settings-departures" v-if="visibility.departures" arrow placement="left-start" @leave="visibility.departures = false">
                             <h3 class="popper__heading flex">
-                                <fa :icon="['far', 'sync']" fixed-width></fa>
-                                <label class="text" for="messages-auto-refresh">autoodświeżanie</label>
-                                <input type="checkbox" class="flex-space-left" id="messages-auto-refresh" v-model="autorefresh.departures.active"/>
+                                <label class="text" for="messages-auto-refresh">
+                                    <fa :icon="['far', 'sync']" fixed-width></fa>
+                                    autoodświeżanie
+                                </label>
+                                <ui-switch id="messages-auto-refresh" v-model="autorefresh.departures.active" class="flex-space-left"></ui-switch>
                             </h3>
-                            <div class="flex" v-show="autorefresh.messages.active">
+                            <div class="flex" v-if="autorefresh.departures.active">
                                 <span class="text">co</span>
                                 <label class="sr-only" for="messages-auto-refresh-interval">częstotliwość odświeżania</label>
                                 <input type="text" class="form-control form-control-sm form-control-simple" id="messages-auto-refresh-interval" v-model="autorefresh.departures.interval"/>