diff options
| -rw-r--r-- | index.html | 7 | ||||
| -rw-r--r-- | res/css/partials/input-bubble.scss | 4 | ||||
| -rw-r--r-- | res/css/style.css | 4 | ||||
| -rw-r--r-- | src/textanalysis.ui.js | 31 |
4 files changed, 27 insertions, 19 deletions
@@ -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; }(); |