Add full width settings
This commit is contained in:
Samuel Elliott
parent
99e9ce3852
commit
d88caab321
|
|
@ -1,11 +1,20 @@
|
|||
.bd-form-dropdown {
|
||||
h3 + .bd-dropdown {
|
||||
width: 180px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
.bd-dropdown {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-dropdown {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
h3 + & {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.bd-dropdown-current {
|
||||
color: #f6f6f7;
|
||||
background: rgba(0,0,0,.1);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,23 @@
|
|||
.bd-form-radio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.bd-form-radio-details {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.bd-form-radio-group {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 10px;
|
||||
.bd-radio-group {
|
||||
width: 180px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
flex-direction: column;
|
||||
|
||||
.bd-radio-group {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,20 @@
|
|||
.bd-form-slider {
|
||||
h3 + .bd-slider {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
.bd-title {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h3 + .bd-slider {
|
||||
margin-top: 15px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-slider {
|
||||
min-height: 24px;
|
||||
min-width: 180px;
|
||||
|
|
|
|||
|
|
@ -2,12 +2,16 @@
|
|||
.bd-form-numberinput {
|
||||
h3 {
|
||||
+ .bd-textinput-wrapper,
|
||||
+ .bd-textinput-wrapper input[type="text"],
|
||||
+ .bd-textinput-wrapper input[type="number"] {
|
||||
+ .bd-number {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-textinput-wrapper,
|
||||
.bd-number {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
background: transparent;
|
||||
|
|
@ -25,9 +29,27 @@
|
|||
border-color: $colbdblue;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-form-item-fullwidth & {
|
||||
.bd-title {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bd-textinput-wrapper,
|
||||
.bd-number {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.bd-hint {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bd-textinput-wrapper {
|
||||
.bd-textinput-wrapper,
|
||||
.bd-number {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* BetterDiscord Setting File Component
|
||||
* BetterDiscord Setting Array Component
|
||||
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||
* All rights reserved.
|
||||
* https://betterdiscord.net
|
||||
|
|
|
|||
|
|
@ -12,47 +12,19 @@
|
|||
<div class="bd-form-dropdown">
|
||||
<div class="bd-title">
|
||||
<h3 v-if="setting.text">{{setting.text}}</h3>
|
||||
<div class="bd-dropdown" :class="{'bd-active': active}">
|
||||
<div class="bd-dropdown-current" @click="() => active = !active && !setting.disabled">
|
||||
<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.id}" @click="selectOption(option)">{{option.text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Dropdown v-if="!setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
|
||||
</div>
|
||||
<div class="bd-hint">{{setting.hint}}</div>
|
||||
<Dropdown v-if="setting.fullwidth" :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Dropdown from '../../common/Dropdown.vue';
|
||||
|
||||
export default {
|
||||
props: ['setting', 'change'],
|
||||
data() {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getOptionText(value) {
|
||||
let matching = this.setting.options.filter(opt => opt.id === value);
|
||||
if (matching.length == 0) return "";
|
||||
else return matching[0].text;
|
||||
},
|
||||
selectOption(option) {
|
||||
this.active = false;
|
||||
this.change(option.id);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener("click", e => {
|
||||
let options = this.$refs.options;
|
||||
if (options && !options.contains(e.target) && options !== e.target) {
|
||||
this.active = false;
|
||||
}
|
||||
});
|
||||
components: {
|
||||
Dropdown
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -14,24 +14,23 @@
|
|||
<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.id}" @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>
|
||||
<RadioGroup :options="setting.options" :selected="setting.value" :disabled="setting.disabled" :change="change" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import RadioGroup from '../../common/RadioGroup.vue';
|
||||
|
||||
export default {
|
||||
props: ['setting', 'change'],
|
||||
components: {
|
||||
RadioGroup
|
||||
},
|
||||
methods: {
|
||||
selectOption(option) {
|
||||
this.change(option.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-form-item" :class="{'bd-form-item-changed': changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text}">
|
||||
<div class="bd-form-item" :class="{'bd-form-item-changed': changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
|
||||
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
|
||||
<DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/>
|
||||
<NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
/**
|
||||
* BetterDiscord Dropdown Component
|
||||
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||
* All rights reserved.
|
||||
* https://betterdiscord.net
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-dropdown" :class="{'bd-active': active, 'bd-disabled': disabled}">
|
||||
<div class="bd-dropdown-current" @click="() => active = !active && !disabled">
|
||||
<span class="bd-dropdown-text">{{ getOptionText(selected) }}</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 options" :class="{'bd-dropdown-option-selected': selected === option.id}" @click="selectOption(option)">{{ option.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['options', 'selected', 'disabled', 'change'],
|
||||
data() {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getOptionText(value) {
|
||||
let matching = this.options.filter(opt => opt.id === value);
|
||||
if (matching.length == 0) return "";
|
||||
else return matching[0].text;
|
||||
},
|
||||
selectOption(option) {
|
||||
this.active = false;
|
||||
this.change(option.id);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.addEventListener("click", e => {
|
||||
let options = this.$refs.options;
|
||||
if (options && !options.contains(e.target) && options !== e.target) {
|
||||
this.active = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* BetterDiscord Radio Group Component
|
||||
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||
* All rights reserved.
|
||||
* https://betterdiscord.net
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
<template>
|
||||
<div class="bd-radio-group" :class="{'bd-disabled': disabled}">
|
||||
<label class="bd-radio" v-for="option in options" :class="{'bd-radio-selected': selected === option.id}" @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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['options', 'selected', 'disabled', 'change'],
|
||||
methods: {
|
||||
selectOption(option) {
|
||||
this.change(option.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -128,7 +128,8 @@
|
|||
{"id": "opt3", "value": "opt3", "text": "Option 3"},
|
||||
{"id": "opt4", "value": "opt4", "text": "Option 4"},
|
||||
{"id": "opt5", "value": "opt5", "text": "Option 5"}
|
||||
]
|
||||
],
|
||||
"fullwidth": true
|
||||
},
|
||||
{
|
||||
"id": "default-6",
|
||||
|
|
|
|||
Loading…
Reference in New Issue