From e19f2ad8d73b975bf0813b4e1bb5c39b01f52ed1 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sat, 20 Jan 2018 17:31:17 +0200
Subject: [PATCH] Style fixes and pluginview/plugincard bases

---
 .../modules/ui/vue/components/BdSettings.vue  |  4 +-
 .../ui/vue/components/bd/PluginCard.vue       |  8 ++
 .../ui/vue/components/bd/PluginsView.vue      | 35 +++++++
 .../src/modules/ui/vue/components/bd/index.js |  4 +-
 .../components/bd/templates/PluginCard.html   | 17 ++++
 .../components/bd/templates/PluginsView.html  | 12 +++
 .../vue/components/templates/BdSettings.html  |  3 +
 client/src/styles/partials/bdsettings.scss    | 35 +++++++
 client/src/styles/partials/generic.scss       |  9 ++
 client/src/styles/partials/index.scss         |  1 +
 client/src/styles/partials/layouts.scss       | 19 ++++
 client/src/styles/partials/plugincard.scss    | 97 +++++++++++++++++++
 12 files changed, 241 insertions(+), 3 deletions(-)
 create mode 100644 client/src/modules/ui/vue/components/bd/PluginCard.vue
 create mode 100644 client/src/modules/ui/vue/components/bd/PluginsView.vue
 create mode 100644 client/src/modules/ui/vue/components/bd/templates/PluginCard.html
 create mode 100644 client/src/modules/ui/vue/components/bd/templates/PluginsView.html
 create mode 100644 client/src/styles/partials/layouts.scss
 create mode 100644 client/src/styles/partials/plugincard.scss

diff --git a/client/src/modules/ui/vue/components/BdSettings.vue b/client/src/modules/ui/vue/components/BdSettings.vue
index 6608c7e1..b98137dd 100644
--- a/client/src/modules/ui/vue/components/BdSettings.vue
+++ b/client/src/modules/ui/vue/components/BdSettings.vue
@@ -3,8 +3,8 @@
 <script>
     /*Imports*/
     import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
-    import { CoreSettings, UISettings, EmoteSettings } from './bd';
-    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings };
+    import { CoreSettings, UISettings, EmoteSettings, PluginsView } from './bd';
+    const components = { SidebarView, Sidebar, SidebarItem, ContentColumn, CoreSettings, UISettings, EmoteSettings, PluginsView };
 
     /*Constants*/
     const sidebarItems = [
diff --git a/client/src/modules/ui/vue/components/bd/PluginCard.vue b/client/src/modules/ui/vue/components/bd/PluginCard.vue
new file mode 100644
index 00000000..dc6299e6
--- /dev/null
+++ b/client/src/modules/ui/vue/components/bd/PluginCard.vue
@@ -0,0 +1,8 @@
+<template src="./templates/PluginCard.html"></template>
+
+<script>
+
+    export default {
+        props: ['plugin']
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/bd/PluginsView.vue b/client/src/modules/ui/vue/components/bd/PluginsView.vue
new file mode 100644
index 00000000..77fe40cf
--- /dev/null
+++ b/client/src/modules/ui/vue/components/bd/PluginsView.vue
@@ -0,0 +1,35 @@
+<template src="./templates/PluginsView.html"></template>
+<script>
+    /*Imports*/
+    import { SettingsWrapper, PluginCard } from './';
+    const components = { SettingsWrapper, PluginCard };
+
+    /*Variables*/
+    let dummyPlugins = [
+        { "id": 0, "name": "Dummy Plugin 1", "authors": ["Jiiks"], "version": "1.0", "description": "Dummy Plugin 1 Description" },
+        { "id": 0, "name": "Dummy Plugin 2", "authors": ["Jiiks", "SomeoneElse"], "version": "1.0", "description": "Dummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 DescriptionDummy Plugin 2 Description" }
+    ];
+
+    /*Methods*/
+
+    function showLocal() {
+        this.local = true;
+    }
+
+    function showOnline() {
+        this.local = false;
+    }
+
+    const methods = { showLocal, showOnline };
+
+    export default {
+        components,
+        data() {
+            return {
+                localPlugins: dummyPlugins,
+                local: true
+            }
+        },
+        methods
+    }
+</script>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/bd/index.js b/client/src/modules/ui/vue/components/bd/index.js
index 9871e437..4bee0234 100644
--- a/client/src/modules/ui/vue/components/bd/index.js
+++ b/client/src/modules/ui/vue/components/bd/index.js
@@ -1,4 +1,6 @@
 export { default as SettingsWrapper } from './SettingsWrapper.vue';
 export { default as CoreSettings } from './CoreSettings.vue';
 export { default as UISettings } from './UISettings.vue';
-export { default as EmoteSettings } from './EmoteSettings.vue';
\ No newline at end of file
+export { default as EmoteSettings } from './EmoteSettings.vue';
+export { default as PluginsView } from './PluginsView.vue';
+export { default as PluginCard } from './PluginCard.vue';
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/bd/templates/PluginCard.html b/client/src/modules/ui/vue/components/bd/templates/PluginCard.html
new file mode 100644
index 00000000..bf448e2a
--- /dev/null
+++ b/client/src/modules/ui/vue/components/bd/templates/PluginCard.html
@@ -0,0 +1,17 @@
+<div class="bd-plugin-card">
+    <div class="bd-plugin-header">
+        <span>{{plugin.name}}</span>
+        <div class="bd-flex-spacer"/>
+        <label class="bd-switch-wrapper">
+            <input type="checkbox" class="bd-switch-checkbox" />
+            <div class="bd-switch"/>
+        </label>
+    </div>
+    <div class="bd-plugin-body">
+        <div class="bd-plugin-description">{{plugin.description}}</div>
+        <div class="bd-plugin-footer">
+            <div class="bd-plugin-extra">v{{plugin.version}} by {{plugin.authors.join(', ').replace(/,(?!.*,)/gmi, ' and')}}</div>
+            <div class="bd-controls"></div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/bd/templates/PluginsView.html b/client/src/modules/ui/vue/components/bd/templates/PluginsView.html
new file mode 100644
index 00000000..f84a9517
--- /dev/null
+++ b/client/src/modules/ui/vue/components/bd/templates/PluginsView.html
@@ -0,0 +1,12 @@
+<SettingsWrapper headertext="Plugins">
+    <div class="bd-flex bd-flex-col bd-pluginsView">
+        <div class="bd-flex">
+            <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
+                <h3>Local</h3>
+            </div>
+            <div class="bd-flex-grow bd-button" :class="{'bd-active': !local}">
+                <h3>Online</h3>
+            </div>
+        </div>
+    </div>
+</SettingsWrapper>
\ No newline at end of file
diff --git a/client/src/modules/ui/vue/components/templates/BdSettings.html b/client/src/modules/ui/vue/components/templates/BdSettings.html
index 56ee29be..1d17fe7d 100644
--- a/client/src/modules/ui/vue/components/templates/BdSettings.html
+++ b/client/src/modules/ui/vue/components/templates/BdSettings.html
@@ -17,6 +17,9 @@
             <div :class="{active: activeContent('emotes'), animating: animatingContent('emotes')}">
                 <EmoteSettings />
             </div>
+            <div :class="{active: activeContent('plugins'), animating: animatingContent('plugins')}">
+                <PluginsView />
+            </div>
         </ContentColumn>
 
     </SidebarView>
diff --git a/client/src/styles/partials/bdsettings.scss b/client/src/styles/partials/bdsettings.scss
index ded843b9..2ef5493f 100644
--- a/client/src/styles/partials/bdsettings.scss
+++ b/client/src/styles/partials/bdsettings.scss
@@ -1,3 +1,38 @@
+@import './plugincard.scss';
+
+.bd-pluginsView {
+    .bd-button {
+        text-align: center;
+
+
+        h3 {
+            -webkit-user-select: none;
+            user-select: none;
+            display: block;
+            font-size: 1.17em;
+            margin-top: 1em;
+            margin-bottom: 1em;
+            margin-left: 0;
+            margin-right: 0;
+            font-weight: bold;
+        }
+
+        &:hover,
+        &.bd-active {
+            color: #fff;
+            background: rgb(62, 130, 229);
+        }
+
+        &:first-of-type {
+            border-radius: 8px 0 0 8px;
+        }
+
+        &:last-of-type {
+            border-radius: 0 8px 8px 0;
+        }
+    }
+}
+
 .bd-settings-button {
     position: absolute;
     z-index: 1;
diff --git a/client/src/styles/partials/generic.scss b/client/src/styles/partials/generic.scss
index e93a426f..d449052e 100644
--- a/client/src/styles/partials/generic.scss
+++ b/client/src/styles/partials/generic.scss
@@ -49,3 +49,12 @@
         }
     }
 }
+
+.bd-button {
+    cursor: pointer;
+    color: #b9bbbe;
+    background: #202225;
+    text-align: center;
+    -webkit-user-select: none;
+    user-select: none;
+}
diff --git a/client/src/styles/partials/index.scss b/client/src/styles/partials/index.scss
index 302fc649..209e9487 100644
--- a/client/src/styles/partials/index.scss
+++ b/client/src/styles/partials/index.scss
@@ -1,6 +1,7 @@
 @import './images.scss';
 @import './colours.scss';
 @import './animations.scss';
+@import './layouts.scss';
 @import './bdsettings.scss';
 @import './sidebarview.scss';
 @import './generic.scss';
diff --git a/client/src/styles/partials/layouts.scss b/client/src/styles/partials/layouts.scss
new file mode 100644
index 00000000..980ed161
--- /dev/null
+++ b/client/src/styles/partials/layouts.scss
@@ -0,0 +1,19 @@
+.bd-flex {
+    display: flex;
+}
+
+.bd-flex-row {
+    flex-direction: row;
+}
+
+.bd-flex-col {
+    flex-direction: column;
+}
+
+.bd-flex-grow {
+    flex-grow: 1;
+}
+
+.bd-flex-spacer {
+    flex-grow: 1;
+}
diff --git a/client/src/styles/partials/plugincard.scss b/client/src/styles/partials/plugincard.scss
new file mode 100644
index 00000000..3f07a3e2
--- /dev/null
+++ b/client/src/styles/partials/plugincard.scss
@@ -0,0 +1,97 @@
+.bd-plugin-card {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background: rgba(32, 34, 37, 0.6);
+    border: 1px solid #202225;
+    padding: 5px 10px;
+    min-height: 150px;
+    color: #b9bbbe;
+    border-radius: 8px;
+    margin-top: 10px;
+
+    .bd-plugin-header {
+        padding-bottom: 5px;
+        display: flex;
+        flex-grow: 0;
+        font-weight: 700;
+        box-shadow: 0 1px 0px darken(#2f3136, 8%);
+    }
+
+    .bd-plugin-body {
+        display: flex;
+        flex-grow: 1;
+        flex-direction: column;
+
+        .bd-plugin-description {
+            flex-grow: 1;
+            overflow-y: auto;
+            max-height: 60px;
+            min-height: 60px;
+            color: #8a8c90;
+            font-size: 12px;
+            font-weight: 600;
+            background: rgba(32, 34, 37, 0.6);
+            padding: 5px;
+            border-radius: 8px;
+            margin-top: 5px;
+        }
+
+        .bd-plugin-footer {
+            display: flex;
+            justify-content: flex-end;
+            flex-grow: 1;
+            align-items: flex-end;
+
+            .bd-plugin-extra {
+                color: rgba(255, 255, 255, 0.15);
+                font-size: 10px;
+                font-weight: 700;
+            }
+        }
+    }
+
+    .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);
+            }
+        }
+    }
+}