typeselection: now in index.html (removed typeselection td padding)

4 files changed, 27 insertions, 19 deletions

diff --git a/index.html b/index.html
index 2ebe90a3..a97f7d4c 100644
--- a/index.html
+++ b/index.html
@@ -77,10 +77,11 @@
       </div>
     </div>
 
-    <div class="typeselection">
+    <div class="typeselection" style="display:none">
       <table>
-        <tr><td><img id="keys" width="56" height="26" src="res/img/keys.png"/></td></tr>
-        <tr><td>Pick a type with [TAB] key</td></tr>
+        <tr id="intro"><td>Pick a type with [TAB] key</td></tr>
+        <tr id="chosentypelabel"><td>Chosen Type: <span id="chosentypename"/></td></tr>
+        <tr id="chosentypedesc"><td></td></tr>
       </table>
     </div>
 
diff --git a/res/css/partials/input-bubble.scss b/res/css/partials/input-bubble.scss
index 2d581f9a..657e95de 100644
--- a/res/css/partials/input-bubble.scss
+++ b/res/css/partials/input-bubble.scss
@@ -8,10 +8,8 @@
 }
 
 .typeselection td{
-  padding-top: 5px;
-  padding-left: 200px;
 }
 
 #keys{
   opacity: 0.5;
-}
\ No newline at end of file
+}
diff --git a/res/css/style.css b/res/css/style.css
index ac929313..4ca40557 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -429,10 +429,6 @@ body.debug .debug-ui-right {
   top: -300px;
   pointer-events: none; }
 
-.typeselection td {
-  padding-top: 5px;
-  padding-left: 200px; }
-
 #keys {
   opacity: 0.5; }
 
diff --git a/src/textanalysis.ui.js b/src/textanalysis.ui.js
index cc9739b1..4f4ec261 100644
--- a/src/textanalysis.ui.js
+++ b/src/textanalysis.ui.js
@@ -12,27 +12,40 @@ var text = "", // Last text of sentence
 
 var typeselection = function TypeSelectionDialog() {
     var e = $('.typeselection'),
+        e_intro = e.find('#intro'),
+        e_label = e.find('#chosentypelabel'),
+        e_name = e.find('#chosentypename'),
+        e_desc = e.find('#chosentypedesc'),
         typeselection = {};
 
     typeselection.analysisNodeStart = function() {
         typeselection.show();
-        e.html('<table><tr><td style="height:28px"></td></tr><tr><td>Use [TAB] key to pick a type</td></tr></table>');
     }
     typeselection.show = function() {
         e.css({
-            top: window.innerHeight/2-115,
-            left: window.innerWidth/2-325});
+            top: window.innerHeight / 2 - 115,
+            left: window.innerWidth / 2 - 325
+            });
+        e_label.hide();
+        e_desc.hide();
+        e_intro.show();
+        e.show();
     }
     typeselection.hide = function() {
-        e.css('top', -300);
-        e.css('left', 0);
+        e.hide();
     }
     typeselection.showChosenType = function(nodetype) {
         var desc = description[nodetype];
-        e.html('<table><tr><td style="height:28px"></td></tr><tr><td>' +
-               "Chosen Type: " + nodetype + '</td></tr>' +
-               (desc ? '<tr><td>' + desc + '</td></tr>' : '') +
-               '</table>');
+
+        e_intro.hide();
+        e_label.show();
+        e_name.html(nodetype);
+        if (desc) {
+            e_desc.html(description[nodetype]);
+            e_desc.show();
+        } else {
+            e_desc.hide();
+        }
     }
     return typeselection;
 }();