Add drawers and hairline when scrolling in a modal and organise form SCSS files

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

@@ -3,3 +3,4 @@
 @import './plugins.scss';
 @import './plugincard.scss';
 @import './tooltips.scss';
+@import './plugin-settings-modal.scss';

client/src/styles/partials/bdsettings/plugin-settings-modal.scss

@@ -0,0 +1,69 @@
+.bd-plugin-settings-modal {
+    .bd-modal .bd-modal-body {
+        padding: 0;
+    }
+
+    .bd-scroller-wrap .bd-scroller {
+        margin: 0;
+        padding: 0;
+    }
+
+    .bd-plugin-settings-body {
+        margin-bottom: 80px;
+        padding: 0 15px;
+
+        .bd-setting-switch {
+            .bd-switch-wrapper {
+                flex: 0 0 auto;
+                user-select: none;
+                position: relative;
+                width: 40px;
+                height: 20px;
+                display: block;
+
+                input {
+                    position: absolute;
+                    opacity: 0;
+                    cursor: pointer;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 1;
+                }
+
+                .bd-switch {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    background: #72767d;
+                    border-radius: 14px;
+                    transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
+
+                    &:before {
+                        content: "";
+                        display: block;
+                        width: 14px;
+                        height: 14px;
+                        position: absolute;
+                        top: 3px;
+                        left: 3px;
+                        bottom: 3px;
+                        background: #f6f6f7;
+                        border-radius: 10px;
+                        transition: all .15s ease;
+                        box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
+                    }
+
+                    &.bd-checked {
+                        background: $colbdblue;
+
+                        &::before {
+                            transform: translateX(20px);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -110,61 +110,3 @@
         }
     }
 }
-
-.bd-plugin-settings-body {
-    margin-bottom: 80px;
-
-    .bd-setting-switch {
-        .bd-switch-wrapper {
-            flex: 0 0 auto;
-            user-select: none;
-            position: relative;
-            width: 40px;
-            height: 20px;
-            display: block;
-
-            input {
-                position: absolute;
-                opacity: 0;
-                cursor: pointer;
-                width: 100%;
-                height: 100%;
-                z-index: 1;
-            }
-
-            .bd-switch {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                background: #72767d;
-                border-radius: 14px;
-                transition: background .15s ease-in-out,box-shadow .15s ease-in-out,border .15s ease-in-out;
-
-                &:before {
-                    content: "";
-                    display: block;
-                    width: 14px;
-                    height: 14px;
-                    position: absolute;
-                    top: 3px;
-                    left: 3px;
-                    bottom: 3px;
-                    background: #f6f6f7;
-                    border-radius: 10px;
-                    transition: all .15s ease;
-                    box-shadow: 0 3px 1px 0 rgba(0,0,0,.05), 0 2px 2px 0 rgba(0,0,0,.1), 0 3px 3px 0 rgba(0,0,0,.05);
-                }
-
-                &.bd-checked {
-                    background: $colbdblue;
-
-                    &::before {
-                        transform: translateX(20px);
-                    }
-                }
-            }
-        }
-    }
-}

client/src/styles/partials/generic/drawers.scss

@@ -0,0 +1,29 @@
+.bd-drawer {
+    .bd-drawer-open-button {
+        svg {
+            transition: transform 0.2s ease;
+            transform: rotate(0deg);
+        }
+    }
+
+    .bd-drawer-contents {
+        display: none;
+    }
+
+    &:not(.bd-drawer-open) {
+        padding-bottom: 5px;
+        border-bottom: 1px solid rgba(114, 118, 126, 0.3);
+    }
+
+    &.bd-drawer-open {
+        .bd-drawer-open-button {
+            svg {
+                transform: rotate(45deg);
+            }
+        }
+
+        .bd-drawer-contents {
+            display: block;
+        }
+    }
+}

client/src/styles/partials/generic/forms.scss

@@ -1,3 +1,39 @@
+.bd-form-header {
+    margin: 15px 0 10px;
+    color: rgba(255, 255, 255, 0.15);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    text-transform: uppercase;
+    font-weight: 600;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: Whitney, Helvetica Neue, Helvetica, Arial, sans-serif;
+    display: flex;
+
+    .bd-form-header-text {
+        flex: 1 1 auto;
+    }
+
+    .bd-form-header-button {
+        flex: 0 0;
+        margin-left: 5px;
+
+        svg {
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            fill: #ccc;
+
+            &:hover {
+                fill: #fff;
+            }
+        }
+    }
+}
+
 .bd-form-item h5 {
     color: #b9bbbe;
     text-transform: uppercase;
@@ -14,7 +50,7 @@
     .bd-form-textinput + &,
     .bd-form-fileinput + &,
     .bd-setting-switch + & {
-        margin: 0 0 15px 0;
+        margin: 15px 0;
     }
 }
 
@@ -59,7 +95,8 @@
 }
 
 .bd-form-textinput,
-.bd-form-fileinput {
+.bd-form-fileinput,
+.bd-setting-switch {
     .bd-title {
         display: flex;
 
@@ -79,7 +116,6 @@
         font-size: 14px;
         font-weight: 500;
         margin-top: 5px;
-        margin-bottom: 15px;
         line-height: 20px;
         border-bottom: 0px solid rgba(114, 118, 126, 0.1);
     }

client/src/styles/partials/generic/index.scss

@@ -5,3 +5,4 @@
 @import './forms.scss';
 @import './material-buttons.scss';
 @import './modals.scss';
+@import './drawers.scss';

client/src/styles/partials/generic/modals.scss

@@ -56,36 +56,50 @@
     .bd-modal-header {
         display: flex;
         padding: 15px;
+        flex: 0 0;
+        -webkit-transition: -webkit-box-shadow .1s ease-out;
+        transition: -webkit-box-shadow .1s ease-out;
+        transition: box-shadow .1s ease-out;
 
         .bd-modal-headertext {
             color: #FFF;
             font-weight: 700;
-            margin-bottom: 15px;
-            padding-bottom: 15px;
             flex-grow: 1;
+            line-height: 18px;
+            padding: 1px;
         }
 
         .bd-modal-x {
             display: flex;
             width: 20px;
             height: 20px;
-            border: 1px solid transparent;
             border-radius: 3px;
             cursor: pointer;
             align-content: center;
             justify-content: center;
             align-items: center;
+            margin-left: -2px -2px -2px 10px;
+            padding: 2px;
 
             .bd-material-design-icon {
-                fill: #FFF;
+                fill: #ccc;
             }
 
             &:hover {
                 background: #2d2f34;
+
+                .bd-material-design-icon {
+                    fill: #fff;
+                }
             }
         }
     }
 
+    &.bd-modal-scrolled .bd-modal-header {
+        -webkit-box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
+        box-shadow: 0 1px 0 0 rgba(24,25,28,.3), 0 1px 2px 0 rgba(24,25,28,.3);
+    }
+
     .bd-modal-body {
         padding: 0 15px;
     }

client/src/styles/partials/generic/switches.scss

@@ -7,20 +7,6 @@
     -webkit-box-align: stretch;
     align-items: stretch;
 
-    .bd-title {
-        display: flex;
-        justify-content: flex-start;
-        -webkit-box-align: stretch;
-        align-items: stretch;
-        -webkit-box-direction: normal;
-        -webkit-box-orient: horizontal;
-        display: -webkit-box;
-        display: -ms-flexbox;
-        display: flex;
-        flex-direction: row;
-        box-sizing: border-box;
-    }
-
     .bd-switch-wrapper {
         flex: 0 0 auto;
         user-select: none;
@@ -73,36 +59,15 @@
         }
     }
 
-    .bd-title h3 {
+    .bd-setting-switch-wrap {
-        font-weight: 500;
+        transition: opacity 0.2s ease;
-        color: #f6f6f7;
-        flex: 1;
-        line-height: 24px;
-        margin-bottom: 0;
-        margin-top: 0;
     }
 
-    .bd-hint {
+    &.bd-disabled .bd-setting-switch-wrap {
-        flex: 1 1 auto;
+        opacity: 0.6;
-        color: #72767d;
-        font-size: 14px;
-        font-weight: 500;
-        margin-bottom: 15px;
-        line-height: 30px;
-        border-bottom: 0px solid hsla(218,5%,47%,.1);
-    }
 
-    + .bd-form-divider {
+        &, input {
-        margin: 0 0 10px 0;
+            cursor: not-allowed !important;
-    }
-
-    &.bd-disabled {
-        input {
-            cursor: not-allowed;
-        }
-
-        .bd-switch::before {
-            background: #888888;
         }
     }
 }

client/src/ui/components/bd/PluginSettingsModal.vue

@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div>
+    <div class="bd-plugin-settings-modal">
         <div class="bd-backdrop" @click="attemptToClose"></div>
         <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose">
             <div slot="body" class="bd-plugin-settings-body">
@@ -18,13 +18,14 @@
                         <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
                     </div>
                     <div v-else-if="category.type === 'static'">
-                        {{category.category}} static with header
+                        <div class="bd-form-header">
+                            <span class="bd-form-header-text">{{category.category}} static with header</span>
+                        </div>
                         <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
                     </div>
-                    <div v-else-if="category.type === 'drawer'">
+                    <Drawer v-else-if="category.type === 'drawer'" :label="category.category + ' drawer'">
-                        {{category.category}} drawer
                         <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
-                    </div>
+                    </Drawer>
                     <div v-else>
                         <PluginSetting v-for="setting in category.settings" :key="setting.id" :setting="setting" :change="settingChange" />
                     </div>
@@ -43,6 +44,7 @@
     // Imports
     import { Modal } from '../common';
     import PluginSetting from './pluginsetting/PluginSetting.vue';
+    import Drawer from '../common/Drawer.vue';
 
     export default {
         props: ['plugin','close'],
@@ -55,7 +57,8 @@
         },
         components: {
             Modal,
-            PluginSetting
+            PluginSetting,
+            Drawer
         },
         methods: {
             checkForChanges() {

client/src/ui/components/common/Drawer.vue

@@ -0,0 +1,39 @@
+/**
+ * BetterDiscord Drawer Component
+ * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
+ * All rights reserved.
+ * https://betterdiscord.net
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+*/
+
+<template>
+    <div :class="['bd-drawer', {'bd-drawer-open': open}]">
+        <div class="bd-form-header bd-drawer-header">
+            <span class="bd-form-header-text">{{ label }}</span>
+            <span class="bd-form-header-button bd-drawer-open-button" @click="() => open = !open"><MiPlus /></span>
+        </div>
+        <div class="bd-drawer-contents">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+    import MiPlus from 'vue-material-design-icons/plus.vue';
+
+    export default {
+        props: [
+            'label'
+        ],
+        components: {
+            MiPlus
+        },
+        data() {
+            return {
+                open: false
+            }
+        }
+    }
+</script>

client/src/ui/components/common/Modal.vue

@@ -1,5 +1,5 @@
 /**
- * BetterDiscord ¨Modal Component
+ * BetterDiscord Modal Component
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net
@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div class="bd-modal">
+    <div :class="['bd-modal', {'bd-modal-scrolled': scrolled}]">
         <div class="bd-modal-inner">
             <div class="bd-modal-header">
                 <span class="bd-modal-headertext">{{headerText}}</span>
@@ -19,7 +19,7 @@
             </div>
             <div class="bd-modal-body">
                 <div class="bd-scroller-wrap">
-                    <div class="bd-scroller">
+                    <div class="bd-scroller" @scroll="e => scrolled = e.target.scrollTop !== 0">
                         <slot name="body"></slot>
                      </div>
                 </div>
@@ -39,6 +39,11 @@
         props: ['headerText', 'close'],
         components: {
             MiClose
+        },
+        data() {
+            return {
+                scrolled: false
+            };
         }
     }
 </script>

client/src/ui/components/common/SettingSwitch.vue

@@ -10,14 +10,16 @@
 
 <template>
     <div class="bd-setting-switch" :class="{'bd-disabled': disabled}">
-        <div class="bd-title">
+        <div class="bd-setting-switch-wrap">
-            <h3>{{setting.title || setting.text}}</h3>
+            <div class="bd-title">
-            <label class="bd-switch-wrapper" @click="!disabled ? onClick(setting) : null">
+                <h3>{{setting.title || setting.text}}</h3>
-                <input type="checkbox" class="bd-switch-checkbox" />
+                <label class="bd-switch-wrapper" @click="!disabled ? onClick(setting) : null">
-                <div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled || setting.value)}" />
+                    <input type="checkbox" class="bd-switch-checkbox" />
-            </label>
+                    <div class="bd-switch" :class="{'bd-checked': (setting.checked || setting.enabled || setting.value)}" />
+                </label>
+            </div>
+            <div class="bd-hint">{{setting.hint}}</div>
         </div>
-        <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
 <script>