Fix groups selection widget on member form

[galette.git] / galette / templates / default / components / forms / groups.html.twig

diff --git a/galette/templates/default/components/forms/groups.html.twig b/galette/templates/default/components/forms/groups.html.twig
index 32896dc308e24686c27eaaaed4ab40201b3a1e45..6ed1424b9e37dacfab07c2870a87ac77a540eb75 100644 (file)
--- a/galette/templates/default/components/forms/groups.html.twig
+++ b/galette/templates/default/components/forms/groups.html.twig
@@ -1,16 +1,7 @@
 <div id="groups_field" class="field">
     <label>{{ _T("Groups:") }}</label>
-    {% if login.isGroupManager() %}
-    <a class="ui icon button" id="btngroups">
-        <i class="user tag icon" aria-hidden="true"></i>
-        {{ _T("Manage user's groups") }}
-    </a>
-    {% endif %}
-    {% if login.isAdmin() or login.isStaff() %}
-    <a class="ui icon button" id="btnmanagedgroups">
-        <i class="user shield icon" aria-hidden="true"></i>
-        {{ _T("Manage user's managed groups") }}
-    </a>
+    {% if login.isAdmin() or login.isStaff() or login.isGroupManager() %}
+    <noscript><div class="ui message">{{ _T("This feature requires javascript.") }}</div></noscript>
     {% endif %}
     <span id="usergroups_form">
     {% if member.id %}
@@ -23,37 +14,43 @@
     </span>
     {% if login.isAdmin() or login.isStaff() or login.isGroupManager() %}
     <span id="managedgroups_form">
-    {% if member.id %}
-        {% for group in groups %}
-            {% if member.isGroupManager(group.getName()) %}
-        <input type="hidden" name="groups_managed_adh[]" value="{{ group.getId() }}|{{ group.getName() }}"/>
-            {% endif %}
-        {% endfor %}
-    {% endif %}
+        {% if member.id %}
+            {% for group in groups %}
+                {% if member.isGroupManager(group.getName()) %}
+                <input type="hidden" name="groups_managed_adh[]" value="{{ group.getId() }}|{{ group.getName() }}"/>
+                {% endif %}
+            {% endfor %}
+        {% endif %}
     </span>
     {% endif %}
-    {% if login.isAdmin() or login.isStaff() or login.isGroupManager() %}<br/>{% endif %}
-    <span id="usergroups">
     {% if member.id %}
+    <div class="ui large labels">
         {% for group in groups %}
-            {% if member.isGroupMember(group.getName()) %}
-                {% if isnotfirst is defined %}, {% else %}<strong>{{ _T("Member of:") }}</strong>{% endif %}
-                {% set isnotfirst = true %}
-                {{ group.getName() }}
+            {% if member.isGroupMember(group.getName()) or member.isGroupManager(group.getName()) %}
+                {% if member.isGroupMember(group.getName()) %}
+                <span class="ui label member">
+                    <i class="ui tag icon tooltip" title="{{ _T("Member of group") }}" aria-hidden="true"></i>
+                {% endif %}
+                {% if member.isGroupManager(group.getName()) %}
+                <span class="ui label manager">
+                    <i class="ui shield icon tooltip" title="{{ _T("Group manager") }}" aria-hidden="true"></i>
+                {% endif %}
+                    {{ group.getName() }}
+                </span>
             {% endif %}
         {% endfor %}
+    </div>
     {% endif %}
-    </span>
-    {% if isnotfirst is defined %}<br/>{% endif %}
-    <span id="managedgroups">
-    {% if member.id %}
-        {% for group in groups %}
-            {% if member.isGroupManager(group.getName()) %}
-                {% if isnotfirstm is defined %}, {% else %}<strong>{{ _T("Manager for:") }}</strong>{% endif %}
-                {% set isnotfirstm = true %}
-                {{ group.getName() }}
-            {% endif %}
-        {% endfor %}
+    {% if login.isGroupManager() %}
+    <a class="jsonly disabled ui icon button" id="btngroups" tabindex="0">
+        <i class="user tag icon" aria-hidden="true"></i>
+        {{ _T("Manage user's groups") }}
+    </a>
+    {% endif %}
+    {% if login.isAdmin() or login.isStaff() %}
+    <a class="jsonly disabled ui icon button" id="btnmanagedgroups" tabindex="0">
+        <i class="user shield icon" aria-hidden="true"></i>
+        {{ _T("Manage user's managed groups") }}
+    </a>
     {% endif %}
-    </span>
 </div>