displaying check results in individual tabs on the webapp

(issue fonttools#1121 and issue fonttools#1129)
felipesanches · Oct 27, 2016 · 56e1a79 · 56e1a79
1 parent 6a84d88
commit 56e1a79
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 4 deletions.
diff --git a/fontbakery-check-ttf.py b/fontbakery-check-ttf.py
@@ -2557,6 +2557,8 @@ def installed_version_is_newer(installed, used):
     if ttfautohint_missing:
       fb.skip("This check requires ttfautohint"
               " to be available in the system.")
+    elif webapp is True:
+      fb.skip("This check is not supported on Google App Engine.")
     else:
       version_strings = get_name_string(font, NAMEID_VERSION_STRING)
       ttfa_version = ttfautohint_version(version_strings)

diff --git a/webapp/app/main.py b/webapp/app/main.py
@@ -59,11 +59,15 @@ def run_fontbakery():
   else:
     from markdown import markdown
     report_data = ""
+    i = 1
+    tabs = ""
     for desc, report_file in reports:
       if desc["filename"] is not None:
-        report_data += "<h3>{}</h3>{}".format(desc["filename"], markdown(report_file))
+        tabs += '<li><a href="#tabs-{}">{}</a></li>'.format(i, desc["filename"])
+        report_data += '<div id="tabs-{}">{}</div>'.format(i, markdown(report_file))
+        i+=1
 
-    return "<h2>Fontbakery check results</h2><div>{}</div>".format(report_data)
+    return '<div id="tabs"><ul>{}</ul>{}</div>'.format(tabs, report_data)
 
 @app.errorhandler(500)
 def server_error(e):

diff --git a/webapp/app/static/index.html b/webapp/app/static/index.html
@@ -5,6 +5,10 @@
     <title>FontBakery</title>
     <script src="js/bower_components/requirejs/require.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Monoton|Raleway:300,400" rel="stylesheet">
+    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <!--
+<link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet">
+-->
     <style>
 
         html {
@@ -72,7 +76,11 @@
 
     </style>
     <script>
-    require.config({baseUrl: 'js'});
+    require.config({baseUrl: 'js',
+                    paths: {'jquery': 'bower_components/jquery/dist/jquery',
+                            'jquery-ui': 'bower_components/jquery-ui/jquery-ui.min'
+                           }
+    });
     require(['bootstrap'], function(require) {
         require(['main'], function(main){main()});
     });

diff --git a/webapp/app/static/js/Controller.js b/webapp/app/static/js/Controller.js
@@ -1,9 +1,12 @@
 define([
     'dom-tool'
   , 'opentype'
+  , 'jquery'
+  , 'jquery-ui'
 ], function(
     dom
   , opentype
+  , JQ
 ) {
     "use strict";
     /*global window, console, XMLHttpRequest, URL, TextDecoder, Blob, Uint8Array, TextEncoder, Uint32Array*/
@@ -220,6 +223,8 @@ define([
             else {
                 //alert(xhr.response);
                 document.getElementById("results").innerHTML = xhr.response;
+                JQ("#tabs").tabs();
+
                 console.info('Received:', xhr.responseType, xhr.response.byteLength, 'Bytes');
                 //blob = new Blob([xhr.response], {type: "application/zip"});
                 //window.open(URL.createObjectURL(blob));

diff --git a/webapp/bower.json b/webapp/bower.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "requirejs": "~2.3.2",
     "opentype.js": "~0.6.5",
-    "marked": "~0.3.4"
+    "marked": "~0.3.4",
+    "jquery-ui": "~1.12.1"
   }
 }