some interaction design for user management
This commit is contained in:
parent
0bcb4a6a8f
commit
ce9b36fd3e
|
@ -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%; }
|
||||
|
|
|
@ -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">');
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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):?>
|
||||
|
|
|
@ -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; }
|
||||
|
|
|
@ -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%; }
|
||||
|
|
Loading…
Reference in New Issue