UI improvement (#1829)

* open "create new project/activity" form in modal
* re-use action translation for create action title
* do not pre-select first customer in list - fixes #1828
* sort user preferences in sections for better visual grouping
* show comment date only in hover of user avatar

templates/activity/details.html.twig

@@ -32,11 +32,11 @@
                     {{ activity.comment|comment2html(true) }}
                 </div>
             {% endif %}
-            <table class="table table-hover">
+            <table class="table table-hover dataTable">
                 {% if not activity.visible %}
                     <tr>
                         <th>{{ 'label.visible'|trans }}</th>
-                        <td>
+                        <td colspan="3">
                             {{ widgets.label_boolean(activity.visible) }}
                         </td>
                     </tr>
@@ -46,10 +46,11 @@
                         <th>{{ 'label.customer'|trans }}</th>
                         <td>
                             {{ widgets.label_customer(activity.project.customer) }}
-                            {% if activity.project.customer.teams|length == 0 %}
-                                {{ widgets.icon('unlocked') }}
-                            {% endif %}
-                            &nbsp;
+                        </td>
+                        <td class="w-min">
+                            {{ widgets.badge_team_access(activity.project.customer.teams) }}
+                        </td>
+                        <td class="actions">
                             {{ customerActions.customer(activity.project.customer, 'custom') }}
                         </td>
                     </tr>
@@ -57,10 +58,11 @@
                         <th>{{ 'label.project'|trans }}</th>
                         <td>
                             {{ widgets.label_project(activity.project) }}
-                            {% if activity.project.teams|length == 0 %}
-                                {{ widgets.icon('unlocked') }}
-                            {% endif %}
-                            &nbsp;
+                        </td>
+                        <td class="w-min">
+                            {{ widgets.badge_team_access(activity.project.teams) }}
+                        </td>
+                        <td class="actions">
                             {{ projectActions.project(activity.project, 'custom') }}
                         </td>
                     </tr>
@@ -68,7 +70,7 @@
                 {% for metaField in activity.visibleMetaFields %}
                     <tr>
                         <th>{{ metaField.label|trans }}</th>
-                        <td>{{ widgets.form_type_value(metaField.type, metaField.value, activity) }}</td>
+                        <td colspan="3">{{ widgets.form_type_value(metaField.type, metaField.value, activity) }}</td>
                     </tr>
                 {% endfor %}
             </table>

templates/activity/edit.html.twig

@@ -7,7 +7,7 @@
 {% block main %}
     {% set formEditTemplate = app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig' %}
     {% set formOptions = {
-        'title': activity.name|default('create'|trans),
+        'title': activity.name|default('create-activity'|trans({}, 'actions')),
         'form': form,
         'back': path('admin_activity')
     } %}

templates/customer/actions.html.twig

@@ -48,7 +48,7 @@
             {% set actions = actions|merge({'timesheet': path('admin_timesheet', {'customers[]': customer.id})}) %}
         {% endif %}
         {% if customer.visible and is_granted('create_project') %}
-            {% set actions = actions|merge({'create-project': path('admin_project_create_with_customer', {'customer': customer.id})}) %}
+            {% set actions = actions|merge({'create-project': {'url': path('admin_project_create_with_customer', {'customer': customer.id}), 'class': 'modal-ajax-form'}}) %}
         {% endif %}
         {% if view == 'index' and is_granted('delete', customer) %}
             {% set actions = actions|merge({'trash': {'url': path('admin_customer_delete', {'id': customer.id}), 'class': 'modal-ajax-form'}}) %}

templates/customer/details.html.twig

@@ -27,7 +27,7 @@
                     {{ customer.comment|comment2html(true) }}
                 </div>
             {% endif %}
-            <table class="table table-hover">
+            <table class="table table-hover dataTable">
                 {% if not customer.visible %}
                     <tr>
                         <th>{{ 'label.visible'|trans }}</th>

templates/embeds/comments.html.twig

@@ -13,7 +13,7 @@
         {% endif %}
         {% for comment in comments %}
             <div class="box-comment">
-                {{ widgets.user_avatar(comment.createdBy, false, 'img-sm') }}
+                {{ widgets.user_avatar(comment.createdBy, comment.createdAt|date_full, 'img-sm') }}
                 <div class="comment-text">
                     <span class="username">
                         {{ widgets.username(comment.createdBy) }}
@@ -26,7 +26,6 @@
                             {% if route_delete is not null %}
                                 <a href="{{ path(route_delete, {'id': comment.id}) }}" class="confirmation-link btn btn-default btn-xs" data-question="confirm.delete"><i class="{{ 'delete'|icon }}"></i></a>
                             {% endif %}
-                            <span class="hidden-xs">{{ comment.createdAt|date_full }}</span>
                         </span>
                     </span>
                     {{ comment.message|replace(replacer)|md2html }}

templates/project/actions.html.twig

@@ -46,7 +46,7 @@
             {% set actions = actions|merge({'timesheet': path('admin_timesheet', {'customers[]': project.customer.id, 'projects[]': project.id})}) %}
         {% endif %}
         {% if project.visible and project.customer.visible and is_granted('create_activity') %}
-            {% set actions = actions|merge({'create-activity': path('admin_activity_create_with_project', {'project': project.id})}) %}
+            {% set actions = actions|merge({'create-activity': {'url': path('admin_activity_create_with_project', {'project': project.id}), 'class': 'modal-ajax-form'}}) %}
         {% endif %}
         {% if (view == 'index' or view == 'custom') and is_granted('delete', project) %}
             {% set actions = actions|merge({'trash': {'url': path('admin_project_delete', {'id': project.id}), 'class': 'modal-ajax-form'}}) %}

templates/project/details.html.twig

@@ -27,11 +27,11 @@
                     {{ project.comment|comment2html(true) }}
                 </div>
             {% endif %}
-            <table class="table table-hover">
+            <table class="table table-hover dataTable">
                 {% if not project.visible %}
                     <tr>
                         <th>{{ 'label.visible'|trans }}</th>
-                        <td>
+                        <td colspan="3">
                             {{ widgets.label_boolean(project.visible) }}
                         </td>
                     </tr>
@@ -40,23 +40,24 @@
                     <th>{{ 'label.customer'|trans }}</th>
                     <td>
                         {{ widgets.label_customer(project.customer) }}
-                        {% if project.customer.teams|length == 0 %}
-                            {{ widgets.icon('unlocked') }}
-                        {% endif %}
-                        &nbsp;
+                    </td>
+                    <td class="w-min">
+                        {{ widgets.badge_team_access(project.customer.teams) }}
+                    </td>
+                    <td class="actions">
                         {{ customerActions.customer(project.customer, 'custom') }}
                     </td>
                 </tr>
                 {% if is_granted('details', project) %}
                     <tr>
                         <th>{{ 'label.orderNumber'|trans }}</th>
-                        <td>
+                        <td colspan="3">
                             {{ project.orderNumber }}
                         </td>
                     </tr>
                     <tr>
                         <th>{{ 'label.orderDate'|trans }}</th>
-                        <td>
+                        <td colspan="3">
                             {% if project.orderDate is not empty %}
                                 {{ project.orderDate|date_full }}
                             {% else %}
@@ -66,7 +67,7 @@
                     </tr>
                     <tr>
                         <th>{{ 'label.project_start'|trans }}</th>
-                        <td>
+                        <td colspan="3">
                             {% if project.start is not empty %}
                                 {{ project.start|date_full }}
                             {% else %}
@@ -76,7 +77,7 @@
                     </tr>
                     <tr>
                         <th>{{ 'label.project_end'|trans }}</th>
-                        <td>
+                        <td colspan="3">
                             {% if project.end is not empty %}
                                 {{ project.end|date_full }}
                             {% else %}
@@ -88,7 +89,7 @@
                 {% for metaField in project.visibleMetaFields %}
                     <tr>
                         <th>{{ metaField.label|trans }}</th>
-                        <td>{{ widgets.form_type_value(metaField.type, metaField.value, project) }}</td>
+                        <td colspan="3">{{ widgets.form_type_value(metaField.type, metaField.value, project) }}</td>
                     </tr>
                 {% endfor %}
             </table>

templates/project/edit.html.twig

@@ -7,7 +7,7 @@
 {% block main %}
     {% set formEditTemplate = app.request.xmlHttpRequest ? 'default/_form_modal.html.twig' : 'default/_form.html.twig' %}
     {% set formOptions = {
-        'title': project.name|default('create'|trans),
+        'title': project.name|default('create-project'|trans({}, 'actions')),
         'form': form,
         'back': path('admin_project')
     } %}

templates/user/form.html.twig

@@ -1,15 +1,20 @@
 {% extends 'user/layout.html.twig' %}
 
 {% block main %}
-
-    {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
-        {% block box_title %}{{ ('profile.' ~ tab)|trans }}{% endblock %}
-        {% block box_body %}
-            {{ form_start(form) }}
-            {{ form_widget(form) }}
-            <input type="submit" value="{{ 'action.save'|trans }}" class="btn btn-primary" />
-            {{ form_end(form) }}
-        {% endblock %}
-    {% endembed %}
+    {{ form_start(form) }}
+    {% for section, counter in sections %}
+        {% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
+            {% block box_body %}
+                {% for pref in form.children.preferences %}
+                    {% if pref.vars.data.section == section %}
+                        {{ form_row(pref) }}
+                    {% endif %}
+                {% endfor %}
+            {% endblock %}
+        {% endembed %}
+    {% endfor %}
+    {{ form_widget(form) }}
+    <input type="submit" value="{{ 'action.save'|trans }}" class="btn btn-primary" />
+    {{ form_end(form) }}
 
 {% endblock %}