Browse Source

Improved style and feedback for chown and chmod modals

Enrico Berti 13 years ago
parent
commit
87e22df829

+ 27 - 17
apps/filebrowser/src/filebrowser/templates/chmod.mako

@@ -14,6 +14,12 @@
 ## See the License for the specific language governing permissions and
 ## limitations under the License.
 <%namespace name="edit" file="editor_components.mako" />
+<style>
+.table-margin {
+	padding-left:20px;
+	padding-right:20px;
+}
+</style>
 
 <form action="/filebrowser/chmod?next=${next|u}" method="POST" enctype="multipart/form-data"
       class="form-inline form-padding-fix">
@@ -21,35 +27,39 @@
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>Change Permissions: ${path}</h3>
     </div>
-    <div class="change-owner-modal-body clearfix" >
+    <div class="table-margin">
         ${edit.render_field(form["path"], hidden=True)}
         <table class="table table-striped">
             <thead>
             <tr>
-                <th></th>
-                <th>User</th>
-                <th>Group</th>
-                <th>Other</th>
+                <th>&nbsp;</th>
+                <th class="center">User</th>
+                <th class="center">Group</th>
+                <th class="center">Other</th>
+				<th width="120">&nbsp</th>
             </tr>
             </thead>
             <tbody>
             <tr>
-                <td>Read</td>
-                <td>${edit.render_field(form["user_read"], tag="checkbox", button_text=" ", nolabel=True)}</td>
-                <td>${edit.render_field(form["group_read"], tag="checkbox", button_text=" ", nolabel=True)}</td>
-                <td>${edit.render_field(form["other_read"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td><strong>Read</strong></td>
+                <td class="center">${edit.render_field(form["user_read"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td class="center">${edit.render_field(form["group_read"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td class="center">${edit.render_field(form["other_read"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+				<td>&nbsp;</td>
             </tr>
             <tr>
-                <td>Write</td>
-                <td>${edit.render_field(form["user_write"], tag="checkbox", button_text=" ", nolabel=True)}</td>
-                <td>${edit.render_field(form["group_write"], tag="checkbox", button_text=" ", nolabel=True)}</td>
-                <td>${edit.render_field(form["other_write"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td><strong>Write</strong></td>
+                <td class="center">${edit.render_field(form["user_write"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td class="center">${edit.render_field(form["group_write"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td class="center">${edit.render_field(form["other_write"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+				<td>&nbsp;</td>
             </tr>
             <tr>
-                <td>Execute</td>
-                <td>${edit.render_field(form["user_execute"], tag="checkbox", button_text=" ", nolabel=True)}</td>
-                <td>${edit.render_field(form["group_execute"], tag="checkbox", button_text=" ", nolabel=True)}</td>
-                <td>${edit.render_field(form["other_execute"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td><strong>Execute</strong></td>
+                <td class="center">${edit.render_field(form["user_execute"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td class="center">${edit.render_field(form["group_execute"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+                <td class="center">${edit.render_field(form["other_execute"], tag="checkbox", button_text=" ", nolabel=True)}</td>
+				<td>&nbsp;</td>
             </tr>
             </tbody>
         </table>

+ 56 - 4
apps/filebrowser/src/filebrowser/templates/chown.mako

@@ -25,7 +25,7 @@
 <%def name="selection(name, choices, current_value, other_key=None)">
     <% seen = False %>
     % if len(choices) == 0:
-      <select name="${name}" class="jframe-hidden">
+      <select name="${name}" class="hide">
     % else:
       <select name="${name}">
     % endif
@@ -48,13 +48,13 @@
     </select>
     % if is_superuser:
       % if seen or not current_value:
-        <input name="${other_key}" class="jframe-hidden">
+        <input name="${other_key}" class="hide">
       % else:
         <input name="${other_key}" value="${current_value}">
       % endif
     % endif
 </%def>
-<form action="/filebrowser/chown?next=${next|u}" method="POST" enctype="multipart/form-data" class="form-stacked form-padding-fix">
+<form id="chownForm" action="/filebrowser/chown?next=${next|u}" method="POST" enctype="multipart/form-data" class="form-stacked form-padding-fix">
     <div class="modal-header">
         <a href="#" class="close" data-dismiss="modal">&times;</a>
         <h3>Change Owner / Group: ${path}</h3>
@@ -84,10 +84,62 @@
 
     </div>
     <div class="modal-footer" style="padding-top: 10px;">
+		<div id="chownRequired" class="hide" style="position: absolute; left: 10;">
+			<span class="label label-important">Sorry, name is required.</span>
+        </div>
         <input class="btn primary" type="submit" value="Submit" />
         <a class="btn" onclick="$('#changeOwnerModal').modal('hide');">Cancel</a>
     </div>
 </form>
 
+<script type="text/javascript" charset="utf-8">
+	$(document).ready(function(){
+		$("select[name='user']").change(function(){
+			if ($(this).val() == "__other__"){
+				$("input[name='user_other']").show();
+			}
+			else {
+				$("input[name='user_other']").hide();
+			}
+		});
+		$("select[name='group']").change(function(){
+			if ($(this).val() == "__other__"){
+				$("input[name='group_other']").show();
+			}
+			else {
+				$("input[name='group_other']").hide();
+			}
+		});
+
+		$("#chownForm").submit(function(){
+			console.log($("select[name='user']").val());
+			console.log($("select[name='group']").val());
+			if ($("select[name='user']").val() == null){
+				$("#chownRequired").find(".label").text("Sorry, user is required.");
+				$("#chownRequired").show();
+				return false;
+			}
+			else if ($("select[name='group']").val() == null){
+				$("#chownRequired").find(".label").text("Sorry, group is required.");
+				$("#chownRequired").show();
+				return false;
+			}
+			else {
+				if ($("select[name='group']").val() == "__other__" && $("input[name='group_other']").val() == ""){
+					$("#chownRequired").find(".label").text("Sorry, you need to specify another group.");
+					$("input[name='group_other']").addClass("fieldError");
+					$("#chownRequired").show();
+					return false;
+				}
+				if ($("select[name='user']").val() == "__other__" && $("input[name='user_other']").val() == ""){
+					$("#chownRequired").find(".label").text("Sorry, you need to specify another user.");
+					$("input[name='user_other']").addClass("fieldError");
+					$("#chownRequired").show();
+					return false;
+				}
+				return true;
+			}
+		});
+	});
+</script>
 
-<!--<div class="alert-message info modal-footer">Note: Only the Hadoop superuser, on this FS "${extra_params['superuser']}", may change the owner of a file.</div>-->

+ 2 - 2
desktop/core/src/desktop/templates/login.mako

@@ -51,10 +51,10 @@
 			<div class="span4 offset4">
     			<form method="POST" action="${action}" class="well">
 					<label>Username
-						<input name="username" class="input-xlarge" type="text" maxlength="30">
+						<input name="username" class="input-large" type="text" maxlength="30">
 					</label>
 					<label>Password
-						<input name="password" class="input-xlarge" type="password" maxlength="30">
+						<input name="password" class="input-large" type="password" maxlength="30">
 					</label>
 
 					%if first_login_ever==True:

+ 8 - 0
desktop/core/static/css/hue2.css

@@ -141,6 +141,14 @@ h1 {
     text-align:right!important;
 }
 
+.center {
+    text-align:center!important;
+}
+
+.left {
+    text-align:left!important;
+}
+
 
 /*
 .topbar-inner, .topbar {