diff options
| author | Alex Yatskov <alex@foosoft.net> | 2016-05-21 20:17:12 -0700 |
|---|---|---|
| committer | Alex Yatskov <alex@foosoft.net> | 2016-05-21 20:17:12 -0700 |
| commit | 10226663bddfb2cea8c6d18420ccee9f847034ef (patch) | |
| tree | 99578b270b10d4d1eb272b604c97d48fee28f1a6 | |
| parent | f1850defa6c6bc288d978b098ee33387b1f989ce (diff) | |
Adding tabs
| -rw-r--r-- | ext/bg/js/options-form.js | 8 | ||||
| -rw-r--r-- | ext/bg/options.html | 59 |
2 files changed, 43 insertions, 24 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js index 496fc91c..31756486 100644 --- a/ext/bg/js/options-form.js +++ b/ext/bg/js/options-form.js @@ -38,16 +38,16 @@ function formToOptions() { function updateAnkiFormDataVis(opts) { if (opts.enableAnkiConnect) { updateAnkiFormData(); - $('.options-anki').show(); + $('.options-anki').fadeIn(); } else { - $('.options-anki').hide(); + $('.options-anki').fadeOut(); } } function updateAnkiFormData() { const yomichan = chrome.extension.getBackgroundPage().yomichan; - const ankiDeck = $('#ankiDeck'); + const ankiDeck = $('.ankiDeck'); ankiDeck.find('option').remove(); yomichan.api_getDeckNames({callback: (names) => { if (names !== null) { @@ -55,7 +55,7 @@ function updateAnkiFormData() { } }}); - const ankiModel = $('#ankiModel'); + const ankiModel = $('.ankiModel'); ankiModel.find('option').remove(); yomichan.api_getModelNames({callback: (names) => { if (names !== null) { diff --git a/ext/bg/options.html b/ext/bg/options.html index 9b8be64b..9dd9959b 100644 --- a/ext/bg/options.html +++ b/ext/bg/options.html @@ -19,7 +19,8 @@ <div class="options-general"> <h2>General</h2> - <div class="form-horizontal"> + + <form class="form-horizontal"> <div class="form-group"> <label for="scanLength" class="control-label col-sm-2">Scan length</label> <div class="col-sm-10"><input type="number" value="20" min="1" id="scanLength" class="form-control"></div> @@ -56,35 +57,53 @@ </div> </div> </div> - </div> + </form> + </div> <div class="options-anki"> <h2>Anki</h2> - <div class="form-horizontal"> - <div class="form-group"> - <label class="col-sm-2 control-label">Profile</label> - <div class="col-sm-10"> - <label class="radio-inline"><input type="radio" name="ankiProfile" checked>Vocab</label> - <label class="radio-inline"><input type="radio" name="ankiProfile">Kanji</label> - </div> - </div> + <form class="form-horizontal"> + <ul class="nav nav-tabs"> + <li class="active"><a href="#vocab" data-toggle="tab">Vocabulary</a></li> + <li><a href="#kanji" data-toggle="tab">Kanji</a></li> + </ul> - <div class="form-group"> - <label class="col-sm-2 control-label" for="ankiDeck">Deck</label> - <div class="col-sm-10"> - <select class="form-control" id="ankiDeck"></select> + <div class="tab-content"> + <div id="vocab" class="tab-pane fade in active"> + <div class="form-group"> + <label class="col-sm-2 control-label" for="ankiVocabDeck">Deck</label> + <div class="col-sm-10"> + <select class="form-control ankiDeck" id="ankiVocabDeck"></select> + </div> + </div> + + <div class="form-group"> + <label class="col-sm-2 control-label" for="ankiVocabModel">Model</label> + <div class="col-sm-10"> + <select class="form-control ankiModel" id="ankiVocabModel"></select> + </div> + </div> </div> - </div> + <div id="kanji" class="tab-pane fade"> + <div class="form-group"> + <label class="col-sm-2 control-label" for="ankiKanjiDeck">Deck</label> + <div class="col-sm-10"> + <select class="form-control ankiDeck" id="ankiKanjiDeck"></select> + </div> + </div> - <div class="form-group"> - <label class="col-sm-2 control-label" for="ankiModel">Model</label> - <div class="col-sm-10"> - <select class="form-control" id="ankiModel"></select> + <div class="form-group"> + <label class="col-sm-2 control-label" for="ankiKanjiModel">Model</label> + <div class="col-sm-10"> + <select class="form-control ankiModel" id="ankiKanjiModel"></select> + </div> + </div> </div> </div> - </div> + </form> + </div> <div style="text-align: right;"> |