some interaction design for user management
This commit is contained in:
parent
0bcb4a6a8f
commit
ce9b36fd3e
|
@ -1,12 +1,13 @@
|
||||||
form { display:inline; }
|
form { display:inline; }
|
||||||
|
td.name, td.password { padding-left:.8em; }
|
||||||
td.password>img, td.remove>img { display:none; cursor:pointer; }
|
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>
|
</form></tr>
|
||||||
</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…
Reference in New Issue