Merge pull request #6848 from nextcloud/user-app-nav-to-css-guidelines

User settings app-navigation to css guidelines
This commit is contained in:
John Molakvoæ 2017-10-23 17:51:03 +02:00 committed by GitHub
commit e5b619d0a6
4 changed files with 49 additions and 106 deletions

View File

@ -249,6 +249,10 @@ body {
left: 0;
}
#app-navigation * {
box-sizing: border-box;
}
#controls {
.button, button {
box-sizing: border-box;

View File

@ -417,42 +417,6 @@ table.nostyle {
}
/* USERS */
#newgroup-init a span {
margin-left: 20px;
&:before {
position: absolute;
left: 12px;
top: -2px;
content: '+';
font-weight: bold;
font-size: 150%;
}
}
#newgroup-form {
height: 44px;
}
#newgroupname {
margin: 0;
width: 100%;
padding: 12px 40px 12px 12px;
box-sizing: border-box;
background-color: transparent;
border: none;
border-bottom: 1px solid $color-border;
border-radius: 0;
}
#newgroup-form .button {
position: absolute;
right: 0;
top: 0;
padding: 10px 20px;
background-color: transparent;
border: none;
opacity: .5;
}
.isgroup {
.groupname {
@ -466,44 +430,18 @@ table.nostyle {
}
}
.usercount {
float: left;
margin: 5px;
}
li.active {
span.utils .delete {
float: left;
position: relative;
opacity: 0.5;
top: -7px;
left: 7px;
width: 44px;
height: 44px;
}
.delete,
.rename {
padding: 8px 14px 20px 14px;
top: 0px;
position: absolute;
width: 16px;
height: 16px;
opacity: 0.5;
display: inline-block !important;
}
span.utils .delete img {
margin: 14px;
}
.rename {
opacity: 0.5;
}
span.utils .delete:hover, .rename:hover {
opacity: 1;
display: block;
}
}
span.utils .delete,
.rename {
display: none;
.app-navigation-entry-utils {
.delete,
.rename {
display: none;
}
}
#usersearchform {

View File

@ -227,7 +227,7 @@ GroupList = {
},
isAddGroupButtonVisible: function () {
return $('#newgroup-init').is(":visible");
return !$('#newgroup-entry').hasClass('editing');
},
toggleAddGroup: function (event) {
@ -235,14 +235,12 @@ GroupList = {
if (event) {
event.stopPropagation();
}
$('#newgroup-form').show();
$('#newgroup-init').hide();
$('#newgroupname').focus();
$('#newgroup-entry').addClass('editing');
$('#newgroupname').select();
GroupList.handleAddGroupInput('');
}
else {
$('#newgroup-form').hide();
$('#newgroup-init').show();
$('#newgroup-entry').removeClass('editing');
$('#newgroupname').val('');
}
},
@ -299,7 +297,7 @@ GroupList = {
}
// Call function for handling delete/undo
GroupDeleteHandler.mark(GroupList.getElementGID(this));
GroupDeleteHandler.mark(GroupList.getElementGID($(this).parent()));
};
$userGroupList.on('click', '.delete', deleteAction);
@ -340,7 +338,6 @@ $(document).ready( function () {
}
// Display or hide of Create Group List Element
$('#newgroup-form').hide();
$('#newgroup-init').on('click', function (e) {
GroupList.toggleAddGroup(e);
});

View File

@ -1,18 +1,16 @@
<ul id="usergrouplist" data-sort-groups="<?php p($_['sortGroups']); ?>">
<!-- Add new group -->
<?php if ($_['isAdmin']) { ?>
<li id="newgroup-init">
<a href="#">
<span><?php p($l->t('Add group'))?></span>
</a>
<li id="newgroup-entry">
<a href="#" class="icon-add" id="newgroup-init"><?php p($l->t('Add group'))?></a>
<div class="app-navigation-entry-edit" id="newgroup-form">
<form>
<input type="text" id="newgroupname" placeholder="<?php p($l->t('Add group'))?>">
<input type="submit" value="" class="icon-checkmark">
</form>
</div>
</li>
<?php } ?>
<li id="newgroup-form" style="display: none">
<form>
<input type="text" id="newgroupname" placeholder="<?php p($l->t('Group name')); ?> …" />
<input type="submit" class="button icon-add" value="" />
</form>
</li>
<!-- Everyone -->
<li id="everyonegroup" data-gid="_everyone" data-usercount="" class="isgroup">
<a href="#">
@ -20,20 +18,22 @@
<?php p($l->t('Everyone')); ?>
</span>
</a>
<span class="utils">
<span class="usercount" id="everyonecount">
</span>
</span>
<div class="app-navigation-entry-utils">
<ul>
<li class="usercount app-navigation-entry-utils-counter" id="everyonecount"></li>
</ul>
</div>
</li>
<!-- The Admin Group -->
<?php foreach($_["adminGroup"] as $adminGroup): ?>
<li data-gid="admin" data-usercount="<?php if($adminGroup['usercount'] > 0) { p($adminGroup['usercount']); } ?>" class="isgroup">
<a href="#"><span class="groupname"><?php p($l->t('Admins')); ?></span></a>
<span class="utils">
<span class="usercount"><?php if($adminGroup['usercount'] > 0) { p($adminGroup['usercount']); } ?></span>
</span>
<div class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-counter"><?php if($adminGroup['usercount'] > 0) { p($adminGroup['usercount']); } ?></li>
</ul>
</div>
</li>
<?php endforeach; ?>
@ -41,9 +41,11 @@
<?php $disabledUsersGroup = $_["disabledUsersGroup"] ?>
<li data-gid="_disabledUsers" data-usercount="<?php if($disabledUsersGroup['usercount'] > 0) { p($disabledUsersGroup['usercount']); } ?>" class="isgroup">
<a href="#"><span class="groupname"><?php p($l->t('Disabled')); ?></span></a>
<span class="utils">
<span class="usercount"><?php if($disabledUsersGroup['usercount'] > 0) { p($disabledUsersGroup['usercount']); } ?></span>
</span>
<div class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-counter"><?php if($disabledUsersGroup['usercount'] > 0) { p($disabledUsersGroup['usercount']); } ?></li>
</ul>
</div>
</li>
<!--List of Groups-->
@ -52,14 +54,16 @@
<a href="#" class="dorename">
<span class="groupname"><?php p($group['name']); ?></span>
</a>
<span class="utils">
<span class="usercount"><?php if($group['usercount'] > 0) { p($group['usercount']); } ?></span>
<?php if($_['isAdmin']): ?>
<a href="#" class="action delete" original-title="<?php p($l->t('Delete'))?>">
<img src="<?php print_unescaped(image_path('core', 'actions/delete.svg')) ?>" />
</a>
<?php endif; ?>
</span>
<div class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-counter"><?php if($group['usercount'] > 0) { p($group['usercount']); } ?></li>
<?php if($_['isAdmin']): ?>
<li class="app-navigation-entry-utils-menu-button delete">
<button class="icon-delete"></button>
</li>
<?php endif; ?>
</ul>
</div>
</li>
<?php endforeach; ?>
</ul>