Update the lists in the code and slide toolbars to use the new dropdown

www/slide/main.js

@@ -126,7 +126,7 @@ define([
                         }
                         editor.setOption('theme', theme);
                     }
-                    if ($select && $select.val) { $select.val(theme || 'default'); }
+                    if ($select) { $select.find('.buttonTitle').text(theme || 'Theme'); }
                 };
             }());
 
@@ -499,44 +499,40 @@ define([
                 }
                 $rightside.append($leavePresent);
 
-
                 var configureTheme = function () {
-                    /*var $language = $('<span>', {
-                        'style': "margin-right: 10px;",
-                        'class': 'rightside-element'
-                    }).text("Markdown");
-                    $rightside.append($language);*/
-
                     /*  Remember the user's last choice of theme using localStorage */
                     var themeKey = 'CRYPTPAD_CODE_THEME';
                     var lastTheme = localStorage.getItem(themeKey) || 'default';
 
-                    /*  Let the user select different themes */
-                    var $themeDropdown = $('<select>', {
-                        title: 'color theme',
-                        id: 'display-theme',
-                        'class': 'rightside-element'
-                    });
-                    Themes.forEach(function (o) {
-                        $themeDropdown.append($('<option>', {
-                            selected: o.name === lastTheme,
-                        }).val(o.name).text(o.name));
+                    var options = [];
+                    Themes.forEach(function (l) {
+                        options.push({
+                            tag: 'a',
+                            attributes: {
+                                'data-value': l.name,
+                                'href': '#',
+                            },
+                            content: l.name // Pretty name of the language value
+                        });
                     });
+                    var dropdownConfig = {
+                        text: 'Theme', // Button initial text
+                        options: options, // Entries displayed in the menu
+                        left: true, // Open to the left of the button
+                    };
+                    var $block = module.$theme = Cryptpad.createDropdown(dropdownConfig);
+                    var $button = $block.find('.buttonTitle');
 
+                    setTheme(lastTheme, $block);
 
-                    $rightside.append($themeDropdown);
-
-                    var $theme = $bar.find('select#display-theme');
-
-                    setTheme(lastTheme, $theme);
-
-                    $theme.on('change', function () {
-                        var theme = $theme.val();
-                        console.log("Setting theme to %s", theme);
-                        setTheme(theme, $theme);
-                        // remember user choices
+                    $block.find('a').click(function (e) {
+                        var theme = $(this).attr('data-value');
+                        setTheme(theme, $block);
+                        $button.text($(this).text());
                         localStorage.setItem(themeKey, theme);
                     });
+
+                    $rightside.append($block);
                 };
 
                 var configureColors = function () {