jjsm01/kimai2
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

improved look and feel for toolbar in data tables

Browse Source 
added tool links to data tables
This commit is contained in:
Kevin Papst
2018-01-05 20:27:02 +01:00
parent a7bee68b0b
commit 6b9fed69f1
9 changed files with 214 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/Resources/views/default/_toolbar_form.html.twig
View File

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

34
app/Resources/views/macros/datatables.html.twig
View File

@@ -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">

11
app/Resources/views/macros/toolbar.html.twig
View File

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

68
src/TimesheetBundle/Resources/views/admin/activity.html.twig
View File

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

76
src/TimesheetBundle/Resources/views/admin/customer.html.twig
View File

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

68
src/TimesheetBundle/Resources/views/admin/project.html.twig
View File

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

86
src/TimesheetBundle/Resources/views/admin/timesheet.html.twig
View File

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

84
src/TimesheetBundle/Resources/views/timesheet/index.html.twig
View File

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

7
web/css/kimai.css
View File

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