Move save button

dtinth · Apr 3, 2020 · e9de482 · e9de482
1 parent e972466
commit e9de482
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 16 deletions.
diff --git a/options.html b/options.html
@@ -55,22 +55,7 @@ <h2 class="text-2xl text-bbeeff mt-6 mb-4">Language settings</h2>
             </div>
           </div>
 
-          <div class="flex items-center mb-4">
-            <div class="w-1/3"></div>
-            <div>
-              <button
-                @click="store.save"
-                class="shadow text-090807 focus:shadow-outline focus:outline-none font-bold py-2 px-4 rounded"
-                :class="[changed ? 'bg-d7fc70' : 'bg-8b8685']"
-                type="button"
-              >
-                Save
-              </button>
-            </div>
-            <div class="ml-4">
-              {{status}}
-            </div>
-          </div>
+          <save-button :store="store"></save-button>
         </div>
       </template>
     </div>

diff --git a/options.js b/options.js
@@ -1,6 +1,32 @@
 Vue.config.productionTip = false
 Vue.config.devtools = false
 
+{
+  const html = String.raw
+
+  Vue.component('save-button', {
+    props: ['store'],
+    template: html`
+      <div class="flex items-center mb-4">
+        <div class="w-1/3"></div>
+        <div>
+          <button
+            @click="store.save"
+            class="shadow text-090807 focus:shadow-outline focus:outline-none font-bold py-2 px-4 rounded"
+            :class="[store.changed ? 'bg-d7fc70' : 'bg-8b8685']"
+            type="button"
+          >
+            Save
+          </button>
+        </div>
+        <div class="ml-4">
+          {{store.status}}
+        </div>
+      </div>
+    `,
+  })
+}
+
 var vm = new Vue({
   el: '#app',
   data: {