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

Add menu content closing animation and fix plugin/theme descriptions

client/src/modules/extmodule.js

@@ -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 }

client/src/modules/plugin.js

@@ -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 }

client/src/modules/theme.js

@@ -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 }

client/src/modules/thememanager.js

@@ -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') {

client/src/styles/partials/bdsettings/button.scss

@@ -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 {

client/src/styles/partials/bdsettings/sidebarview.scss

@@ -119,14 +119,33 @@
     .platform-linux & {
         top: 0;
     }
-}
 
-.bd-settings .bd-sidebar-view.bd-stop .bd-content-region {
+    .bd-sidebar-view.bd-stop .bd-content-region {
-    z-index: 3003;
+        z-index: 3003;
-}
+    }
 
-.bd-backdrop {
+    .bd-sidebar-view.active {
-    z-index: 3003;
+        .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 {

client/src/styles/partials/sidebarview/main.scss

@@ -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;
-        }
-    }
 }

client/src/styles/partials/sidebarview/sidebar.scss

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

client/src/ui/components/BdSettings.vue

@@ -9,8 +9,8 @@
 */
 
 <template>
-    <div class="bd-settings" :class="{active: active}" @keyup="close">
+    <div class="bd-settings" :class="{active: active, 'bd-settings-out': this.activeIndex === -1 && this.lastActiveIndex >= 0}" @keyup="close">
-        <SidebarView :contentVisible="this.activeIndex >= 0" :animating="this.animating" :class="{'bd-stop': !first}">
+        <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) {
+            active(active) {
-                if (!newVal) {
+                if (active) return;
-                    this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
+                this.closeContent();
-                    this.activeIndex = this.lastActiveIndex = -1;
-                    this.animating = false;
-                    this.first = true;
-                }
             }
         }
     }

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}" @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);