From 8c09112cffb29b6153e0c2e6ad80d1e04b7073c9 Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Fri, 30 Mar 2018 01:07:56 +0100
Subject: [PATCH] Use events

---
 client/src/ui/components/BdSettings.vue            | 2 +-
 client/src/ui/components/bd/BdBadge.vue            | 9 +++++----
 client/src/ui/components/bd/BdMessageBadge.vue     | 8 ++++----
 client/src/ui/components/bd/Card.vue               | 1 +
 client/src/ui/components/bd/CssEditor.vue          | 9 +++------
 client/src/ui/components/bd/PluginCard.vue         | 9 +++++----
 client/src/ui/components/bd/PluginsView.vue        | 4 ++--
 client/src/ui/components/bd/SettingsWrapper.vue    | 1 +
 client/src/ui/components/bd/ThemeCard.vue          | 8 ++++----
 client/src/ui/components/bd/ThemesView.vue         | 4 ++--
 client/src/ui/components/common/Button.vue         | 5 +++--
 client/src/ui/components/common/ButtonGroup.vue    | 4 ++--
 client/src/ui/components/common/Dropdown.vue       | 1 +
 client/src/ui/components/common/FormButton.vue     | 5 +++--
 client/src/ui/components/common/RefreshBtn.vue     | 7 ++++---
 client/src/ui/components/common/ScrollerWrap.vue   | 3 ++-
 client/src/ui/components/sidebar/Button.vue        | 5 +++--
 client/src/ui/components/sidebar/ContentColumn.vue | 1 +
 client/src/ui/components/sidebar/Header.vue        | 1 +
 client/src/ui/components/sidebar/Item.vue          | 5 +++--
 client/src/ui/components/sidebar/Sidebar.vue       | 5 ++---
 client/src/ui/components/sidebar/View.vue          | 1 +
 22 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/client/src/ui/components/BdSettings.vue b/client/src/ui/components/BdSettings.vue
index 38522ed8..b4f6aafe 100644
--- a/client/src/ui/components/BdSettings.vue
+++ b/client/src/ui/components/BdSettings.vue
@@ -18,7 +18,7 @@
                 </div>
                 <template v-for="(category, text) in sidebar">
                     <SidebarItem :item="{text, type: 'header'}" />
-                    <SidebarItem v-for="item in category" :item="item" :key="item.id" :onClick="itemOnClick" />
+                    <SidebarItem v-for="item in category" :item="item" :key="item.id" @click="itemOnClick(item.id)" />
                 </template>
             </Sidebar>
             <div slot="sidebarfooter" class="bd-info">
diff --git a/client/src/ui/components/bd/BdBadge.vue b/client/src/ui/components/bd/BdBadge.vue
index 969f8692..0ee34989 100644
--- a/client/src/ui/components/bd/BdBadge.vue
+++ b/client/src/ui/components/bd/BdBadge.vue
@@ -11,12 +11,13 @@
 <template>
     <div :class="{'bd-profile-badges-wrap': !hasBadges}">
         <div class="bd-profile-badges">
-            <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="onClick"></div>
-            <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="onClick"></div>
-            <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="onClick"></div>
+            <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
+            <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
+            <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="click"></div>
         </div>
     </div>
 </template>
+
 <script>
     // Imports
     import { shell } from 'electron';
@@ -24,7 +25,7 @@
     export default {
         props: ['webdev', 'developer', 'contributor', 'hasBadges'],
         methods: {
-            onClick() {
+            click() {
                 if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
                 if (this.webdev) return shell.openExternal('https://betterdiscord.net');
                 if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors');
diff --git a/client/src/ui/components/bd/BdMessageBadge.vue b/client/src/ui/components/bd/BdMessageBadge.vue
index 29e88adc..9c241190 100644
--- a/client/src/ui/components/bd/BdMessageBadge.vue
+++ b/client/src/ui/components/bd/BdMessageBadge.vue
@@ -10,9 +10,9 @@
 
 <template>
     <div class="bd-message-badges-wrap">
-        <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-message-badge bd-message-badge-developer" @click="onClick"></div>
-        <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-message-badge bd-message-badge-developer" @click="onClick"></div>
-        <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-message-badge bd-message-badge-contributor" @click="onClick"></div>
+        <div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-message-badge bd-message-badge-developer" @click="click"></div>
+        <div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-message-badge bd-message-badge-developer" @click="click"></div>
+        <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-message-badge bd-message-badge-contributor" @click="click"></div>
     </div>
 </template>
 <script>
@@ -22,7 +22,7 @@
     export default {
         props: ['webdev', 'developer', 'contributor', 'hasBadges'],
         methods: {
-            onClick() {
+            click() {
                 if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
                 if (this.webdev) return shell.openExternal('https://betterdiscord.net');
                 if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors');
diff --git a/client/src/ui/components/bd/Card.vue b/client/src/ui/components/bd/Card.vue
index 5bd3341a..08cb9000 100644
--- a/client/src/ui/components/bd/Card.vue
+++ b/client/src/ui/components/bd/Card.vue
@@ -29,6 +29,7 @@
         </div>
     </div>
 </template>
+
 <script>
     // Imports
     import { MiExtension } from '../common';
diff --git a/client/src/ui/components/bd/CssEditor.vue b/client/src/ui/components/bd/CssEditor.vue
index 90e9c6dd..5fd7cf04 100644
--- a/client/src/ui/components/bd/CssEditor.vue
+++ b/client/src/ui/components/bd/CssEditor.vue
@@ -19,7 +19,7 @@
 
             <div class="bd-form-item">
                 <h5>Custom Editor</h5>
-                <FormButton v-if="internalEditorIsInstalled" :onClick="openInternalEditor">Open</FormButton>
+                <FormButton v-if="internalEditorIsInstalled" @click="openInternalEditor">Open</FormButton>
                 <template v-else>
                     <div class="bd-form-warning">
                         <div class="bd-text">Custom Editor is not installed!</div>
@@ -32,7 +32,7 @@
 
             <div class="bd-form-item">
                 <h5>System Editor</h5>
-                <FormButton :onClick="openSystemEditor">Open</FormButton>
+                <FormButton @click="openSystemEditor">Open</FormButton>
                 <p class="bd-hint">This will open {{ systemEditorPath }} in your system's default editor.</p>
             </div>
             <div class="bd-form-divider"></div>
@@ -42,10 +42,7 @@
             </div>
             <SettingsPanel :settings="settingsset" />
 
-            <!-- <Setting :setting="liveUpdateSetting" />
-            <Setting :setting="watchFilesSetting" /> -->
-
-            <FormButton :onClick="recompile" :loading="compiling">Recompile</FormButton>
+            <FormButton @click="recompile" :loading="compiling">Recompile</FormButton>
         </div>
     </SettingsWrapper>
 </template>
diff --git a/client/src/ui/components/bd/PluginCard.vue b/client/src/ui/components/bd/PluginCard.vue
index 5f38a8d8..5c60f896 100644
--- a/client/src/ui/components/bd/PluginCard.vue
+++ b/client/src/ui/components/bd/PluginCard.vue
@@ -12,13 +12,14 @@
     <Card :item="plugin">
         <SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="togglePlugin" />
         <ButtonGroup slot="controls">
-            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
-            <Button v-tooltip="'Reload'" :onClick="reloadPlugin"><MiRefresh size="18" /></Button>
-            <Button v-tooltip="'Edit'" :onClick="editPlugin"><MiPencil size="18" /></Button>
-            <Button v-tooltip="'Uninstall (shift + click to unload)'" :onClick="e => deletePlugin(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
+            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="plugin.hasSettings" @click="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
+            <Button v-tooltip="'Reload'" @click="reloadPlugin"><MiRefresh size="18" /></Button>
+            <Button v-tooltip="'Edit'" @click="editPlugin"><MiPencil size="18" /></Button>
+            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="e => deletePlugin(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
         </ButtonGroup>
     </Card>
 </template>
+
 <script>
     // Imports
     import { ClientLogger as Logger } from 'common';
diff --git a/client/src/ui/components/bd/PluginsView.vue b/client/src/ui/components/bd/PluginsView.vue
index 09809efd..1390b8b1 100644
--- a/client/src/ui/components/bd/PluginsView.vue
+++ b/client/src/ui/components/bd/PluginsView.vue
@@ -13,11 +13,11 @@
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
-                <RefreshBtn v-if="local" :onClick="refreshLocal" />
+                <RefreshBtn v-if="local" @click="refreshLocal" />
             </div>
             <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                 <h3>Browse</h3>
-                <RefreshBtn v-if="!local" :onClick="refreshOnline" />
+                <RefreshBtn v-if="!local" @click="refreshOnline" />
             </div>
         </div>
 
diff --git a/client/src/ui/components/bd/SettingsWrapper.vue b/client/src/ui/components/bd/SettingsWrapper.vue
index c13a2bff..08b24488 100644
--- a/client/src/ui/components/bd/SettingsWrapper.vue
+++ b/client/src/ui/components/bd/SettingsWrapper.vue
@@ -21,6 +21,7 @@
         </ScrollerWrap>
     </div>
 </template>
+
 <script>
     // Imports
     import { ScrollerWrap } from '../common';
diff --git a/client/src/ui/components/bd/ThemeCard.vue b/client/src/ui/components/bd/ThemeCard.vue
index 1b251d09..a39a6059 100644
--- a/client/src/ui/components/bd/ThemeCard.vue
+++ b/client/src/ui/components/bd/ThemeCard.vue
@@ -12,10 +12,10 @@
     <Card :item="theme">
         <SettingSwitch slot="toggle" :value="theme.enabled" @input="toggleTheme" />
         <ButtonGroup slot="controls">
-            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" :onClick="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
-            <Button v-tooltip="'Recompile (shift + click to reload)'" :onClick="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>
-            <Button v-tooltip="'Edit'" :onClick="editTheme"><MiPencil size="18" /></Button>
-            <Button v-tooltip="'Uninstall (shift + click to unload)'" :onClick="e => deleteTheme(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
+            <Button v-tooltip="'Settings (shift + click to open settings without cloning the set)'" v-if="theme.hasSettings" @click="e => showSettings(e.shiftKey)"><MiSettings size="18" /></Button>
+            <Button v-tooltip="'Recompile (shift + click to reload)'" @click="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>
+            <Button v-tooltip="'Edit'" @click="editTheme"><MiPencil size="18" /></Button>
+            <Button v-tooltip="'Uninstall (shift + click to unload)'" @click="e => deleteTheme(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
         </ButtonGroup>
     </Card>
 </template>
diff --git a/client/src/ui/components/bd/ThemesView.vue b/client/src/ui/components/bd/ThemesView.vue
index 7d10b9f1..d08fbe21 100644
--- a/client/src/ui/components/bd/ThemesView.vue
+++ b/client/src/ui/components/bd/ThemesView.vue
@@ -13,11 +13,11 @@
         <div class="bd-tabbar" slot="header">
             <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Installed</h3>
-                <RefreshBtn v-if="local" :onClick="refreshLocal"/>
+                <RefreshBtn v-if="local" @click="refreshLocal"/>
             </div>
             <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
                 <h3>Browse</h3>
-                <RefreshBtn v-if="!local" :onClick="refreshOnline" />
+                <RefreshBtn v-if="!local" @click="refreshOnline" />
             </div>
         </div>
 
diff --git a/client/src/ui/components/common/Button.vue b/client/src/ui/components/common/Button.vue
index 917f74e3..afe841f3 100644
--- a/client/src/ui/components/common/Button.vue
+++ b/client/src/ui/components/common/Button.vue
@@ -9,13 +9,14 @@
 */
 
 <template>
-    <div class="bd-button" :class="[{'bd-disabled': disabled}, {'bd-err': type === 'err'}]" @click="!disabled && !loading ? onClick($event) : null">
+    <div class="bd-button" :class="[{'bd-disabled': disabled}, {'bd-err': type === 'err'}]" @click="!disabled && !loading ? $emit('click', $event) : null">
         <div v-if="loading" class="bd-spinner-7"></div>
         <slot v-else />
     </div>
 </template>
+
 <script>
     export default {
-        props: ['loading', 'disabled', 'type', 'onClick', 'type']
+        props: ['loading', 'disabled', 'type']
     }
 </script>
diff --git a/client/src/ui/components/common/ButtonGroup.vue b/client/src/ui/components/common/ButtonGroup.vue
index 0af93fd9..28cc1480 100644
--- a/client/src/ui/components/common/ButtonGroup.vue
+++ b/client/src/ui/components/common/ButtonGroup.vue
@@ -13,7 +13,7 @@
         <slot />
     </div>
 </template>
+
 <script>
-    export default {
-    }
+    export default {}
 </script>
diff --git a/client/src/ui/components/common/Dropdown.vue b/client/src/ui/components/common/Dropdown.vue
index 5f14d3b1..64b74b24 100644
--- a/client/src/ui/components/common/Dropdown.vue
+++ b/client/src/ui/components/common/Dropdown.vue
@@ -21,6 +21,7 @@
         </div>
     </div>
 </template>
+
 <script>
     export default {
         props: ['options', 'value', 'disabled'],
diff --git a/client/src/ui/components/common/FormButton.vue b/client/src/ui/components/common/FormButton.vue
index 86baf6c7..f14aa995 100644
--- a/client/src/ui/components/common/FormButton.vue
+++ b/client/src/ui/components/common/FormButton.vue
@@ -9,13 +9,14 @@
 */
 
 <template>
-    <div class="bd-form-button bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? onClick() : null">
+    <div class="bd-form-button bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? $emit('click', $event) : null">
         <div v-if="loading" class="bd-spinner-7"></div>
         <slot v-else />
     </div>
 </template>
+
 <script>
     export default {
-        props: ['loading', 'disabled', 'type', 'onClick']
+        props: ['loading', 'disabled', 'type']
     }
 </script>
diff --git a/client/src/ui/components/common/RefreshBtn.vue b/client/src/ui/components/common/RefreshBtn.vue
index 6ce789da..0ecad7f0 100644
--- a/client/src/ui/components/common/RefreshBtn.vue
+++ b/client/src/ui/components/common/RefreshBtn.vue
@@ -1,11 +1,11 @@
 /**
- * BetterDiscord RefreshBtn
+ * BetterDiscord Refresh Button
  * Copyright (c) 2018 Lilian Tedone http://beard-design.com/
  * All rights reserved.
 */
 
 <template>
-    <div class="bd-refresh-button" :class="{'bd-refreshed': state === 'refreshed', 'bd-refreshing': state === 'refreshing'}" @click="onClick">
+    <div class="bd-refresh-button" :class="{'bd-refreshed': state === 'refreshed', 'bd-refreshing': state === 'refreshing'}" @click="$emit('click')">
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <g class="bd-svg-refresh">
                 <g class="bd-svg-circle">
@@ -24,8 +24,9 @@
         </svg>
     </div>
 </template>
+
 <script>
     export default {
-        props: ['state', 'onClick']
+        props: ['state']
     }
 </script>
diff --git a/client/src/ui/components/common/ScrollerWrap.vue b/client/src/ui/components/common/ScrollerWrap.vue
index 102a92e2..5dad05b2 100644
--- a/client/src/ui/components/common/ScrollerWrap.vue
+++ b/client/src/ui/components/common/ScrollerWrap.vue
@@ -15,8 +15,9 @@
         </div>
     </div>
 </template>
+
 <script>
     export default {
         props: ['dark']
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/ui/components/sidebar/Button.vue b/client/src/ui/components/sidebar/Button.vue
index ba50e5ea..5ec3c34b 100644
--- a/client/src/ui/components/sidebar/Button.vue
+++ b/client/src/ui/components/sidebar/Button.vue
@@ -9,12 +9,13 @@
 */
 
 <template>
-    <div class="bd-item" :class="{active: item.active}" @click="onClick(item.id)">
+    <div class="bd-item" :class="{active: item.active}" @click="$emit('click', item.id)">
         {{item.text}}
     </div>
 </template>
+
 <script>
     export default {
-        props: ['item', 'onClick']
+        props: ['item']
     }
 </script>
diff --git a/client/src/ui/components/sidebar/ContentColumn.vue b/client/src/ui/components/sidebar/ContentColumn.vue
index 6a69283d..3268aad0 100644
--- a/client/src/ui/components/sidebar/ContentColumn.vue
+++ b/client/src/ui/components/sidebar/ContentColumn.vue
@@ -13,6 +13,7 @@
         <slot/>
     </div>
 </template>
+
 <script>
     export default {}
 </script>
diff --git a/client/src/ui/components/sidebar/Header.vue b/client/src/ui/components/sidebar/Header.vue
index fbc31834..624cd62b 100644
--- a/client/src/ui/components/sidebar/Header.vue
+++ b/client/src/ui/components/sidebar/Header.vue
@@ -13,6 +13,7 @@
         {{item.text}}
     </div>
 </template>
+
 <script>
     export default {
         props: ['item']
diff --git a/client/src/ui/components/sidebar/Item.vue b/client/src/ui/components/sidebar/Item.vue
index 95b3aaa0..64d3a170 100644
--- a/client/src/ui/components/sidebar/Item.vue
+++ b/client/src/ui/components/sidebar/Item.vue
@@ -9,15 +9,16 @@
 */
 
 <template>
-    <SidebarButton v-if="item._type === 'button'" :item="item" :onClick="onClick"/>
+    <SidebarButton v-if="item._type === 'button'" :item="item" @click="$emit('click', $event)" />
     <SidebarHeader v-else :item="item" />
 </template>
+
 <script>
     // Imports
     import { SidebarHeader, SidebarButton } from './';
 
     export default {
-        props: ['item', 'onClick'],
+        props: ['item'],
         components: {
             SidebarHeader,
             SidebarButton
diff --git a/client/src/ui/components/sidebar/Sidebar.vue b/client/src/ui/components/sidebar/Sidebar.vue
index 4f646599..da53d52d 100644
--- a/client/src/ui/components/sidebar/Sidebar.vue
+++ b/client/src/ui/components/sidebar/Sidebar.vue
@@ -13,8 +13,7 @@
         <slot/>
     </div>
 </template>
-<script>
-    export default {
 
-    }
+<script>
+    export default {}
 </script>
diff --git a/client/src/ui/components/sidebar/View.vue b/client/src/ui/components/sidebar/View.vue
index e2653b2f..51851b6d 100644
--- a/client/src/ui/components/sidebar/View.vue
+++ b/client/src/ui/components/sidebar/View.vue
@@ -23,6 +23,7 @@
         </div>
     </div>
 </template>
+
 <script>
     // Imports
     import { ScrollerWrap } from '../common';