Merge pull request #48 from JsSucks/ui

Merge

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

@@ -26,23 +26,30 @@
     <div v-if="settingsOpen !== null" class="bd-modal">
         <Modal :headerText="settingsOpen.name + ' Settings'" :close="() => { settingsOpen = null }">
             <div slot="body" v-for="setting in settingsOpen.pluginConfig" class="bd-plugin-settings-body">
-                <div class="bd-form-item" v-if="setting.type === 'bool'">
-                    <div class="bd-setting-switch">
+                <div class="bd-form-item">
+                    
+                    <div v-if="setting.type === 'bool'" class="bd-setting-switch">
                         <div class="bd-title">
                             <h3>{{setting.text}}</h3>
                             <label class="bd-switch-wrapper">
-                                <input type="checkbox" class="bd-switch-checkbox"/>
-                                <div class="bd-switch" :class="{'bd-checked': setting.value}"/>
+                                <input type="checkbox" class="bd-switch-checkbox" />
+                                <div class="bd-switch" :class="{'bd-checked': setting.value}" />
                             </label>
                         </div>
                         <div class="bd-hint">{{setting.hint}}</div>
                     </div>
+                    
+                    <div v-else-if="setting.type === 'text'" class="bd-form-textinput">
+                        <div class="bd-title">
+                            <h3>{{setting.text}}</h3>
+                            <input type="text" value="setting.value" />
+                        </div>
+                        <div class="bd-hint">{{setting.hint}}</div>
+                    </div>
+
                     <div class="bd-form-divider"></div>
                 </div>
-
-                <div v-else-if="setting.type === 'text'">
-
-                </div>
+                
             </div>
         </Modal>
     </div>

client/src/styles/partials/bdsettings/button.scss

@@ -46,3 +46,4 @@
         }
     }
 }
+

client/src/styles/partials/generic/buttons.scss

@@ -46,3 +46,130 @@
         }
     }
 }
+
+.bd-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #FFF;
+    background: #44474c;
+    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-err {
+        background: $colerr;
+
+        &:hover {
+            background: darken($colerr, 5%);
+        }
+    }
+
+    &.bd-warn {
+        background: $colwarn;
+
+        &:hover {
+            background: darken($colwarn, 5%);
+        }
+    }
+
+    &.bd-ok {
+        background: $colok;
+
+        &:hover {
+            background: darken($colok, 5%);
+        }
+    }
+
+    .bd-spinner-7 {
+        opacity: .3;
+    }
+
+    .material-design-icon svg {
+        width: 18px;
+        height: 18px;
+    }
+}
+
+.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 rgba(114, 118, 126, 0.3);
+
+        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;
+            flex-grow: 1;
+        }
+
+        .bd-material-button {
+            width: 30px;
+            height: 30px;
+
+            .material-design-icon,
+            .bd-material-design-icon {
+                display: flex;
+                align-items: center;
+                fill: #FFF;
+
+                svg {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+
+            &:hover {
+                background: #2d2f34;
+            }
+        }
+
+        &:hover,
+        &.bd-active {
+            background: transparent;
+            border-bottom: 2px solid $colbdblue;
+        }
+    }
+}

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

@@ -51,3 +51,30 @@
     font-weight: 500;
     user-select: none;
 }
+
+.bd-form-textinput .bd-title {
+    display: flex;
+}
+
+.bd-form-textinput .bd-title input {
+    flex-grow: 1;
+}
+
+.bd-form-textinput .bd-title h3 {
+    font-weight: 500;
+    color: #f6f6f7;
+    flex: 1;
+    line-height: 24px;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.bd-form-textinput .bd-hint {
+    flex: 1 1 auto;
+    color: #72767d;
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 15px;
+    line-height: 30px;
+    border-bottom: 0px solid rgba(114, 118, 126, 0.1);
+}