Browse files

change "about" page to modal, add github ribbon, add fixed footer and…

… version number to bottom of page
  • Loading branch information...
1 parent b5fa2aa commit 56f0a7945e474e96bb8b5f02e362edd20e8cde5b @brandonmwest committed Mar 31, 2012
Showing with 111 additions and 23 deletions.
  1. +1 −0 Gemfile
  2. +12 −0 Gemfile.lock
  3. +1 −0 README.md
  4. +6 −5 index.rb
  5. +10 −0 public/css/default.css
  6. +32 −14 public/js/default.js
  7. 0 views/about.haml
  8. +3 −1 views/endpoints.haml
  9. +45 −2 views/layout.haml
  10. +1 −1 views/start.haml
View
1 Gemfile
@@ -1,5 +1,6 @@
source :rubygems
gem "sinatra"
+gem "sinatra-contrib"
gem "haml"
gem "json"
gem "hashie"
View
12 Gemfile.lock
@@ -1,16 +1,27 @@
GEM
remote: http://rubygems.org/
specs:
+ backports (2.5.1)
+ eventmachine (0.12.10)
haml (3.1.4)
hashie (1.2.0)
json (1.6.5)
rack (1.4.1)
rack-protection (1.2.0)
rack
+ rack-test (0.6.1)
+ rack (>= 1.0)
sinatra (1.3.2)
rack (~> 1.3, >= 1.3.6)
rack-protection (~> 1.2)
tilt (~> 1.3, >= 1.3.3)
+ sinatra-contrib (1.3.1)
+ backports (>= 2.0)
+ eventmachine
+ rack-protection
+ rack-test
+ sinatra (~> 1.3.0)
+ tilt (~> 1.3)
tilt (1.3.3)
PLATFORMS
@@ -21,3 +32,4 @@ DEPENDENCIES
hashie
json
sinatra
+ sinatra-contrib
View
1 README.md
@@ -19,6 +19,7 @@ I/O Doctor is built on [Sinatra](http://www.sinatrarb.com), Twitter Bootstrap 2.
TODO
----
+* Titles are not currently clicking
* Highlight selected Endpoint in the menu
* Wire up the Method links in the menu
* Add validation on form fields
View
11 index.rb
@@ -1,21 +1,22 @@
require "bundler/setup"
require 'sinatra'
+require 'sinatra/config_file'
require './partials'
require 'haml'
require 'json'
require 'hashie'
+config_file 'iodoctor.yml'
+
helpers Sinatra::Partials
get '/' do
haml :start, :format => :html5
end
-get '/about' do
- haml :about
-end
-
post '/' do
+ @version = settings.version
+ @show_bottom_bar = true
unless params[:file] &&
(tmpfile = params[:file][:tempfile]) &&
(name = params[:file][:filename])
@@ -33,7 +34,7 @@
result = JSON(contents)
@result = Hashie::Mash.new(result)
-
+
haml :endpoints
end
View
10 public/css/default.css
@@ -6,6 +6,16 @@ body {
padding: 9px 0;
}
+.bottom-bar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+.bottom-bar hr {
+ margin:5px 0px;
+}
+
.hide {
display:none;
}
View
46 public/js/default.js
@@ -1,34 +1,52 @@
$(function() {
- $('.viewOutput').click(function(e){
- var formdata = form2js('config', '.');
- var json = JSON.stringify(formdata, undefined, 2);
- var syntaxHighlightedJson = syntaxHighlight(json);
-
- $('#output').html('<pre>' + syntaxHighlightedJson + '</pre>');
- $('#json').val(json);
- });
+ //output tab
+ $('.viewOutput').click(printJsonOutput);
+ //menu actuators for endpoints
$('.endpointActuator').live('click', showEndpoint);
+ //buttons to add new endpoints, methods, parameters
$('#addEndpoint').click(addEndpoint);
- $('.removeEndpoint').live('click', removeEndpoint);
$('.addMethod').live('click', addMethod);
- $('.removeMethod').live('click', removeMethod);
+ $('.addParameter').live('click', addParameter);
- $('.addParameter').live('click', addParameter);
+ //buttons to remove endpoints, methods, parameters
+ $('.removeEndpoint').live('click', removeEndpoint);
+ $('.removeMethod').live('click', removeMethod);
$('.removeParameter').live('click', removeParameter);
+ //when name inputs change, update name in menu and title section
$('input.endpointName').live('change', updateEndpointName);
$('input.methodName').live('change', updateMethodName);
$('input.parameterName').live('change', updateParameterName);
+
$('.section.clickable').live('click', toggleSection);
-
-
+
+ //navbar about link
+ $('a.about').click(showAbout);
+ $('#about .close').click(hideAbout);
+
$('input.dataType').live('change', updateParameterDataType);
-
$($('.endpoint')[0]).show();
});
+var showAbout = function() {
+ $('#about').modal();
+}
+
+var hideAbout = function() {
+ $('#about').modal('hide');
+}
+
+var printJsonOutput = function(e){
+ var formdata = form2js('config', '.');
+ var json = JSON.stringify(formdata, undefined, 2);
+ var syntaxHighlightedJson = syntaxHighlight(json);
+
+ $('#output').html('<pre>' + syntaxHighlightedJson + '</pre>');
+ $('#json').val(json);
+}
+
var updateParameterDataType = function(e) {
var clicked = $(e.target);
switch(clicked.val()) {
View
0 views/about.haml
No changes.
View
4 views/endpoints.haml
@@ -32,7 +32,9 @@
.offset5.endpoint-controls
%input.btn.btn-info.addButton.addMethod(type="button" value='Add Method')
- %input.btn.btn-danger.removeEndpoint(type="button" value='Delete Endpoint')
+ %a.btn.btn-danger.removeEndpoint
+ %i.icon-trash.icon-white
+ Delete Endpoint
= partial :methods, :locals => {:endpoint => e, :endpointIndex => count}
%input{:type=>"hidden", :value=>count, :id=>"endpointCounter"}
View
47 views/layout.haml
@@ -4,8 +4,9 @@
%title I/O Doctor - GUI for I/O Docs configurations
%link{:href => "/css/bootstrap.min.css", :rel => "stylesheet"}
%link{:href => "/css/default.css", :rel => "stylesheet"}
-
+ %link{:href => "/css/ribbon.css", :rel => "stylesheet"}
%body
+
.navbar.navbar-fixed-top
.navbar-inner
.container-fluid
@@ -14,10 +15,52 @@
%li
%a{:href => "/"} Start Over
%li
- %a{:href => "http://www.github.com/brandonmwest/iodoctor"} About
+ %a.about.clickable About
.container-fluid
=yield(:content)
+ .hide#about.modal
+ .modal-header
+ %h3
+ About I/O Doctor
+
+ .modal-body
+ .right.ribbon-holder
+ %a.white.ribbon(href="http://github.com/brandonmwest/iodoctor")
+ %span.text
+ Fork me on GitHub
+
+ %h4
+ What is I/O Doctor?
+ %br
+ %p
+ I/O Doctor is a GUI for creating and updating
+ %a(href="https://github.com/mashery/iodocs")
+ I/O Docs
+ Configuration files.
+
+ %h4 How does I/O Doctor work?
+ %br
+ %p
+ %strong Upload
+ an existing config, or
+ %strong create
+ a new config and start adding Endpoints, Methods, and Parameters. When an existing config is used, it is parsed and forms for editing each Endpoint, Method, and Parameter will be created.
+ %p
+ Click an item from the menu on the left to begin editing. View the JSON output at any time by hitting the "output" tab. When finished, click "Save File" to download the JSON file. I/O Doctor does not store any data. Make sure you save your JSON output.
+
+ .modal-footer
+ .btn.close Close
+
+ -if @show_bottom_bar
+ .bottom-bar
+ .bottombar-inner
+ .container-fluid
+ %hr
+ Version:
+ =@version
+
+
%script{:src => "/js/jquery-1.7.1.min.js"}
%script{:src => "/js/bootstrap.min.js"}
%script{:src => "/js/default.js"}
View
2 views/start.haml
@@ -5,7 +5,7 @@
JSON files
%br/
- .row
+ .row-fluid
.span4
%p
Create a new I/O Docs configuration...

0 comments on commit 56f0a79

Please sign in to comment.