Use events in the settings menu

client/src/builtin/EditedTimeStamp.vue

@@ -1,8 +0,0 @@
-<template>
-    <span class="edited" v-tooltip="ets">(edited)</span>
-</template>
-<script>
-    export default {
-        props: ['ets']
-    }
-</script>

client/src/builtin/EmoteComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <span class="bd-emotewrapper" v-tooltip="name">
-        <img class="bd-emote" :src="src" :alt="`;${name};`"/>
+        <img class="bd-emote" :src="src" :alt="`;${name};`" />
     </span>
 </template>
 

client/src/ui/components/BdSettings.vue

@@ -9,10 +9,10 @@
 */
 
 <template>
-    <div class="bd-settings" :class="{active: active, 'bd-settings-out': activeIndex === -1 && lastActiveIndex >= 0}" @keyup="close">
+    <div class="bd-settings" :class="{active: active, 'bd-settings-out': activeIndex === -1 && lastActiveIndex >= 0}" @keyup="$emit('close')">
         <SidebarView :contentVisible="this.activeIndex >= 0 || this.lastActiveIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
             <Sidebar slot="sidebar">
-                <div class="bd-settings-x" @click="close">
+                <div class="bd-settings-x" @click="$emit('close')">
                     <MiClose size="17"/>
                     <span class="bd-x-text">ESC</span>
                 </div>
@@ -76,9 +76,9 @@
                 Settings,
                 timeout: null,
                 SettingsWrapper
-            }
+            };
         },
-        props: ['active', 'close'],
+        props: ['active'],
         components: {
             SidebarView, Sidebar, SidebarItem, ContentColumn,
             SettingsWrapper, SettingsPanel, CssEditorView, PluginsView, ThemesView, UpdaterView,

client/src/ui/components/BdSettingsWrapper.vue

@@ -10,12 +10,12 @@
 
 <template>
     <div class="bd-settings-wrapper" :class="[{active: active}, 'platform-' + this.platform]">
-        <div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating}" @click="showSettings">
+        <div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating}" @click="active = true">
             <div v-if="updating === 0" v-tooltip.right="'Checking for updates'" class="bd-settings-button-btn bd-loading"></div>
             <div v-else-if="updating === 2" v-tooltip.right="'Updates available!'" class="bd-settings-button-btn bd-updates"></div>
             <div v-else class="bd-settings-button-btn" :class="[{'bd-loading': !loaded}]"></div>
         </div>
-        <BdSettings ref="settings" :active="active" :close="hideSettings" />
+        <BdSettings ref="settings" :active="active" @close="active = false" />
     </div>
 </template>
 
@@ -34,27 +34,24 @@
                 animating: false,
                 timeout: null,
                 platform: global.process.platform
-            }
+            };
         },
         components: {
             BdSettings
         },
         methods: {
-            showSettings() {
-                if (!this.loaded) return;
-                this.active = true;
-            },
-            hideSettings() { this.active = false },
-            toggleSettings() { this.active = !this.active },
             keyupListener(e) {
                 if (Modals.stack.length || !this.active || e.which !== 27) return;
                 if (this.$refs.settings.activeIndex !== -1) this.$refs.settings.closeContent();
-                else this.hideSettings();
+                else this.active = false;
                 e.stopImmediatePropagation();
             }
         },
         watch: {
             active(active) {
+                if (active && !this.loaded)
+                    return this.active = false;
+
                 this.animating = true;
                 if (this.timeout) clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {