From 4ef24b8b85b6793c954ae8b60057fcb6cb87687a Mon Sep 17 00:00:00 2001
From: Samuel Elliott <samuelthomas2774@users.noreply.github.com>
Date: Sun, 4 Feb 2018 22:09:24 +0000
Subject: [PATCH] Organised form SCSS files and updated styles for dropdowns
 and radios

---
 .../src/styles/partials/generic/drawers.scss  |   6 +
 client/src/styles/partials/generic/forms.scss | 259 +-----------------
 .../partials/generic/forms/dropdowns.scss     | 106 +++++++
 .../styles/partials/generic/forms/files.scss  |  40 +++
 .../styles/partials/generic/forms/index.scss  |   5 +
 .../styles/partials/generic/forms/main.scss   |  29 ++
 .../styles/partials/generic/forms/radios.scss |  71 +++++
 .../styles/partials/generic/forms/text.scss   |  66 +++++
 client/src/styles/partials/generic/index.scss |   1 +
 .../components/bd/pluginsetting/Dropdown.vue  |  29 +-
 .../ui/components/bd/pluginsetting/Radio.vue  |  27 +-
 11 files changed, 363 insertions(+), 276 deletions(-)
 create mode 100644 client/src/styles/partials/generic/forms/dropdowns.scss
 create mode 100644 client/src/styles/partials/generic/forms/files.scss
 create mode 100644 client/src/styles/partials/generic/forms/index.scss
 create mode 100644 client/src/styles/partials/generic/forms/main.scss
 create mode 100644 client/src/styles/partials/generic/forms/radios.scss
 create mode 100644 client/src/styles/partials/generic/forms/text.scss

diff --git a/client/src/styles/partials/generic/drawers.scss b/client/src/styles/partials/generic/drawers.scss
index cdf02b62..5232c825 100644
--- a/client/src/styles/partials/generic/drawers.scss
+++ b/client/src/styles/partials/generic/drawers.scss
@@ -1,10 +1,16 @@
 .bd-drawer {
     .bd-form-header {
         cursor: pointer;
+
+        &:hover {
+            color: rgba(255, 255, 255, 0.25);
+        }
     }
+
     .bd-drawer-open-button {
         position: relative;
         margin-right: 15px;
+
         .bd-chevron-1, .bd-chevron-2 {
             position: absolute;
         }
diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
index 4c4d77c5..8f26c36a 100644
--- a/client/src/styles/partials/generic/forms.scss
+++ b/client/src/styles/partials/generic/forms.scss
@@ -26,10 +26,12 @@
             height: 16px;
             cursor: pointer;
             fill: #ccc;
+        }
+    }
 
-            &:hover {
-                fill: #fff;
-            }
+    &:hover {
+        .bd-form-header-button svg {
+            fill: #fff;
         }
     }
 }
@@ -43,15 +45,8 @@
 
 .bd-form-divider {
     height: 1px;
-    margin-top: 8px;
-    margin-bottom: 40px;
+    margin: 15px 0;
     background: hsla(218,5%,47%,.3);
-
-    .bd-form-textinput + &,
-    .bd-form-fileinput + &,
-    .bd-setting-switch + & {
-        margin: 15px 0;
-    }
 }
 
 .bd-form-warning {
@@ -93,245 +88,3 @@
     font-weight: 500;
     user-select: none;
 }
-
-.bd-form-textinput,
-.bd-form-fileinput,
-.bd-form-numberinput,
-.bd-setting-switch {
-    .bd-title {
-        display: flex;
-
-        h3 {
-            font-weight: 500;
-            color: #f6f6f7;
-            flex: 1;
-            line-height: 24px;
-            margin-bottom: 0;
-            margin-top: 0;
-        }
-    }
-
-    .bd-hint {
-        flex: 1 1 auto;
-        color: #72767d;
-        font-size: 14px;
-        font-weight: 500;
-        margin-top: 5px;
-        line-height: 20px;
-        border-bottom: 0px solid rgba(114, 118, 126, 0.1);
-    }
-}
-
-.bd-form-textinput, .bd-form-numberinput {
-    input[type="text"], input[type="number"] {
-        background: transparent;
-        border: none;
-        color: #b9bbbe;
-        border-bottom: 2px solid rgba(114, 118, 126, 0.3);
-        outline: none;
-        line-height: 24px;
-        font-size: 100%;
-        font-weight: 500;
-
-        &:focus {
-            color: #FFF;
-            border-color: $colbdblue;
-        }
-    }
-}
-
-.bd-form-fileinput {
-    .bd-button.bd-button-primary {
-        padding: 3px 8px;
-        border-radius: 3px;
-        font-size: 12px;
-        font-weight: 400;
-    }
-
-    .bd-selected-files {
-        margin: 15px 0;
-
-        .bd-selected-file {
-            margin: 10px 0;
-            color: #aaa;
-            font-size: 15px;
-            display: flex;
-
-            .bd-file-path {
-                flex: 1 1;
-            }
-
-            .bd-file-open,
-            .bd-file-remove {
-                flex: 0 0;
-                margin-left: 5px;
-
-                svg {
-                    width: 16px;
-                    height: 16px;
-                    cursor: pointer;
-                    fill: #ccc;
-
-                    &:hover {
-                        fill: #fff;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.bd-number {
-    position: relative;
-
-    input[type=number] {
-        &::-webkit-inner-spin-button,
-        ::-webkit-outer-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
-        }
-    }
-
-    .bd-number-spinner {
-        position: absolute;
-        top: 0;
-        right: 0;
-        height: 100%;
-        justify-content: space-around;
-
-        .bd-arrow {
-            padding: 3px 5px;
-            cursor: pointer;
-            font-size: 0;
-
-            .bd-up-arrow {
-                border-color: transparent transparent rgb(153, 153, 153);
-                border-style: solid;
-                border-width: 2.5px 5px 5px;
-            }
-
-            &:hover .bd-up-arrow {
-                border-color: transparent transparent rgb(200, 200, 200);
-            }
-        
-            .bd-down-arrow {
-                border-color: rgb(153, 153, 153) transparent transparent;
-                border-style: solid;
-                border-width: 5px 5px 2.5px;
-            }
-
-            &:hover .bd-down-arrow {
-                border-color: rgb(200, 200, 200) transparent transparent;
-            }
-        }
-    }
-}
-
-.bd-radio-option {
-    background: rgb(50, 50, 50);
-    border: 2px solid rgb(39, 39, 39);
-    border-radius: 5px;
-    padding: 3px;
-    align-items: center;
-    cursor: pointer;
-
-    input[type="radio"] {
-        display: none;
-
-        &:checked + .bd-radio {
-            background-color: white;
-        }
-    }
-
-    .bd-radio {
-        background: rgb(50, 50, 50);
-        border: 1px solid rgb(114, 118, 125);
-        border-radius: 50%;
-        width: 12px;
-        height: 12px;
-        transition: background-color .1s;
-    }
-
-    span {
-        color: white;
-        margin: 0px 5px;
-    }
-
-    &:not(:last-child) {
-        margin-bottom: 5px;
-    }
-}
-
-.bd-dropdown {
-    position: relative;
-    
-    .bd-dropdown-current {
-        color: white;
-        background: rgb(50, 50, 50);
-        border: 2px solid rgb(39, 39, 39);
-        border-radius: 5px;
-        padding: 8px;
-        cursor: pointer;
-
-        .bd-dropdown-arrow {
-            border-color: rgb(153, 153, 153) transparent transparent;
-            border-style: solid;
-            border-width: 5px 5px 2.5px;
-            display: inline-block;
-            margin-left: 10px;
-        }
-    }
-
-    .bd-dropdown-options {
-        position: absolute;
-        top: calc(100% - 2.5px);
-        width: 100%;
-        max-height: 100px;
-        box-sizing: border-box;
-        background: rgb(50, 50, 50);
-        border: 2px solid rgb(39, 39, 39);
-        border-bottom-left-radius: 5px;
-        border-bottom-right-radius: 5px;
-        overflow-y: scroll;
-
-        div {
-            color: white;
-            padding: 5px;
-            cursor: pointer;
-
-            &:hover {
-                background: rgb(59, 59, 59);
-            }
-
-            &:last-child {
-                border-bottom-left-radius: 5px;
-                border-bottom-right-radius: 5px;
-            }
-        }
-
-        &::-webkit-scrollbar {
-            width: 14px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-color: #1e2124;
-            border-color: #36393e;
-            border-color: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb,
-        &::-webkit-scrollbar-track-piece {
-            background-clip: padding-box;
-            border-width: 3px;
-            border-style: solid;
-            border-radius: 7px;
-            border-color: transparent;
-        }
-
-        &::-webkit-scrollbar-track-piece {
-            background-color: #2f3136;
-            border-color: #36393e;
-            border-color: transparent;
-        }
-    }
-}
\ No newline at end of file
diff --git a/client/src/styles/partials/generic/forms/dropdowns.scss b/client/src/styles/partials/generic/forms/dropdowns.scss
new file mode 100644
index 00000000..709df8ce
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/dropdowns.scss
@@ -0,0 +1,106 @@
+.bd-dropdown {
+    position: relative;
+
+    .bd-dropdown-current {
+        color: #f6f6f7;
+        background: rgba(0,0,0,.1);
+        border: 1px solid rgba(0,0,0,.3);
+        border-radius: 3px;
+        padding: 11px;
+        cursor: default;
+        outline: none;
+        transition: border .15s ease;
+        width: 180px;
+        box-sizing: border-box;
+        display: flex;
+
+        .bd-dropdown-text {
+            flex: 1 1 auto;
+        }
+
+        .bd-dropdown-arrow-wrap {
+            flex: 0 0 auto;
+            margin-left: 10px;
+
+            .bd-dropdown-arrow {
+                border-color: rgb(153, 153, 153) transparent transparent;
+                border-style: solid;
+                border-width: 5px 5px 2.5px;
+                display: inline-block;
+                transition: transform 0.15s ease;
+                transform: none;
+            }
+        }
+
+        &:hover {
+            border-color: #040405;
+
+            .bd-dropdown-arrow-wrap .bd-dropdown-arrow {
+                border-color: #f6f6f7 transparent transparent;
+            }
+        }
+    }
+
+    &.bd-active {
+        .bd-dropdown-current {
+            border-color: #040405;
+        }
+
+        .bd-dropdown-arrow-wrap .bd-dropdown-arrow {
+            transform: rotateX(180deg) translateY(2px);
+            border-color: #f6f6f7 transparent transparent;
+        }
+    }
+
+    .bd-dropdown-options {
+        position: absolute;
+        top: calc(100% - 2.5px);
+        width: 100%;
+        max-height: 180px;
+        box-sizing: border-box;
+        background-color: #303237;
+        border: 1px solid #202225;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+        overflow-y: scroll;
+
+        .bd-dropdown-option {
+            color: white;
+            padding: 11px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.1);
+            }
+
+            &.bd-dropdown-option-selected {
+                background-color: rgba(0, 0, 0, 0.2);
+            }
+        }
+
+        &::-webkit-scrollbar {
+            width: 14px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: #1e2124;
+            border-color: #36393e;
+            border-color: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb,
+        &::-webkit-scrollbar-track-piece {
+            background-clip: padding-box;
+            border-width: 3px;
+            border-style: solid;
+            border-radius: 7px;
+            border-color: transparent;
+        }
+
+        &::-webkit-scrollbar-track-piece {
+            background-color: #2f3136;
+            border-color: #36393e;
+            border-color: transparent;
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic/forms/files.scss b/client/src/styles/partials/generic/forms/files.scss
new file mode 100644
index 00000000..80b303a9
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/files.scss
@@ -0,0 +1,40 @@
+.bd-form-fileinput {
+    .bd-button.bd-button-primary {
+        padding: 3px 8px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 400;
+    }
+
+    .bd-selected-files {
+        margin: 15px 0;
+
+        .bd-selected-file {
+            margin: 10px 0;
+            color: #aaa;
+            font-size: 15px;
+            display: flex;
+
+            .bd-file-path {
+                flex: 1 1;
+            }
+
+            .bd-file-open,
+            .bd-file-remove {
+                flex: 0 0;
+                margin-left: 5px;
+
+                svg {
+                    width: 16px;
+                    height: 16px;
+                    cursor: pointer;
+                    fill: #ccc;
+
+                    &:hover {
+                        fill: #fff;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic/forms/index.scss b/client/src/styles/partials/generic/forms/index.scss
new file mode 100644
index 00000000..f4e88128
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/index.scss
@@ -0,0 +1,5 @@
+@import './main.scss';
+@import './text.scss';
+@import './files.scss';
+@import './dropdowns.scss';
+@import './radios.scss';
diff --git a/client/src/styles/partials/generic/forms/main.scss b/client/src/styles/partials/generic/forms/main.scss
new file mode 100644
index 00000000..08964d32
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/main.scss
@@ -0,0 +1,29 @@
+.bd-form-textinput,
+.bd-form-fileinput,
+.bd-form-dropdown,
+.bd-form-radio,
+.bd-form-numberinput,
+.bd-setting-switch {
+    .bd-title {
+        display: flex;
+
+        h3 {
+            font-weight: 500;
+            color: #f6f6f7;
+            flex: 1;
+            line-height: 24px;
+            margin-bottom: 0;
+            margin-top: 0;
+        }
+    }
+
+    .bd-hint {
+        flex: 1 1 auto;
+        color: #72767d;
+        font-size: 14px;
+        font-weight: 500;
+        margin-top: 5px;
+        line-height: 20px;
+        border-bottom: 0px solid rgba(114, 118, 126, 0.1);
+    }
+}
diff --git a/client/src/styles/partials/generic/forms/radios.scss b/client/src/styles/partials/generic/forms/radios.scss
new file mode 100644
index 00000000..ee5b9346
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/radios.scss
@@ -0,0 +1,71 @@
+.bd-form-radio {
+    display: flex;
+
+    .bd-form-radio-details {
+        flex: 1 1 auto;
+    }
+
+    .bd-form-radio-group {
+        width: 180px;
+        flex: 0 0 auto;
+        margin-left: 20px;
+    }
+}
+
+.bd-radio {
+    background: rgba(0,0,0,.1);
+    border: 1px solid rgba(0,0,0,.3);
+    border-radius: 3px;
+    padding: 11px;
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+
+    .bd-radio-control-wrap {
+        flex: 0 0 auto;
+        margin: -3px;
+        margin-right: 10px;
+        height: 20px;
+        width: 20px;
+        border-radius: 3px;
+        border: 1px solid #72767d;
+
+        .bd-radio-control {
+            // background: rgb(50, 50, 50);
+            // border: 1px solid rgb(114, 118, 125);
+            // border-radius: 50%;
+            // width: 12px;
+            // height: 12px;
+            // transition: background-color .1s;
+            margin: 1px;
+            opacity: 0;
+        }
+    }
+
+    .bd-radio-text {
+        flex: 1 1 auto;
+        color: white;
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 5px;
+    }
+
+    &:hover {
+        border-color: #040405;
+    }
+
+    &.bd-radio-selected {
+        background-color: $colbdblue;
+        border-color: $colbdblue;
+
+        .bd-radio-control-wrap {
+            border-color: #fff;
+            background-color: #fff;
+
+            .bd-radio-control {
+                opacity: 1;
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic/forms/text.scss b/client/src/styles/partials/generic/forms/text.scss
new file mode 100644
index 00000000..5fa7fb6f
--- /dev/null
+++ b/client/src/styles/partials/generic/forms/text.scss
@@ -0,0 +1,66 @@
+.bd-form-textinput,
+.bd-form-numberinput {
+    input[type="text"],
+    input[type="number"] {
+        background: transparent;
+        border: none;
+        color: #b9bbbe;
+        border-bottom: 2px solid rgba(114, 118, 126, 0.3);
+        outline: none;
+        line-height: 24px;
+        font-size: 100%;
+        font-weight: 500;
+        width: 180px;
+
+        &:focus {
+            color: #fff;
+            border-color: $colbdblue;
+        }
+    }
+}
+
+.bd-number {
+    position: relative;
+
+    input[type="number"] {
+        &::-webkit-inner-spin-button,
+        ::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+
+    .bd-number-spinner {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        justify-content: space-around;
+
+        .bd-arrow {
+            padding: 3px 5px;
+            cursor: pointer;
+            font-size: 0;
+
+            .bd-up-arrow {
+                border-color: transparent transparent rgb(153, 153, 153);
+                border-style: solid;
+                border-width: 2.5px 5px 5px;
+            }
+
+            &:hover .bd-up-arrow {
+                border-color: transparent transparent rgb(200, 200, 200);
+            }
+
+            .bd-down-arrow {
+                border-color: rgb(153, 153, 153) transparent transparent;
+                border-style: solid;
+                border-width: 5px 5px 2.5px;
+            }
+
+            &:hover .bd-down-arrow {
+                border-color: rgb(200, 200, 200) transparent transparent;
+            }
+        }
+    }
+}
diff --git a/client/src/styles/partials/generic/index.scss b/client/src/styles/partials/generic/index.scss
index 15e03cab..0fb371a7 100644
--- a/client/src/styles/partials/generic/index.scss
+++ b/client/src/styles/partials/generic/index.scss
@@ -3,6 +3,7 @@
 @import './scrollable.scss';
 @import './buttons.scss';
 @import './forms.scss';
+@import './forms/index.scss';
 @import './material-buttons.scss';
 @import './modals.scss';
 @import './drawers.scss';
diff --git a/client/src/ui/components/bd/pluginsetting/Dropdown.vue b/client/src/ui/components/bd/pluginsetting/Dropdown.vue
index e0ca6dc5..e00c03fd 100644
--- a/client/src/ui/components/bd/pluginsetting/Dropdown.vue
+++ b/client/src/ui/components/bd/pluginsetting/Dropdown.vue
@@ -9,13 +9,18 @@
 */
 
 <template>
-    <div class="bd-setting-switch"> 
+    <div class="bd-form-dropdown">
         <div class="bd-title">
             <h3>{{setting.text}}</h3>
-            <div class="bd-dropdown">
-                <div class="bd-dropdown-current" @click="expanded = true">{{getOptionText(setting.value)}}<span class="bd-dropdown-arrow"></span></div>
-                <div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="expanded">
-                    <div v-for="option in setting.options" @click="selectOption(setting.id, option.value)">{{option.text}}</div>
+            <div class="bd-dropdown" :class="{'bd-active': active}">
+                <div class="bd-dropdown-current" @click="() => active = !active">
+                    <span class="bd-dropdown-text">{{getOptionText(setting.value)}}</span>
+                    <span class="bd-dropdown-arrow-wrap">
+                        <span class="bd-dropdown-arrow"></span>
+                    </span>
+                </div>
+                <div class="bd-dropdown-options bd-flex bd-flex-col" ref="options" v-if="active">
+                    <div class="bd-dropdown-option" v-for="option in setting.options" :class="{'bd-dropdown-option-selected': setting.value === option.value}" @click="selectOption(option)">{{option.text}}</div>
                 </div>
             </div>
         </div>
@@ -26,7 +31,9 @@
     export default {
         props: ['setting', 'change'],
         data() {
-            return { expanded: false }
+            return {
+                active: false
+            };
         },
         methods: {
             getOptionText(value) {
@@ -34,18 +41,18 @@
                 if (matching.length == 0) return "";
                 else return matching[0].text;
             },
-            selectOption(settingID, value) {
-                this.expanded = false;
-                this.change(settingID, value)
+            selectOption(option) {
+                this.active = false;
+                this.change(this.setting.id, option.value);
             }
         },
         mounted() {
             document.addEventListener("click", e => {
                 let options = this.$refs.options;
                 if (options && !options.contains(e.target) && options !== e.target) {
-                    this.expanded = false;
+                    this.active = false;
                 }
             });
         }
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/client/src/ui/components/bd/pluginsetting/Radio.vue b/client/src/ui/components/bd/pluginsetting/Radio.vue
index 79d994c9..2984496b 100644
--- a/client/src/ui/components/bd/pluginsetting/Radio.vue
+++ b/client/src/ui/components/bd/pluginsetting/Radio.vue
@@ -9,26 +9,29 @@
 */
 
 <template>
-    <div class="bd-setting-switch">
-        <div class="bd-title">
-            <h3>{{setting.text}}</h3>
-            <div class="bd-flex bd-flex-col">
-                <label class="bd-radio-option bd-flex" v-for="option in setting.options">
-                    <input type="radio" :value="option.value" :name="setting.id" :checked="setting.value == option.value" @change="input">
-                    <div class="bd-radio"></div>
-                    <span>{{option.text}}</span>
-                </label>
+    <div class="bd-form-radio">
+        <div class="bd-form-radio-details">
+            <div class="bd-title">
+                <h3>{{setting.text}}</h3>
             </div>
+            <div class="bd-hint">{{setting.hint}}</div>
+        </div>
+        <div class="bd-form-radio-group">
+            <label class="bd-radio" v-for="option in setting.options" :class="{'bd-radio-selected': setting.value === option.value}" @click="selectOption(option)">
+                <div class="bd-radio-control-wrap">
+                    <svg class="bd-radio-control" name="Checkmark" width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polyline stroke="#3e82e5" stroke-width="2" points="3.5 9.5 7 13 15 5"></polyline></g></svg>
+                </div>
+                <div class="bd-radio-text">{{option.text}}</div>
+            </label>
         </div>
-        <div class="bd-hint">{{setting.hint}}</div>
     </div>
 </template>
 <script>
     export default {
         props: ['setting', 'change'],
         methods: {
-            input(e) {
-                this.change(this.setting.id, e.target.value);
+            selectOption(option) {
+                this.change(this.setting.id, option.value);
             }
         }
     }