Merge pull request #142 from samuelthomas2774/add-full-width-settings

Add full width settings
This commit is contained in:
Alexei Stukov 2018-02-26 09:26:09 +02:00 committed by GitHub
commit 43e95bbba8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 168 additions and 57 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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"/>

View File

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

View File

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

View File

@ -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",