From a215e364a3a5f285247b7587920bd0b16a1a5080 Mon Sep 17 00:00:00 2001
From: Thai Pangsakulyanont <dtinth@spacet.me>
Date: Sat, 4 Apr 2020 14:29:49 +0700
Subject: [PATCH] Display an unsaved changes pop up

---
 options.html | 11 +++++++++++
 options.js   |  2 +-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/options.html b/options.html
index c1c6a5f..5a2bbfc 100644
--- a/options.html
+++ b/options.html
@@ -284,6 +284,17 @@ <h2 class="text-2xl text-d7fc70 mt-6 mb-4">
 
           <save-button :store="store"></save-button>
         </div>
+        <div class="h-24"></div>
+        <div
+          class="fixed inset-x-0 bottom-0 px-8 bg-090807"
+          v-show="store.changed"
+        >
+          <div class="max-w-xl pt-4">
+            <save-button :store="store">
+              <div class="text-yellow-300 font-bold">Unsaved changes</div>
+            </save-button>
+          </div>
+        </div>
       </template>
     </div>
 
diff --git a/options.js b/options.js
index a6d387a..8dd5b3d 100644
--- a/options.js
+++ b/options.js
@@ -8,7 +8,7 @@ Vue.config.devtools = false
     props: ['store'],
     template: html`
       <div class="flex items-center mb-4">
-        <div class="w-1/3"></div>
+        <div class="w-1/3"><slot></slot></div>
         <div>
           <button
             @click="store.save"