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

Add an animation when closing the settings menu content panel

This commit is contained in:
Samuel Elliott 2018-03-01 00:05:29 +00:00
parent ecf7f872cb
commit bff6057e0c
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
7 changed files with 74 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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);