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

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();