adding hierarchical collapsing params, but bootstrap isn't playing nice

brandonmwest · Feb 17, 2012 · c1e057d · c1e057d
1 parent ffe651e
commit c1e057d
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 71 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -3,8 +3,8 @@ GEM
   specs:
     haml (3.1.4)
     hashie (1.2.0)
-    json (1.6.4)
-    rack (1.4.0)
+    json (1.6.5)
+    rack (1.4.1)
     rack-protection (1.2.0)
       rack
     sinatra (1.3.2)

diff --git a/index.rb b/index.rb
@@ -12,7 +12,7 @@
 end
 
 get '/about' do
-  haml :about
+	haml :about
 end 
 
 post '/' do
@@ -21,9 +21,9 @@
 					(name = params[:file][:filename])
 
 		 if params[:load]
-			  return haml :start
-     end
-     
+				return haml :start
+		 end
+		 
 		 @result = Hash.new
 		 @result["endpoints"] = Hash.new
 		 return haml(:endpoints)
@@ -38,7 +38,7 @@
 end
 
 post '/file' do 
-  content_type 'application/json'
-  attachment 'config.json'
-  response.write params[:json]
+	content_type 'application/json'
+	attachment 'config.json'
+	response.write params[:json]
 end
diff --git a/public/css/default.css b/public/css/default.css
@@ -25,8 +25,7 @@ body {
   margin-left: 0;
 }
 
-.methods {
-  padding-left:12px;
+.methods, .parameters {
   padding-bottom:8px;
 
 }
@@ -40,24 +39,33 @@ body {
 }
 
 .method {
-  padding-left:5px;
+	padding-left: 5px;
   font-size: 14px;
-  border: 1px solid #029DE7;
+  border: 1px solid #BEBED0;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   -o-border-radius: 5px;
   -ms-border-radius: 5px;
   -khtml-border-radius: 5px;
   border-radius: 5px;
   margin: 10px 0;
-  /*    &.authrequired .http-method {
-          background-image: url(/images/lock.png);
-          background-repeat: no-repeat;
-          background-position: 7px 50%;
-      }*/
-   background-color:#E7F0F7;
+   background-color: #FAFAFA;
 }
 
 .method legend {
 	margin-bottom:0;
 }
+
+.parameter {
+  padding-left:5px;
+  font-size: 14px;
+  border: 1px solid #029DE7;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  -ms-border-radius: 5px;
+  -khtml-border-radius: 5px;
+  border-radius: 5px;
+  margin: 10px 5px;
+   background-color: #E7F0F7;	
+}
diff --git a/views/_methods.haml b/views/_methods.haml
@@ -3,8 +3,8 @@
 	-endpoint["methods"].each do |m|
 		-method_count=method_count+1
 
-		%li.method{:id => "method#{endpointIndex}method#{method_count}", :endpointIndex => endpointIndex, :methodIndex => method_count}
-			%legend.clickable{"data-toggle" => "collapse", "data-target" => "#endpoint#{endpointIndex}method#{method_count}"}
+		%li.method{:endpointIndex => endpointIndex, :methodIndex => method_count}
+			%legend.clickable{"data-toggle" => "collapse", "data-parent" => "#ep#{endpointIndex}", "data-target" => "#endpoint#{endpointIndex}method#{method_count}"}
 				%a{:name => "endpoint#{endpointIndex}method#{method_count}"} 
 					Method: 
 					%span.methodNameSpan #{m.MethodName}

diff --git a/views/_parameters.haml b/views/_parameters.haml
@@ -1,53 +1,58 @@
--param_count = 0
--m.parameters.each do |p|
-	-param_count=param_count+1
-	%legend
-		Parameter: #{p.Name}
-	.control-group
-		%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].ParameterName"} Parameter Name
-		.controls 
-			%input{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].ParameterName", |
-				:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].ParameterName",      |
-				:value => "#{p.Name}"} |
-	.control-group
-		%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Description"} Description
-		.controls 
-			%textarea{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Description", |
-			 	:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Description"} |
-				#{p.Description} |
-	.control-group
-		%label.control-label Required?
-		.controls 
-			%label.radio
-				%input{:type => "radio", :name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required", |
-					:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required.Yes", |
-					:value => "Y", |
-					:checked => p.Required == "Y"}
-					Yes
+%ul.parameters
+	-param_count = 0
+	-m.parameters.each do |p|
+		-param_count=param_count+1
+
+		%li.parameter{:endpointIndex => endpointIndex, :methodIndex => methodIndex, :parameterIndex => param_count}
+			%legend.clickable{"data-toggle" => "collapse", "data-parent" => "#endpoint#{endpointIndex}method#{methodIndex}", "data-target" => "#endpoint#{endpointIndex}method#{methodIndex}parameter#{param_count}"}
+				Parameter: #{p.Name}
+
+				.parameterContainer.collapse{:id => "endpoint#{endpointIndex}method#{methodIndex}parameter#{param_count}"}
+					.control-group
+						%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].ParameterName"} Parameter Name
+						.controls 
+							%input{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].ParameterName", |
+								:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].ParameterName",      |
+								:value => "#{p.Name}"} |
+					.control-group
+						%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Description"} Description
+						.controls 
+							%textarea{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Description", |
+							 	:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Description"} |
+								#{p.Description} |
+					.control-group
+						%label.control-label Required?
+						.controls 
+							%label.radio
+								%input{:type => "radio", :name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required", |
+									:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required.Yes", |
+									:value => "Y", |
+									:checked => p.Required == "Y"}
+									Yes
 
-			%label.radio
-				%input{:type => "radio", :name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required", |
-					:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required.No", |
-					:value => "N", |
-					:checked => p.Required == "N"} 
-					No
-	.control-group
-		%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Default"} Default value
-		.controls 
-			%input{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Default", | 
-			:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Default",          |
-			:value => "#{p.Default}"} |
+							%label.radio
+								%input{:type => "radio", :name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required", |
+									:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Required.No", |
+									:value => "N", |
+									:checked => p.Required == "N"} 
+									No
+					.control-group
+						%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Default"} Default value
+						.controls 
+							%input{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Default", | 
+							:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Default",          |
+							:value => "#{p.Default}"} |
 
-	.control-group
-		%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Type"} Data type
-		-#should be a dropdown
-		.controls 
-			%input{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Type", |
-			:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Type", | 
-			:value => "#{p.Type}"} 
+					.control-group
+						%label.control-label{:for => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Type"} Data type
+						-#should be a dropdown
+						.controls 
+							%input{:name => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Type", |
+							:id => "endpoints[#{endpointIndex}].methods[#{methodIndex}].parameters[#{param_count}].Type", | 
+							:value => "#{p.Type}"} 
 
-			%p.help-block
-				Can be an aribitrary value, e.g. string or int. Values "boolean" and "enumerated" will render a dropdown.
-				-#this is where logic is needed to hide/display fields based on type
+							%p.help-block
+								Can be an arbitrary value, e.g. string or int. Values "boolean" and "enumerated" will render a dropdown.
+								-#this is where logic is needed to hide/display fields based on type
 
 %input{:type=>"hidden", :value => param_count, :id=>"endpoint#{endpointIndex}Method#{methodIndex}ParameterCounter"}
diff --git a/views/endpoints.haml b/views/endpoints.haml
@@ -19,14 +19,13 @@
 				#start
 					%h3 Click on a Endpoint or Method from the list on the left, or add a new Endpoint to get started.
 
-				%input.btn(type='submit' value='Add Endpoint' id="addEndpoint")
+				-#%input.btn(type='submit' value='Add Endpoint' id="addEndpoint")
 
 				%form.form-horizontal#config
 					-count=0
 					- @result["endpoints"].each do |e|
 						-count=count+1
 						.endpoint.hide{:id => "ep#{count}"} 
-
 							.control-group
 								%label.control-label{:for => "endpoints[#{count}].name"} 
 									Endpoint Name: