Merge pull request #120 from JsSucks/settings

Change dropdown/radio structure
This commit is contained in:
Alexei Stukov 2018-02-12 04:58:51 +02:00 committed by GitHub
commit 0eddaf86eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 44 additions and 39 deletions

View File

@ -191,7 +191,7 @@ export default class ThemeManager extends ContentManager {
}
if (type === 'dropdown' || type === 'radio') {
return `$${name}: ${setting.options.find(opt => opt.value === value).text};`;
return `$${name}: ${setting.options.find(opt => opt.id === value).value};`;
}
if (typeof value === 'boolean' || typeof value === 'number') {

View File

@ -20,7 +20,7 @@
</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.value}" @click="selectOption(option)">{{option.text}}</div>
<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>
</div>
@ -37,13 +37,13 @@
},
methods: {
getOptionText(value) {
let matching = this.setting.options.filter(opt => opt.value == 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(this.setting.id, option.value);
this.change(this.setting.id, option.id);
}
},
mounted() {

View File

@ -16,7 +16,7 @@
</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.value}" @click="selectOption(option)">
<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>
@ -30,7 +30,7 @@
props: ['setting', 'change'],
methods: {
selectOption(option) {
this.change(this.setting.id, option.value);
this.change(this.setting.id, option.id);
}
}
}

View File

@ -33,11 +33,11 @@
"text": "Dropdown Test Setting",
"hint": "Dropdown Test Setting Hint",
"options": [
{"value": "opt1", "text": "Option 1"},
{"value": "opt2", "text": "Option 2"},
{"value": "opt3", "text": "Option 3"},
{"value": "opt4", "text": "Option 4"},
{"value": "opt5", "text": "Option 5"}
{"id": "opt1", "value": "opt1", "text": "Option 1"},
{"id": "opt2", "value": "opt2", "text": "Option 2"},
{"id": "opt3", "value": "opt3", "text": "Option 3"},
{"id": "opt4", "value": "opt4", "text": "Option 4"},
{"id": "opt5", "value": "opt5", "text": "Option 5"}
]
},
{
@ -47,11 +47,11 @@
"text": "Radio Test Setting",
"hint": "Radio Test Setting Hint",
"options": [
{"value": "opt1", "text": "Option 1"},
{"value": "opt2", "text": "Option 2"},
{"value": "opt3", "text": "Option 3"},
{"value": "opt4", "text": "Option 4"},
{"value": "opt5", "text": "Option 5"}
{"id": "opt1", "value": "opt1", "text": "Option 1"},
{"id": "opt2", "value": "opt2", "text": "Option 2"},
{"id": "opt3", "value": "opt3", "text": "Option 3"},
{"id": "opt4", "value": "opt4", "text": "Option 4"},
{"id": "opt5", "value": "opt5", "text": "Option 5"}
]
},
{

View File

@ -43,28 +43,28 @@
"id": "avatarRadius",
"type": "dropdown",
"value": "opt1",
"text": "Dropdown Test Setting",
"text": "Avatar border radius",
"hint": "Dropdown Test Setting Hint",
"options": [
{
"value": "opt1",
"text": "8px"
"id": "opt1",
"text": "small",
"value": "8px"
},
{
"value": "opt2",
"text": "12px"
"id": "opt2",
"text": "medium",
"value": "12px"
},
{
"value": "opt3",
"text": "16px"
"id": "opt3",
"text": "high",
"value": "16px"
},
{
"value": "opt4",
"text": "20px"
},
{
"value": "opt5",
"text": "30px"
"id": "opt4",
"text": "ultra",
"value": "20px"
}
]
},
@ -76,24 +76,29 @@
"hint": "Radio Test Setting Hint",
"options": [
{
"value": "opt1",
"text": "red"
"id": "opt1",
"text": "red",
"value": "red"
},
{
"value": "opt2",
"text": "green"
"id": "opt2",
"text": "green",
"value": "green"
},
{
"value": "opt3",
"text": "blue"
"id": "opt3",
"text": "blue",
"value": "blue"
},
{
"value": "opt4",
"text": "orange"
"id": "opt4",
"text": "orange",
"value": "orange"
},
{
"value": "opt5",
"text": "white"
"id": "opt5",
"text": "white",
"value": "white"
}
]
},