Browse Source

Improved look and feel of Beeswax settings column

Enrico Berti 13 years ago
parent
commit
00db8284e8

+ 1 - 0
apps/beeswax/src/beeswax/templates/beeswax_components.mako

@@ -131,6 +131,7 @@
     title_classes.append("hidden")
   titlecls = ' '.join(title_classes)
 
+  plc = ""
   if placeholder:
 	plc = "placeholder=\"%s\"" % placeholder
 %>

+ 173 - 149
apps/beeswax/src/beeswax/templates/execute.mako

@@ -82,150 +82,138 @@ ${layout.menubar(section='query')}
 	<div class="row-fluid">
 		<div class="span3">
 			<div class="well sidebar-nav">
-				<ul class="nav nav-list">
-					<li class="nav-header"></li>
-					<li><a href="#"></a></li>
-				</ul>
-				<form id="advancedSettingsForm" action="${action}" method="POST" class="form-stacked noPadding">
-					<h4>Advanced settings</h4>
-					<h6>Hive settings</h6>
-					% for i, f in enumerate(form.settings.forms):
-					% if i > 0:
-						<hr/>
-					% endif
-
-					<div class="clearfix">
-						${comps.label(f['key'])}
-						<div class="input">
-							${comps.field(f['key'], attrs=dict(
-								placeholder="mapred.reduce.tasks",
-								klass="span3 settingsField"
-							))}
-						</div>
-					</div>
-
-					<div class="clearfix">
-						${comps.label(f['value'])}
-						<div class="input">
-							${comps.field(f['value'], attrs=dict(
-								placeholder="1",
-								klass="span3"
-							))}
-						</div>
-					</div>
-					<div class="clearfix">
-						${comps.field(f['_deleted'], tag="button", button_text="Remove", notitle=True, attrs=dict(
-							type="submit",
-							title="Delete this setting",
-							klass="btn small btn-danger settingsDelete"
-						), value=True)}
-					</div>
-					${comps.field(f['_exists'], hidden=True)}
-				    % endfor
-					<div class="clearfix">
-						<a class="btn small" data-form-prefix="settings">Add</a>
-					</div>
-
-
-					<h6>File Resources</h6>
-					 % for i, f in enumerate(form.file_resources.forms):
-			              % if i > 0:
-			                <hr/>
-			              % endif
-
-						<div class="clearfix">
-							${comps.label(f['type'])}
-							<div class="input">
-								${comps.field(f['type'], render_default=True, attrs=dict(
-									klass="span3"
-								))}
+				<form id="advancedSettingsForm" action="${action}" method="POST" class="form form-horizontal noPadding">
+					<ul class="nav nav-list">
+						<li class="nav-header">Hive settings</li>
+						<li>
+							% for i, f in enumerate(form.settings.forms):
+							<div class="param">
+								<div class="remove">
+									${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
+										type="submit",
+										title="Delete this setting",
+										klass="btn btn-mini btn-danger settingsDelete"
+									), value=True)}
+								</div>
+
+								<div class="control-group">
+									${comps.label(f['key'])}
+									${comps.field(f['key'], attrs=dict(
+										placeholder="mapred.reduce.tasks",
+										klass="settingsField span2"
+									))}
+							    </div>
+
+								<div class="control-group">
+									${comps.label(f['value'])}
+									${comps.field(f['value'], attrs=dict(
+										placeholder="1",
+										klass="span2"
+									))}
+								</div>
 							</div>
-						</div>
+							${comps.field(f['_exists'], hidden=True)}
 
-						<div class="clearfix">
-							${comps.label(f['path'])}
-							<div class="input">
-								${comps.field(f['path'], attrs=dict(
-									placeholder="/user/foo/udf.jar",
-									klass="span3 file_resourcesField"
-								))}
+						    % endfor
+							<div class="control-group">
+								<a class="btn btn-small" data-form-prefix="settings">Add</a>
+							</div>
+						</li>
+						<li class="nav-header">File Resources</li>
+						<li>
+							% for i, f in enumerate(form.file_resources.forms):
+							<div class="param">
+								<div class="remove">
+									${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
+										type="submit",
+										title="Delete this setting",
+										klass="btn btn-mini btn-danger file_resourcesDelete"
+									), value=True)}
+								</div>
+
+								<div class="control-group">
+									${comps.label(f['type'])}
+									${comps.field(f['type'], render_default=True, attrs=dict(
+										klass="span2"
+									))}
+							    </div>
+
+								<div class="control-group">
+									${comps.label(f['path'])}
+									${comps.field(f['path'], attrs=dict(
+										placeholder="/user/foo/udf.jar",
+										klass="span2 file_resourcesField",
+										data_filters=f['path'].html_name
+									))}
+								</div>
 							</div>
-						</div>
-						<div class="clearfix">
-							<a href="#" data-filechooser-destination="${f['path'].html_name | n}" class="btn small">Choose a File</a>
-
-							${comps.field(f['_deleted'], tag="button", button_text="Remove", notitle=True, attrs=dict(
-								type="submit",
-								title="Delete this setting",
-								klass="btn small danger file_resourcesDelete"
-							), value=True)}
-
 							${comps.field(f['_exists'], hidden=True)}
-						</div>
-			            % endfor
-						<div class="clearfix">
-							<a class="btn small" data-form-prefix="file_resources">Add</a>
-						</div>
 
-					<h6>User-defined Functions</h6>
-					% for i, f in enumerate(form.functions.forms):
-			          % if i > 0:
-			            <hr/>
-			          % endif
-
-						<div class="clearfix">
-							${comps.label(f['name'])}
-							<div class="input">
-								${comps.field(f['name'], attrs=dict(
-									placeholder="myFunction",
-									klass="span3 functionsField"
-								))}
+				            % endfor
+							<div class="control-group">
+								<a class="btn btn-small" data-form-prefix="file_resources">Add</a>
 							</div>
-						</div>
-						<div class="clearfix">
-							${comps.label(f['class_name'])}
-							<div class="input">
-								${comps.field(f['class_name'], attrs=dict(
-									placeholder="com.acme.example",
-									klass="span3"
-								))}
+						</li>
+						<li class="nav-header">User-defined Functions</li>
+						<li>
+							% for i, f in enumerate(form.functions.forms):
+								<div class="param">
+									<div class="remove">
+										${comps.field(f['_deleted'], tag="button", button_text="x", notitle=True, attrs=dict(
+											type="submit",
+											title="Delete this setting",
+											klass="btn btn-mini btn-danger file_resourcesDelete"
+										), value=True)}
+									</div>
+
+									<div class="control-group">
+										${comps.label(f['name'])}
+										${comps.field(f['name'], attrs=dict(
+											placeholder="myFunction",
+											klass="span2 functionsField"
+										))}
+								    </div>
+
+									<div class="control-group">
+										${comps.label(f['class_name'])}
+										${comps.field(f['class_name'], attrs=dict(
+											placeholder="com.acme.example",
+											klass="span2"
+										))}
+									</div>
+								</div>
+
+					          ${comps.field(f['_exists'], hidden=True)}
+					        % endfor
+							<div class="control-group">
+								<a class="btn btn-small" data-form-prefix="functions">Add</a>
 							</div>
-						</div>
-
-			    		<div class="clearfix">
-							${comps.field(f['_deleted'], tag="button", button_text="Remove", notitle=True, attrs=dict(
-								type="submit",
-								title="Delete this setting",
-								klass="btn small danger"
-							), value=True)}
-						</div>
-
-			          ${comps.field(f['_exists'], hidden=True)}
-			        % endfor
-					<div class="clearfix">
-						<a class="btn small" data-form-prefix="functions">Add</a>
-					</div>
-
-					<h6>Parametrization</h6>
-					${comps.field(form.query["is_parameterized"],
-			            notitle = True,
-			            tag = "checkbox",
-			            button_text = "Enable Parameterization",
-			            help = "If checked (the default), you can include parameters like $parameter_name in your query, and users will be prompted for a value when the query is run.",
-			            help_attrs= dict(
-			              data_help_direction='11'
-			            )
-			        )}
-					<h6>Email Notification</h6>
-					${comps.field(form.query["email_notify"],
-			                      notitle = True,
-			                      tag = "checkbox",
-			                      button_text = "Email me on complete",
-			                      help = "If checked, you will receive an email notification when the query completes.",
-			                      help_attrs= dict(
-			                        data_help_direction='11'
-			                      )
-			                     )}
+						</li>
+						<li class="nav-header">Parametrization</li>
+						<li>
+							${comps.field(form.query["is_parameterized"],
+					            notitle = True,
+					            tag = "checkbox",
+					            button_text = "Enable Parameterization",
+					            help = "If checked (the default), you can include parameters like $parameter_name in your query, and users will be prompted for a value when the query is run.",
+					            help_attrs= dict(
+					              data_help_direction='11'
+					            )
+					        )}
+						</li>
+						<li class="nav-header">Email Notification</li>
+						<li>
+							${comps.field(form.query["email_notify"],
+		                      notitle = True,
+		                      tag = "checkbox",
+		                      button_text = "Email me on complete",
+		                      help = "If checked, you will receive an email notification when the query completes.",
+		                      help_attrs= dict(
+		                        data_help_direction='11'
+		                      )
+		                     )}
+						</li>
+					</ul>
 					<input type="hidden" name="${form.query["query"].html_name | n}" class="query" value="" />
 				</form>
 			</div>
@@ -233,7 +221,7 @@ ${layout.menubar(section='query')}
 		<div class="span9">
 			% if error_message:
 				<div class="alert alert-error">
-					<p><strong>Your Query Has the Following Error(s):</strong></p>
+					<p><strong>Your query has the following error(s):</strong></p>
 					<p>${error_message}</p>
 					% if log:
 						<small>click the <b>Error Log</b> tab below for details</small>
@@ -322,6 +310,35 @@ ${layout.menubar(section='query')}
 		min-height:100px;
 		overflow-y:scroll;
 	}
+	.control-group label {
+	    float: left;
+	    padding-top: 5px;
+	    text-align: left;
+	    width: 40px;
+	}
+	.nav-list {
+		padding:0;
+	}
+	.param {
+		background:#FDFDFD;
+		padding: 8px 8px 1px 8px;
+		border-radius: 4px;
+	    -webkit-border-radius: 4px;
+	    -moz-border-radius: 4px;
+		margin-bottom:5px;
+		border:1px solid #EEE;
+	}
+	.remove {
+		float:right;
+	}
+	.file_resourcesField {
+		border-radius: 3px 0 0 3px;
+		border-right:0;
+	}
+	.fileChooserBtn {
+		border-radius: 0 3px 3px 0;
+	}
+
 </style>
 
 
@@ -331,7 +348,7 @@ ${layout.menubar(section='query')}
 			offset: 10
 		});
 		// hack!!!
-		$("select").addClass("span3");
+		$("select").addClass("span2");
 
 		$("a[data-form-prefix]").each(function(){
 			var _prefix = $(this).attr("data-form-prefix");
@@ -354,18 +371,25 @@ ${layout.menubar(section='query')}
 			checkAndSubmit();
 		});
 
-		$("a[data-filechooser-destination]").click(function(){
-			var _destination = $(this).attr("data-filechooser-destination");
-			$("#filechooser").jHueFileChooser({
-				onFileChoose: function(filePath){
-					$("input[name='"+_destination+"']").val(filePath);
-					$("#chooseFile").modal("hide");
-				},
-				createFolder: false
-			});
-			$("#chooseFile").modal("show");
+		$(".file_resourcesField").each(function(){
+			var self = $(this);
+			self.after(getFileBrowseButton(self));
 		});
 
+		function getFileBrowseButton(inputElement) {
+			return $("<button>").addClass("btn").addClass("fileChooserBtn").text("..").click(function(e){
+				e.preventDefault();
+				$("#filechooser").jHueFileChooser({
+	                onFileChoose: function(filePath) {
+	                    inputElement.val(filePath);
+	                    $("#chooseFile").modal("hide");
+	                },
+	                createFolder: false
+	            });
+	            $("#chooseFile").modal("show");
+			})
+		}
+
 		$("#executeQuery").click(function(){
 			$("<input>").attr("type","hidden").attr("name","button-submit").attr("value","Execute").appendTo($("#advancedSettingsForm"));
 			checkAndSubmit();