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æ
GitHub
commit
e5b619d0a6
4 changed files with 49 additions and 106 deletions
|
|
@ -249,6 +249,10 @@ body {
|
|||
left: 0;
|
||||
}
|
||||
|
||||
#app-navigation * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#controls {
|
||||
.button, button {
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue