UI refactor of generic download

Author: Gaurav SinghaRoy

app/assets/javascripts/resources/querybuilder.js

@@ -642,7 +642,8 @@ QueryBuilder = {
                     reader.readAsText(f);
               }
 
-              document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
+              //document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
+              $(".configured-download-file-ok").show("fast");
 
             },
 
@@ -709,6 +710,7 @@ QueryBuilder = {
                     $(".div-configured-download").show("fast");
                     $("#btn_group_download").hide("fast");
                     $("#btn_download_configured_convert_template").attr("href","/query/configured_convert_template?selected_properties="+QueryBuilder.properties.get_checked_properties());
+                    $(".configured-download-file-ok").hide();
                 },
                 hide_download : function(motion){
                     if(motion != undefined && motion != ""){

app/views/query/_search_results.html.erb

@@ -56,7 +56,7 @@
               </p>
               <p>
                 Not sure how your template should be? Download the template from here :&nbsp;
-                <a type="button" class="btn btn-default btn-xs btn-success" target="_blank" id="btn_download_configured_convert_template">Download template</a>
+                <a type="button" class="btn btn-default btn-xs btn-success" target="_blank" id="btn_download_configured_convert_template"><span class='glyphicon glyphicon-file'></span>&nbsp;Download template</a>
               </p>
               <p >
                 <strong>STEP 2 : </strong> Ready with the template file ? Awesome !! Now all you have to do is upload that file below.
@@ -65,12 +65,12 @@
                 <input type="file" id="configured_template_files" name="files[]" multiple class="btn btn-warning btn-xs col-md-12"/>
                 <output id="list"></output>
               </p>
-
-            </div>
-          </div>
-          <div class="div-configured-download row"  style="display:none;">
-            <div class="col-md-12">
-              <button type="button" onclick="SPARQL.download.configured()">download final file !!</button>
+              <p class="configured-download-file-ok">
+                <span class="badge alert-success"><span class='glyphicon glyphicon-ok'></span></span> The uploaded template file is a valid template. You can now proceed to download your final serialization output :)
+              </p>
+              <p class="configured-download-file-ok">
+                <button type="button" class="btn btn-primary" onclick="SPARQL.download.configured()"><span class='glyphicon glyphicon-glass'></span>&nbsp;download final output file</button>
+              </p>
             </div>
           </div>
         <%end%>