Dropdown functional

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;
-                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') {
+            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

@@ -37,7 +37,36 @@
                     "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": "default-0",
@@ -60,9 +89,18 @@
                     "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" }
+                        {
+                            "value": 1,
+                            "text": "Option 1"
+                        },
+                        {
+                            "value": 2,
+                            "text": "Option 2"
+                        },
+                        {
+                            "value": 3,
+                            "text": "Option 3"
+                        }
                     ]
                 }
             ]

tests/themes/Example/index.scss

@@ -10,4 +10,5 @@ span {
 
 .avatar-large {
     background-image: url($avatar) !important;
+    border-radius: $avatarRadius !important;
 }

tests/themes/Example/vars.scss

@@ -1,3 +1,4 @@
 $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;