Change theme toggle to theme select dropdown menu

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>

Author: Yukaii

public/js/lib/editor/index.js

@@ -493,33 +493,16 @@ export default class Editor {
       this.editor.setOption('theme', cookieTheme)
     }
 
-    var themeToggle = this.statusTheme.find('.ui-theme-toggle')
-
-    const checkTheme = () => {
-      var theme = this.editor.getOption('theme')
-      if (theme === 'one-dark') {
-        themeToggle.removeClass('active')
-      } else {
-        themeToggle.addClass('active')
-      }
-    }
-
-    themeToggle.click(() => {
-      var theme = this.editor.getOption('theme')
-      if (theme === 'one-dark') {
-        theme = 'default'
-      } else {
-        theme = 'one-dark'
-      }
+    const setTheme = theme => {
       this.editor.setOption('theme', theme)
       Cookies.set('theme', theme, {
         expires: 365
       })
+    }
 
-      checkTheme()
+    this.statusIndicators.find('.status-theme li').click(function () {
+      setTheme($(this).attr('value'))
     })
-
-    checkTheme()
   }
 
   setSpellcheck () {

public/js/lib/editor/statusbar.html

@@ -31,8 +31,15 @@
             <div class="indent-width-label" title="Click to change indentation size">4</div>
             <input class="indent-width-input hidden" type="number" min="1" max="10" maxlength="2" size="2">
         </div>
-        <div class="status-theme">
-            <a class="ui-theme-toggle" title="Toggle editor theme"><i class="fa fa-sun-o fa-fw"></i></a>
+        <div class="status-theme dropup pull-right">
+            <a id="themeLabel" class="ui-theme-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Select theme">
+                <i class="fa fa-paint-brush fa-fw"></i>
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="themeLabel">
+                <li value="one-dark"><a>One Dark</a></li>
+                <li value="default"><a>Default</a></li>
+                <li value="monokai"><a>Monokai</a></li>
+            </ul>
         </div>
         <div class="status-spellcheck">
             <a class="ui-spellcheck-toggle" title="Toggle spellcheck"><i class="fa fa-check fa-fw"></i></a>