Merge pull request #117 from JsSucks/theme-settings

Theme settings
This commit is contained in:
Alexei Stukov 2018-02-12 02:54:34 +02:00 committed by GitHub
commit aae9653a4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 96 additions and 33 deletions

View File

@ -176,28 +176,32 @@ export default class ThemeManager extends ContentManager {
for (let category of config) {
for (let setting of category.settings) {
let scss_name = null;
let scss_value = null;
let scss_line = null;
if (typeof setting.value == 'string') {
scss_value = setting.scss_raw
? setting.value
: '\'' + setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'') + '\'';
} else if (setting.type === 'slider') {
scss_value = setting.value * setting.multi || 1;
} else if (typeof setting.value === 'boolean' || typeof setting.value === 'number') {
scss_value = setting.value.toString();
}
scss_name = setting.id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-');
scss_line = `$${scss_name}: ${scss_value};`;
variables.push(scss_line);
variables.push(this.parseSetting(setting));
}
}
return variables.join('\n');
}
static parseSetting(setting) {
const { type, id, value } = setting;
const name = id.replace(/[^a-zA-Z0-9-]/g, '-').replace(/--/g, '-');
if (type === 'slider') {
return `$${name}: ${value * setting.multi || 1};`;
}
if (type === 'dropdown' || type === 'radio') {
return `$${name}: ${setting.options.find(opt => opt.value === value).text};`;
}
if (typeof value === 'boolean' || typeof value === 'number') {
return `$${name}: ${value};`;
}
if (typeof value === 'string') {
return `$${name}: ${setting.scss_raw ? value : `'${setting.value.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'`};`;
}
}
}

View File

@ -37,7 +37,72 @@
"type": "text",
"value": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg",
"text": "Avatar replace",
"hint": "Replace all avatars"
"hint": "Replace all avatars"
},
{
"id": "avatarRadius",
"type": "dropdown",
"value": "opt1",
"text": "Dropdown Test Setting",
"hint": "Dropdown Test Setting Hint",
"options": [
{
"value": "opt1",
"text": "8px"
},
{
"value": "opt2",
"text": "12px"
},
{
"value": "opt3",
"text": "16px"
},
{
"value": "opt4",
"text": "20px"
},
{
"value": "opt5",
"text": "30px"
}
]
},
{
"id": "radioTest",
"type": "radio",
"value": "opt1",
"text": "Span text colour",
"hint": "Radio Test Setting Hint",
"options": [
{
"value": "opt1",
"text": "red"
},
{
"value": "opt2",
"text": "green"
},
{
"value": "opt3",
"text": "blue"
},
{
"value": "opt4",
"text": "orange"
},
{
"value": "opt5",
"text": "white"
}
]
},
{
"id": "spanOpacity2",
"type": "number",
"value": 0,
"text": "Span opacity",
"hint": "Number Test Setting Hint"
},
{
"id": "default-0",
@ -52,18 +117,6 @@
"value": true,
"text": "Work properly",
"hint": "Just some test settings to test the settings panel for themes"
},
{
"id": "default-2",
"type": "radio",
"value": "opt1",
"text": "Test Radio Setting",
"hint": "Just some test settings to test the settings panel for themes",
"options": [
{ "value": 1, "text": "Option 1" },
{ "value": 2, "text": "Option 2" },
{ "value": 3, "text": "Option 3" }
]
}
]
}

View File

@ -6,8 +6,11 @@ div {
span {
border: 1px solid rgba(20, 20, 20, $spanOpacity);
color: $radioTest !important;
opacity: $spanOpacity2 !important;
}
.avatar-large {
background-image: url($avatar) !important;
border-radius: $avatarRadius !important;
}

View File

@ -1,3 +1,6 @@
$divBg: green !default;
$spanOpacity: 0.5 !default;
$avatar: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg" !default;
$avatar: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Cow_female_black_white.jpg/220px-Cow_female_black_white.jpg" !default;
$avatarRadius: 8px !default;
$radioTest: red !default;
$spanOpacity2: 1 !default;