improved look and feel for toolbar in data tables

added tool links to data tables

app/Resources/views/default/_toolbar_form.html.twig

@@ -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() }}

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">
-    {#
+    {% if form or tools %}
-    <div class="box-header">
+    <div class="box-header with-border">
-        <h3 class="box-title"><a href="#" class="btn btn-primary">jkbkj</a></h3>
+        {% if form %}
+            <div class="box-title toolbar">
+                {{ form_start(form) }}
+                {{ form_widget(form) }}
+                {{ form_end(form) }}
+            </div>
+        {% endif %}
+        {% if tools %}
             <div class="box-tools">
-            <ul class="pagination pagination-sm no-margin pull-right">
+                <div class="btn-group">
-                <li><a href="#">«</a></li>
+                    {% for url,icon in tools  %}
-                <li><a href="#">1</a></li>
+                        <a class="btn btn-default" href="{{ url }}"><i class="fa fa-{{ icon }}"></i></a>
-                <li><a href="#">2</a></li>
+                    {% endfor %}
-                <li><a href="#">3</a></li>
-                <li><a href="#">»</a></li>
-            </ul>
                 </div>
             </div>
-    #}
+        {% endif %}
+    </div>
+    {% endif %}
     <div class="box-body no-padding">
         <div class="dataTables_wrapper form-inline dt-bootstrap">
             <div class="row">

app/Resources/views/macros/toolbar.html.twig

@@ -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 %}

src/TimesheetBundle/Resources/views/admin/activity.html.twig

@@ -6,7 +6,10 @@
 {% block page_subtitle %}{{ 'admin_activity.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
 
 {% block main %}
-    {% if entries.count > 0 %}
+    {% if entries.count == 0 %}
+        {{ widgets.callout('warning', 'error.no_entries_found') }}
+    {% endif %}
+
     {{ tables.data_table_header({
         'label.id': 'hidden-xs',
         'label.name': '',
@@ -39,7 +42,4 @@
     {% endfor %}
 
     {{ tables.data_table_footer(entries, 'admin_activity_paginated') }}
-    {% else %}
-        {{ widgets.callout('warning', 'error.no_entries_found') }}
-    {% endif %}
 {% endblock %}

src/TimesheetBundle/Resources/views/admin/customer.html.twig

@@ -6,9 +6,12 @@
 {% block page_subtitle %}{{ 'admin_customer.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
 
 {% block main %}
+    {% if entries.count == 0 %}
+        {{ widgets.callout('warning', 'error.no_entries_found') }}
+    {% endif %}
+
     {# 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': '',
@@ -43,7 +46,4 @@
     {% endfor %}
 
     {{ tables.data_table_footer(entries, 'admin_customer_paginated') }}
-    {% else %}
-        {{ widgets.callout('warning', 'error.no_entries_found') }}
-    {% endif %}
 {% endblock %}

src/TimesheetBundle/Resources/views/admin/project.html.twig

@@ -6,7 +6,10 @@
 {% block page_subtitle %}{{ 'admin_project.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
 
 {% block main %}
-    {% if entries.count > 0 %}
+    {% if entries.count == 0 %}
+        {{ widgets.callout('warning', 'error.no_entries_found') }}
+    {% endif %}
+
     {{ tables.data_table_header({
         'label.id': 'hidden-xs',
         'label.name': '',
@@ -39,7 +42,4 @@
     {% endfor %}
 
     {{ tables.data_table_footer(entries, 'admin_project_paginated') }}
-    {% else %}
-        {{ widgets.callout('warning', 'error.no_entries_found') }}
-    {% endif %}
 {% endblock %}

src/TimesheetBundle/Resources/views/admin/timesheet.html.twig

@@ -1,18 +1,17 @@
 {% 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 %}
+    {% if entries.count == 0 %}
-        {{ include('default/_toolbar_form.html.twig', {'form': toolbarForm}) }}
+        {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% endif %}
 
-    {% if entries.count > 0 %}
+    {{ tables.data_table_header({
-        {{ datatables.data_table_header({
         'label.date': '',
         'label.starttime': 'hidden-xs',
         'label.endtime': 'hidden-xs',
@@ -21,7 +20,7 @@
         'label.username': 'hidden-xs',
         'label.description': 'hidden-xs hidden-sm',
         'label.actions': '',
-        }) }}
+    }, toolbarForm) }}
 
     {% for entry in entries %}
         <tr>
@@ -49,8 +48,5 @@
         </tr>
     {% endfor %}
 
-        {{ datatables.data_table_footer(entries, 'admin_timesheet_paginated') }}
+    {{ tables.data_table_footer(entries, 'admin_timesheet_paginated') }}
-    {% else %}
-        {{ widgets.callout('warning', 'error.no_entries_found') }}
-    {% endif %}
 {% endblock %}

src/TimesheetBundle/Resources/views/timesheet/index.html.twig

@@ -1,18 +1,17 @@
 {% 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 %}
+    {% if entries.count == 0 %}
-        {{ include('default/_toolbar_form.html.twig', {'form': toolbarForm}) }}
+        {{ widgets.callout('warning', 'error.no_entries_found') }}
     {% endif %}
 
-    {% if entries.count > 0 %}
+    {{ tables.data_table_header({
-        {{ datatables.data_table_header({
         'label.date': '',
         'label.starttime': '',
         'label.endtime': '',
@@ -21,7 +20,7 @@
         'label.activity': 'hidden-xs hidden-sm',
         'label.description': 'hidden-xs hidden-sm',
         'label.actions': '',
-        }) }}
+    }, toolbarForm) }}
 
     {% for entry in entries %}
         <tr>
@@ -48,8 +47,5 @@
         </tr>
     {% endfor %}
 
-        {{ datatables.data_table_footer(entries, 'timesheet_paginated') }}
+    {{ tables.data_table_footer(entries, 'timesheet_paginated') }}
-    {% else %}
-        {{ widgets.callout('warning', 'error.no_entries_found') }}
-    {% endif %}
 {% endblock %}

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) */