Adding tabs

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;">