From 36c8ade26ced166c21d17f94d2d27c31eef41d85 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 19 Jan 2017 12:13:57 +0100
Subject: [PATCH] Update the lists in the code and slide toolbars to use the
 new dropdown

---
 customize.dist/main.css               |  2 +
 customize.dist/src/less/dropdown.less |  2 +
 customize.dist/toolbar.css            |  2 +
 www/code/main.js                      | 89 +++++++++++++++------------
 www/slide/main.js                     | 54 ++++++++--------
 5 files changed, 82 insertions(+), 67 deletions(-)

diff --git a/customize.dist/main.css b/customize.dist/main.css
index 774f34a47..baba8cd5c 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -349,6 +349,8 @@
   min-width: 200px;
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
   z-index: 1000;
+  max-height: 300px;
+  overflow-y: auto;
 }
 .dropdown-bar .dropdown-bar-content.left {
   right: 0;
diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less
index 478943207..35714a50c 100644
--- a/customize.dist/src/less/dropdown.less
+++ b/customize.dist/src/less/dropdown.less
@@ -29,6 +29,8 @@
         min-width: 200px;
         box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
         z-index: 1000;
+        max-height: 300px;
+        overflow-y: auto;
 
         &.left {
             right: 0;
diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css
index 570e1a189..f2caf1d80 100644
--- a/customize.dist/toolbar.css
+++ b/customize.dist/toolbar.css
@@ -16,6 +16,8 @@
   min-width: 200px;
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
   z-index: 1000;
+  max-height: 300px;
+  overflow-y: auto;
 }
 .dropdown-bar .dropdown-bar-content.left {
   right: 0;
diff --git a/www/code/main.js b/www/code/main.js
index 47ac9d919..3af11316d 100644
--- a/www/code/main.js
+++ b/www/code/main.js
@@ -77,7 +77,10 @@ define([
                 }
                 CodeMirror.autoLoadMode(editor, mode);
                 editor.setOption('mode', mode);
-                if ($select && $select.val) { $select.val(mode); }
+                if ($select) {
+                    var name = $select.find('a[data-value="' + mode + '"]').text() || 'Mode';
+                    $select.find('.buttonTitle').text(name);
+                }
             };
 
             editor.setValue(Messages.codeInitialState); // HERE
@@ -107,7 +110,7 @@ define([
                         }
                         editor.setOption('theme', theme);
                     }
-                    if ($select && $select.val) { $select.val(theme || 'default'); }
+                    if ($select) { $select.find('.buttonTitle').text(theme || 'Theme'); }
                 };
             }());
 
@@ -441,58 +444,68 @@ define([
 
                 var configureLanguage = function (cb) {
                     // FIXME this is async so make it happen as early as possible
+                    var options = [];
+                    Modes.list.forEach(function (l) {
+                        options.push({
+                            tag: 'a',
+                            attributes: {
+                                'data-value': l.mode,
+                                'href': '#',
+                            },
+                            content: l.language // Pretty name of the language value
+                        });
+                    });
+                    var dropdownConfig = {
+                        text: 'Mode', // Button initial text
+                        options: options, // Entries displayed in the menu
+                        left: true, // Open to the left of the button
+                    };
+                    var $block = module.$language = Cryptpad.createDropdown(dropdownConfig);
+                    var $button = $block.find('.buttonTitle');
 
-                    /*  Let the user select different syntax highlighting modes */
-                    var $language = module.$language = $('<select>', {
-                        title: 'syntax highlighting',
-                        id: 'language-mode',
-                        'class': 'rightside-element'
-                    }).on('change', function () {
-                        setMode($language.val());
-                        onLocal();
+                    $block.find('a').click(function (e) {
+                        setMode($(this).attr('data-value'));
+                        $button.text($(this).text());
                     });
 
-                    Modes.list.map(function (o) {
-                        $language.append($('<option>', {
-                            value: o.mode,
-                        }).text(o.language));
-                    });
-                    $rightside.append($language);
+                    $rightside.append($block);
                     cb();
                 };
 
-
                 var configureTheme = function () {
                     /*  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);
                 };
 
                 if (!readOnly) {
diff --git a/www/slide/main.js b/www/slide/main.js
index aecc139b1..a44f11c85 100644
--- a/www/slide/main.js
+++ b/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 () {