Replace the language selector by our custom dropdown menu

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) {