From 3598cb591d4681318d64ae3f7681418abbbed72e Mon Sep 17 00:00:00 2001
From: ziirish <ziirish@ziirish.info>
Date: Mon, 17 Nov 2014 20:50:23 +0100
Subject: [PATCH] improve ui for #13

---
 burpui/templates/config.html  | 86 +++++++++++++++++++----------------
 burpui/templates/js/config.js |  5 ++
 burpui/templates/sidebar.html |  3 ++
 burpui/templates/spyside.html |  8 ++++
 4 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 burpui/templates/spyside.html

diff --git a/burpui/templates/config.html b/burpui/templates/config.html
index b2062f59..2a429e4d 100644
--- a/burpui/templates/config.html
+++ b/burpui/templates/config.html
@@ -12,48 +12,54 @@
             {% endif -%}
           </ul>
           <br />
-          <h1 class="page-header">Burp Configuration</h1>
 
-          <form class="form-horizontal" action="/settings" method="GET" ng-app="ConfigApp" ng-controller="MainCtrl" ng-submit="submit($event)">
-            {% raw %}
-            <fieldset>
-              <legend>Booleans</legend>
-              <div class="form-group" ng-repeat="bool in bools">
-                <label for="{{ bool.name }}_view" class="col-lg-3 control-label">{{ bool.name }}</label>
-                <div class="col-lg-9">
-                  <input bs-switch ng-model="bool.value" type="checkbox" id="{{ bool.name }}_view" name="{{ bool.name }}_view" class="form-control">
-                  <input type="hidden" name="{{ bool.name }}" id="{{ bool.name }}">
-                  &nbsp;
-                  <button type="button" class="btn btn-danger btn-xs" ng-click="removeBool($index)"><span class="glyphicon glyphicon-minus"></span></button>
-                  &nbsp;
-                  {{ server_doc[bool.name] }}
+          <div class="form-container">
+            <div class="scrollspy-config">
+              <form class="form-horizontal" action="/settings" method="GET" ng-app="ConfigApp" ng-controller="MainCtrl" ng-submit="submit($event)">
+                {% raw %}
+                <fieldset>
+                  <legend id="boolean">Booleans</legend>
+                  <div class="form-group" ng-repeat="bool in bools">
+                    <label for="{{ bool.name }}_view" class="col-lg-3 control-label">{{ bool.name }}</label>
+                    <div class="col-lg-9">
+                      <input bs-switch ng-model="bool.value" type="checkbox" id="{{ bool.name }}_view" name="{{ bool.name }}_view" class="form-control">
+                      <input type="hidden" name="{{ bool.name }}" id="{{ bool.name }}">
+                      &nbsp;
+                      <button type="button" class="btn btn-danger btn-xs" ng-click="removeBool($index)"><span class="glyphicon glyphicon-minus"></span></button>
+                      &nbsp;
+                      {{ server_doc[bool.name] }}
+                    </div>
+                  </div>
+                  <div class="form-group" ng-hide="!add.bool">
+                    <div class="col-lg-3">
+                      <ui-select ng-model="new.bool" ng-disabled="!add.bool" style="width: 100%;" on-select="selectBool($item, $select)">
+                        <ui-select-match placeholder="Select an option">{{$select.selected.name}}</ui-select-match>
+                        <ui-select-choices repeat="value.name as value in avail.bools | filter: $select.search">
+                          <div ng-bind-html="value.name | highlight: $select.search"></div>
+                        </ui-select-choices>
+                      </ui-select>
+                    </div>
+                    <div class="col-lg-9">
+                      <button type="button" class="btn btn-danger" ng-click="undoAddBool()"><span class="glyphicon glyphicon-remove"></span></button>
+                    </div>
+                  </div>
+                  <div class="form-group" ng-hide="bools.length >= all.bools.length || add.bool">
+                    <div class="col-lg-3 col-lg-offset-3">
+                      <button type="button" class="btn btn-success btn-primary" ng-click="clickAddBool()"><span class="glyphicon glyphicon-plus"></span></button>
+                    </div>
+                  </div>
+                </fieldset>
+                <fieldset>
+                  <legend id="string">Strings</legend>
+                </fieldset>
+                {% endraw %}
+                <div class="form-group">
+                  <div class="col-lg-3 col-lg-offset-3">
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                  </div>
                 </div>
-              </div>
-              <div class="form-group" ng-hide="!add.bool">
-                <div class="col-lg-3">
-                  <ui-select ng-model="new.bool" ng-disabled="!add.bool" style="width: 100%;" on-select="selectBool($item, $select)">
-                    <ui-select-match placeholder="Select an option">{{$select.selected.name}}</ui-select-match>
-                    <ui-select-choices repeat="value.name as value in avail.bools | filter: $select.search">
-                      <div ng-bind-html="value.name | highlight: $select.search"></div>
-                    </ui-select-choices>
-                  </ui-select>
-                </div>
-                <div class="col-lg-9">
-                  <button type="button" class="btn btn-danger" ng-click="undoAddBool()"><span class="glyphicon glyphicon-remove"></span></button>
-                </div>
-              </div>
-              <div class="form-group" ng-hide="bools.length >= all.bools.length || add.bool">
-                <div class="col-lg-3 col-lg-offset-3">
-                  <button type="button" class="btn btn-success btn-primary" ng-click="clickAddBool()"><span class="glyphicon glyphicon-plus"></span></button>
-                </div>
-              </div>
-            </fieldset>
-            {% endraw %}
-            <div class="form-group">
-              <div class="col-lg-3 col-lg-offset-3">
-                <button type="submit" class="btn btn-primary">Submit</button>
-              </div>
+              </form>
             </div>
-          </form>
+          </div>
         </div>
 {% endblock %}
diff --git a/burpui/templates/js/config.js b/burpui/templates/js/config.js
index 82584aff..89f56a13 100644
--- a/burpui/templates/js/config.js
+++ b/burpui/templates/js/config.js
@@ -66,3 +66,8 @@ app.controller('MainCtrl', function($scope, $http) {
 		$scope.add.bool = false;
 	};
 });
+
+$(function() {
+	$('body').scrollspy({ target: '#navbar-config' });
+});
+
diff --git a/burpui/templates/sidebar.html b/burpui/templates/sidebar.html
index 7c8a5716..c1aabd59 100644
--- a/burpui/templates/sidebar.html
+++ b/burpui/templates/sidebar.html
@@ -27,4 +27,7 @@
             {% endif %}
             </li>
           </ul>
+          {% if config -%}
+          {% include "spyside.html" %}
+          {% endif -%}
         </div>
diff --git a/burpui/templates/spyside.html b/burpui/templates/spyside.html
new file mode 100644
index 00000000..7f6ae60c
--- /dev/null
+++ b/burpui/templates/spyside.html
@@ -0,0 +1,8 @@
+
+          <h4>Configuration navigation</h4>
+          <div id="navbar-config">
+            <ul class="nav nav-sidebar" data-spy="scroll">
+              <li class="active"><a href="#boolean">Booleans</a></li>
+              <li><a href="#string">Strings</a></li>
+            </ul>
+          </div>