some interaction design for user management

remotes/origin/stable
Jan-Christoph Borchardt 13 years ago
parent 0bcb4a6a8f
commit ce9b36fd3e
  1. 13
      admin/css/users.css
  2. 6
      admin/js/users.js
  3. 27
      admin/templates/users.php
  4. 10
      apps/files_publiclink/templates/admin.php
  5. 4
      core/css/styles.css
  6. 2
      files/css/files.css

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

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

@ -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 <?php
$allGroups=array(); $allGroups=array();
foreach($_["groups"] as $group){ foreach($_["groups"] as $group) {
$allGroups[]=$group['name']; $allGroups[]=$group['name'];
} }
?> ?>
<table data-groups="<?php echo implode(', ',$allGroups);?>"> <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): ?> <?php foreach($_["users"] as $user): ?>
<tr data-uid="<?php echo $user["name"] ?>"> <tr data-uid="<?php echo $user["name"] ?>">
<td class="name"><?php echo $user["name"]; ?></td> <td class="name"><?php echo $user["name"]; ?></td>
@ -38,4 +38,5 @@ foreach($_["groups"] as $group){
</td> </td>
</tr> </tr>
<?php endforeach; ?> <?php endforeach; ?>
</tbody>
</table> </table>

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

@ -9,7 +9,7 @@ table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
caption, th, td { text-align:left; font-weight:normal; } caption, th, td { text-align:left; font-weight:normal; }
table, td, th { vertical-align:middle; } table, td, th { vertical-align:middle; }
a { border:0; color:#000; text-decoration:none;} 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; } ul { list-style:none; }
body { background:#fefefe; font:normal 80%/1.6em "Lucida Grande", Arial, Verdana, sans-serif; color:#000; margin-bottom:2em; } 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; } 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; } .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-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; } -moz-border-radius-bottomright:1em; -webkit-border-bottom-right-radius:1em; border-bottom-right-radius:1em; }

@ -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_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_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 */ /* 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; } 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%; } table { position:relative; top:37px; width:100%; }

Loading…
Cancel
Save