WIP

ext/bg/js/options-form.js

@@ -150,8 +150,7 @@ function populateDictionaries(opts) {
 }
 
 function onDictionaryDelete() {
-    const dictDelete = $(this);
-    dictDelete.prop('disabled', true);
+    const dictGroup = $(this).closest('.dict-group');
 
     const dictError = $('#dict-error');
     dictError.hide();
@@ -159,14 +158,20 @@ function onDictionaryDelete() {
     const dictSpinner = $('#dict-spinner');
     dictSpinner.show();
 
-    const dictGroup = dictDelete.closest('.dict-group');
+    const dictProgress = dictGroup.find('.dict-delete-progress');
+    dictProgress.show();
+
+    const dictControls = dictGroup.find('.dict-controls');
+    dictControls.hide();
+
     database().deleteDictionary(dictGroup.data('title')).then(() => {
         dictGroup.slideUp();
     }).catch(error => {
         dictError.show().find('span').text(error);
-        dictDelete.prop('disabled', false);
     }).then(() => {
         dictSpinner.hide();
+        dictProgress.hide();
+        dictControls.show();
     });
 }
 
@@ -177,14 +182,14 @@ function onDictionaryImport() {
     const dictError = $('#dict-error');
     dictError.hide();
 
+    const dictProgress = $('#dict-import-progress');
+    dictProgress.show();
+
     const dictSpinner = $('#dict-spinner');
     dictSpinner.show();
 
-    const progressbar = $('#dict-import-progress');
-    progressbar.show();
-
     const callback = (total, current) => {
-        progressbar.find('div').css('width', `${current / total * 100.0}%`);
+        dictProgress.find('div').css('width', `${current / total * 100.0}%`);
     };
 
     const dictUrl = $('#dict-url');
@@ -196,7 +201,7 @@ function onDictionaryImport() {
         dictImport.prop('disabled', false);
         dictUrl.val('');
         dictUrl.trigger('input');
-        progressbar.hide();
+        dictProgress.hide();
         dictSpinner.hide();
     });
 }

ext/bg/js/templates.js

@@ -13,13 +13,13 @@ templates['dictionary.html'] = template({"1":function(container,depth0,helpers,p
     + alias4(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data}) : helper)))
     + " <small>v."
     + alias4(((helper = (helper = helpers.version || (depth0 != null ? depth0.version : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"version","hash":{},"data":data}) : helper)))
-    + "</small></h4>\n        </div>\n        <div class=\"col-xs-4 text-right disabled\">\n            <button type=\"button\" class=\"dict-delete btn btn-danger\">Delete</button>\n        </div>\n    </div>\n    <div class=\"progress\" id=\"dict-delete-progress\">\n        <div class=\"progress-bar progress-bar-striped progress-bar-danger\" style=\"width: 0%\"></div>\n    </div>\n    <div class=\"checkbox "
+    + "</small></h4>\n        </div>\n        <div class=\"col-xs-4 text-right disabled\">\n            <button type=\"button\" class=\"dict-controls dict-delete btn btn-danger\">Delete</button>\n        </div>\n    </div>\n    <div class=\"progress dict-delete-progress\">\n        <div class=\"progress-bar progress-bar-striped progress-bar-danger\" style=\"width: 0%\"></div>\n    </div>\n    <div class=\"checkbox dict-controls "
     + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.hasTerms : depth0),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\">\n        <label><input type=\"checkbox\" class=\"dict-enable-terms\" "
     + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.hasTerms : depth0),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + " "
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.enableTerms : depth0),{"name":"if","hash":{},"fn":container.program(3, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + "> Enable term search</label>\n    </div>\n    <div class=\"checkbox "
+    + "> Enable term search</label>\n    </div>\n    <div class=\"checkbox dict-controls "
     + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.hasKanji : depth0),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\">\n        <label><input type=\"checkbox\" class=\"dict-enable-kanji\" "
     + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.hasKanji : depth0),{"name":"unless","hash":{},"fn":container.program(1, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")

ext/bg/options.html

@@ -6,7 +6,9 @@
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
         <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
         <style>
-            #anki-spinner, #anki-general, #anki-error, #dict-spinner, #dict-import-progress, #dict-delete-progress, #dict-laggy, #options-advanced {
+            #anki-spinner, #anki-general, #anki-error,
+            #dict-spinner, #dict-import-progress, .dict-delete-progress,
+            #options-advanced {
                 display: none;
             }
 

tmpl/dictionary.html

@@ -4,16 +4,16 @@
             <h4><span class="text-muted glyphicon glyphicon-book"></span> {{title}} <small>v.{{version}}</small></h4>
         </div>
         <div class="col-xs-4 text-right disabled">
-            <button type="button" class="dict-delete btn btn-danger">Delete</button>
+            <button type="button" class="dict-controls dict-delete btn btn-danger">Delete</button>
         </div>
     </div>
-    <div class="progress" id="dict-delete-progress">
+    <div class="progress dict-delete-progress">
         <div class="progress-bar progress-bar-striped progress-bar-danger" style="width: 0%"></div>
     </div>
-    <div class="checkbox {{#unless hasTerms}}disabled{{/unless}}">
+    <div class="checkbox dict-controls {{#unless hasTerms}}disabled{{/unless}}">
         <label><input type="checkbox" class="dict-enable-terms" {{#unless hasTerms}}disabled{{/unless}} {{#if enableTerms}}checked{{/if}}> Enable term search</label>
     </div>
-    <div class="checkbox {{#unless hasKanji}}disabled{{/unless}}">
+    <div class="checkbox dict-controls {{#unless hasKanji}}disabled{{/unless}}">
         <label><input type="checkbox" class="dict-enable-kanji" {{#unless hasKanji}}disabled{{/unless}} {{#if enableKanji}}checked{{/if}}> Enable Kanji search</label>
     </div>
 </div>