From 6b9fed69f1bf1e9b4fbe70ca5d5b1475028d0061 Mon Sep 17 00:00:00 2001
From: Kevin Papst <kpapst@gmx.net>
Date: Fri, 5 Jan 2018 20:27:02 +0100
Subject: [PATCH] improved look and feel for toolbar in data tables added tool
 links to data tables

---
 .../views/default/_toolbar_form.html.twig     |  9 --
 .../views/macros/datatables.html.twig         | 34 +++++---
 app/Resources/views/macros/toolbar.html.twig  | 11 ---
 .../Resources/views/admin/activity.html.twig  | 68 +++++++--------
 .../Resources/views/admin/customer.html.twig  | 76 ++++++++--------
 .../Resources/views/admin/project.html.twig   | 68 +++++++--------
 .../Resources/views/admin/timesheet.html.twig | 86 +++++++++----------
 .../Resources/views/timesheet/index.html.twig | 84 +++++++++---------
 web/css/kimai.css                             |  7 ++
 9 files changed, 214 insertions(+), 229 deletions(-)
 delete mode 100644 app/Resources/views/default/_toolbar_form.html.twig
 delete mode 100644 app/Resources/views/macros/toolbar.html.twig

diff --git a/app/Resources/views/default/_toolbar_form.html.twig b/app/Resources/views/default/_toolbar_form.html.twig
deleted file mode 100644
index ac43ff02..00000000
--- a/app/Resources/views/default/_toolbar_form.html.twig
+++ /dev/null
@@ -1,9 +0,0 @@
-{% import "macros/toolbar.html.twig" as toolbar %}
-
-{{ toolbar.start() }}
-    {{ form_start(form) }}
-        <div class="box-body">
-            {{ form_widget(form) }}
-        </div>
-    {{ form_end(form) }}
-{{ toolbar.end() }}
diff --git a/app/Resources/views/macros/datatables.html.twig b/app/Resources/views/macros/datatables.html.twig
index f21d6866..b2707641 100644
--- a/app/Resources/views/macros/datatables.html.twig
+++ b/app/Resources/views/macros/datatables.html.twig
@@ -1,20 +1,26 @@
 
-{% macro data_table_header(entries) %}
+{% macro data_table_header(entries, form, tools) %}
 <div class="box">
-    {#
-    <div class="box-header">
-        <h3 class="box-title"><a href="#" class="btn btn-primary">jkbkj</a></h3>
-        <div class="box-tools">
-            <ul class="pagination pagination-sm no-margin pull-right">
-                <li><a href="#">«</a></li>
-                <li><a href="#">1</a></li>
-                <li><a href="#">2</a></li>
-                <li><a href="#">3</a></li>
-                <li><a href="#">»</a></li>
-            </ul>
-        </div>
+    {% if form or tools %}
+    <div class="box-header with-border">
+        {% if form %}
+            <div class="box-title toolbar">
+                {{ form_start(form) }}
+                {{ form_widget(form) }}
+                {{ form_end(form) }}
+            </div>
+        {% endif %}
+        {% if tools %}
+            <div class="box-tools">
+                <div class="btn-group">
+                    {% for url,icon in tools  %}
+                        <a class="btn btn-default" href="{{ url }}"><i class="fa fa-{{ icon }}"></i></a>
+                    {% endfor %}
+                </div>
+            </div>
+        {% endif %}
     </div>
-    #}
+    {% endif %}
     <div class="box-body no-padding">
         <div class="dataTables_wrapper form-inline dt-bootstrap">
             <div class="row">
diff --git a/app/Resources/views/macros/toolbar.html.twig b/app/Resources/views/macros/toolbar.html.twig
deleted file mode 100644
index dc048bfd..00000000
--- a/app/Resources/views/macros/toolbar.html.twig
+++ /dev/null
@@ -1,11 +0,0 @@
-{% macro start(columns) %}
-<div class="box toolbar">
-    <div class="box-header">
-        <div class="row">
-{% endmacro %}
-
-{% macro end() %}
-        </div>
-    </div>
-</div>
-{% endmacro %}
diff --git a/src/TimesheetBundle/Resources/views/admin/activity.html.twig b/src/TimesheetBundle/Resources/views/admin/activity.html.twig
index be4723f1..51fe39e8 100644
--- a/src/TimesheetBundle/Resources/views/admin/activity.html.twig
+++ b/src/TimesheetBundle/Resources/views/admin/activity.html.twig
@@ -6,40 +6,40 @@
 {% block page_subtitle %}{{ 'admin_activity.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
 
 {% block main %}
-    {% if entries.count > 0 %}
-        {{ tables.data_table_header({
-            'label.id': 'hidden-xs',
-            'label.name': '',
-            'label.project': '',
-            'label.customer': '',
-            'label.comment': 'hidden-xs',
-            'label.visible': '',
-            'label.actions': '',
-        }) }}
-
-        {% for entry in entries %}
-            <tr>
-                <td class="hidden-xs">{{ entry.id }}</td>
-                <td>{{ entry.name }}</td>
-                <td>
-                    <a href="{{ path('admin_project_edit', {'id' : entry.project.id}) }}">{{ widgets.label_project(entry.project) }}</a>
-                </td>
-                <td>
-                    <a href="{{ path('admin_customer_edit', {'id' : entry.project.customer.id}) }}">{{ widgets.label_customer(entry.project.customer) }}</a>
-                </td>
-                <td class="hidden-xs">{{ entry.comment }}</td>
-                <td>{{ widgets.label_visible(entry.visible) }}</td>
-                <td>
-                    {{ widgets.button_group({
-                        'edit': path('admin_activity_edit', {'id': entry.id}),
-                        'trash': '#'
-                    }) }}
-                </td>
-            </tr>
-        {% endfor %}
-
-        {{ tables.data_table_footer(entries, 'admin_activity_paginated') }}
-    {% else %}
+    {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% endif %}
+
+    {{ tables.data_table_header({
+        'label.id': 'hidden-xs',
+        'label.name': '',
+        'label.project': '',
+        'label.customer': '',
+        'label.comment': 'hidden-xs',
+        'label.visible': '',
+        'label.actions': '',
+    }) }}
+
+    {% for entry in entries %}
+        <tr>
+            <td class="hidden-xs">{{ entry.id }}</td>
+            <td>{{ entry.name }}</td>
+            <td>
+                <a href="{{ path('admin_project_edit', {'id' : entry.project.id}) }}">{{ widgets.label_project(entry.project) }}</a>
+            </td>
+            <td>
+                <a href="{{ path('admin_customer_edit', {'id' : entry.project.customer.id}) }}">{{ widgets.label_customer(entry.project.customer) }}</a>
+            </td>
+            <td class="hidden-xs">{{ entry.comment }}</td>
+            <td>{{ widgets.label_visible(entry.visible) }}</td>
+            <td>
+                {{ widgets.button_group({
+                    'edit': path('admin_activity_edit', {'id': entry.id}),
+                    'trash': '#'
+                }) }}
+            </td>
+        </tr>
+    {% endfor %}
+
+    {{ tables.data_table_footer(entries, 'admin_activity_paginated') }}
 {% endblock %}
diff --git a/src/TimesheetBundle/Resources/views/admin/customer.html.twig b/src/TimesheetBundle/Resources/views/admin/customer.html.twig
index e39af36e..cd3d7acd 100644
--- a/src/TimesheetBundle/Resources/views/admin/customer.html.twig
+++ b/src/TimesheetBundle/Resources/views/admin/customer.html.twig
@@ -6,44 +6,44 @@
 {% block page_subtitle %}{{ 'admin_customer.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
 
 {% block main %}
-    {# Available fields: vat; contact; address; country; phone; fax; mobile; mail; homepage; timezone; #}
-
-    {% if entries.count > 0 %}
-        {{ tables.data_table_header({
-            'label.id': 'hidden-xs',
-            'label.name': '',
-            'label.project': '',
-            'label.comment': 'hidden-xs',
-            'label.country': 'hidden-xs',
-            'label.currency': 'hidden-xs',
-            'label.visible': '',
-            'label.actions': '',
-        }) }}
-
-        {% for entry in entries %}
-            <tr>
-                <td class="hidden-xs">{{ entry.id }}</td>
-                <td>{{ entry.name }} {% if entry.company is not empty %}({{ entry.company }}){% endif %}</td>
-                <td>
-                    {% for project in entry.projects %}
-                        <a href="{{ path('admin_project_edit', {'id' : project.id}) }}">{{ widgets.label_project(project) }}</a>
-                    {% endfor %}
-                </td>
-                <td class="hidden-xs">{{ entry.comment }}</td>
-                <td class="hidden-xs">{{ entry.country|country }}</td>
-                <td class="hidden-xs">{{ entry.currency }} {{ entry.currency|currency }}</td>
-                <td>{{ widgets.label_visible(entry.visible) }}</td>
-                <td>
-                    {{ widgets.button_group({
-                        'edit': path('admin_customer_edit', {'id': entry.id}),
-                        'trash': '#'
-                    }) }}
-                </td>
-            </tr>
-        {% endfor %}
-
-        {{ tables.data_table_footer(entries, 'admin_customer_paginated') }}
-    {% else %}
+    {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% endif %}
+
+    {# Available fields: vat; contact; address; country; phone; fax; mobile; mail; homepage; timezone; #}
+
+    {{ tables.data_table_header({
+        'label.id': 'hidden-xs',
+        'label.name': '',
+        'label.project': '',
+        'label.comment': 'hidden-xs',
+        'label.country': 'hidden-xs',
+        'label.currency': 'hidden-xs',
+        'label.visible': '',
+        'label.actions': '',
+    }) }}
+
+    {% for entry in entries %}
+        <tr>
+            <td class="hidden-xs">{{ entry.id }}</td>
+            <td>{{ entry.name }} {% if entry.company is not empty %}({{ entry.company }}){% endif %}</td>
+            <td>
+                {% for project in entry.projects %}
+                    <a href="{{ path('admin_project_edit', {'id' : project.id}) }}">{{ widgets.label_project(project) }}</a>
+                {% endfor %}
+            </td>
+            <td class="hidden-xs">{{ entry.comment }}</td>
+            <td class="hidden-xs">{{ entry.country|country }}</td>
+            <td class="hidden-xs">{{ entry.currency }} {{ entry.currency|currency }}</td>
+            <td>{{ widgets.label_visible(entry.visible) }}</td>
+            <td>
+                {{ widgets.button_group({
+                    'edit': path('admin_customer_edit', {'id': entry.id}),
+                    'trash': '#'
+                }) }}
+            </td>
+        </tr>
+    {% endfor %}
+
+    {{ tables.data_table_footer(entries, 'admin_customer_paginated') }}
 {% endblock %}
diff --git a/src/TimesheetBundle/Resources/views/admin/project.html.twig b/src/TimesheetBundle/Resources/views/admin/project.html.twig
index 25fd3088..ae6040a1 100644
--- a/src/TimesheetBundle/Resources/views/admin/project.html.twig
+++ b/src/TimesheetBundle/Resources/views/admin/project.html.twig
@@ -6,40 +6,40 @@
 {% block page_subtitle %}{{ 'admin_project.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
 
 {% block main %}
-    {% if entries.count > 0 %}
-        {{ tables.data_table_header({
-            'label.id': 'hidden-xs',
-            'label.name': '',
-            'label.customer': '',
-            'label.comment': 'hidden-xs hidden-sm',
-            'label.activity': 'hidden-xs hidden-sm',
-            'label.budget': 'hidden-xs',
-            'label.visible': '',
-            'label.actions': '',
-        }) }}
-
-        {% for entry in entries %}
-            <tr>
-                <td class="hidden-xs">{{ entry.id }}</td>
-                <td>{{ entry.name }}</td>
-                <td>
-                    <a href="{{ path('admin_customer_edit', {'id' : entry.customer.id}) }}">{{ widgets.label_customer(entry.customer) }}</a>
-                </td>
-                <td class="hidden-xs hidden-sm">{{ entry.comment }}</td>
-                <td class="hidden-xs hidden-sm">{{ widgets.badge_counter(entry.activities.count) }}</td>
-                <td class="hidden-xs">{{ entry.budget|money(entry.customer.currency) }}</td>
-                <td>{{ widgets.label_visible(entry.visible) }}</td>
-                <td>
-                    {{ widgets.button_group({
-                        'edit': path('admin_project_edit', {'id': entry.id}),
-                        'trash': '#'
-                    }) }}
-                </td>
-            </tr>
-        {% endfor %}
-
-        {{ tables.data_table_footer(entries, 'admin_project_paginated') }}
-    {% else %}
+    {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% endif %}
+
+    {{ tables.data_table_header({
+        'label.id': 'hidden-xs',
+        'label.name': '',
+        'label.customer': '',
+        'label.comment': 'hidden-xs hidden-sm',
+        'label.activity': 'hidden-xs hidden-sm',
+        'label.budget': 'hidden-xs',
+        'label.visible': '',
+        'label.actions': '',
+    }) }}
+
+    {% for entry in entries %}
+        <tr>
+            <td class="hidden-xs">{{ entry.id }}</td>
+            <td>{{ entry.name }}</td>
+            <td>
+                <a href="{{ path('admin_customer_edit', {'id' : entry.customer.id}) }}">{{ widgets.label_customer(entry.customer) }}</a>
+            </td>
+            <td class="hidden-xs hidden-sm">{{ entry.comment }}</td>
+            <td class="hidden-xs hidden-sm">{{ widgets.badge_counter(entry.activities.count) }}</td>
+            <td class="hidden-xs">{{ entry.budget|money(entry.customer.currency) }}</td>
+            <td>{{ widgets.label_visible(entry.visible) }}</td>
+            <td>
+                {{ widgets.button_group({
+                    'edit': path('admin_project_edit', {'id': entry.id}),
+                    'trash': '#'
+                }) }}
+            </td>
+        </tr>
+    {% endfor %}
+
+    {{ tables.data_table_footer(entries, 'admin_project_paginated') }}
 {% endblock %}
diff --git a/src/TimesheetBundle/Resources/views/admin/timesheet.html.twig b/src/TimesheetBundle/Resources/views/admin/timesheet.html.twig
index e6288ae8..71579a86 100644
--- a/src/TimesheetBundle/Resources/views/admin/timesheet.html.twig
+++ b/src/TimesheetBundle/Resources/views/admin/timesheet.html.twig
@@ -1,56 +1,52 @@
 {% extends 'base.html.twig' %}
 {% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as datatables %}
+{% import "macros/datatables.html.twig" as tables %}
 
 {% block page_title %}{{ 'admin_timesheet.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'admin_timesheet.subtitle'|trans }}{% endblock %}
 {% block javascript_imports %}<script src="{{ asset('js/timesheet.js') }}"></script>{% endblock %}
 
 {% block main %}
-    {% if toolbarForm %}
-        {{ include('default/_toolbar_form.html.twig', {'form': toolbarForm}) }}
-    {% endif %}
-
-    {% if entries.count > 0 %}
-        {{ datatables.data_table_header({
-            'label.date': '',
-            'label.starttime': 'hidden-xs',
-            'label.endtime': 'hidden-xs',
-            'label.duration': '',
-            'label.rate': '',
-            'label.username': 'hidden-xs',
-            'label.description': 'hidden-xs hidden-sm',
-            'label.actions': '',
-        }) }}
-
-        {% for entry in entries %}
-            <tr>
-                <td>{{ entry.begin|date(kimai_context.date_1) }}</td>
-                <td class="hidden-xs">{{ entry.begin|date("H:i") }}</td>
-                {% if entry.end %}
-                    <td class="hidden-xs">{{ entry.end|date("H:i") }}</td>
-                    <td>{{ entry.duration|duration }}</td>
-                    <td>{{ entry.rate|money(entry.activity.project.customer.currency) }}</td>
-                {% else %}
-                    <td class="hidden-xs">&dash;</td>
-                    <td>&dash;</td>
-                    <td>&dash;</td>
-                {% endif %}
-                <td class="hidden-xs"><a href="{{ path('profile'|route_alias, {'username' : entry.user.username}) }}">{{ entry.user.username }}</a></td>
-                <td class="hidden-xs hidden-sm">{{ entry.description }}</td>
-                <td>
-                    {% if entry.end %}
-                        {{ widgets.button_group({'edit': '#', 'trash': '#'}) }}
-                    {% else %}
-                        {{ widgets.button_group({'stop': path('admin_timesheet_stop', {'id' : entry.id}), 'edit': '#', 'trash': '#'}) }}
-                    {% endif %}
-
-                </td>
-            </tr>
-        {% endfor %}
-
-        {{ datatables.data_table_footer(entries, 'admin_timesheet_paginated') }}
-    {% else %}
+    {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% endif %}
+
+    {{ tables.data_table_header({
+        'label.date': '',
+        'label.starttime': 'hidden-xs',
+        'label.endtime': 'hidden-xs',
+        'label.duration': '',
+        'label.rate': '',
+        'label.username': 'hidden-xs',
+        'label.description': 'hidden-xs hidden-sm',
+        'label.actions': '',
+    }, toolbarForm) }}
+
+    {% for entry in entries %}
+        <tr>
+            <td>{{ entry.begin|date(kimai_context.date_1) }}</td>
+            <td class="hidden-xs">{{ entry.begin|date("H:i") }}</td>
+            {% if entry.end %}
+                <td class="hidden-xs">{{ entry.end|date("H:i") }}</td>
+                <td>{{ entry.duration|duration }}</td>
+                <td>{{ entry.rate|money(entry.activity.project.customer.currency) }}</td>
+            {% else %}
+                <td class="hidden-xs">&dash;</td>
+                <td>&dash;</td>
+                <td>&dash;</td>
+            {% endif %}
+            <td class="hidden-xs"><a href="{{ path('profile'|route_alias, {'username' : entry.user.username}) }}">{{ entry.user.username }}</a></td>
+            <td class="hidden-xs hidden-sm">{{ entry.description }}</td>
+            <td>
+                {% if entry.end %}
+                    {{ widgets.button_group({'edit': '#', 'trash': '#'}) }}
+                {% else %}
+                    {{ widgets.button_group({'stop': path('admin_timesheet_stop', {'id' : entry.id}), 'edit': '#', 'trash': '#'}) }}
+                {% endif %}
+
+            </td>
+        </tr>
+    {% endfor %}
+
+    {{ tables.data_table_footer(entries, 'admin_timesheet_paginated') }}
 {% endblock %}
diff --git a/src/TimesheetBundle/Resources/views/timesheet/index.html.twig b/src/TimesheetBundle/Resources/views/timesheet/index.html.twig
index 26b15d9f..f601a0c0 100644
--- a/src/TimesheetBundle/Resources/views/timesheet/index.html.twig
+++ b/src/TimesheetBundle/Resources/views/timesheet/index.html.twig
@@ -1,55 +1,51 @@
 {% extends 'base.html.twig' %}
 {% import "macros/widgets.html.twig" as widgets %}
-{% import "macros/datatables.html.twig" as datatables %}
+{% import "macros/datatables.html.twig" as tables %}
 
 {% block page_title %}{{ 'timesheet.title'|trans }}{% endblock %}
 {% block page_subtitle %}{{ 'timesheet.subtitle'|trans }}{% endblock %}
 {% block javascript_imports %}<script src="{{ asset('js/timesheet.js') }}"></script>{% endblock %}
 
 {% block main %}
-    {% if toolbarForm %}
-        {{ include('default/_toolbar_form.html.twig', {'form': toolbarForm}) }}
-    {% endif %}
-
-    {% if entries.count > 0 %}
-        {{ datatables.data_table_header({
-            'label.date': '',
-            'label.starttime': '',
-            'label.endtime': '',
-            'label.duration': 'hidden-xs',
-            'label.rate': 'hidden-xs',
-            'label.activity': 'hidden-xs hidden-sm',
-            'label.description': 'hidden-xs hidden-sm',
-            'label.actions': '',
-        }) }}
-
-        {% for entry in entries %}
-            <tr>
-                <td>{{ entry.begin|date(kimai_context.date_1) }}</td>
-                <td>{{ entry.begin|date("H:i") }}</td>
-                {% if entry.end %}
-                    <td>{{ entry.end|date("H:i") }}</td>
-                    <td class="hidden-xs">{{ entry.duration|duration }}</td>
-                    <td class="hidden-xs">{{ entry.rate|money(entry.activity.project.customer.currency) }}</td>
-                {% else %}
-                    <td>&dash;</td>
-                    <td class="hidden-xs"><i>{{ entry.duration|duration }}</i></td>
-                    <td class="hidden-xs">&dash;</td>
-                {% endif %}
-                <td class="hidden-xs hidden-sm">{{ entry.activity.name }}</td>
-                <td class="hidden-xs hidden-sm">{{ entry.description }}</td>
-                <td>
-                    {% if entry.end %}
-                        {{ widgets.button_group({'repeat': '#', 'edit': path('timesheet_edit', {'id' : entry.id, 'page': page}), 'trash': '#'}) }}
-                    {% else %}
-                        {{ widgets.button_group({'stop': path('timesheet_stop', {'id' : entry.id}), 'edit': path('timesheet_edit', {'id' : entry.id, 'page': page}), 'trash': '#'}) }}
-                    {% endif %}
-                </td>
-            </tr>
-        {% endfor %}
-
-        {{ datatables.data_table_footer(entries, 'timesheet_paginated') }}
-    {% else %}
+    {% if entries.count == 0 %}
         {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% endif %}
+
+    {{ tables.data_table_header({
+        'label.date': '',
+        'label.starttime': '',
+        'label.endtime': '',
+        'label.duration': 'hidden-xs',
+        'label.rate': 'hidden-xs',
+        'label.activity': 'hidden-xs hidden-sm',
+        'label.description': 'hidden-xs hidden-sm',
+        'label.actions': '',
+    }, toolbarForm) }}
+
+    {% for entry in entries %}
+        <tr>
+            <td>{{ entry.begin|date(kimai_context.date_1) }}</td>
+            <td>{{ entry.begin|date("H:i") }}</td>
+            {% if entry.end %}
+                <td>{{ entry.end|date("H:i") }}</td>
+                <td class="hidden-xs">{{ entry.duration|duration }}</td>
+                <td class="hidden-xs">{{ entry.rate|money(entry.activity.project.customer.currency) }}</td>
+            {% else %}
+                <td>&dash;</td>
+                <td class="hidden-xs"><i>{{ entry.duration|duration }}</i></td>
+                <td class="hidden-xs">&dash;</td>
+            {% endif %}
+            <td class="hidden-xs hidden-sm">{{ entry.activity.name }}</td>
+            <td class="hidden-xs hidden-sm">{{ entry.description }}</td>
+            <td>
+                {% if entry.end %}
+                    {{ widgets.button_group({'repeat': '#', 'edit': path('timesheet_edit', {'id' : entry.id, 'page': page}), 'trash': '#'}) }}
+                {% else %}
+                    {{ widgets.button_group({'stop': path('timesheet_stop', {'id' : entry.id}), 'edit': path('timesheet_edit', {'id' : entry.id, 'page': page}), 'trash': '#'}) }}
+                {% endif %}
+            </td>
+        </tr>
+    {% endfor %}
+
+    {{ tables.data_table_footer(entries, 'timesheet_paginated') }}
 {% endblock %}
diff --git a/web/css/kimai.css b/web/css/kimai.css
index a323c19e..6810e42c 100644
--- a/web/css/kimai.css
+++ b/web/css/kimai.css
@@ -33,6 +33,9 @@ li.open .ticktac i.running{
 
 /* ================================ TOOLBAR ================================ */
 
+.box-header .box-title.toolbar form {
+    font-size: 13px;
+}
 .toolbar form input,
 .toolbar form select {
     display: inline-block;
@@ -43,6 +46,10 @@ li.open .ticktac i.running{
     display: inline;
 }
 
+.box-header .toolbar form .form-control {
+    height: 25px;
+}
+
 /* ================================ SIDEBAR ================================ */
 
 /* Used for the Sidebar UserPanel (which is deactivated right now) */