lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Textinput for plugin settings

This commit is contained in:
Jiiks 2018-01-25 11:21:48 +02:00
parent 14a5331ecc
commit 9a8f2eddef
2 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/modules/ui/components/bd/templates/PluginsView.html
View File

@ -42,7 +42,7 @@
<div v-else-if="setting.type === 'text'" class="bd-form-textinput"> <div v-else-if="setting.type === 'text'" class="bd-form-textinput">
<div class="bd-title"> <div class="bd-title">
<h3>{{setting.text}}</h3> <h3>{{setting.text}}</h3>
<input type="text" value="setting.value" /> <input type="text" v-model="setting.value" @keyup.stop/>
</div> </div>
<div class="bd-hint">{{setting.hint}}</div> <div class="bd-hint">{{setting.hint}}</div>
</div> </div>

32
client/src/styles/partials/generic/forms.scss
View File

@ -52,15 +52,12 @@
user-select: none; user-select: none;
} }
.bd-form-textinput .bd-title { .bd-form-textinput {
.bd-title {
display: flex; display: flex;
}
.bd-form-textinput .bd-title input { h3 {
flex-grow: 1;
}
.bd-form-textinput .bd-title h3 {
font-weight: 500; font-weight: 500;
color: #f6f6f7; color: #f6f6f7;
flex: 1; flex: 1;
@ -69,7 +66,25 @@
margin-top: 0; margin-top: 0;
} }
.bd-form-textinput .bd-hint { 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; flex: 1 1 auto;
color: #72767d; color: #72767d;
font-size: 14px; font-size: 14px;
@ -78,3 +93,4 @@
line-height: 30px; line-height: 30px;
border-bottom: 0px solid rgba(114, 118, 126, 0.1); border-bottom: 0px solid rgba(114, 118, 126, 0.1);
} }
}