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

use modern flat form styles with more icons (#4098)

Browse Source
This commit is contained in:
Kevin Papst
2023-06-09 19:16:36 +02:00
committed by GitHub
parent 053a1d9017
commit ce7fe67fcc
10 changed files with 80 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/js/forms/KimaiDatePicker.js
View File

@@ -79,6 +79,12 @@ export default class KimaiDatePicker extends KimaiFormPlugin {
delete picker._wasPreselected;
}
});
// only if mobile.friendly plugin is activated
if (picker.backdrop !== undefined) {
// the node needs to be moved, so the flat form layout works properly (e.g. for date types)
document.body.appendChild(picker.backdrop);
}
},
}};

2
public/build/app.1adbc54f.js Normal file
View File

File diff suppressed because one or more lines are too long

0
public/build/app.79ed1fb4.js.LICENSE.txt → public/build/app.1adbc54f.js.LICENSE.txt
View File

2
public/build/app.79ed1fb4.js
View File

File diff suppressed because one or more lines are too long

4
public/build/entrypoints.json
View File

@@ -3,7 +3,7 @@
"app": {
"js": [
"/build/runtime.f0079159.js",
"/build/app.79ed1fb4.js"
"/build/app.1adbc54f.js"
],
"css": [
"/build/app.5710a463.css"
@@ -63,7 +63,7 @@
},
"integrity": {
"/build/runtime.f0079159.js": "sha384-H22sAW1aTvyIPqvHOvGXWSWTxf0y6mptp+MsVmyXCfjx/WJjBbhX9gbUZ+qIuihV",
"/build/app.79ed1fb4.js": "sha384-QQ83F5EDtEEzO9+/Sg8jAkxsM/GVnZmTdC/a7p83t4zxVU1VYPD2AKp21pcM1Lj1",
"/build/app.1adbc54f.js": "sha384-5uMKKT4bInjtdsb3E6rH70YcbOenw11LI3aLD/dNdMAkoIIa4Pqu20RC3Sq0oLeO",
"/build/app.5710a463.css": "sha384-kqam1K3HVJSgDgp3YsKvzA5VGQQB2USKq6UbuIHQvn9tshMribY5Axgg2ar7vTIR",
"/build/export-pdf.d367a32e.js": "sha384-Z5baqnzjI636nYFs4g63ViIKBZKRW4Jhv/7PQmTEQlqhfA7eK0vUMUtiyy0R5A9u",
"/build/export-pdf.d8a6c23b.css": "sha384-ztepocHE4rnGE9eKZ4kL6jTKaePUyiwiB9TjJjstjpf/ckcKg1HedrEOOk/8ElJg",

2
public/build/manifest.json
View File

@@ -1,6 +1,6 @@
{
"build/app.css": "/build/app.5710a463.css",
"build/app.js": "/build/app.79ed1fb4.js",
"build/app.js": "/build/app.1adbc54f.js",
"build/export-pdf.css": "/build/export-pdf.d8a6c23b.css",
"build/export-pdf.js": "/build/export-pdf.d367a32e.js",
"build/invoice.css": "/build/invoice.5bea118e.css",

5
src/Form/Extension/IconExtension.php
View File

@@ -35,13 +35,10 @@ final class IconExtension extends AbstractTypeExtension
$view->vars['icon'] = $options['icon'] ?? null;
}
/**
* @param OptionsResolver $resolver
*/
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefined(['icon']);
$resolver->setAllowedTypes('icon', 'string');
$resolver->setAllowedTypes('icon', ['string', 'null']);
$resolver->setDefault('icon', '');
}
}

1
src/Form/Type/DurationType.php
View File

@@ -32,6 +32,7 @@ final class DurationType extends AbstractType
'preset_minutes' => null,
'toggle' => false,
'max_hours' => 24,
'icon' => 'clock',
]);
}

1
src/Form/Type/QuickEntryTimesheetType.php
View File

@@ -32,6 +32,7 @@ final class QuickEntryTimesheetType extends AbstractType
'attr' => [
'placeholder' => '0:00',
],
'icon' => null,
];
$duration = $options['duration_minutes'];

99
templates/form/blocks.html.twig
View File

@@ -122,11 +122,12 @@
{% set format = locale_format('date') %}
{% set jsFormat = format|js_format %}
{% set attr = attr|merge({'pattern': format|pattern, 'autocomplete': 'off', 'data-datepicker': 'on', 'data-format': jsFormat, 'placeholder': jsFormat}) -%}
<div class="input-group">
<div class="input-group-text">
<div class="input-group input-group-flat">
<span class="input-group-text">
<a href="#" data-form-widget="date-now" data-format="{{ jsFormat }}" data-target="{{ id }}">{{ icon('calendar') }}</a>
</div>
</span>
{{- block('form_widget_simple') -}}
<div class="form-control"></div>
{% if not required %}
<span class="input-group-text">
<a href="#" class="link-secondary fs-5" onclick="document.getElementById('{{ id }}').value = ''">
@@ -141,14 +142,14 @@
{%- set format = locale_format('time') -%}
{%- set jsFormat = format|js_format -%}
{%- set attr = attr|merge({'pattern': format|pattern, 'autocomplete': 'off', 'data-timepicker': 'on', 'data-format': jsFormat, 'placeholder': jsFormat}) -%}
<div class="input-group">
<div class="input-group-text">
<div class="input-group input-group-flat">
<span class="input-group-text">
<a href="#" data-form-widget="date-now" data-format="{{ jsFormat }}" data-target="{{ id }}">{{ icon('calendar') }}</a>
</div>
</span>
{{ block('form_widget_simple') }}
{% set time_presets = form_time_presets(app.user.timezone, format) %}
{% if time_presets|length > 0 and form.vars.disabled is same as (false) %}
<button type="button" class="btn dropdown-toggle btn-duration-preset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<button type="button" class="input-group-text dropdown-toggle btn-duration-preset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-end pre-scrollable">
<div class="dropdown-menu-columns">
{% for index in [0, 1, 2, 3] %}
@@ -169,7 +170,7 @@
{% block daterange_widget %}
{% set format = locale_format('date')|js_format %}
{% set attr = attr|merge({'data-daterangepicker': 'on', 'autocomplete': 'off', 'data-format': format, 'placeholder': format ~ attr['data-separator'] ~ format}) -%}
<div class="input-group">
<div class="input-group input-group-flat">
{% if ranges is defined %}
<button type="button" class="btn dropdown-toggle btn-duration-preset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-start pre-scrollable">
@@ -185,9 +186,20 @@
{% block duration_widget %}
<div class="duration-widget">
{% if (form.vars.duration_presets is defined and form.vars.duration_presets is not empty) and (form.vars.disabled is same as (false)) %}
<div class="input-group">
<button type="button" class="btn dropdown-toggle btn-duration-preset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-start pre-scrollable">
<div class="input-group input-group-flat">
{% if form.vars.icon is not null %}
<span class="input-group-text">
{{ icon(form.vars.icon) }}
</span>
{% endif %}
{{ block('form_widget_simple') }}
{% if form.vars.toggle is defined and form.vars.toggle %}
<div class="input-group-text">
<a href="#" id="{{ form.vars.id }}_toggle" class="text-success">{{ icon('link') }}</a>
</div>
{% endif %}
<button type="button" class="input-group-text dropdown-toggle btn-duration-preset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu dropdown-menu-end pre-scrollable">
<div class="dropdown-menu-columns">
{% for index in [0, 1, 2, 3] %}
<div class="dropdown-menu-column" style="min-width: 4rem">
@@ -200,15 +212,18 @@
{% endfor %}
</div>
</div>
{{ block('form_widget_simple') }}
{% if form.vars.toggle is defined and form.vars.toggle %}
<div class="input-group-text add-on">
<a href="#" id="{{ form.vars.id }}_toggle" class="text-success">{{ icon('link') }}</a>
</div>
{% endif %}
</div>
{% else %}
{{ block('form_widget_simple') }}
{% if icon is not empty %}
<div class="input-group input-group-flat">
<span class="input-group-text">
<i class="{{ icon|icon(false, icon) }}"></i>
</span>
{{ block('form_widget_simple') }}
</div>
{% else %}
{{ block('form_widget_simple') }}
{% endif %}
{% endif %}
</div>
{% endblock duration_widget %}
@@ -230,10 +245,10 @@
{% block text_widget -%}
{% if icon is not empty %}
<div class="input-group">
<div class="input-group-text">
<div class="input-group input-group-flat">
<span class="input-group-text">
<i class="{{ icon|icon(false, icon) }}"></i>
</div>
</span>
{{ block('form_widget_simple') }}
</div>
{% else %}
@@ -242,20 +257,20 @@
{%- endblock text_widget %}
{% block mail_widget -%}
<div class="input-group">
<div class="input-group-text">
<div class="input-group input-group-flat">
<span class="input-group-text">
{{ icon('mail') }}
</div>
</span>
{{ block('email_widget') }}
</div>
{%- endblock mail_widget %}
{# user password fields, search for "secret" block_prefix #}
{% block secret_widget -%}
<div class="input-group">
<div class="input-group-text">
<div class="input-group input-group-flat">
<span class="input-group-text">
{{ icon('password') }}
</div>
</span>
{{ block('password_widget') }}
</div>
{%- endblock secret_widget %}
@@ -349,20 +364,38 @@
{# customer phone/fax, search for "phone" block_prefix #}
{% block phone_widget -%}
<div class="input-group">
<div class="input-group-text">
<div class="input-group input-group-flat">
<span class="input-group-text">
{{ icon(attr.icon ?? 'phone') }}
</div>
</span>
{{ block('tel_widget') }}
</div>
{%- endblock phone_widget %}
{% block money_widget -%}
{%- set prepend = not (money_pattern starts with '{{') -%}
{%- set append = not (money_pattern ends with '}}') -%}
{%- if prepend or append -%}
<div class="input-group input-group-flat">
{%- if prepend -%}
<span class="input-group-text">{{ money_pattern|form_encode_currency }}</span>
{%- endif -%}
{{- block('form_widget_simple') -}}
{%- if append -%}
<span class="input-group-text">{{ money_pattern|form_encode_currency }}</span>
{%- endif -%}
</div>
{%- else -%}
{{- block('form_widget_simple') -}}
{%- endif -%}
{%- endblock money_widget %}
{# customer homepage, search for "homepage" block_prefix #}
{% block homepage_widget -%}
<div class="input-group">
<div class="input-group-text">
<div class="input-group input-group-flat">
<span class="input-group-text">
https://
</div>
</span>
{{ block('url_widget') }}
</div>
{%- endblock homepage_widget %}