Css editor panel

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

@@ -1,11 +1,11 @@
 <template src="./templates/BdSettings.html"></template>
 
 <script>
-    const { CssEditor } = require('../../../');
+    
     /*Imports*/
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
-    import { CoreSettings, UISettings, EmoteSettings, PluginsView } from './bd';
-    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings, PluginsView };
+    import { CoreSettings, UISettings, EmoteSettings, PluginsView, CssEditorView } from './bd';
+    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings, PluginsView, CssEditorView };
 
     /*Constants*/
     const sidebarItems = [
@@ -21,10 +21,6 @@
 
     /*Methods*/
     function itemOnClick(id) {
-        if (id === 3) {
-            CssEditor.show();
-            return;
-        }
         if (this.animating || id === this.activeIndex) return;
         if (this.activeIndex >= 0) this.sidebarItems.find(item => item.id === this.activeIndex).active = false;
         this.sidebarItems.find(item => item.id === id).active = true;

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

@@ -0,0 +1,18 @@
+<template src="./templates/CssEditor.html"></template>
+
+<script>
+    const { CssEditor } = require('../../../../');
+
+    /*Imports*/
+    import { SettingsWrapper } from './';
+    const components = { SettingsWrapper };
+
+    function openInternalEditor() {
+        CssEditor.show();
+    }
+
+    export default {
+        components,
+        methods: { openInternalEditor }
+    }
+</script>

client/src/modules/ui/vue/components/bd/index.js

@@ -3,4 +3,5 @@ export { default as CoreSettings } from './CoreSettings.vue';
 export { default as UISettings } from './UISettings.vue';
 export { default as EmoteSettings } from './EmoteSettings.vue';
 export { default as PluginsView } from './PluginsView.vue';
-export { default as PluginCard } from './PluginCard.vue';
+export { default as PluginCard } from './PluginCard.vue';
+export { default as CssEditorView } from './CssEditor.vue';

client/src/modules/ui/vue/components/bd/templates/CssEditor.html

@@ -0,0 +1,29 @@
+<SettingsWrapper headertext="CSS Editor">
+    <div class="bd-css-editor">
+        <div class="bd-form-item">
+            <h5>Settings</h5>
+        </div>
+        <div class="bd-form-divider"></div>
+        <div class="bd-form-item">
+            <h5>Custom Editor</h5>
+            <div class="bd-form-warning">
+                <div class="bd-text">Custom Editor is not installed!</div>
+                <div class="bd-form-button">
+                    Install
+                </div>
+            </div>
+            <span style="color: #FFF; font-size: 12px; font-weight: 700;">*This is displayed if editor is not installed</span>
+            <div class="bd-form-button" @click="openInternalEditor">
+                Open
+            </div>
+        </div>
+        <div class="bd-form-divider"></div>
+        <div class="bd-form-item">
+            <h5>System Editor</h5>
+            <div class="bd-form-button">
+                Open
+            </div>
+        </div>
+        <div class="bd-form-divider"></div>
+    </div>
+</SettingsWrapper>

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

@@ -14,6 +14,9 @@
             <div :class="{active: activeContent('ui'), animating: animatingContent('ui')}">
                 <UISettings />
             </div>
+            <div :class="{active: activeContent('css'), animating: animatingContent('css')}">
+                <CssEditorView />
+            </div>
             <div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
                 <EmoteSettings />
             </div>

client/src/styles/partials/generic.scss

@@ -58,3 +58,53 @@
     -webkit-user-select: none;
     user-select: none;
 }
+
+.bd-form-item h5 {
+    color: #b9bbbe;
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.bd-form-divider {
+    height: 1px;
+    margin-top: 8px;
+    margin-bottom: 40px;
+    background: hsla(218,5%,47%,.3);
+}
+
+.bd-form-warning {
+    display: flex;
+    margin-top: 20px;
+    background: #d84040;
+    border: 1px solid #B30B0B;
+    opacity: .8;
+    border-radius: 4px;
+    padding: 10px;
+}
+
+.bd-form-warning .bd-text {
+    display: flex;
+    color: #FFF;
+    font-weight: 700;
+    align-items: center;
+    flex-grow: 1;
+}
+
+.bd-form-warning .bd-form-button {
+    margin: 0;
+    align-self: flex-end;
+    background: #C42929;
+}
+
+.bd-form-button {
+    background: #3e82e5;
+    width: 100px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    color: #FFF;
+    border-radius: 4px;
+    margin-top: 10px;
+    cursor: pointer;
+}