status-im
/
codimd
mirror of https://github.com/status-im/codimd.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Change theme toggle to theme select dropdown menu 

Signed-off-by: Yukai Huang <yukaihuangtw@gmail.com>
This commit is contained in:
Yukai Huang 2019-11-04 09:11:16 +08:00
parent e09c16a933
commit 0060488244
2 changed files with 13 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/js/lib/editor/index.js
View File

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

11
public/js/lib/editor/statusbar.html
View File

@ -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>