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 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>

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

@ -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);
}
}