diff options
| author | Guillaume Mazoyer <respawneral@gmail.com> | 2014-08-05 14:37:09 +0200 |
|---|---|---|
| committer | Guillaume Mazoyer <respawneral@gmail.com> | 2014-08-05 14:37:09 +0200 |
| commit | b5de18337a148017f5d3bfa101ee4cc25f2dee98 (patch) | |
| tree | a39a1afac6821ffc93925dc92d7f3814a2de4a66 /index.php | |
| parent | b5b262d957f1ed42b0252952cb1d5c74d49a49bb (diff) | |
Add help button.
Add a help button to the parameter field to get more information
about the selected command and especially about the parameter needed
for the command to be properly executed.
The help appears in a modal dialog whose content is updated when a
command is selected.
Diffstat (limited to 'index.php')
| -rw-r--r-- | index.php | 33 |
1 files changed, 32 insertions, 1 deletions
@@ -71,8 +71,15 @@ final class LookingGlass { private function render_parameters() { print '<div class="form-group">'; - print '<label for="input-params">Parameters</label>'; + print '<label for="input-params">Parameter</label>'; + print '<div class="input-group">'; print '<input class="form-control" name="parameters" id="input-params" autofocus />'; + print '<div class="input-group-btn">'; + print '<button type="button" class="btn btn-info" data-toggle="modal" data-target="#help">'; + print '<span class="glyphicon glyphicon-question-sign"></span> Help'; + print '</button>'; + print '</div>'; + print '</div>'; print '</div>'; } @@ -181,6 +188,28 @@ final class LookingGlass { print '</div>'; } + private function render_help_modal() { + print '<div id="help" class="modal fade">'; + print '<div class="modal-dialog">'; + print '<div class="modal-content">'; + print '<div class="modal-header">'; + print '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>'; + print '<h4 class="modal-title">Help</h4>'; + print '</div>'; + print '<div class="modal-body">'; + print '<h3>Command</h3>'; + print '<p id="command-help"></p>'; + print '<h3>Parameter</h3>'; + print '<p id="parameter-help"></p>'; + print '</div>'; + print '<div class="modal-footer">'; + print '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>'; + print '</div>'; + print '</div>'; + print '</div>'; + print '</div>'; + } + public function render() { print '<!DOCTYPE html>'; print '<html lang="en">'; @@ -199,8 +228,10 @@ final class LookingGlass { $this->render_header(); $this->render_content(); $this->render_footer(); + $this->render_help_modal(); print '</body>'; print '<script src="js/jquery-2.1.1.min.js"></script>'; + print '<script src="bootstrap-3.2.0/js/bootstrap.min.js"></script>'; print '<script src="js/looking-glass.js"></script>'; print '</html>'; } |