From 9a8f2eddef1a7ac66ba8cdf405f02051bd4fd950 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 25 Jan 2018 11:21:48 +0200
Subject: [PATCH] Textinput for plugin settings

---
 .../components/bd/templates/PluginsView.html  |  2 +-
 client/src/styles/partials/generic/forms.scss | 60 ++++++++++++-------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/client/src/modules/ui/components/bd/templates/PluginsView.html b/client/src/modules/ui/components/bd/templates/PluginsView.html
index e2c6a522..7a7dde00 100644
--- a/client/src/modules/ui/components/bd/templates/PluginsView.html
+++ b/client/src/modules/ui/components/bd/templates/PluginsView.html
@@ -42,7 +42,7 @@
                     <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" />
+                            <input type="text" v-model="setting.value" @keyup.stop/>
                         </div>
                         <div class="bd-hint">{{setting.hint}}</div>
                     </div>
diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
index b17f244a..559981e2 100644
--- a/client/src/styles/partials/generic/forms.scss
+++ b/client/src/styles/partials/generic/forms.scss
@@ -52,29 +52,45 @@
     user-select: none;
 }
 
-.bd-form-textinput .bd-title {
-    display: flex;
-}
+.bd-form-textinput {
 
-.bd-form-textinput .bd-title input {
-    flex-grow: 1;
-}
+    .bd-title {
+        display: flex;
 
-.bd-form-textinput .bd-title h3 {
-    font-weight: 500;
-    color: #f6f6f7;
-    flex: 1;
-    line-height: 24px;
-    margin-bottom: 0;
-    margin-top: 0;
-}
+        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);
+        input[type="text"] {
+            flex-grow: 1;
+            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-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);
+    }
 }
\ No newline at end of file