Merge pull request #142 from samuelthomas2774/add-full-width-settings

Add full width settings

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

@@ -1,11 +1,20 @@
+.bd-form-dropdown {
+    h3 + .bd-dropdown {
+        width: 180px;
+        margin-left: 15px;
+    }
+
+    .bd-form-item-fullwidth & {
+        .bd-dropdown {
+            margin-top: 10px;
+        }
+    }
+}
+
 .bd-dropdown {
     position: relative;
     width: 100%;
 
-    h3 + & {
-        width: 180px;
-    }
-
     .bd-dropdown-current {
         color: #f6f6f7;
         background: rgba(0,0,0,.1);

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

@@ -1,14 +1,23 @@
 .bd-form-radio {
     display: flex;
-    flex-direction: column;
 
     .bd-form-radio-details {
         flex: 1 1 auto;
     }
 
-    .bd-form-radio-group {
-        flex: 0 0 auto;
+    .bd-radio-group {
+        width: 180px;
+        margin-left: 15px;
+    }
+
+    .bd-form-item-fullwidth & {
+        flex-direction: column;
+
+        .bd-radio-group {
+            width: 100%;
             margin-top: 10px;
+            margin-left: 0;
+        }
     }
 }
 

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

@@ -1,3 +1,20 @@
+.bd-form-slider {
+    h3 + .bd-slider {
+        margin-left: 15px;
+    }
+
+    .bd-form-item-fullwidth & {
+        .bd-title {
+            flex-direction: column;
+        }
+
+        h3 + .bd-slider {
+            margin-top: 15px;
+            margin-left: 0;
+        }
+    }
+}
+
 .bd-slider {
     min-height: 24px;
     min-width: 180px;

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

@@ -2,12 +2,16 @@
 .bd-form-numberinput {
     h3 {
         + .bd-textinput-wrapper,
-        + .bd-textinput-wrapper input[type="text"],
-        + .bd-textinput-wrapper input[type="number"] {
+        + .bd-number {
             width: 180px;
         }
     }
 
+    .bd-textinput-wrapper,
+    .bd-number {
+        margin-left: 15px;
+    }
+
     input[type="text"],
     input[type="number"] {
         background: transparent;
@@ -25,9 +29,27 @@
             border-color: $colbdblue;
         }
     }
+
+    .bd-form-item-fullwidth & {
+        .bd-title {
+            flex-direction: column;
+        }
+
+        .bd-textinput-wrapper,
+        .bd-number {
+            width: 100%;
+            margin-top: 10px;
+            margin-left: 0;
+        }
+
+        .bd-hint {
+            margin-top: 10px;
+        }
+    }
 }
 
-.bd-textinput-wrapper {
+.bd-textinput-wrapper,
+.bd-number {
     width: 100%;
 }
 

client/src/ui/components/bd/setting/Array.vue

@@ -1,5 +1,5 @@
 /**
- * BetterDiscord Setting File Component
+ * BetterDiscord Setting Array Component
  * Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
  * All rights reserved.
  * https://betterdiscord.net

client/src/ui/components/bd/setting/Dropdown.vue

@@ -12,47 +12,19 @@
     <div class="bd-form-dropdown">
         <div class="bd-title">
             <h3 v-if="setting.text">{{setting.text}}</h3>
-            <div class="bd-dropdown" :class="{'bd-active': active}">
-                <div class="bd-dropdown-current" @click="() => active = !active && !setting.disabled">
-                    <span class="bd-dropdown-text">{{getOptionText(setting.value)}}</span>
-                    <span class="bd-dropdown-arrow-wrap">
-                        <span class="bd-dropdown-arrow"></span>
-                    </span>
-                </div>
-                <div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
-                    <div class="bd-dropdown-option" v-for="option in setting.options" :class="{'bd-dropdown-option-selected': setting.value === option.id}" @click="selectOption(option)">{{option.text}}</div>
-                </div>
-            </div>
+            <Dropdown v-if="!setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
         </div>
         <div class="bd-hint">{{setting.hint}}</div>
+        <Dropdown v-if="setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
     </div>
 </template>
 <script>
+    import Dropdown from '../../common/Dropdown.vue';
+
     export default {
         props: ['setting', 'change'],
-        data() {
-            return {
-                active: false
-            };
-        },
-        methods: {
-            getOptionText(value) {
-                let matching = this.setting.options.filter(opt => opt.id === value);
-                if (matching.length == 0) return "";
-                else return matching[0].text;
-            },
-            selectOption(option) {
-                this.active = false;
-                this.change(option.id);
-            }
-        },
-        mounted() {
-            document.addEventListener("click", e => {
-                let options = this.$refs.options;
-                if (options && !options.contains(e.target) && options !== e.target) {
-                    this.active = false;
-                }
-            });
+        components: {
+            Dropdown
         }
     }
 </script>

client/src/ui/components/bd/setting/Radio.vue

@@ -14,20 +14,19 @@
             <div class="bd-title">
                 <h3>{{setting.text}}</h3>
             </div>
+            <div class="bd-hint">{{setting.hint}}</div>
         </div>
-        <div class="bd-form-radio-group">
-            <label class="bd-radio" v-for="option in setting.options" :class="{'bd-radio-selected': setting.value === option.id}" @click="selectOption(option)">
-                <div class="bd-radio-control-wrap">
-                    <svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g></svg>
-                </div>
-                <div class="bd-radio-text">{{option.text}}</div>
-            </label>
-        </div>
+        <RadioGroup :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
     </div>
 </template>
 <script>
+    import RadioGroup from '../../common/RadioGroup.vue';
+
     export default {
         props: ['setting', 'change'],
+        components: {
+            RadioGroup
+        },
         methods: {
             selectOption(option) {
                 this.change(option.id);

client/src/ui/components/bd/setting/Setting.vue

@@ -9,7 +9,7 @@
 */
 
 <template>
-    <div class="bd-form-item" :class="{'bd-form-item-changed': changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text}">
+    <div class="bd-form-item" :class="{'bd-form-item-changed': changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
         <BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
         <DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/>
         <NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>

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

@@ -0,0 +1,52 @@
+/**
+ * BetterDiscord Dropdown 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-dropdown" :class="{'bd-active': active, 'bd-disabled': disabled}">
+        <div class="bd-dropdown-current" @click="() => active = !active && !disabled">
+            <span class="bd-dropdown-text">{{ getOptionText(selected) }}</span>
+            <span class="bd-dropdown-arrow-wrap">
+                <span class="bd-dropdown-arrow"></span>
+            </span>
+        </div>
+        <div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
+            <div class="bd-dropdown-option" v-for="option in options" :class="{'bd-dropdown-option-selected': selected === option.id}" @click="selectOption(option)">{{ option.text }}</div>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['options', 'selected', 'disabled', 'change'],
+        data() {
+            return {
+                active: false
+            };
+        },
+        methods: {
+            getOptionText(value) {
+                let matching = this.options.filter(opt => opt.id === value);
+                if (matching.length == 0) return "";
+                else return matching[0].text;
+            },
+            selectOption(option) {
+                this.active = false;
+                this.change(option.id);
+            }
+        },
+        mounted() {
+            document.addEventListener("click", e => {
+                let options = this.$refs.options;
+                if (options && !options.contains(e.target) && options !== e.target) {
+                    this.active = false;
+                }
+            });
+        }
+    }
+</script>

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

@@ -0,0 +1,30 @@
+/**
+ * BetterDiscord Radio Group 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-radio-group" :class="{'bd-disabled': disabled}">
+        <label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': selected === option.id}" @click="selectOption(option)">
+            <div class="bd-radio-control-wrap">
+                <svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g></svg>
+            </div>
+            <div class="bd-radio-text">{{option.text}}</div>
+        </label>
+    </div>
+</template>
+<script>
+    export default {
+        props: ['options', 'selected', 'disabled', 'change'],
+        methods: {
+            selectOption(option) {
+                this.change(option.id);
+            }
+        }
+    }
+</script>

tests/plugins/Example/config.json

@@ -128,7 +128,8 @@
                         {"id": "opt3", "value": "opt3", "text": "Option 3"},
                         {"id": "opt4", "value": "opt4", "text": "Option 4"},
                         {"id": "opt5", "value": "opt5", "text": "Option 5"}
-                    ]
+                    ],
+                    "fullwidth": true
                 },
                 {
                     "id": "default-6",