From 627baa07341af6d095e2f63e2165da480fbc0bc5 Mon Sep 17 00:00:00 2001
From: Ankit Ahuja <ahuja.ankit@gmail.com>
Date: Sun, 21 Jun 2020 14:03:19 -0700
Subject: [PATCH] fix bug with enable/disable all in options page. bump version
 to 2.4.1

---
 package.json                             |  2 +-
 src/browseraction/App.vue                |  6 ++---
 src/manifest.json                        |  2 +-
 src/options/components/Style.vue         |  8 +++++-
 src/options/components/StyleEditor.vue   |  2 +-
 src/options/components/TheNavigation.vue |  2 +-
 src/options/components/TheStylesTab.vue  | 34 +++++++++++++-----------
 7 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 43a9a090..f4b2dcb2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stylebot",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Change the appearance of websites instantly.",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --hide-modules; node ./build_scripts/compile_templates",
diff --git a/src/browseraction/App.vue b/src/browseraction/App.vue
index 59a1e6bd..717aa011 100644
--- a/src/browseraction/App.vue
+++ b/src/browseraction/App.vue
@@ -15,7 +15,7 @@
           </v-list-item-content>
         </v-list-item>
 
-        <Style
+        <style-component
           :tab="tab"
           :key="style.url"
           :url="style.url"
@@ -42,12 +42,12 @@
 import Vue from 'vue';
 import { mdiCogOutline, mdiImageEditOutline } from '@mdi/js';
 
-import Style from './components/Style.vue';
+import StyleComponent from './components/Style.vue';
 
 export default Vue.extend({
   name: 'App',
   components: {
-    Style,
+    StyleComponent,
   },
 
   data(): {
diff --git a/src/manifest.json b/src/manifest.json
index 93971eca..a66df5c8 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Stylebot",
-  "version": "2.4",
+  "version": "2.4.1",
   "description": "Change the appearance of websites instantly.",
 
   "background": {
diff --git a/src/options/components/Style.vue b/src/options/components/Style.vue
index 5f7ae92b..7ddca96d 100644
--- a/src/options/components/Style.vue
+++ b/src/options/components/Style.vue
@@ -17,7 +17,7 @@
         :label="url"
         :ripple="false"
         v-model="enabled"
-        @click="enabled ? $emit('enable') : $emit('disable')"
+        @click="$emit('toggle')"
       />
     </v-col>
 
@@ -41,6 +41,12 @@ export default Vue.extend({
   name: 'Style',
   props: ['url', 'css', 'initialEnabled'],
 
+  watch: {
+    initialEnabled(newVal: boolean): void {
+      this.enabled = newVal;
+    },
+  },
+
   components: {
     StyleEditor,
     StyleEditButton,
diff --git a/src/options/components/StyleEditor.vue b/src/options/components/StyleEditor.vue
index 6b4fb547..b09ffe81 100644
--- a/src/options/components/StyleEditor.vue
+++ b/src/options/components/StyleEditor.vue
@@ -36,7 +36,7 @@
               <app-button text="Cancel" @click="$emit('cancel')" />
             </v-col>
 
-            <v-col cols="4">
+            <v-col cols="4" class="mr-1">
               <app-button
                 text="Save"
                 color="primary"
diff --git a/src/options/components/TheNavigation.vue b/src/options/components/TheNavigation.vue
index 7869581d..9d1d5f18 100644
--- a/src/options/components/TheNavigation.vue
+++ b/src/options/components/TheNavigation.vue
@@ -21,7 +21,7 @@
 
     <div class="ma-4 ml-7">
       <span class="caption">
-        v2.4 •
+        v2.4.1 •
         <a target="_blank" href="http://github.com/ankit/stylebot">Readme</a>
         •
         <a
diff --git a/src/options/components/TheStylesTab.vue b/src/options/components/TheStylesTab.vue
index 1dd0f313..0ac35834 100644
--- a/src/options/components/TheStylesTab.vue
+++ b/src/options/components/TheStylesTab.vue
@@ -48,7 +48,7 @@
           </v-col>
         </v-row>
 
-        <Style
+        <style-component
           :key="style.url"
           :css="style.css"
           :url="style.url"
@@ -56,8 +56,7 @@
           v-for="style in styles"
           @save="saveStyle"
           @delete="deleteStyle(style)"
-          @enable="enableStyle(style)"
-          @disable="disableStyle(style)"
+          @toggle="toggleStyle(style)"
         />
       </v-col>
     </v-row>
@@ -67,8 +66,8 @@
 <script lang="ts">
 import Vue from 'vue';
 
-import Style from './Style.vue';
 import AppButton from './AppButton.vue';
+import StyleComponent from './Style.vue';
 import StyleEditor from './StyleEditor.vue';
 import TheDeleteAllStylesButton from './TheDeleteAllStylesButton.vue';
 
@@ -83,18 +82,15 @@ import {
   deleteAllStyles,
 } from '../utilities';
 
-type Style = {
-  url: string;
-  css: string;
-  enabled: boolean;
-};
+import { Style } from '../types';
 
 export default Vue.extend({
   name: 'TheStylesTab',
+
   components: {
-    Style,
     AppButton,
     StyleEditor,
+    StyleComponent,
     TheDeleteAllStylesButton,
   },
 
@@ -119,26 +115,32 @@ export default Vue.extend({
       this.urlFilter = str;
       this.getStyles();
     },
+
     deleteStyle(style: Style): void {
       deleteStyle(style.url);
       this.getStyles();
     },
-    enableStyle(style: Style): void {
-      enableStyle(style.url);
-      this.getStyles();
-    },
-    disableStyle(style: Style): void {
-      disableStyle(style.url);
+
+    toggleStyle(style: Style): void {
+      if (style.enabled) {
+        disableStyle(style.url);
+      } else {
+        enableStyle(style.url);
+      }
+
       this.getStyles();
     },
+
     enableAll(): void {
       enableAllStyles();
       this.getStyles();
     },
+
     disableAll(): void {
       disableAllStyles();
       this.getStyles();
     },
+
     deleteAll(): void {
       deleteAllStyles();
       this.getStyles();