fix bug with enable/disable all in options page. bump version to 2.4.1

Author: ankit

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",

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(): {

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": {

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,

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"

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

src/options/components/TheStylesTab.vue

@@ -48,16 +48,15 @@
           </v-col>
         </v-row>
 
-        <Style
+        <style-component
           :key="style.url"
           :css="style.css"
           :url="style.url"
           :initialEnabled="style.enabled"
           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();