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

Filter in hidden toolbar - improved mobile #151 (#155)

Browse Source 
* improved toolbar: hide data table form in collapsible + filter button
* added collapsible area for toolbar form #151
This commit is contained in:
Kevin Papst
2018-06-05 21:49:13 +02:00
committed by GitHub
parent 7206d064a5
commit 451cf4cd1d
22 changed files with 87 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
assets/css/kimai.scss
View File

@@ -81,14 +81,13 @@ li.open .ticktac i.running{
/* ================================ TOOLBAR ================================ */ /* ================================ TOOLBAR ================================ */
@media (max-width: $screen-md-min) { /* Page based action buttons in the upper right corner of the content area */
.content-header > .breadcrumb { .content-header > .breadcrumb {
position: absolute; position: absolute;
float: right; float: right;
background: transparent; background: transparent;
}
} }
/* Right sidebar with additional tabs for personal settings and "About Kimai" section */
.control-sidebar { .control-sidebar {
select { select {
color: #000; color: #000;
@@ -99,30 +98,10 @@ li.open .ticktac i.running{
} }
} }
} }
/* The filter form available on most pages above the datatable */
.data_table .box-header>.box-tools { .toolbar form {
top: 3px; font-size: $font-size-base;
} }
.box-header .box-title.toolbar form {
font-size: 13px;
}
@media (min-width: $screen-sm-min) {
.toolbar form input,
.toolbar form select {
display: inline-block;
width: inherit;
}
}
.toolbar form .form-group {
display: inline;
}
.tools-left {
margin-right: 10px;
}
/* ================================ SIDEBAR ================================ */ /* ================================ SIDEBAR ================================ */
/* Used for the Sidebar UserPanel (which is deactivated right now) */ /* Used for the Sidebar UserPanel (which is deactivated right now) */

1
assets/css/vendor.scss
View File

@@ -5,3 +5,4 @@ $fa-font-path: "~font-awesome/fonts";
@import '~bootstrap-sass/assets/stylesheets/bootstrap'; @import '~bootstrap-sass/assets/stylesheets/bootstrap';
@import '~font-awesome/scss/font-awesome'; @import '~font-awesome/scss/font-awesome';
@import '~daterangepicker/daterangepicker.css'; @import '~daterangepicker/daterangepicker.css';
@import '~bootstrap-select/dist/css/bootstrap-select.min.css';

5
assets/js/app.js
View File

@@ -6,6 +6,11 @@ global.$ = global.jQuery = $;
require('jquery-ui'); require('jquery-ui');
require('bootstrap-sass'); require('bootstrap-sass');
require('jquery-slimscroll'); require('jquery-slimscroll');
require('bootstrap-select');
const Moment = require('moment');
global.moment = Moment;
require('daterangepicker');
const Moment = require('moment'); const Moment = require('moment');
global.moment = Moment; global.moment = Moment;

2
assets/js/toolbar.js
View File

@@ -6,6 +6,8 @@
*/ */
$(document).ready(function () { $(document).ready(function () {
//$('.navbar-form select').selectpicker({});
// DateRange - TODO improve me, so users can type without reloading in between // DateRange - TODO improve me, so users can type without reloading in between
$('.toolbar form input').change(function (event) { $('.toolbar form input').change(function (event) {
$('.toolbar form').submit(); $('.toolbar form').submit();

1
package.json
View File

@@ -9,6 +9,7 @@
"devDependencies": { "devDependencies": {
"@symfony/webpack-encore": "^0.20.1", "@symfony/webpack-encore": "^0.20.1",
"bootstrap-sass": "^3.3.7", "bootstrap-sass": "^3.3.7",
"bootstrap-select": "^1.13.1",
"daterangepicker": "^3.0.3", "daterangepicker": "^3.0.3",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"icheck": "^1.0.2", "icheck": "^1.0.2",

7
public/build/app.css
View File

File diff suppressed because one or more lines are too long

26
public/build/app.js
View File

File diff suppressed because one or more lines are too long

4
public/build/manifest.json
View File

@@ -1,6 +1,6 @@
{ {
"build/app.js": "/build/app.js?ce4b9c776d5d7f2b3282", "build/app.js": "/build/app.js?fab779303341628fc8bd",
"build/app.css": "/build/app.css?37c3ca7efa95dd916f5e63b1e0efdee8", "build/app.css": "/build/app.css?d149689fb08d5ae275df59d6cc85cca8",
"build/fonts/fontawesome-webfont.eot": "/build/fonts/fontawesome-webfont.eot?674f50d2", "build/fonts/fontawesome-webfont.eot": "/build/fonts/fontawesome-webfont.eot?674f50d2",
"build/images/boxed-bg.jpg": "/build/images/boxed-bg.jpg?7799dece", "build/images/boxed-bg.jpg": "/build/images/boxed-bg.jpg?7799dece",
"build/images/blue.png": "/build/images/blue.png?96f8a905", "build/images/blue.png": "/build/images/blue.png?96f8a905",

4
templates/admin/activity.html.twig
View File

@@ -4,7 +4,7 @@
{% block page_title %}{{ 'admin_activity.title'|trans }}{% endblock %} {% block page_title %}{{ 'admin_activity.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'admin_activity.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %} {% block page_subtitle %}{{ 'admin_activity.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'plus-square': path('admin_activity_create')}) }}{% endblock %} {% block page_actions %}{{ widgets.page_actions({'filter': '#collapseActivityAdmin', 'plus-square': path('admin_activity_create')}) }}{% endblock %}
{% block main %} {% block main %}
{% if entries.count == 0 %} {% if entries.count == 0 %}
@@ -18,7 +18,7 @@
'label.comment': 'hidden-xs', 'label.comment': 'hidden-xs',
'label.visible': 'hidden-xs', 'label.visible': 'hidden-xs',
'label.actions': '', 'label.actions': '',
}, toolbarForm) }} }, toolbarForm, 'collapseActivityAdmin') }}
{% for entry in entries %} {% for entry in entries %}
<tr> <tr>

4
templates/admin/customer.html.twig
View File

@@ -4,7 +4,7 @@
{% block page_title %}{{ 'admin_customer.title'|trans }}{% endblock %} {% block page_title %}{{ 'admin_customer.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'admin_customer.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %} {% block page_subtitle %}{{ 'admin_customer.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'plus-square': path('admin_customer_create')}) }}{% endblock %} {% block page_actions %}{{ widgets.page_actions({'filter': '#collapseCustomerAdmin', 'plus-square': path('admin_customer_create')}) }}{% endblock %}
{% block main %} {% block main %}
{% if entries.count == 0 %} {% if entries.count == 0 %}
@@ -20,7 +20,7 @@
'label.currency': 'hidden-xs', 'label.currency': 'hidden-xs',
'label.visible': 'hidden-xs', 'label.visible': 'hidden-xs',
'label.actions': '', 'label.actions': '',
}, toolbarForm) }} }, toolbarForm, 'collapseCustomerAdmin') }}
{% for entry in entries %} {% for entry in entries %}
<tr> <tr>

4
templates/admin/project.html.twig
View File

@@ -4,7 +4,7 @@
{% block page_title %}{{ 'admin_project.title'|trans }}{% endblock %} {% block page_title %}{{ 'admin_project.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'admin_project.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %} {% block page_subtitle %}{{ 'admin_project.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'plus-square': path('admin_project_create')}) }}{% endblock %} {% block page_actions %}{{ widgets.page_actions({'filter': '#collapseProjectAdmin', 'plus-square': path('admin_project_create')}) }}{% endblock %}
{% block main %} {% block main %}
{% if entries.count == 0 %} {% if entries.count == 0 %}
@@ -18,7 +18,7 @@
'label.budget': 'hidden-xs', 'label.budget': 'hidden-xs',
'label.visible': 'hidden-xs', 'label.visible': 'hidden-xs',
'label.actions': '', 'label.actions': '',
}, toolbarForm) }} }, toolbarForm, 'collapseProjectAdmin') }}
{% for entry in entries %} {% for entry in entries %}
<tr> <tr>

4
templates/admin/timesheet.html.twig
View File

@@ -4,7 +4,7 @@
{% block page_title %}{{ 'admin_timesheet.title'|trans }}{% endblock %} {% block page_title %}{{ 'admin_timesheet.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'admin_timesheet.subtitle'|trans }}{% endblock %} {% block page_subtitle %}{{ 'admin_timesheet.subtitle'|trans }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'plus-square': path('admin_timesheet_create')}) }}{% endblock %} {% block page_actions %}{{ widgets.page_actions({'filter': '#collapseTimesheetAdmin', 'plus-square': path('admin_timesheet_create')}) }}{% endblock %}
{% block main %} {% block main %}
{% if entries.count == 0 %} {% if entries.count == 0 %}
@@ -26,7 +26,7 @@
'label.actions': '', 'label.actions': '',
}) %} }) %}
{{ tables.data_table_header(columns, toolbarForm) }} {{ tables.data_table_header(columns, toolbarForm, 'collapseTimesheetAdmin') }}
{% for entry in entries %} {% for entry in entries %}
<tr> <tr>

4
templates/admin/user.html.twig
View File

@@ -4,7 +4,7 @@
{% block page_title %}{{ 'admin_user.title'|trans }}{% endblock %} {% block page_title %}{{ 'admin_user.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'admin_user.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %} {% block page_subtitle %}{{ 'admin_user.subtitle'|trans }} {{ 'subtitle.amount'|trans({'%count%': entries.count}) }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'plus-square': path('admin_user_create')}) }}{% endblock %} {% block page_actions %}{{ widgets.page_actions({'filter': '#collapseUserAdmin', 'plus-square': path('admin_user_create')}) }}{% endblock %}
{% block main %} {% block main %}
{% if entries.count == 0 %} {% if entries.count == 0 %}
@@ -20,7 +20,7 @@
'label.active': '', 'label.active': '',
'label.roles': '', 'label.roles': '',
'label.actions': '', 'label.actions': '',
}, toolbarForm) }} }, toolbarForm, 'collapseUserAdmin') }}
{% for entry in entries %} {% for entry in entries %}
<tr> <tr>

2
templates/form/toolbar-theme.html.twig
View File

@@ -23,3 +23,5 @@
})|raw }} })|raw }}
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{#% block form_label %}{% endblock %#}

4
templates/invoice/index.html.twig
View File

@@ -4,12 +4,12 @@
{% block page_title %}{{ 'invoice.title'|trans }}{% endblock %} {% block page_title %}{{ 'invoice.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'invoice.subtitle'|trans }}{% endblock %} {% block page_subtitle %}{{ 'invoice.subtitle'|trans }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'plus-square': path('admin_invoice_template_create'), 'list': path('admin_invoice_template')}) }}{% endblock %} {% block page_actions %}{{ widgets.page_actions({'filter': '#collapseInvoice', 'plus-square': path('admin_invoice_template_create'), 'list': path('admin_invoice_template')}) }}{% endblock %}
{% block main_content_class %}invoice{% endblock %} {% block main_content_class %}invoice{% endblock %}
{% block main_before %} {% block main_before %}
{{ macro.toolbar(form) }} {{ macro.toolbar(form, 'collapseInvoice', true) }}
{% endblock %} {% endblock %}
{% block main_after %} {% block main_after %}

6
templates/macros/datatables.html.twig
View File

@@ -1,9 +1,9 @@
{% macro data_table_header(entries, form, tools, toolsRight) %} {% macro data_table_header(entries, form, collapseClass) %}
<div class="box data_table"> <div class="box data_table">
{% if form or tools or toolsRight %} {% if form %}
{% import "macros/toolbar.html.twig" as macro %} {% import "macros/toolbar.html.twig" as macro %}
{{ macro.toolbar(form, tools, toolsRight) }} {{ macro.toolbar(form, collapseClass) }}
{% endif %} {% endif %}
<div class="box-body no-padding"> <div class="box-body no-padding">
<div class="dataTables_wrapper form-inline dt-bootstrap"> <div class="dataTables_wrapper form-inline dt-bootstrap">

32
templates/macros/toolbar.html.twig
View File

@@ -1,31 +1,11 @@
{% macro toolbar(form, tools, toolsRight) %} {% macro toolbar(form, collapsible, displayInitial) %}
<div class="box-header"> <div class="toolbar no-print">
{% if tools %} {% if collapsible %}<div class="collapse{% if displayInitial %} collapse.show in{% endif %}" id="{{ collapsible }}">{% endif %}
<div class="btn-group tools-left no-print">
{% for icon,url in tools %}
<a class="btn btn-default" href="{{ url }}"><i class="fa fa-{{ icon }}"></i></a>
{% endfor %}
</div>
{% endif %}
{% if form %}
<div class="box-title toolbar no-print">
{% form_theme form 'form/toolbar-theme.html.twig' %} {% form_theme form 'form/toolbar-theme.html.twig' %}
{{ form_start(form) }} {{ form_start(form, { 'attr': {'class': 'navbar-form navbar-left'}}) }}
{{ form_widget(form) }} {{ form_widget(form) }}
{{ form_end(form) }} {{ form_end(form) }}
</div> {% if collapsible %}</div>{% endif %}
{% endif %} </div>
{% if toolsRight %}
<div class="box-tools">
<div class="btn-group">
{% for icon,url in tools %}
<a class="btn btn-default" href="{{ url }}"><i class="fa fa-{{ icon }}"></i></a>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endmacro %} {% endmacro %}

2
templates/macros/widgets.html.twig
View File

@@ -4,7 +4,7 @@
<div class="box-tools"> <div class="box-tools">
<div class="btn-group"> <div class="btn-group">
{% for icon,url in tools %} {% for icon,url in tools %}
<a class="btn btn-default" href="{{ url }}"><i class="fa fa-{{ icon }}"></i></a> <a class="btn btn-default" href="{{ url }}"{% if '#collapse' in url %} data-toggle="collapse" {% endif %}><i class="fa fa-{{ icon }}"></i></a>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>

5
templates/timesheet/index.html.twig
View File

@@ -1,10 +1,11 @@
{% extends 'base.html.twig' %} {% extends 'base.html.twig' %}
{% import "macros/widgets.html.twig" as widgets %} {% import "macros/widgets.html.twig" as widgets %}
{% import "macros/datatables.html.twig" as tables %} {% import "macros/datatables.html.twig" as tables %}
{% import "macros/toolbar.html.twig" as toolbar %}
{% block page_title %}{{ 'timesheet.title'|trans }}{% endblock %} {% block page_title %}{{ 'timesheet.title'|trans }}{% endblock %}
{% block page_subtitle %}{{ 'timesheet.subtitle'|trans }}{% endblock %} {% block page_subtitle %}{{ 'timesheet.subtitle'|trans }}{% endblock %}
{% block page_actions %}{{ widgets.page_actions({'plus-square': path('timesheet_create')}) }}{% endblock %} {% block page_actions %}{{ widgets.page_actions({'filter': '#collapseTimesheet', 'plus-square': path('timesheet_create')}) }}{% endblock %}
{% block main %} {% block main %}
@@ -26,7 +27,7 @@
'label.actions': '', 'label.actions': '',
}) %} }) %}
{{ tables.data_table_header(columns, toolbarForm) }} {{ tables.data_table_header(columns, toolbarForm, 'collapseTimesheet') }}
{% for entry in entries %} {% for entry in entries %}
<tr> <tr>

14
translations/messages.de.xliff
View File

@@ -89,7 +89,7 @@
</trans-unit> </trans-unit>
<trans-unit id="menu.timesheet"> <trans-unit id="menu.timesheet">
<source>menu.timesheet</source> <source>menu.timesheet</source>
<target>Zeiterfassung</target> <target>Meine Zeiten</target>
</trans-unit> </trans-unit>
<trans-unit id="menu.invoice"> <trans-unit id="menu.invoice">
<source>menu.invoice</source> <source>menu.invoice</source>
@@ -97,7 +97,7 @@
</trans-unit> </trans-unit>
<trans-unit id="menu.admin_timesheet"> <trans-unit id="menu.admin_timesheet">
<source>menu.admin_timesheet</source> <source>menu.admin_timesheet</source>
<target>Mitarbeiter Zeiten</target> <target>Zeiterfassung</target>
</trans-unit> </trans-unit>
<trans-unit id="menu.admin_customer"> <trans-unit id="menu.admin_customer">
<source>menu.admin_customer</source> <source>menu.admin_customer</source>
@@ -249,7 +249,7 @@
</trans-unit> </trans-unit>
<trans-unit id="dashboard.you"> <trans-unit id="dashboard.you">
<source>dashboard.you</source> <source>dashboard.you</source>
<target>Deine Statistiken</target> <target>Meine Statistiken</target>
</trans-unit> </trans-unit>
<trans-unit id="dashboard.all"> <trans-unit id="dashboard.all">
<source>dashboard.all</source> <source>dashboard.all</source>
@@ -285,11 +285,11 @@
--> -->
<trans-unit id="timesheet.title"> <trans-unit id="timesheet.title">
<source>timesheet.title</source> <source>timesheet.title</source>
<target>Zeiterfassung</target> <target>Meine Zeiten</target>
</trans-unit> </trans-unit>
<trans-unit id="timesheet.subtitle"> <trans-unit id="timesheet.subtitle">
<source>timesheet.subtitle</source> <source>timesheet.subtitle</source>
<target>Verwalten Sie Ihre Zeiteinträge</target> <target>Verwalte meine Zeiteinträge</target>
</trans-unit> </trans-unit>
<trans-unit id="timesheet.edit"> <trans-unit id="timesheet.edit">
<source>timesheet.edit</source> <source>timesheet.edit</source>
@@ -313,7 +313,7 @@
</trans-unit> </trans-unit>
<trans-unit id="profile.subtitle"> <trans-unit id="profile.subtitle">
<source>profile.subtitle</source> <source>profile.subtitle</source>
<target>Verwalte Deine Einstellungen</target> <target>Verwalte meine Einstellungen</target>
</trans-unit> </trans-unit>
<trans-unit id="profile.about_me"> <trans-unit id="profile.about_me">
<source>profile.about_me</source> <source>profile.about_me</source>
@@ -377,7 +377,7 @@
--> -->
<trans-unit id="admin_timesheet.title"> <trans-unit id="admin_timesheet.title">
<source>admin_timesheet.title</source> <source>admin_timesheet.title</source>
<target>Mitarbeiter Zeiterfassung</target> <target>Zeiterfassung</target>
</trans-unit> </trans-unit>
<trans-unit id="admin_timesheet.subtitle"> <trans-unit id="admin_timesheet.subtitle">
<source>admin_timesheet.subtitle</source> <source>admin_timesheet.subtitle</source>

14
translations/messages.en.xliff
View File

@@ -89,7 +89,7 @@
</trans-unit> </trans-unit>
<trans-unit id="menu.timesheet"> <trans-unit id="menu.timesheet">
<source>menu.timesheet</source> <source>menu.timesheet</source>
<target>Timesheet</target> <target>My times</target>
</trans-unit> </trans-unit>
<trans-unit id="menu.invoice"> <trans-unit id="menu.invoice">
<source>menu.invoice</source> <source>menu.invoice</source>
@@ -97,7 +97,7 @@
</trans-unit> </trans-unit>
<trans-unit id="menu.admin_timesheet"> <trans-unit id="menu.admin_timesheet">
<source>menu.admin_timesheet</source> <source>menu.admin_timesheet</source>
<target>User timesheets</target> <target>Timesheets</target>
</trans-unit> </trans-unit>
<trans-unit id="menu.admin_customer"> <trans-unit id="menu.admin_customer">
<source>menu.admin_customer</source> <source>menu.admin_customer</source>
@@ -257,7 +257,7 @@
</trans-unit> </trans-unit>
<trans-unit id="dashboard.you"> <trans-unit id="dashboard.you">
<source>dashboard.you</source> <source>dashboard.you</source>
<target>Your statistics</target> <target>My statistics</target>
</trans-unit> </trans-unit>
<trans-unit id="dashboard.all"> <trans-unit id="dashboard.all">
<source>dashboard.all</source> <source>dashboard.all</source>
@@ -293,11 +293,11 @@
--> -->
<trans-unit id="timesheet.title"> <trans-unit id="timesheet.title">
<source>timesheet.title</source> <source>timesheet.title</source>
<target>Time-tracking</target> <target>My times</target>
</trans-unit> </trans-unit>
<trans-unit id="timesheet.subtitle"> <trans-unit id="timesheet.subtitle">
<source>timesheet.subtitle</source> <source>timesheet.subtitle</source>
<target>Administrate your time-recordings</target> <target>Administrate my time-recordings</target>
</trans-unit> </trans-unit>
<trans-unit id="timesheet.edit"> <trans-unit id="timesheet.edit">
<source>timesheet.edit</source> <source>timesheet.edit</source>
@@ -321,7 +321,7 @@
</trans-unit> </trans-unit>
<trans-unit id="profile.subtitle"> <trans-unit id="profile.subtitle">
<source>profile.subtitle</source> <source>profile.subtitle</source>
<target>Edit your settings</target> <target>Edit my settings</target>
</trans-unit> </trans-unit>
<trans-unit id="profile.about_me"> <trans-unit id="profile.about_me">
<source>profile.about_me</source> <source>profile.about_me</source>
@@ -385,7 +385,7 @@
--> -->
<trans-unit id="admin_timesheet.title"> <trans-unit id="admin_timesheet.title">
<source>admin_timesheet.title</source> <source>admin_timesheet.title</source>
<target>Staff timesheets</target> <target>Timesheets</target>
</trans-unit> </trans-unit>
<trans-unit id="admin_timesheet.subtitle"> <trans-unit id="admin_timesheet.subtitle">
<source>admin_timesheet.subtitle</source> <source>admin_timesheet.subtitle</source>

4
yarn.lock
View File

@@ -865,6 +865,10 @@ bootstrap-sass@^3.3.7:
version "3.3.7" version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498" resolved "https://registry.yarnpkg.com/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz#6596c7ab40f6637393323ab0bc80d064fc630498"
bootstrap-select@^1.13.1:
version "1.13.1"
resolved "https://registry.yarnpkg.com/bootstrap-select/-/bootstrap-select-1.13.1.tgz#f59c02926fb5ac6356b9d1cdbc5384c2f013d9ba"
brace-expansion@^1.1.7: brace-expansion@^1.1.7:
version "1.1.11" version "1.1.11"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"