Styling, common components and add buttons to plugin card

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

@@ -1,8 +1,14 @@
 <template src="./templates/PluginCard.html"></template>
 
 <script>
+    /*Imports*/
+    import { Button, ButtonGroup } from '../generic';
+    import MiSettings from 'vue-material-design-icons/settings.vue';
+    const components = { MiSettings, Button, ButtonGroup };
+
     export default {
         props: ['plugin', 'togglePlugin'],
+        components,
         name: "PluginCard"
     }
 </script>

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

@@ -58,53 +58,5 @@
 </script>
 
 <style>
-    .bd-spinner-container {
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-    }
-
-    .bd-spinner-container .bd-spinner-2 {
-        width: 200px;
-        height: 200px;
-     }
-
-    .bd-pluginsView .bd-button {
-        display: flex;
-    }
-
-    .bd-pluginsView .bd-button h3 {
-        flex-grow: 1;
-    } 
     
-    .bd-pluginsView .bd-button .material-design-icon {
-        display: flex;
-        align-items: center;
-        fill: #FFF;
-    }
-
-    .bd-material-button {
-        border-radius: 3px;
-        display: flex;
-        align-items: center;
-        align-content: center;
-        justify-content: center;
-        width: 30px;
-        height: 30px;
-    }
-
-    .bd-pluginsView .bd-button {
-        border-bottom: 2px solid #2b2d31;
-        align-items: center;
-    }
-
-    .bd-material-button > span {
-        display: flex;
-    }
-
-    .bd-material-button:hover {
-        background: #2d2f34;
-    }
 </style>

client/src/modules/ui/components/bd/templates/PluginCard.html

@@ -11,7 +11,22 @@
         <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 class="bd-controls">
+                <ButtonGroup>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                    <Button>
+                        <MiSettings/>
+                    </Button>
+                </ButtonGroup>
+            </div>
         </div>
     </div>
 </div>

client/src/modules/ui/components/bd/templates/PluginsView.html

@@ -1,6 +1,6 @@
 <SettingsWrapper headertext="Plugins">
     <div class="bd-flex bd-flex-col bd-pluginsView">
-        <div class="bd-flex">
+        <div class="bd-flex bd-tabheader">
             <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
                 <h3>Local</h3>
                 <div class="bd-material-button" @click="refreshLocalPlugins">

client/src/modules/ui/components/generic/Button.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="bd-button" :class="{'bd-disabled': disabled}" @click="!disabled && !loading ? onClick() : null">
+        <div v-if="loading" class="bd-spinner-7"></div>
+        <slot v-else />
+    </div>
+</template>
+<script>
+    export default {
+        props: ['loading', 'disabled', 'type', 'onClick']
+    }
+</script>

client/src/modules/ui/components/generic/ButtonGroup.vue

@@ -0,0 +1,9 @@
+<template>
+    <div class="bd-button-group">
+        <slot/>
+    </div>
+</template>
+<script>
+    export default {
+    }
+</script>

client/src/modules/ui/components/generic/index.js

@@ -1,3 +1,5 @@
 export { default as ScrollerWrap } from './ScrollerWrap.vue';
 export { default as SettingSwitch } from './SettingSwitch.vue';
-export { default as FormButton } from './FormButton.vue';
+export { default as FormButton } from './FormButton.vue';
+export { default as ButtonGroup } from './ButtonGroup.vue';
+export { default as Button } from './Button.vue';

client/src/styles/partials/buttons.scss

@@ -0,0 +1,88 @@
+.bd-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #FFF;
+    text-align: center;
+    user-select: none;
+    font-weight: 500;
+    background: $colbdblue;
+
+    &:not(.bd-disabled):hover {
+        background: darken($colbdblue, 5%);
+    }
+
+    &.bd-disabled {
+        filter: grayscale(90%);
+        cursor: not-allowed;
+    }
+
+    .bd-spinner-7 {
+        opacity: .3;
+    }
+}
+
+.bd-button-group {
+    display: flex;
+
+    .bd-button,
+    .bd-material-button {
+        &:first-of-type {
+            border-radius: 6px 0 0 6px;
+        }
+
+        &:last-of-type {
+            border-radius: 0 6px 6px 0;
+        }
+
+        &:not(:last-of-type) {
+            border-right: 1px solid rgba(114, 118, 126, 0.3);
+        }
+
+        &:not(:first-of-type) {
+            border-left: 1px solid rgba(114, 118, 126, 0.1);
+        }
+    }
+}
+
+.bd-tabheader {
+    .bd-button {
+        background: transparent;
+        border-bottom: 2px solid #2b2d31;
+
+        h3 {
+            flex-grow: 1;
+        }
+
+        .bd-material-button {
+            width: 30px;
+            height: 30px;
+
+            .material-design-icon,
+            .bd-material-design-icon {
+                display: flex;
+                align-items: center;
+                fill: #FFF;
+            }
+
+            &:hover {
+                background: #2d2f34;
+            }
+        }
+
+        &:hover,
+        &.bd-active {
+            background: transparent;
+            border-bottom: 2px solid $colbdblue;
+        }
+    }
+}
+
+.bd-material-button {
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}

client/src/styles/partials/generic.scss

@@ -1,3 +1,5 @@
+@import './buttons.scss';
+
 .bd-scroller-wrap {
     display: flex;
     width: 100%;
@@ -55,30 +57,6 @@
     backface-visibility: hidden;
 }
 
-.bd-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    color: #FFF;
-    text-align: center;
-    user-select: none;
-    font-weight: 500;
-    background: $colbdblue;
-
-    &:not(.bd-disabled):hover {
-        background: darken($colbdblue, 5%);
-    }
-
-    &.bd-disabled {
-        filter: grayscale(90%);
-        cursor: not-allowed;
-    }
-
-    .bd-spinner-7 {
-        opacity: .3;
-    }
-}
 
 .bd-form-item h5 {
     color: #b9bbbe;
@@ -241,4 +219,7 @@
     .bd-switch:before {
         background: #888888;
     }
-}
+}
+
+
+