Replace the language selector by our custom dropdown menu

customize.dist/DecorateToolbar.js

@@ -1,39 +0,0 @@
-/*
-    globals define
-*/
-define([
-    '/customize/languageSelector.js',
-    '/customize/messages.js',
-    '/bower_components/jquery/dist/jquery.min.js'
-], function (LS, Messages) {
-    var $ = window.jQuery;
-    var main = function () {
-        var url = window.location.pathname;
-        var isHtml = /\.html/.test(url) || url === '/' || url === '';
-        if (!isHtml) {
-            Messages._applyTranslation();
-            return;
-        }
-        $.ajax({
-            url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
-            success: function (ret) {
-                var $bar = $(ret);
-                $('body').append($bar);
-
-                var $sel = $bar.find('#language-selector');
-
-                Object.keys(Messages._languages).forEach(function (code) {
-                    $sel.append($('<option>', {
-                        value: code,
-                    }).text(Messages._languages[code]));
-                });
-
-                LS.main();
-                Messages._applyTranslation();
-            }
-        });
-    };
-    return {
-        main: main
-    };
-});

customize.dist/about.html

@@ -4,6 +4,7 @@
     <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="stylesheet" type="text/css" href="/customize/main.css" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
     <script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
     <script src="/bower_components/requirejs/require.js"></script>
@@ -19,7 +20,13 @@
 
 
 
-    <select id="language-selector" style="display: none;"></select>
+    <span id="language-selector" class="dropdown-bar">
+        <button>
+            <span class="buttonTitle" data-localozation="language"></span>
+            <span class="fa fa-caret-down"></span>
+        </button>
+        <div class="left cryptpad-dropdown dropdown-bar-content"></div>
+    </span>
 
     <div id="main">
       <center>

customize.dist/index.html

@@ -4,6 +4,7 @@
     <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="stylesheet" type="text/css" href="/customize/main.css" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
     <script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
     <script src="/bower_components/requirejs/require.js"></script>
@@ -19,7 +20,13 @@
 
 
 
-    <select id="language-selector" style="display: none;"></select>
+    <span id="language-selector" class="dropdown-bar">
+        <button>
+            <span class="buttonTitle" data-localozation="language"></span>
+            <span class="fa fa-caret-down"></span>
+        </button>
+        <div class="left cryptpad-dropdown dropdown-bar-content"></div>
+    </span>
 
     <div id="main">
       <center>

customize.dist/languageSelector.js

@@ -22,27 +22,28 @@ define(['/bower_components/jquery/dist/jquery.min.js'], function() {
 
     var main = out.main = function ($select) {
         var selector = $select || $('#language-selector');
+
         if (!selector.length) { return; }
 
+        var $button = $(selector).find('button .buttonTitle');
         // Select the current language in the list
         var language = getLanguage();
-        var option = $(selector).find('option[value="' + language + '"]');
+        var option = $(selector).find('[data-value="' + language + '"]');
         if ($(option).length) {
-            $(selector).val(language);
+            $button.text($(option).text());
         }
         else {
-            $(selector).val('en');
+            $button.text('English');
         }
 
         // Listen for language change
-        $(selector).on('change', function () {
-            var newLanguage = $(selector).val();
+        $(selector).find('a.languageValue').on('click', function () {
+            var newLanguage = $(this).attr('data-value');
             storeLanguage(newLanguage);
             if (newLanguage !== language) {
                 window.location.reload();
             }
         });
-
     };
 
     return out;

customize.dist/main.css

@@ -329,6 +329,49 @@
 .cp #loading .spinnerContainer > div {
   height: 100px;
 }
+/* The container <div> - needed to position the dropdown content */
+.dropdown-bar {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-bar button .fa {
+  margin-left: 5px;
+}
+.dropdown-bar .dropdown-bar-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+.dropdown-bar .dropdown-bar-content.left {
+  right: 0;
+}
+.dropdown-bar .dropdown-bar-content:hover {
+  display: block;
+}
+.dropdown-bar .dropdown-bar-content a {
+  color: black;
+  padding: 5px 16px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  float: none;
+  text-align: left;
+}
+.dropdown-bar .dropdown-bar-content a:hover {
+  background-color: #f1f1f1;
+}
+.dropdown-bar .dropdown-bar-content hr {
+  margin: 5px 0px;
+  height: 1px;
+  background: #bbb;
+}
 html.cp,
 .cp body {
   font-size: .875em;

customize.dist/main.js

@@ -37,17 +37,28 @@ define([
         });
     };
 
+    // Language selector
     var $sel = $('#language-selector');
-
-    Object.keys(Messages._languages).forEach(function (code) {
-        $sel.append($('<option>', {
-            value: code,
-        }).text(Messages._languages[code]));
+    var $innerblock = $sel.find(".dropdown-bar-content");
+    var $button = $sel.find('button');
+    var languages = Messages._languages;
+    for (var l in languages) {
+        $('<a>', {
+            'class': 'languageValue',
+            'data-value': l,
+            'href': '#',
+        }).text(languages[l]).appendTo($innerblock);
+    }
+    $button.click(function (e) {
+        e.stopPropagation();
+        $innerblock.toggle();
     });
-
-    LS.main();
+    LS.main($sel);
     Messages._applyTranslation();
     $sel.show();
+    $(window).click(function () {
+        $innerblock.hide();
+    });
 
     var makeRecentPadsTable = function (recentPads) {
         if (!recentPads.length) { return; }

customize.dist/privacy.html

@@ -4,6 +4,7 @@
     <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="stylesheet" type="text/css" href="/customize/main.css" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
     <script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
     <script src="/bower_components/requirejs/require.js"></script>
@@ -19,7 +20,13 @@
 
 
 
-    <select id="language-selector" style="display: none;"></select>
+    <span id="language-selector" class="dropdown-bar">
+        <button>
+            <span class="buttonTitle" data-localozation="language"></span>
+            <span class="fa fa-caret-down"></span>
+        </button>
+        <div class="left cryptpad-dropdown dropdown-bar-content"></div>
+    </span>
 
     <div id="main">
       <center>

customize.dist/src/less/cryptpad.less

@@ -4,6 +4,7 @@
 @import "./alertify.less";
 @import "./bar.less";
 @import "./loading.less";
+@import "./dropdown.less";
 
 html.cp, .cp body {
     font-size: .875em;

customize.dist/src/less/dropdown.less

@@ -0,0 +1,62 @@
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown-bar {
+    position: relative;
+    display: inline-block;
+
+    .dropbtn {
+    }
+
+    &:hover {
+        .dropbtn {
+        }
+    }
+
+    button {
+        .fa{
+            margin-left: 5px;
+        }
+    }
+
+    .dropdown-bar-content {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 160px;
+        box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+
+        &.left {
+            right: 0;
+        }
+
+        &:hover {
+            display: block;
+        }
+
+        a {
+            color: black;
+            padding: 5px 16px;
+            text-decoration: none;
+            display: block;
+            cursor: pointer;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            float: none;
+            text-align: left;
+
+            &:hover {
+                background-color: #f1f1f1;
+            }
+        }
+
+        hr {
+            margin: 5px 0px;
+            height: 1px;
+            background: #bbb;
+        }
+    }
+}
+

customize.dist/src/less/toolbar.less

@@ -1,6 +1,8 @@
 @import "./variables.less";
 @import "./mixins.less";
 
+@import "./dropdown.less";
+
 .unselectable {
     -webkit-touch-callout: none;
     -webkit-user-select: none;

customize.dist/src/template.html

@@ -4,6 +4,7 @@
     <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="stylesheet" type="text/css" href="/customize/main.css" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
     <script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
     <script src="/bower_components/requirejs/require.js"></script>
@@ -16,7 +17,13 @@
 <body>
     {{fork}}
 
-    <select id="language-selector" style="display: none;"></select>
+    <span id="language-selector" class="dropdown-bar">
+        <button>
+            <span class="buttonTitle" data-localozation="language"></span>
+            <span class="fa fa-caret-down"></span>
+        </button>
+        <div class="left cryptpad-dropdown dropdown-bar-content"></div>
+    </span>
 
     <div id="main">
 {{logo}}

customize.dist/terms.html

@@ -4,6 +4,7 @@
     <title data-localization="main_title">Cryptpad: Zero Knowledge, Collaborative Real Time Editing</title>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
     <link rel="stylesheet" type="text/css" href="/customize/main.css" />
+    <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <link rel="icon" type="image/png" href="/customize/main-favicon.png" id="favicon"/>
     <script data-main="/customize/main" src="/bower_components/requirejs/require.js"></script>
     <script src="/bower_components/requirejs/require.js"></script>
@@ -19,7 +20,13 @@
 
 
 
-    <select id="language-selector" style="display: none;"></select>
+    <span id="language-selector" class="dropdown-bar">
+        <button>
+            <span class="buttonTitle" data-localozation="language"></span>
+            <span class="fa fa-caret-down"></span>
+        </button>
+        <div class="left cryptpad-dropdown dropdown-bar-content"></div>
+    </span>
 
     <div id="main">
       <center>

customize.dist/toolbar.css

@@ -1,3 +1,46 @@
+/* The container <div> - needed to position the dropdown content */
+.dropdown-bar {
+  position: relative;
+  display: inline-block;
+}
+.dropdown-bar button .fa {
+  margin-left: 5px;
+}
+.dropdown-bar .dropdown-bar-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+.dropdown-bar .dropdown-bar-content.left {
+  right: 0;
+}
+.dropdown-bar .dropdown-bar-content:hover {
+  display: block;
+}
+.dropdown-bar .dropdown-bar-content a {
+  color: black;
+  padding: 5px 16px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  float: none;
+  text-align: left;
+}
+.dropdown-bar .dropdown-bar-content a:hover {
+  background-color: #f1f1f1;
+}
+.dropdown-bar .dropdown-bar-content hr {
+  margin: 5px 0px;
+  height: 1px;
+  background: #bbb;
+}
 .unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;

customize.dist/translations/messages.fr.js

@@ -42,6 +42,8 @@ define(function () {
     out.editor = "éditeur";
     out.editors = "éditeurs";
 
+    out.language = "Langue";
+
     out.greenLight = "Tout fonctionne bien";
     out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
     out.redLight = "Vous êtes déconnectés de la session";

customize.dist/translations/messages.js

@@ -44,6 +44,8 @@ define(function () {
     out.editor = "editor";
     out.editors = "editors";
 
+    out.language = "Language";
+
     out.greenLight = "Everything is working fine";
     out.orangeLight = "Your slow connection may impact your experience";
     out.redLight = "You are disconnected from the session";

www/common/toolbar.js

@@ -368,26 +368,43 @@ define([
 
         $userContainer.append($lag);
 
-        var $span = $('<span>' , {
-            'class': 'cryptpad-language'
+        // Dropdown language selector
+        var $fa_caretdown = $('<span>', {
+            'class': 'fa fa-caret-down',
         });
-        var $select = $('<select>', {
-            'id': 'language-selector'
-        }).appendTo($userContainer);
+
+        var $block = $('<span>', {
+            'class': 'dropdown-bar',
+            id: 'language-selector'
+        });
+        var $button = $('<button>', {
+            'class': ''
+        }).append($('<span>', {'class': 'buttonTitle'}).text(Messages.language)).append($fa_caretdown);
+
+        var $innerblock = $('<div>', {'class': 'left cryptpad-dropdown dropdown-bar-content'});
 
         var languages = Messages._languages;
         for (var l in languages) {
-            $('<option>', {
-                value: l
-            }).text(languages[l]).appendTo($select);
+            $('<a>', {
+                'class': 'languageValue',
+                'data-value': l,
+                'href': '#',
+            }).text(languages[l]).appendTo($innerblock);
         }
+        $block.append($button).append($innerblock);
+        $button.click(function (e) {
+            e.stopPropagation();
+            $innerblock.toggle();
+        });
+        $block.appendTo($userContainer);
 
-        Messages._initSelector($select);
+        Messages._initSelector($block);
+        // End language selector
 
-        $select.on('mousedown', function (e) {
+        /*$select.on('mousedown', function (e) {
             e.stopPropagation();
             return true;
-        });
+        });*/
 
         var $usernameElement = $('<span>', {'class': USERNAME_CLS}).appendTo($userContainer);
 

www/drive/file.css

@@ -348,73 +348,27 @@ button.newElement:hover {
 }
 
 
-/* Style The Dropdown Button */
-.dropbtn {
-    background-color: #4CAF50;
-    color: white;
-    padding: 16px;
-    font-size: 16px;
-    border: none;
-    cursor: pointer;
-}
-
 /* The container <div> - needed to position the dropdown content */
-.dropdown-bar {
+#driveToolbar .dropdown-bar {
     margin: 4px 5px;
     position: relative;
     display: inline-block;
 }
-.dropdown-bar.right {
+#driveToolbar .dropdown-bar.right {
     float: right;
 }
 
 /* Right-side buttons */
-.dropdown-bar.right button {
+#driveToolbar .dropdown-bar.right button {
     display: inline-block;
 }
-.dropdown-bar.right button.active {
+#driveToolbar .dropdown-bar.right button.active {
     display: none;
 }
-.dropdown-bar.right button .fa {
+#driveToolbar .dropdown-bar.right button .fa {
     margin-right: 0px;
 }
-
-/* Dropdown Content (Hidden by Default) */
 .dropdown-bar-content {
-    display: none;
-    position: absolute;
-    background-color: #f9f9f9;
-    min-width: 160px;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-}
-
-/* Links inside the dropdown */
-.dropdown-bar-content a {
-    color: black;
-    padding: 5px 16px;
-    text-decoration: none;
-    display: block;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-.dropdown-bar-content hr {
-    margin: 5px 0px;
-    height: 1px;
-    background: #bbb;
-}
-
-/* Change color of dropdown links on hover */
-.dropdown-bar-content a:hover {background-color: #f1f1f1}
-
-/* Show the dropdown menu on hover */
-..dropdown-bar-content:hover {
-    display: block;
-}
-
-/* Change the background color of the dropdown button when the dropdown content is shown */
-.dropdown-bar:hover .dropbtn {
-    background-color: #3e8e41;
+    margin-top: -3px;
+    margin-right: 2px;
 }

www/drive/inner.html

@@ -7,6 +7,7 @@
     <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="file.css" />
+    <link rel="stylesheet" href="/customize/main.css" />
 </head>
 <body>
     <div id="toolbar" class="toolbar-container"></div>

www/pad/main.js

@@ -106,8 +106,12 @@ define([
             // document itself and causes problems when it's sent across the wire and reflected back
             removePlugins: 'resize',
             extraPlugins: 'autolink,colorbutton,colordialog,font',
-            //skin: 'moono',
-            toolbarGroups: [{"name":"clipboard","groups":["clipboard","undo"]},{"name":"editing","groups":["find","selection"]},{"name":"links"},{"name":"insert"},{"name":"forms"},{"name":"tools"},{"name":"document","groups":["mode","document","doctools"]},{"name":"others"},{"name":"basicstyles","groups":["basicstyles","cleanup"]},{"name":"paragraph","groups":["list","indent","blocks","align","bidi"]},{"name":"styles"},{"name":"colors"}]
+            toolbarGroups: [{"name":"clipboard","groups":["clipboard","undo"]},{"name":"editing","groups":["find","selection"]},{"name":"links"},{"name":"insert"},{"name":"forms"},{"name":"tools"},{"name":"document","groups":["mode","document","doctools"]},{"name":"others"},{"name":"basicstyles","groups":["basicstyles","cleanup"]},{"name":"paragraph","groups":["list","indent","blocks","align","bidi"]},{"name":"styles"},{"name":"colors"}],
+            //skin: 'moono-cryptpad,/pad/themes/moono-cryptpad/'
+            //skin: 'flat,/pad/themes/flat/'
+            //skin: 'moono-lisa,/pad/themes/moono-lisa/'
+            //skin: 'moono-dark,/pad/themes/moono-dark/'
+            //skin: 'office2013,/pad/themes/office2013/'
         });
 
         editor.on('instanceReady', function (Ckeditor) {