diff --git a/core/css/styles.scss b/core/css/styles.scss
index 3b621d698624f513c8049b8fbf0a6f65e987d78e..d74840fe44472bb0c90fdb084cea0b342b215c79 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -249,6 +249,10 @@ body {
left: 0;
}
+#app-navigation * {
+ box-sizing: border-box;
+}
+
#controls {
.button, button {
box-sizing: border-box;
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index b6432c5a96e5af7b882116215dac4e06c5605c8a..b21f052a15fc814ac1d37efd7ca4651e1c715580 100644
--- a/settings/css/settings.scss
+++ b/settings/css/settings.scss
@@ -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;
- }
- .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;
- }
+ .delete,
.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 {
diff --git a/settings/js/users/groups.js b/settings/js/users/groups.js
index 073551c0d8eebaf1eb7eaf09bab4ac0df1ff48e7..522291a00d7822d64533cb8b72eb77bc600ff31b 100644
--- a/settings/js/users/groups.js
+++ b/settings/js/users/groups.js
@@ -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);
});
diff --git a/settings/templates/users/part.grouplist.php b/settings/templates/users/part.grouplist.php
index 5dfd7836f6a74ea831f64650ec2d46abe08adf13..469ed94adb3ee1c4ee3034a465cc7cbc48d7a0b4 100644
--- a/settings/templates/users/part.grouplist.php
+++ b/settings/templates/users/part.grouplist.php
@@ -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>