From 69f0f17f32d6e50d75e2e004a5b85db42f0de6e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
<skjnldsv@protonmail.com>
Date: Thu, 19 Oct 2017 10:29:48 +0200
Subject: [PATCH] Edit form to guidelines
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
settings/css/settings.scss | 41 ---------------------
settings/js/users/groups.js | 9 ++---
settings/templates/users/part.grouplist.php | 28 +++++++-------
3 files changed, 16 insertions(+), 62 deletions(-)
diff --git a/settings/css/settings.scss b/settings/css/settings.scss
index 4b571b24852..b21f052a15f 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,11 +430,6 @@ table.nostyle {
}
}
-.usercount {
- float: left;
- margin: 5px;
-}
-
li.active {
.delete,
.rename {
diff --git a/settings/js/users/groups.js b/settings/js/users/groups.js
index 073551c0d8e..4037ab4b893 100644
--- a/settings/js/users/groups.js
+++ b/settings/js/users/groups.js
@@ -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('');
}
},
@@ -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 865cc811e38..e68cb0b37ad 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,11 +18,11 @@
<?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 -->
--
GitLab