some interaction design for user management

admin/css/users.css

@@ -1,12 +1,13 @@
 form { display:inline; }
+td.name, td.password { padding-left:.8em; }
 td.password>img, td.remove>img { display:none; cursor:pointer; }
 td.password>span { margin-right:1.2em; }
-td.password { width:12em; }
-td.password>img { float:right; }
+td.password { width:12em; cursor:pointer; }
 
-td.remove { width:1em }
-tr:hover>td.password>span{ margin:0; }
-tr:hover>td.remove>img, tr:hover>td.password>img { display:inline; }
+td.remove { width:1em; }
+tr:hover>td.password>span { margin:0; cursor:pointer; }
+tr:hover>td.remove>img, tr:hover>td.password>img { display:inline;  cursor:pointer; }
+tr:hover>td.remove>img { float:right; }
 li.selected { background-color:#ddd; }
 #content>table { margin-top:6.5em; }
 table { width:100%; }

admin/js/users.js

@@ -46,6 +46,7 @@ $(document).ready(function(){
 	});
 	
 	$('td.password>img').live('click',function(event){
+		event.stopPropagation();
 		var img=$(this);
 		var uid=img.parent().parent().data('uid');
 		var input=$('<input type="password">');
@@ -71,6 +72,9 @@ $(document).ready(function(){
 			img.css('display','');
 		});
 	});
+	$('td.password').live('click',function(event){
+		$(this).children('img').click();
+	});
 	
 	$('#newuser').submit(function(event){
 		event.preventDefault();
@@ -88,7 +92,7 @@ $(document).ready(function(){
 				
 			}
 		);
-		var tr=$('#content table tr').first().clone();
+		var tr=$('#content table tr').first().next().clone();
 		tr.attr('data-uid',username);
 		tr.find('td.name').text(username);
 		var select=$('<select multiple="multiple" data-placehoder="Groups" title="Groups">');

admin/templates/users.php

@@ -1,22 +1,22 @@
-<div id="controls">
-	<form id="newuser">
-		<input id="newusername" placeholder="<?php echo $l->t('Name')?>"></input>
-		<input type="password" id="newuserpassword" placeholder="<?php echo $l->t('Password')?>"></input>
-		<select id="newusergroups" data-placeholder="groups" title="<?php echo $l->t('Groups')?>" multiple="multiple">
-			<?php foreach($_["groups"] as $group): ?>
-				<option value="<?php echo $group['name'];?>"><?php echo $group['name'];?></option>
-			<?php endforeach;?>
-		</select>
-		<input type="submit" value="<?php echo $l->t('Create')?>"></input>
-	</form>
-</div>
 <?php
 $allGroups=array();
 foreach($_["groups"] as $group) {
 	$allGroups[]=$group['name'];
 }
 ?>
+
 <table data-groups="<?php echo implode(', ',$allGroups);?>">
+	<tbody id="controls">
+		<tr><form id="newuser">
+			<th class="name"><input id="newusername" placeholder="<?php echo $l->t('Name')?>"></input></th>
+			<th class="password"><input type="password" id="newuserpassword" placeholder="<?php echo $l->t('Password')?>"></input></th>
+			<th class="groups"><select id="newusergroups" data-placeholder="groups" title="<?php echo $l->t('Groups')?>" multiple="multiple">
+			<?php foreach($_["groups"] as $group): ?>
+				<option value="<?php echo $group['name'];?>"><?php echo $group['name'];?></option>
+			<?php endforeach;?>
+			</select></th>
+			<th><input type="submit" value="<?php echo $l->t('Create')?>"></input></th>
+		</form></tr>
 	<?php foreach($_["users"] as $user): ?>
 		<tr data-uid="<?php echo $user["name"] ?>">
 			<td class="name"><?php echo $user["name"]; ?></td>
@@ -38,4 +38,5 @@ foreach($_["groups"] as $group){
 			</td>
 		</tr>
 	<?php endforeach; ?>
+	</tbody>
 </table>

apps/files_publiclink/templates/admin.php

@@ -1,12 +1,10 @@
 <input type="hidden" id="baseUrl" value="<?php echo $_['baseUrl'];?>"/>
 <table id="linklist">
 	<thead id="controls">
-		<tr id="newlink_row">
-			<form action="#" id="newlink">
+		<tr id="newlink_row"><form action="#" id="newlink">
 			<td class="path"><input placeholder="Path" id="path"/></td>
 			<td><input type="submit" value="Share" /></td>
-			</form>
-		</tr>
+		</form></tr>
 	</thead>
 	<tbody>
 		<?php foreach($_['links'] as $link):?>

core/css/styles.css

@@ -9,7 +9,7 @@ table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
 caption, th, td { text-align:left; font-weight:normal; }
 table, td, th { vertical-align:middle; }
 a { border:0; color:#000; text-decoration:none;}
-a, a img, a strong, a span, input, select, li { cursor:pointer; }
+a, a *, input, input *, select, .button span, li { cursor:pointer; }
 ul { list-style:none; }
 body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; margin-bottom:2em; }
 
@@ -99,6 +99,6 @@ legend { padding:.2em; font-size:1.2em; }
 
 li.error { width:640px; margin:4em auto; padding:1em 1em 1em 4em; background:#ffe .8em .8em no-repeat; border:1px solid #ccc; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
 .hidden{ display:none; }
-#notification{ z-index:101; background-color:#fc4; border:0; padding:0 .7em .3em; display:block; position:fixed; left:50%; top:0;
+#notification{ z-index:101; cursor:pointer; background-color:#fc4; border:0; padding:0 .7em .3em; display:block; position:fixed; left:50%; top:0;
 -moz-border-radius-bottomleft:1em; -webkit-border-bottom-left-radius:1em; border-bottom-left-radius:1em;
 -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }

files/css/files.css

@@ -20,6 +20,8 @@
 .file_upload_start { opacity:0; filter:alpha(opacity=0); z-index:1; position:absolute; left:0; top:0; width:100%; cursor:pointer;}
 .file_upload_filename { z-index:100; cursor:pointer;}
 
+.file_upload_form, .file_upload_wrapper, .file_upload_start, .file_upload_filename, #file_upload_submit { cursor:pointer; }
+
 /* FILE TABLE */
 span#emptyfolder { position:absolute; margin:10em 0 0 10em; font-size:1.5em; font-weight:bold; color:#888; text-shadow:#fff 0 1px 0; }
 table { position:relative; top:37px; width:100%; }