Use events

This commit is contained in:
Samuel Elliott 2018-03-30 01:07:56 +01:00
parent 8983256ade
commit 8c09112cff
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
22 changed files with 54 additions and 44 deletions

View File

@ -18,7 +18,7 @@
</div> </div>
<template v-for="(category, text) in sidebar"> <template v-for="(category, text) in sidebar">
<SidebarItem :item="{text, type: 'header'}" /> <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> </template>
</Sidebar> </Sidebar>
<div slot="sidebarfooter" class="bd-info"> <div slot="sidebarfooter" class="bd-info">

View File

@ -11,12 +11,13 @@
<template> <template>
<div :class="{'bd-profile-badges-wrap': !hasBadges}"> <div :class="{'bd-profile-badges-wrap': !hasBadges}">
<div class="bd-profile-badges"> <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-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="onClick"></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="onClick"></div> <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-profile-badge bd-profile-badge-contributor" @click="click"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// Imports // Imports
import { shell } from 'electron'; import { shell } from 'electron';
@ -24,7 +25,7 @@
export default { export default {
props: ['webdev', 'developer', 'contributor', 'hasBadges'], props: ['webdev', 'developer', 'contributor', 'hasBadges'],
methods: { methods: {
onClick() { click() {
if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp'); if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
if (this.webdev) return shell.openExternal('https://betterdiscord.net'); if (this.webdev) return shell.openExternal('https://betterdiscord.net');
if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors'); if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors');

View File

@ -10,9 +10,9 @@
<template> <template>
<div class="bd-message-badges-wrap"> <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-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="onClick"></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="onClick"></div> <div v-else-if="contributor" v-tooltip="'BetterDiscord Contributor'" class="bd-message-badge bd-message-badge-contributor" @click="click"></div>
</div> </div>
</template> </template>
<script> <script>
@ -22,7 +22,7 @@
export default { export default {
props: ['webdev', 'developer', 'contributor', 'hasBadges'], props: ['webdev', 'developer', 'contributor', 'hasBadges'],
methods: { methods: {
onClick() { click() {
if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp'); if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
if (this.webdev) return shell.openExternal('https://betterdiscord.net'); if (this.webdev) return shell.openExternal('https://betterdiscord.net');
if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors'); if (this.contributor) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp/graphs/contributors');

View File

@ -29,6 +29,7 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// Imports // Imports
import { MiExtension } from '../common'; import { MiExtension } from '../common';

View File

@ -19,7 +19,7 @@
<div class="bd-form-item"> <div class="bd-form-item">
<h5>Custom Editor</h5> <h5>Custom Editor</h5>
<FormButton v-if="internalEditorIsInstalled" :onClick="openInternalEditor">Open</FormButton> <FormButton v-if="internalEditorIsInstalled" @click="openInternalEditor">Open</FormButton>
<template v-else> <template v-else>
<div class="bd-form-warning"> <div class="bd-form-warning">
<div class="bd-text">Custom Editor is not installed!</div> <div class="bd-text">Custom Editor is not installed!</div>
@ -32,7 +32,7 @@
<div class="bd-form-item"> <div class="bd-form-item">
<h5>System Editor</h5> <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> <p class="bd-hint">This will open {{ systemEditorPath }} in your system's default editor.</p>
</div> </div>
<div class="bd-form-divider"></div> <div class="bd-form-divider"></div>
@ -42,10 +42,7 @@
</div> </div>
<SettingsPanel :settings="settingsset" /> <SettingsPanel :settings="settingsset" />
<!-- <Setting :setting="liveUpdateSetting" /> <FormButton @click="recompile" :loading="compiling">Recompile</FormButton>
<Setting :setting="watchFilesSetting" /> -->
<FormButton :onClick="recompile" :loading="compiling">Recompile</FormButton>
</div> </div>
</SettingsWrapper> </SettingsWrapper>
</template> </template>

View File

@ -12,13 +12,14 @@
<Card :item="plugin"> <Card :item="plugin">
<SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="togglePlugin" /> <SettingSwitch v-if="plugin.type === 'plugin'" slot="toggle" :value="plugin.enabled" @input="togglePlugin" />
<ButtonGroup slot="controls"> <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="'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'" :onClick="reloadPlugin"><MiRefresh size="18" /></Button> <Button v-tooltip="'Reload'" @click="reloadPlugin"><MiRefresh size="18" /></Button>
<Button v-tooltip="'Edit'" :onClick="editPlugin"><MiPencil size="18" /></Button> <Button v-tooltip="'Edit'" @click="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="'Uninstall (shift + click to unload)'" @click="e => deletePlugin(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
</ButtonGroup> </ButtonGroup>
</Card> </Card>
</template> </template>
<script> <script>
// Imports // Imports
import { ClientLogger as Logger } from 'common'; import { ClientLogger as Logger } from 'common';

View File

@ -13,11 +13,11 @@
<div class="bd-tabbar" slot="header"> <div class="bd-tabbar" slot="header">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal"> <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Installed</h3> <h3>Installed</h3>
<RefreshBtn v-if="local" :onClick="refreshLocal" /> <RefreshBtn v-if="local" @click="refreshLocal" />
</div> </div>
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline"> <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Browse</h3> <h3>Browse</h3>
<RefreshBtn v-if="!local" :onClick="refreshOnline" /> <RefreshBtn v-if="!local" @click="refreshOnline" />
</div> </div>
</div> </div>

View File

@ -21,6 +21,7 @@
</ScrollerWrap> </ScrollerWrap>
</div> </div>
</template> </template>
<script> <script>
// Imports // Imports
import { ScrollerWrap } from '../common'; import { ScrollerWrap } from '../common';

View File

@ -12,10 +12,10 @@
<Card :item="theme"> <Card :item="theme">
<SettingSwitch slot="toggle" :value="theme.enabled" @input="toggleTheme" /> <SettingSwitch slot="toggle" :value="theme.enabled" @input="toggleTheme" />
<ButtonGroup slot="controls"> <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="'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)'" :onClick="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button> <Button v-tooltip="'Recompile (shift + click to reload)'" @click="e => reloadTheme(e.shiftKey)"><MiRefresh size="18" /></Button>
<Button v-tooltip="'Edit'" :onClick="editTheme"><MiPencil size="18" /></Button> <Button v-tooltip="'Edit'" @click="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="'Uninstall (shift + click to unload)'" @click="e => deleteTheme(e.shiftKey)" type="err"><MiDelete size="18" /></Button>
</ButtonGroup> </ButtonGroup>
</Card> </Card>
</template> </template>

View File

@ -13,11 +13,11 @@
<div class="bd-tabbar" slot="header"> <div class="bd-tabbar" slot="header">
<div class="bd-button" :class="{'bd-active': local}" @click="showLocal"> <div class="bd-button" :class="{'bd-active': local}" @click="showLocal">
<h3>Installed</h3> <h3>Installed</h3>
<RefreshBtn v-if="local" :onClick="refreshLocal"/> <RefreshBtn v-if="local" @click="refreshLocal"/>
</div> </div>
<div class="bd-button" :class="{'bd-active': !local}" @click="showOnline"> <div class="bd-button" :class="{'bd-active': !local}" @click="showOnline">
<h3>Browse</h3> <h3>Browse</h3>
<RefreshBtn v-if="!local" :onClick="refreshOnline" /> <RefreshBtn v-if="!local" @click="refreshOnline" />
</div> </div>
</div> </div>

View File

@ -9,13 +9,14 @@
*/ */
<template> <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> <div v-if="loading" class="bd-spinner-7"></div>
<slot v-else /> <slot v-else />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['loading', 'disabled', 'type', 'onClick', 'type'] props: ['loading', 'disabled', 'type']
} }
</script> </script>

View File

@ -13,7 +13,7 @@
<slot /> <slot />
</div> </div>
</template> </template>
<script> <script>
export default { export default {}
}
</script> </script>

View File

@ -21,6 +21,7 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['options', 'value', 'disabled'], props: ['options', 'value', 'disabled'],

View File

@ -9,13 +9,14 @@
*/ */
<template> <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> <div v-if="loading" class="bd-spinner-7"></div>
<slot v-else /> <slot v-else />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['loading', 'disabled', 'type', 'onClick'] props: ['loading', 'disabled', 'type']
} }
</script> </script>

View File

@ -1,11 +1,11 @@
/** /**
* BetterDiscord RefreshBtn * BetterDiscord Refresh Button
* Copyright (c) 2018 Lilian Tedone http://beard-design.com/ * Copyright (c) 2018 Lilian Tedone http://beard-design.com/
* All rights reserved. * All rights reserved.
*/ */
<template> <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"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g class="bd-svg-refresh"> <g class="bd-svg-refresh">
<g class="bd-svg-circle"> <g class="bd-svg-circle">
@ -24,8 +24,9 @@
</svg> </svg>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['state', 'onClick'] props: ['state']
} }
</script> </script>

View File

@ -15,8 +15,9 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['dark'] props: ['dark']
} }
</script> </script>

View File

@ -9,12 +9,13 @@
*/ */
<template> <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}} {{item.text}}
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['item', 'onClick'] props: ['item']
} }
</script> </script>

View File

@ -13,6 +13,7 @@
<slot/> <slot/>
</div> </div>
</template> </template>
<script> <script>
export default {} export default {}
</script> </script>

View File

@ -13,6 +13,7 @@
{{item.text}} {{item.text}}
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ['item'] props: ['item']

View File

@ -9,15 +9,16 @@
*/ */
<template> <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" /> <SidebarHeader v-else :item="item" />
</template> </template>
<script> <script>
// Imports // Imports
import { SidebarHeader, SidebarButton } from './'; import { SidebarHeader, SidebarButton } from './';
export default { export default {
props: ['item', 'onClick'], props: ['item'],
components: { components: {
SidebarHeader, SidebarHeader,
SidebarButton SidebarButton

View File

@ -13,8 +13,7 @@
<slot/> <slot/>
</div> </div>
</template> </template>
<script>
export default {
} <script>
export default {}
</script> </script>

View File

@ -23,6 +23,7 @@
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// Imports // Imports
import { ScrollerWrap } from '../common'; import { ScrollerWrap } from '../common';