Merge pull request #117 from JsSucks/theme-settings

Theme settings

client/src/modules/thememanager.js

@@ -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;
+                variables.push(this.parseSetting(setting));
-                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);
             }
         }
-
         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, '\\\'')}'`};`; 
+        }
+
+    }
+
 }

tests/themes/Example/config.json

@@ -39,6 +39,71 @@
                     "text": "Avatar replace",
                     "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",
                     "type": "text",
@@ -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" }
-                    ]
                 }
             ]
         }

tests/themes/Example/index.scss

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

tests/themes/Example/vars.scss

@@ -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; 
+$avatarRadius: 8px !default;
+$radioTest: red !default;
+$spanOpacity2: 1 !default;