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

assets/js/forms/KimaiDatePicker.js

@@ -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);
+                    }
                 },
             }};
 

public/build/entrypoints.json

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

public/build/manifest.json

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

src/Form/Extension/IconExtension.php

@@ -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', '');
     }
 }

src/Form/Type/DurationType.php

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

src/Form/Type/QuickEntryTimesheetType.php

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

templates/form/blocks.html.twig

@@ -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 input-group-flat">
-        <div class="input-group-text">
+        <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 input-group-flat">
-        <div class="input-group-text">
+        <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">
+            <div class="input-group input-group-flat">
-                <button type="button" class="btn dropdown-toggle btn-duration-preset" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                {% if form.vars.icon is not null %}
-                <div class="dropdown-menu dropdown-menu-start pre-scrollable">
+                <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 input-group-flat">
-            <div class="input-group-text">
+            <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 input-group-flat">
-        <div class="input-group-text">
+        <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 input-group-flat">
-        <div class="input-group-text">
+        <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 input-group-flat">
-        <div class="input-group-text">
+        <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 input-group-flat">
-        <div class="input-group-text">
+        <span class="input-group-text">
             https://
-        </div>
+        </span>
         {{ block('url_widget') }}
     </div>
 {%- endblock homepage_widget %}