Display an unsaved changes pop up

dtinth · Apr 4, 2020 · a215e36 · a215e36
1 parent 57eaebc
commit a215e36
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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"