lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Merge pull request #151 from samuelthomas2774/add-menu-content-closing-animation 

Add menu content closing animation and fix plugin/theme descriptions
This commit is contained in:
Alexei Stukov 2018-03-01 21:46:49 +02:00 committed by GitHub
parent ecf7f872cb 5707da5f72
commit d6cb8f74fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 79 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/modules/extmodule.js
View File

@ -45,8 +45,10 @@ export default class ExtModule {
get main() { return this.__pluginInternals.main }
get defaultConfig() { return this.configs.defaultConfig }
get userConfig() { return this.configs.userConfig }
get id() { return this.info.id || this.info.name.toLowerCase().replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-') }
get configSchemes() { return this.configs.schemes }
get id() { return this.info.id || this.name.toLowerCase().replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-') }
get name() { return this.info.name }
get description() { return this.info.description }
get authors() { return this.info.authors }
get version() { return this.info.version }
get contentPath() { return this.paths.contentPath }

1
client/src/modules/plugin.js
View File

@ -55,6 +55,7 @@ export default class Plugin {
get configSchemes() { return this.configs.schemes }
get id() { return this.info.id || this.name.toLowerCase().replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-') }
get name() { return this.info.name }
get description() { return this.info.description }
get authors() { return this.info.authors }
get version() { return this.info.version }
get contentPath() { return this.paths.contentPath }

1
client/src/modules/theme.js
View File

@ -55,6 +55,7 @@ export default class Theme {
get configSchemes() { return this.configs.schemes }
get id() { return this.info.id || this.name.toLowerCase().replace(/[^a-zA-Z0-9-]/g, '-').replace(/\s+/g, '-') }
get name() { return this.info.name }
get description() { return this.info.description }
get authors() { return this.info.authors }
get version() { return this.info.version }
get contentPath() { return this.paths.contentPath }

3
client/src/modules/thememanager.js
View File

@ -152,7 +152,8 @@ export default class ThemeManager extends ContentManager {
}
if (type === 'dropdown' || type === 'radio') {
return [name, setting.options.find(opt => opt.id === value).value];
const option = setting.options.find(opt => opt.id === value);
return [name, option ? option.value : value];
}
if (typeof value === 'boolean' || typeof value === 'number') {

6
client/src/styles/partials/bdsettings/button.scss
View File

@ -49,7 +49,6 @@
background: transparent;
opacity: 1;
box-shadow: none;
z-index: 3001;
.bd-settings-button-btn {
background-image: $logoBigBw;
@ -62,6 +61,11 @@
cursor: default;
}
}
&.bd-active,
&.bd-animating {
z-index: 3001;
}
}
@keyframes bd-settings-button-pulse {

31
client/src/styles/partials/bdsettings/sidebarview.scss
View File

@ -119,14 +119,33 @@
.platform-linux & {
top: 0;
}
}
.bd-settings .bd-sidebar-view.bd-stop .bd-content-region {
z-index: 3003;
}
.bd-sidebar-view.bd-stop .bd-content-region {
z-index: 3003;
}
.bd-backdrop {
z-index: 3003;
.bd-sidebar-view.active {
.bd-content-region {
transition: transform 0.4s ease-in-out, opacity 0.2s ease;
transform: none;
opacity: 1;
}
}
&:not(.active) .bd-sidebar-view.active,
&.bd-settings-out .bd-sidebar-view.active {
.bd-content-region {
transform: translate(-600px, 0%);
opacity: 0;
width: 590px;
}
}
&:not(.active) .bd-sidebar-view.active {
.bd-content-region {
transform: translate(-600px, 100%);
}
}
}
.bd-sidebar .bd-settings-button {

7
client/src/styles/partials/sidebarview/main.scss
View File

@ -31,6 +31,7 @@
background: #36393e;
box-shadow: 0 0 4px #202225;
backface-visibility: hidden;
transition: transform 0.6s ease;
}
&.bd-stop {
@ -38,10 +39,4 @@
transform: none;
}
}
&.active {
.bd-content-region {
animation: bd-slidein .6s;
}
}
}

3
client/src/styles/partials/sidebarview/sidebar.scss
View File

@ -41,10 +41,11 @@
&:hover,
&.active {
background: $colbdblue;
color: #fff;
}
&.active {
color: #fff;
cursor: default;
}
}
}

36
client/src/ui/components/BdSettings.vue
View File

@ -9,8 +9,8 @@
*/
<template>
<div class="bd-settings" :class="{active: active}" @keyup="close">
<SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
<div class="bd-settings" :class="{active: active, 'bd-settings-out': this.activeIndex === -1 && this.lastActiveIndex >= 0}" @keyup="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">
<MiClose size="17"/>
@ -20,7 +20,7 @@
</Sidebar>
<div slot="sidebarfooter" class="bd-info">
<span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
<div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
<div @click="openGithub" v-tooltip="'GitHub'" class="bd-material-button">
<MiGithubCircle size="16" />
</div>
<div @click="openTwitter" v-tooltip="'@Jiiksi'" class="bd-material-button">
@ -77,7 +77,8 @@
lastActiveIndex: -1,
animating: false,
first: true,
settings: Settings.getSettings
settings: Settings.getSettings,
timeout: null
}
},
props: ['active', 'close'],
@ -95,10 +96,12 @@
this.lastActiveIndex = this.activeIndex;
this.activeIndex = id;
setTimeout(() => {
if (this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.first = false;
this.animating = false;
this.lastActiveIndex = -1;
this.timeout = null;
}, 400);
},
activeContent(s) {
@ -111,6 +114,19 @@
if (!item) return false;
return item.id === this.lastActiveIndex;
},
closeContent() {
if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
this.first = true;
this.lastActiveIndex = this.activeIndex;
this.activeIndex = -1;
if (this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.animating = false;
this.lastActiveIndex = -1;
this.timeout = null;
}, 400);
},
changeSetting(set_id, category_id, setting_id, value) {
Settings.setSetting(set_id, category_id, setting_id, value);
Settings.saveSettings();
@ -126,13 +142,9 @@
}
},
watch: {
active(newVal, oldVal) {
if (!newVal) {
this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
this.activeIndex = this.lastActiveIndex = -1;
this.animating = false;
this.first = true;
}
active(active) {
if (active) return;
this.closeContent();
}
}
}

17
client/src/ui/components/BdSettingsWrapper.vue
View File

@ -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}" @click="showSettings">
<div class="bd-settings-button" :class="{'bd-active': active, 'bd-animating': animating}" @click="showSettings">
<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 :active="active" :close="hideSettings" />
<BdSettings ref="settings" :active="active" :close="hideSettings" />
</div>
</template>
<script>
@ -29,6 +29,8 @@
loaded: false,
updating: false,
active: false,
animating: false,
timeout: null,
platform: global.process.platform
}
},
@ -44,12 +46,23 @@
toggleSettings() { this.active = !this.active },
keyupListener(e) {
if (document.getElementsByClassName('bd-backdrop').length) return;
if (this.$refs.settings.activeIndex !== -1 && e.which === 27) return this.$refs.settings.closeContent();
if (this.active && e.which === 27) return this.hideSettings();
if (!e.metaKey && !e.ctrlKey || e.key !== 'b') return;
this.toggleSettings();
e.stopImmediatePropagation();
}
},
watch: {
active(active) {
this.animating = true;
if (this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
this.animating = false;
this.timeout = null;
}, 400);
}
},
created() {
Events.on('ready', e => this.loaded = true);
Events.on('update-check-start', e => this.updating = 0);