aboutsummaryrefslogtreecommitdiff
path: root/ext/bg
diff options
context:
space:
mode:
authorAlex Yatskov <alex@foosoft.net>2016-05-21 20:17:12 -0700
committerAlex Yatskov <alex@foosoft.net>2016-05-21 20:17:12 -0700
commit10226663bddfb2cea8c6d18420ccee9f847034ef (patch)
tree99578b270b10d4d1eb272b604c97d48fee28f1a6 /ext/bg
parentf1850defa6c6bc288d978b098ee33387b1f989ce (diff)
Adding tabs
Diffstat (limited to 'ext/bg')
-rw-r--r--ext/bg/js/options-form.js8
-rw-r--r--ext/bg/options.html59
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;">