New user form in table

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Added value and empty check to properly display a confirm button/input

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

w3c html form table compliance and menu fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Various design fixes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Fix wording to consistent 'Add user'

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Focus new username input on toggle

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Removed  unwanted th after rebase

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

quote fix

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Th to td

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

🙈

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Email input to email type

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Fixed table template cells and fix email input enabling

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Always show email and fixed min-width of name, username, mail and fullname columns

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Use button id

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-01-09 15:55:45 +01:00 committed by Roeland Jago Douma
parent 2f1aa25130
commit 7f6b27aef7
No known key found for this signature in database
GPG Key ID: F941078878347C0C
6 changed files with 166 additions and 196 deletions

View File

@ -149,6 +149,11 @@ input[type='reset'] {
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
background-color: nc-darken($color-main-background, 3%); background-color: nc-darken($color-main-background, 3%);
&.icon-confirm:not(:empty),
&.icon-confirm[value]:not([value=""]) {
background-position: calc(100% - 6px) center;
padding-right: 30px;
}
} }
/* Buttons */ /* Buttons */

View File

@ -491,9 +491,12 @@ table.grid {
} }
} }
td { td, th {
&.name { &.name {
padding-left: .8em; padding-left: .8em;
width: 10em;
min-width: 10em;
max-width: 10em;
} }
&.password { &.password {
padding-left: .8em; padding-left: .8em;
@ -504,8 +507,12 @@ td {
&.displayName > img { &.displayName > img {
visibility: hidden; visibility: hidden;
} }
&.password, &.displayName { &.password,
&.displayName,
&.mailAddress {
width: 12em; width: 12em;
min-width: 12em;
max-width: 12em;
cursor: pointer; cursor: pointer;
} }
&.mailAddress { &.mailAddress {
@ -524,7 +531,7 @@ span.usersLastLoginTooltip {
/* dropdowns will be relative to this element */ /* dropdowns will be relative to this element */
#userlist { #userlist {
position: relative; position: relative;
.mailAddress, .storageLocation, .userBackend, .lastLogin { .storageLocation, .userBackend, .lastLogin {
display: none; display: none;
} }
th.name { th.name {
@ -545,17 +552,7 @@ span.usersLastLoginTooltip {
} }
} }
/* because of accessibility the name cell is <th> - therefore we enforce the black color */
/* use same height as in files app */
#newuser { #newuser {
/* positioning fixes */
margin: 2px 0;
display: flex;
flex-direction: column;
.groups {
display: inline;
}
.groupsListContainer.hidden { .groupsListContainer.hidden {
display: none; display: none;
} }
@ -564,18 +561,8 @@ span.usersLastLoginTooltip {
position: relative; position: relative;
top: -1px; top: -1px;
} }
input:not([type='submit']) { #newuserHeader input:not([type="submit"]) {
width: 100%; width: 100%;
margin: 2px 0;
}
input[type='submit'] {
flex-grow: 2;
}
> div {
display: inline-flex;
label {
display: block;
}
} }
} }

View File

@ -32,7 +32,13 @@ var UserList = {
// initially the list might already contain user entries (not fully ajaxified yet) // initially the list might already contain user entries (not fully ajaxified yet)
// initialize these entries // initialize these entries
this.$el.find('.quota-user').singleSelect().on('change', this.onQuotaSelect); this.$el.find('.quota-user').singleSelect().on('change', this.onQuotaSelect);
OC.registerMenu($('.app-navigation-new > button'), $('#newuser')) OC.registerMenu(
$('#new-user-button'),
$('#newuserHeader'),
function() {
$('#newusername').focus();
}
);
}, },
/** /**
@ -1136,24 +1142,6 @@ $(document).ready(function () {
} }
}); });
if ($('#CheckboxEmailAddress').is(':checked')) {
$("#userlist .mailAddress").show();
}
// Option to display/hide the "Mail Address" column
$('#CheckboxEmailAddress').click(function () {
if ($('#CheckboxEmailAddress').is(':checked')) {
$("#userlist .mailAddress").show();
if (OC.isUserAdmin()) {
OCP.AppConfig.setValue('core', 'umgmt_show_email', 'true');
}
} else {
$("#userlist .mailAddress").hide();
if (OC.isUserAdmin()) {
OCP.AppConfig.setValue('core', 'umgmt_show_email', 'false');
}
}
});
if ($('#CheckboxUserBackend').is(':checked')) { if ($('#CheckboxUserBackend').is(':checked')) {
$("#userlist .userBackend").show(); $("#userlist .userBackend").show();
} }
@ -1172,24 +1160,6 @@ $(document).ready(function () {
} }
}); });
if ($('#CheckboxMailOnUserCreate').is(':checked')) {
$("#newemail").show();
}
// Option to display/hide the "E-Mail" input field
$('#CheckboxMailOnUserCreate').click(function () {
if ($('#CheckboxMailOnUserCreate').is(':checked')) {
$("#newemail").show();
if (OC.isUserAdmin()) {
OCP.AppConfig.setValue('core', 'umgmt_send_email', 'true');
}
} else {
$("#newemail").hide();
if (OC.isUserAdmin()) {
OCP.AppConfig.setValue('core', 'umgmt_send_email', 'false');
}
}
});
// calculate initial limit of users to load // calculate initial limit of users to load
var initialUserCountLimit = UserList.initialUsersToLoad, var initialUserCountLimit = UserList.initialUsersToLoad,
containerHeight = $('#app-content').height(); containerHeight = $('#app-content').height();

View File

@ -67,20 +67,6 @@ translation('settings');
<?php p($l->t('Show last login')) ?> <?php p($l->t('Show last login')) ?>
</label> </label>
</p> </p>
<p>
<input type="checkbox" name="EmailAddress" value="EmailAddress" id="CheckboxEmailAddress"
class="checkbox" <?php if ($_['show_email'] === 'true') print_unescaped('checked="checked"'); ?> />
<label for="CheckboxEmailAddress">
<?php p($l->t('Show email address')) ?>
</label>
</p>
<p>
<input type="checkbox" name="MailOnUserCreate" value="MailOnUserCreate" id="CheckboxMailOnUserCreate"
class="checkbox" <?php if ($_['send_email'] === 'true') print_unescaped('checked="checked"'); ?> />
<label for="CheckboxMailOnUserCreate">
<?php p($l->t('Send email to new user')) ?>
</label>
</p>
<p class="info-text"> <p class="info-text">
<?php p($l->t('When the password of a new user is left empty, an activation email with a link to set the password is sent.')) ?> <?php p($l->t('When the password of a new user is left empty, an activation email with a link to set the password is sent.')) ?>
</p> </p>

View File

@ -1,37 +1,3 @@
<div class="app-navigation-new"> <div class="app-navigation-new">
<button type="button" class="icon-add"><?php p($l->t('New user'))?></button> <button type="button" id="new-user-button" class="icon-add"><?php p($l->t('Add user'))?></button>
<form class="newUserMenu" id="newuser" autocomplete="off" style="display: none;">
<div>
<input id="newusername" type="text" required
placeholder="<?php p($l->t('Username'))?>" name="username"
autocomplete="off" autocapitalize="none" autocorrect="off" />
</div>
<div>
<input id="newuserpassword" type="password" required
placeholder="<?php p($l->t('Password'))?>" name="password"
autocomplete="new-password" autocapitalize="none" autocorrect="off" />
</div>
<div>
<input id="newemail" type="text" style="display:none"
placeholder="<?php p($l->t('E-Mail'))?>" name="email"
autocomplete="off" autocapitalize="none" autocorrect="off" />
</div>
<div>
<label class="groups" for="newgroup">
<div class="groupsListContainer multiselect button" data-placeholder="<?php p($l->t('Groups'))?>"><span class="title groupsList"></span>
<span class="icon-triangle-s"></span>
</div>
</label>
<input type="submit" id="newsubmit" class="button icon-confirm has-tooltip" value="" title="<?php p($l->t('Create'))?>" />
</div>
<?php if((bool)$_['recoveryAdminEnabled']): ?>
<div class="recoveryPassword">
<input id="recoveryPassword"
type="password"
placeholder="<?php p($l->t('Admin Recovery Password'))?>"
title="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"
alt="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"/>
</div>
<?php endif; ?>
</form>
</div> </div>

View File

@ -1,90 +1,146 @@
<table id="userlist" class="grid" data-groups="<?php p($_['allGroups']);?>"> <form class="newUserMenu" id="newuser" autocomplete="off">
<thead> <table id="userlist" class="grid" data-groups="<?php p($_['allGroups']);?>">
<tr> <thead>
<th id="headerAvatar" scope="col"></th> <tr>
<th id="headerName" scope="col"><?php p($l->t('Username'))?></th> <th id="headerAvatar" scope="col"></th>
<th id="headerDisplayName" scope="col"><?php p($l->t( 'Full name' )); ?></th> <th id="headerName" scope="col"><?php p($l->t('Username'))?></th>
<th id="headerPassword" scope="col"><?php p($l->t( 'Password' )); ?></th> <th id="headerDisplayName" scope="col"><?php p($l->t( 'Full name' )); ?></th>
<th class="mailAddress" scope="col"><?php p($l->t( 'Email' )); ?></th> <th id="headerPassword" scope="col"><?php p($l->t( 'Password' )); ?></th>
<th id="headerGroups" scope="col"><?php p($l->t( 'Groups' )); ?></th> <th class="mailAddress" scope="col"><?php p($l->t( 'Email' )); ?></th>
<?php if(is_array($_['subadmins']) || $_['subadmins']): ?> <th id="headerGroups" scope="col"><?php p($l->t( 'Groups' )); ?></th>
<th id="headerSubAdmins" scope="col"><?php p($l->t('Group admin for')); ?></th> <?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
<?php endif;?> <th id="headerSubAdmins" scope="col"><?php p($l->t('Group admin for')); ?></th>
<th id="headerQuota" scope="col"><?php p($l->t('Quota')); ?></th> <?php endif;?>
<th class="storageLocation" scope="col"><?php p($l->t('Storage location')); ?></th> <?php if((bool)$_['recoveryAdminEnabled']): ?>
<th class="userBackend" scope="col"><?php p($l->t('User backend')); ?></th> <th id="recoveryPassword" scope="col"><?php p($l->t('Recovery password')); ?></th>
<th class="lastLogin" scope="col"><?php p($l->t('Last login')); ?></th> <?php endif; ?>
<th class="userActions"></th> <th id="headerQuota" scope="col"><?php p($l->t('Quota')); ?></th>
</tr> <th class="storageLocation" scope="col"><?php p($l->t('Storage location')); ?></th>
</thead> <th class="userBackend" scope="col"><?php p($l->t('User backend')); ?></th>
<tbody> <th class="lastLogin" scope="col"><?php p($l->t('Last login')); ?></th>
<!-- the following <tr> is used as a template for the JS part --> <th class="userActions"></th>
<tr style="display:none"> </tr>
<td class="avatar"><div class="avatardiv"></div></td> <tr id="newuserHeader" style="display:none">
<th class="name" scope="row"></th> <td class="icon-add"></td>
<td class="displayName"><span></span> <img class="action" <td class="name">
src="<?php p(image_path('core', 'actions/rename.svg'))?>" <input id="newusername" type="text" required
alt="<?php p($l->t("change full name"))?>" title="<?php p($l->t("change full name"))?>"/> placeholder="<?php p($l->t('Username'))?>" name="username"
</td> autocomplete="off" autocapitalize="none" autocorrect="off" />
<td class="password"><span>●●●●●●●</span> <img class="action" </td>
src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>" <td class="displayName">
alt="<?php p($l->t("set new password"))?>" title="<?php p($l->t("set new password"))?>"/> <input id="newdisplayname" type="text"
</td> placeholder="<?php p($l->t('Full name'))?>" name="displayname"
<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="action" autocomplete="off" autocapitalize="none" autocorrect="off" />
src="<?php p(image_path('core', 'actions/rename.svg'))?>" </td>
alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/> <td class="password">
</td> <input id="newuserpassword" type="password" required
<td class="groups"><div class="groupsListContainer multiselect button" placeholder="<?php p($l->t('Password'))?>" name="password"
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div> autocomplete="new-password" autocapitalize="none" autocorrect="off" />
</td> </td>
<?php if(is_array($_['subadmins']) || $_['subadmins']): ?> <td class="mailAddress">
<td class="subadmins"><div class="groupsListContainer multiselect button" <input id="newemail" type="email"
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div> placeholder="<?php p($l->t('E-Mail'))?>" name="email"
</td> autocomplete="off" autocapitalize="none" autocorrect="off" />
<?php endif;?> </td>
<td class="quota"> <td class="groups">
<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>"> <div class="groupsListContainer multiselect button" data-placeholder="<?php p($l->t('Groups'))?>">
<option value='default'> <span class="title groupsList"></span>
<?php p($l->t('Default'));?> <span class="icon-triangle-s"></span>
</option>
<option value='none'>
<?php p($l->t('Unlimited'));?>
</option>
<?php foreach($_['quota_preset'] as $preset):?>
<option value='<?php p($preset);?>'>
<?php p($preset);?>
</option>
<?php endforeach;?>
<option value='other' data-new>
<?php p($l->t('Other'));?> ...
</option>
</select>
<progress class="quota-user-progress" value="" max="100"></progress>
</td>
<td class="storageLocation"></td>
<td class="userBackend"></td>
<td class="lastLogin"></td>
<td class="userActions">
<div class="toggleUserActions">
<a class="action"><span class="icon-more"></span></a>
<div class="popovermenu">
<ul class="userActionsMenu">
<li>
<a href="#" class="menuitem action-togglestate permanent" data-action="togglestate"></a>
</li>
<li>
<a href="#" class="menuitem action-remove permanent" data-action="remove">
<span class="icon icon-delete"></span>
<span><?php p($l->t('Delete')); ?></span>
</a>
</li>
</ul>
</div> </div>
</div> </td>
</td> <?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
</tr> <td></td>
</tbody> <?php endif;?>
</table> <?php if((bool)$_['recoveryAdminEnabled']): ?>
<td class="recoveryPassword">
<input id="recoveryPassword"
type="password"
placeholder="<?php p($l->t('Admin Recovery Password'))?>"
title="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"
alt="<?php p($l->t('Enter the recovery password in order to recover the users files during password change'))?>"/>
</td>
<?php endif; ?>
<td class="quota"></td>
<td class="storageLocation" scope="col"></td>
<td class="userBackend" scope="col"></td>
<td class="lastLogin" scope="col"></td>
<td class="userActions">
<input type="submit" id="newsubmit" class="button icon-confirm has-tooltip" value="<?php p($l->t('Add user'))?>" />
</td>
</tr>
</thead>
<tbody>
<!-- the following <tr> is used as a template for the JS part -->
<tr style="display:none">
<td class="avatar"><div class="avatardiv"></div></td>
<td class="name" scope="row"></td>
<td class="displayName"><span></span> <img class="action"
src="<?php p(image_path('core', 'actions/rename.svg'))?>"
alt="<?php p($l->t('change full name'))?>" title="<?php p($l->t('change full name'))?>"/>
</td>
<td class="password"><span>●●●●●●●</span> <img class="action"
src="<?php print_unescaped(image_path('core', 'actions/rename.svg'))?>"
alt="<?php p($l->t('set new password'))?>" title="<?php p($l->t('set new password'))?>"/>
</td>
<td class="mailAddress"><span></span><div class="loading-small hidden"></div> <img class="action"
src="<?php p(image_path('core', 'actions/rename.svg'))?>"
alt="<?php p($l->t('change email address'))?>" title="<?php p($l->t('change email address'))?>"/>
</td>
<td class="groups"><div class="groupsListContainer multiselect button"
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
</td>
<?php if(is_array($_['subadmins']) || $_['subadmins']): ?>
<td class="subadmins"><div class="groupsListContainer multiselect button"
><span class="title groupsList"></span><span class="icon-triangle-s"></span></div>
</td>
<?php endif;?>
<?php if((bool)$_['recoveryAdminEnabled']): ?>
<td></td>
<?php endif; ?>
<td class="quota">
<select class="quota-user" data-inputtitle="<?php p($l->t('Please enter storage quota (ex: "512 MB" or "12 GB")')) ?>">
<option value='default'>
<?php p($l->t('Default'));?>
</option>
<option value='none'>
<?php p($l->t('Unlimited'));?>
</option>
<?php foreach($_['quota_preset'] as $preset):?>
<option value='<?php p($preset);?>'>
<?php p($preset);?>
</option>
<?php endforeach;?>
<option value='other' data-new>
<?php p($l->t('Other'));?> ...
</option>
</select>
<progress class="quota-user-progress" value="" max="100"></progress>
</td>
<td class="storageLocation"></td>
<td class="userBackend"></td>
<td class="lastLogin"></td>
<td class="userActions">
<div class="toggleUserActions">
<a class="action"><span class="icon-more"></span></a>
<div class="popovermenu">
<ul class="userActionsMenu">
<li>
<a href="#" class="menuitem action-togglestate permanent" data-action="togglestate"></a>
</li>
<li>
<a href="#" class="menuitem action-remove permanent" data-action="remove">
<span class="icon icon-delete"></span>
<span><?php p($l->t('Delete')); ?></span>
</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
<div class="emptycontent" style="display:none"> <div class="emptycontent" style="display:none">
<div class="icon-search"></div> <div class="icon-search"></div>