More bootstrap

assets.json

@@ -33,7 +33,7 @@
 
       "view": [
         "body",
-        "filters", "filter", "actions",
+        "filters", "filter",
         "request", "response",
         "edit", "field",
 

public/css/main.css

@@ -28,27 +28,6 @@ FIELDSET, IMG {
   border: 0;
 }
 
-INPUT, TEXTAREA, SELECT {
-  font-family: inherit;
-  font-weight: inherit;
-}
-
-INPUT, A {
-  outline: none;
-}
-
-TEXTAREA, 
-INPUT[type=text],
-INPUT[type=number],
-INPUT[type=password] {
-  background-color: white;
-  border: 1px solid #C0C0C0;
-}
-
-INPUT.fixie {
-  border: 0;
-}
-
 LABEL {
   -moz-user-select: none;
   -khtml-user-select: none;
@@ -224,6 +203,14 @@ H1 {
   z-index: 1;
 }
 
+#header .btn {
+  margin-bottom: 3px;
+}
+
+#header .input-group .btn {
+  margin-bottom: 0;
+}
+
 TH {
 text-align: left;
 }
@@ -232,14 +219,6 @@ text-align: left;
   color: #666;
 }
 
-INPUT {
-  margin: 2px;
-}
-
-INPUT[type="button"] {
-  min-width: 20px;
-}
-
 #request-input TD {
   border: 1px solid #f8f8f8;
 }

public/js/HTMLApi.js

@@ -54,7 +54,6 @@ HTMLApi.prototype.show = function(cb)
   var self = this;
   async.auto({
     render:                     this.render.bind(this)         ,
-    actions:    ['render',      this.actionInit.bind(this)    ],
     filters:    ['render',      this.filterInit.bind(this)    ],
   }, showDone);
 
@@ -338,6 +337,13 @@ HTMLApi.prototype.render = function(cb)
     }
   }
 
+  var actions = {};
+  var allActions = ( data.type == 'collection' ? schema.collectionActions : schema.resourceActions ) || {};
+  Object.keys(allActions).sort().forEach(function(key) {
+    // Set the action to true if it's available on this object or false if it isn't
+    actions[key] = !!data.actions[key];
+  });
+
   var tpl = {
     data: this._data,
     docsPage: this._docsPage,
@@ -346,6 +352,7 @@ HTMLApi.prototype.render = function(cb)
     error: this._error,
     schema: schema,
     operations: operations,
+    actions: actions,
     explorer: Cookie.get('debug') || false
   };
 
@@ -354,7 +361,6 @@ HTMLApi.prototype.render = function(cb)
 
   this._addCollapsers();
 
-  $('#actions').html('<span class="inactive">None</span>');
   $('#filters').html('<span class="inactive">None</span>');
 
   return async.nextTick(cb);
@@ -405,19 +411,9 @@ HTMLApi.prototype.getSchema = function(type, obj)
 
 // ----------------------------------------------------------------------------
 
-HTMLApi.prototype.actionInit = function(cb)
+HTMLApi.prototype.showAction = function(button)
 {
-  var data = this._data;
+  this.actionLoad(button.getAttribute('data-action'), undefined, {});
-
-  if ( !data.actions || !Object.keys(data.actions).length )
-    return async.nextTick(cb);
-
-  var html = Handlebars.templates['actions']({
-    actions: data.actions
-  });
-  $('#actions').html(html);
-
-  async.nextTick(cb);
 }
 
 HTMLApi.prototype.actionLoad = function(name, obj, body)

public/view/actions.hbs

@@ -1,7 +0,0 @@
-<select name="action" id="action">
-{{#eachProperty actions}}
-  <option value="{{key}}">{{key}}</option>
-{{/eachProperty}}
-</select>
-<br/>
-<input type="submit" name="go" value="Go"/>

public/view/body.hbs

@@ -3,26 +3,28 @@
   <div iv="header-body">
     <label>Operations</label>
     <div id="operations">
-      <p>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.up()" {{#unless operations.up}}disabled="disabled"{{/unless}}><span class="glyphicon glyphicon-arrow-up"></span> Up</button>
-        <button class="btn btn-primary btn-sm" onclick="htmlapi.up()" {{#unless operations.up}}disabled="disabled"{{/unless}}><i class="glyphicon glyphicon-arrow-up"></i> Up</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.reload()"><span class="glyphicon glyphicon-refresh"></span> Reload</button>
-        <button class="btn btn-primary btn-sm" onclick="htmlapi.reload()"><i class="glyphicon glyphicon-refresh"></i> Reload</button>
-      </p>
       {{#if operations.post}}
-        <button class="btn btn-primary btn-sm" onclick="htmlapi.create()"><i class="glyphicon glyphicon-plus"></i> Create</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.create()"><span class="glyphicon glyphicon-plus"></span> Create</button>
       {{/if}}
       {{#if operations.put}}
-        <button class="btn btn-primary btn-sm" onclick="htmlapi.update()"><i class="glyphicon glyphicon-edit"></i> Edit</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.update()"><span class="glyphicon glyphicon-edit"></span> Edit</button>
       {{/if}}
       {{#if operations.delete}}
-        <button class="btn btn-primary btn-sm" onclick="htmlapi.delete()"><i class="glyphicon glyphicon-trash"></i> Delete</button>
+        <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.delete()"><span class="glyphicon glyphicon-trash"></span> Delete</button>
       {{/if}}
     </div>
     <br/>
 
     <label>Actions</label>
-    <form onsubmit="htmlapi.actionLoad($('#action').val(),undefined,{}); return false;">
+    <div>
-      <div id="actions">{{! Set based on schema }}</div>
+      {{#eachProperty actions}}
-    </form>
+        <button type="button" class="btn btn-success btn-sm" data-action="{{key}}" {{#if value}}onclick="htmlapi.showAction(this);"{{else}}disabled="disabled"{{/if}}>{{key}}</button>
+      {{else}}
+        <span class="inactive">None</span>
+      {{/eachProperty}}
+    </div>
     <br/>
 
     <label>Filter</label>
@@ -31,63 +33,85 @@
     </form>
     <br/>
 
-    <label>Sort</label>
     {{#if data.sortLinks }}
       <form>
-        <select id="sortBy" onchange="htmlapi.sortChange(this)">
+        <div class="row">
-            <option value="">(None)</option>
+          <div class="col-xs-7">
-            {{#eachProperty data.sortLinks}}
+            <label>Sort By</label>
-              <option value="{{key}}"{{#ifEqual ../../data.sort.name key}} SELECTED{{/ifEqual}}>{{key}}</option>
+            <select id="sortBy" class="form-control" onchange="htmlapi.sortChange(this)">
-            {{/eachProperty}}
+                {{#unless data.sort.name}}<option value="">(Not Sorted)</option>{{/unless}}
-        </select>
+                {{#eachProperty data.sortLinks}}
-        {{#if data.sort.name }}
+                  <option value="{{key}}"{{#ifEqual ../../data.sort.name key}} SELECTED{{/ifEqual}}>{{key}}</option>
-          <input type="button" value="{{#ifEqual data.sort.order "desc"}}&uarr;{{else}}&darr;{{/ifEqual}}" onclick="htmlapi.sortOrderChange();"/>
+                {{/eachProperty}}
-        {{/if}}
+            </select>
+          </div>
+          <div class="col-xs-5">
+            <label>Direction</label>
+            {{#if data.sort.name }}
+              <div class="btn-group btn-group-sm">
+                {{#ifEqual data.sort.order "desc"}}
+                  <button type="button" class="btn btn-default btn-sm active"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button>
+                  <button type="button" class="btn btn-default btn-sm" onclick="htmlapi.sortOrderChange();"><span class="glyphicon glyphicon-sort-by-attributes"></span></button>
+                {{else}}
+                  <button type="button" class="btn btn-default btn-sm" onclick="htmlapi.sortOrderChange();"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></button>
+                  <button type="button" class="btn btn-default btn-sm active"><span class="glyphicon glyphicon-sort-by-attributes"></span></button>
+                {{/ifEqual}}
+              </div>
+            {{/if}}
+          </div>
+        </div>
       </form>
-      <span class="inactive">
-        {{#if data.sort.name}}
-          {{data.sort.name}}&nbsp;{{#ifEqual data.sort.order "desc"}}&uarr;{{else}}&darr;{{/ifEqual}}
-        {{else}}
-          Not Sorted
-        {{/if}}
-      </span>
     {{else}}
-      <span class="inactive">Not available</span>
+      <label>Sort</label>
+      <p class="inactive">Not available</p>
     {{/if}}
     <br/>
 
     <label>Pagination</label>
     {{#if data.pagination}}
-      <div>
-        <form>
-          <input type="number" min="0" step="100" id="limit" name="limit" style="width: 50px" value="{{data.pagination.limit}}"/>/page
-          <input type="submit" value="Set" onclick="htmlapi.setLimit($('limit').val())">
-        </form>
-      </div>
       <div>
         {{#if data.pagination.partial}}
           {{#if data.pagination.first}}
             {{#ifEqual data.links.self data.pagination.first}}
-              {{! Nothing }}
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span></button>
             {{else}}
-              <a href="{{data.pagination.first}}">First</a>&nbsp;
+              <a class="btn btn-success btn-sm" href="{{data.pagination.first}}"><span class="glyphicon glyphicon-step-backward"></span></a>
             {{/ifEqual}}
+          {{else}}
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span></button>
           {{/if}}
           {{#if data.pagination.prev}}
-            <a href="{{data.pagination.prev}}">Prev</a>&nbsp;
+            <a class="btn btn-success btn-sm" href="{{data.pagination.prev}}"><span class="glyphicon glyphicon-chevron-left"></span></a>
+          {{else}}
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-chevron-left"></span></button>
           {{/if}}
           {{#if data.pagination.next}}
-            <a href="{{data.pagination.next}}">Next</a>&nbsp;
+            <a class="btn btn-success btn-sm" href="{{data.pagination.next}}"><span class="glyphicon glyphicon-chevron-right"></span></a>
+          {{else}}
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-chevron-right"></span></button>
           {{/if}}
           {{#if data.pagination.last}}
-            <a href="{{data.pagination.last}}">Last</a>
+            <a class="btn btn-success btn-sm" href="{{data.pagination.last}}"><span class="glyphicon glyphicon-step-forward"></span></a>
+          {{else}}
+              <button type="button" class="btn btn-success btn-sm" disabled="disabled"><span class="glyphicon glyphicon-step-forward"></span></button>
           {{/if}}
         {{else}}
-          <span class="inactive">Full result</span>
+          <p class="inactive">Full result</p>
         {{/if}}
       </div>
+      <div>
+        <form class="form-horizontal">
+        <div class="input-group input-group-sm">
+          <span class="input-group-addon">Limit:</span>
+          <input class="form-control" type="number" min="0" step="100" id="limit" name="limit" value="{{data.pagination.limit}}"/>
+          <span class="input-group-btn">
+            <button type="submit" class="btn btn-primary btn-sm" onclick="htmlapi.setLimit($('limit').val())"><span class="glyphicon glyphicon-signal"></span> Set</button>
+          </span>
+        </div>
+        </form>
+      </div>
     {{else}}
-      <span class="inactive">Not available</span>
+      <p class="inactive">Not available</p>
     {{/if}}
     <br/>
   </div>

public/view/filters.hbs

@@ -2,7 +2,7 @@
 </div>
 <div id="no-filters" class="inactive" {{#if hasFilters}}style="display: none;"{{/if}}>None</div>
 {{#if canFilter}}
-  <input type="button" onclick="htmlapi.filterAdd()" value="+">&nbsp;
+  <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.filterClear();"><span class="glyphicon glyphicon-ban-circle"></span> Clear</button>
-  <input type="button" value="Clear" onclick="htmlapi.filterClear(); return false;"/>&nbsp;
+  <button type="button" class="btn btn-primary btn-sm" onclick="htmlapi.filterAdd();"><span class="glyphicon glyphicon-plus-sign"></span> Add</button>
-  <input type="submit" value="Apply"/>
+  <button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-filter"></span> Apply</button>
 {{/if}}