Tidy switches Vue files

client/src/ui/components/bd/CssEditor.vue

@@ -15,17 +15,13 @@
                 <h5>Custom Editor</h5>
                 <div class="bd-form-warning">
                     <div class="bd-text">Custom Editor is not installed!</div>
-                    <FormButton>
-                        Install
-                    </FormButton>
+                    <FormButton>Install</FormButton>
                 </div>
                 <span style="color: #FFF; font-size: 12px; font-weight: 700;">*This is displayed if editor is not installed</span>
-                <FormButton :onClick="openInternalEditor">
-                    Open
-                </FormButton>
+                <FormButton :onClick="openInternalEditor">Open</FormButton>
             </div>
             <div class="bd-form-divider"></div>
-            <SettingSwitch :setting="dummySetting" :onClick="settingClicked" />
+            <Setting :setting="liveUpdateSetting" :change="enabled => liveUpdateSetting.value = enabled" />
             <div class="bd-form-item">
                 <h5>System Editor</h5>
                 <FormButton>
@@ -33,12 +29,8 @@
                 </FormButton>
             </div>
             <div class="bd-form-divider"></div>
-            <FormButton :onClick="settingClicked">
-                Enabled
-            </FormButton>
-            <FormButton :disabled="true">
-                <span>Disabled</span>
-            </FormButton>
+            <FormButton :onClick="() => {}">Enabled</FormButton>
+            <FormButton :disabled="true"><span>Disabled</span></FormButton>
             <FormButton :loading="true" />
         </div>
     </SettingsWrapper>
@@ -48,27 +40,29 @@
     // Imports
     import { CssEditor } from 'modules';
     import { SettingsWrapper } from './';
-    import { SettingSwitch, FormButton } from '../common';
+    import { FormButton } from '../common';
+    import Setting from './setting/Setting.vue';
 
     export default {
         components: {
             SettingsWrapper,
-            SettingSwitch, FormButton
+            Setting,
+            FormButton
+        },
+        data() {
+            return {
+                liveUpdateSetting: {
+                    id: "live-update",
+                    type: "bool",
+                    text: "Live Update",
+                    hint: "Automatically update client css when saved.",
+                    value: true
+                }
+            }
         },
         methods: {
             openInternalEditor() {
                 CssEditor.show();
-            },
-            settingClicked() {
-            }
-        },
-        data() {
-            return {
-                dummySetting: {
-                    title: "Live Update",
-                    hint: "Automatically update client css when saved.",
-                    checked: true
-                }
             }
         }
     }

client/src/ui/components/bd/PluginCard.vue

@@ -10,10 +10,7 @@
 
 <template>
     <Card :item="plugin">
-        <label slot="toggle" class="bd-switch-wrapper" @click="() => { togglePlugin(plugin); this.$forceUpdate(); }">
-            <input type="checkbox" class="bd-switch-checkbox" />
-            <div class="bd-switch" :class="{'bd-checked': plugin.enabled}" />
-        </label>
+        <SettingSwitch slot="toggle" :checked="plugin.enabled" :change="() => plugin.enabled ? plugin.stop() : plugin.start()" />
         <ButtonGroup slot="controls">
             <Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
                 <MiSettings size="18" />

client/src/ui/components/bd/ThemeCard.vue

@@ -10,10 +10,7 @@
 
 <template>
     <Card :item="theme">
-        <label slot="toggle" class="bd-switch-wrapper" @click="() => { toggleTheme(theme); this.$forceUpdate(); }">
-            <input type="checkbox" class="bd-switch-checkbox" />
-            <div class="bd-switch" :class="{'bd-checked': theme.enabled}" />
-        </label>
+        <SettingSwitch slot="toggle" :checked="theme.enabled" :change="() => theme.enabled ? theme.disable() : theme.enable()" />
         <ButtonGroup slot="controls">
             <Button v-tooltip="'Settings'" v-if="theme.hasSettings" :onClick="() => showSettings(theme)">
                 <MiSettings size="18" />

client/src/ui/components/bd/setting/Bool.vue

@@ -12,21 +12,18 @@
     <div class="bd-setting-switch">
         <div class="bd-title">
             <h3>{{setting.text}}</h3>
-            <label class="bd-switch-wrapper" @click="toggle">
-                <input type="checkbox" class="bd-switch-checkbox" />
-                <div class="bd-switch" :class="{'bd-checked': setting.value}" />
-            </label>
+            <SettingSwitch :checked="setting.value" :change="change" />
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
 <script>
+    import SettingSwitch from '../../common/SettingSwitch.vue';
+
     export default {
         props: ['setting', 'change'],
-        methods: {
-            toggle() {
-                this.change(!this.setting.value);
-            }
+        components: {
+            SettingSwitch
         }
     }
 </script>

client/src/ui/components/common/SettingSwitch.vue

@@ -9,21 +9,13 @@
 */
 
 <template>
-    <div class="bd-setting-switch" :class="{'bd-disabled': disabled}">
-        <div class="bd-setting-switch-wrap">
-            <div class="bd-title">
-                <h3>{{setting.title || setting.text}}</h3>
-                <label class="bd-switch-wrapper" @click="!disabled ? onClick(setting) : null">
+    <label class="bd-switch-wrapper" @click="() => change(!checked)">
         <input type="checkbox" class="bd-switch-checkbox" />
-                    <div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled || setting.value)}" />
+        <div class="bd-switch" :class="{'bd-checked': checked}" />
     </label>
-            </div>
-            <div class="bd-hint">{{setting.hint}}</div>
-        </div>
-    </div>
 </template>
 <script>
     export default {
-        props: ['setting', 'onClick', 'disabled']
+        props: ['checked', 'change']
     }
 </script>