WIP #1025 Added theme customization

deepforge-dev · May 10, 2017 · c131e30 · c131e30
1 parent 567afe7
commit c131e30
Showing 1 changed file with 29 additions and 10 deletions.
diff --git a/src/visualizers/widgets/TextEditor/TextEditorWidget.js b/src/visualizers/widgets/TextEditor/TextEditorWidget.js
@@ -18,6 +18,7 @@ define([
     var TextEditorWidget,
         WIDGET_CLASS = 'text-editor',
         DEFAULT_SETTINGS = {
+            theme: 'solarized_dark',
             fontSize: 12
         };
 
@@ -73,6 +74,7 @@ define([
         return {
             enableBasicAutocompletion: true,
             enableLiveAutocompletion: true,
+            theme: 'ace/theme/' + this.editorSettings.theme,
             fontSize: this.editorSettings.fontSize + 'pt'
         };
     };
@@ -118,6 +120,13 @@ define([
 
         // TODO: get the component settings
         var fontSizes = [8, 10, 11, 12, 14],
+            themes = [
+                'Solarized Light',
+                'Solarized Dark',
+                'Twilight',
+                'Eclipse',
+                'Monokai'
+            ],
             menuItems = {
             setKeybindings: {
                 name: 'Keybindings...',
@@ -143,16 +152,7 @@ define([
             },
             setTheme: {
                 name: 'Theme...',
-                items: {
-                    solarizeLight: {
-                        name: 'Solarize Light',
-                        callback: () => console.log('setting theme to light')
-                    },
-                    solarizeDark: {
-                        name: 'Solarize Dark',
-                        callback: () => console.log('setting theme to dark')
-                    }
-                }
+                items: {}
             }
         };
 
@@ -175,6 +175,25 @@ define([
             };
         });
 
+        themes.forEach(name => {
+            var theme = name.toLowerCase().replace(/ /g, '_'),
+                isSet = theme === this.editorSettings.theme;
+
+            if (isSet) {
+                name = '<span style="font-weight: bold">' + name + '</span>';
+            }
+
+            menuItems.setTheme.items[theme] = {
+                name: name,
+                isHtmlName: isSet,
+                callback: () => {
+                    this.editorSettings.theme = theme;
+                    this.editor.setOptions(this.getEditorOptions());
+                    // TODO
+                }
+            };
+        });
+
         return menuItems;
     };