Switch style fixes and settings render

client/src/modules/ui/vue/components/BdSettings.vue

@@ -1,7 +1,9 @@
 <template src="./templates/BdSettings.html"></template>
 
 <script>
-    
+
+    const { Settings } = require('../../../');
+
     /*Imports*/
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
     import { CoreSettings, UISettings, EmoteSettings, PluginsView, CssEditorView } from './bd';
@@ -65,6 +67,11 @@
                 first: true
             }
         },
+        computed: {
+            coreSettings: function () {
+                return (Settings.getSettings.find(settingset => settingset.id === 'core')).settings;
+            }
+        },
         updated: function () {
             if (this.active) return;
             this.activeIndex = this.lastActiveIndex = -1;

client/src/modules/ui/vue/components/bd/CoreSettings.vue

@@ -1,14 +1,28 @@
 <template>
     <SettingsWrapper headertext="Core Settings">
+        <div class="bd-form-item"  v-for="setting in settings" :key="setting.id">
+            <SettingSwitch key="setting.id" :setting="setting" :onClick="settingOnClick"/>
+            <div class="bd-form-divider"/>
+         </div>
     </SettingsWrapper>
 </template>
 
 <script>
     /*Imports*/
     import { SettingsWrapper } from './';
-    const components = { SettingsWrapper };
+    import { SettingSwitch } from '../generic';
+    const components = { SettingsWrapper, SettingSwitch };
+
+    /*Methods*/
+    function settingOnClick() {
+
+    }
+
+    const methods = { settingOnClick };
 
     export default {
-        components
+        components,
+        methods,
+        props: ['settings']
     }
 </script>

client/src/modules/ui/vue/components/generic/templates/SettingSwitch.html

@@ -1,6 +1,6 @@
 <div class="bd-setting-switch">
   <div class="bd-title">
-      <h3>{{setting.title}}</h3>
+      <h3>{{setting.title || setting.text}}</h3>
       <label class="bd-switch-wrapper" @click="onClick">
           <input type="checkbox" class="bd-switch-checkbox"/>
           <div class="bd-switch" :class="{'bd-checked': setting.checked}"/>

client/src/modules/ui/vue/components/templates/BdSettings.html

@@ -9,7 +9,7 @@
         </Sidebar>
         <ContentColumn slot="content">
             <div :class="{active: activeContent('core'), animating: animatingContent('core')}">
-                <CoreSettings />
+                <CoreSettings :settings="coreSettings"/>
             </div>
             <div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
                 <UISettings />

client/src/styles/partials/generic.scss

@@ -213,4 +213,8 @@
 
 .bd-setting-switch .bd-switch-wrapper .bd-switch.bd-checked:before {
     transform: translateX(20px);
+}
+
+.bd-setting-switch + .bd-form-divider {
+    margin: 0 0 10px 0;
 }