triv: fix date and time field styles and js in inlines,added icons to… (#45)

* triv: fix date and time field styles and js in inlines,added icons to date and time fields

* triv: fix visibility of remove handler in inlines

* triv: added option to override default

Author: MartinCervenkaSB

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-smartbase-admin"
-version = "0.2.99"
+version = "0.2.100"
 description = ""
 authors = ["SmartBase <[email protected]>"]
 readme = "README.md"

src/django_smartbase_admin/admin/widgets.py

@@ -16,7 +16,7 @@
 from django.utils.formats import get_format
 from django.utils.http import urlencode
 from django.utils.safestring import mark_safe
-from django.utils.translation import gettext_lazy as _
+from django.utils.translation import gettext_lazy as _, get_language
 from django.views.generic.base import ContextMixin
 from filer.fields.file import AdminFileWidget as FilerAdminFileWidget
 from filer.fields.image import AdminImageWidget
@@ -32,6 +32,16 @@
 logger = logging.getLogger(__name__)
 
 
+def get_datetime_placeholder(lang=None):
+    lang = lang or get_language()
+    sb_admin_settings = getattr(settings, "SB_ADMIN_SETTINGS", {})
+    placeholder_setting = sb_admin_settings.get("DATETIME_PLACEHOLDER", {})
+    return placeholder_setting.get(
+        lang,
+        placeholder_setting.get("default", {"date": "mm.dd.yyyy", "time": "hh:mm"}),
+    )
+
+
 class SBAdminBaseWidget(ContextMixin):
     sb_admin_widget = True
 
@@ -184,6 +194,7 @@ def __init__(self, form_field=None, attrs=None):
             attrs={
                 "class": "input js-datepicker",
                 "data-sbadmin-datepicker": self.get_data(),
+                "placeholder": get_datetime_placeholder()["date"],
                 **(attrs or {}),
             },
         )
@@ -208,7 +219,13 @@ class SBAdminTimeWidget(SBAdminBaseWidget, forms.TimeInput):
 
     def __init__(self, form_field=None, attrs=None):
         super().__init__(
-            form_field, attrs={"class": "input js-timepicker", **(attrs or {})}
+            form_field,
+            attrs={
+                "class": "input js-timepicker",
+                "placeholder": get_datetime_placeholder()["time"],
+                "autocomplete": "do-not-autofill",
+                **(attrs or {}),
+            },
         )
 
 

src/django_smartbase_admin/static/sb_admin/build/tailwind_config_partials/spacing.js

@@ -35,6 +35,7 @@ const spacing = {
     '88': '5.5rem',
     '96': '6rem',
     '128': '8rem',
+    '136': '8.5rem',
     '160': '10rem',
     '192': '12rem',
     '224': '14rem',

src/django_smartbase_admin/static/sb_admin/sprites/sb_admin/Calendar.svg

@@ -651,6 +651,10 @@ span.flatpickr-weekday {
     @apply cursor-pointer;
 }
 
+.js-datepicker {
+    @apply min-w-136;
+}
+
 .js-timepicker {
-    @apply max-w-64;
+    @apply min-w-96 w-96;
 }

src/django_smartbase_admin/static/sb_admin/sprites/sb_admin/Time.svg

@@ -79,6 +79,26 @@
             .input-file-wrapper > .input-file {
                 @apply border-0;
             }
+            >.flex.gap-16 {
+                @apply h-full;
+                gap: 1px;
+            }
+            .time-wrapper {
+                @apply w-full;
+                &:before {
+                    content: '';
+                    @apply block absolute left-0 top-1/2 -translate-y-1/2;
+                    width: 1px;
+                    @apply h-40 bg-dark-200;
+                    z-index: 1;
+                }
+            }
+            .js-datepicker,
+            .js-timepicker,
+            .js-datepicker-range,
+            .js-datetimepicker {
+                @apply h-full;
+            }
         }
         &:last-child {
             >tr:last-child {
@@ -175,3 +195,8 @@ fieldset.module > header {
     }
 }
 
+.djn-remove-handler {
+    position: relative;
+    z-index: 1;
+}
+

src/django_smartbase_admin/static/sb_admin/src/css/_datepicker.css

@@ -17,8 +17,8 @@ export default class Datepicker {
         flatpickr.localize(this.getLocale(documentLocale))
         this.initWidgets()
 
-        document.addEventListener('formset:added', () => {
-            this.initWidgets()
+        document.addEventListener('formset:added', (e) => {
+            this.initWidgets(e.target)
         })
     }
 
@@ -158,7 +158,10 @@ export default class Datepicker {
         }
 
         Object.keys(datePickerSelector).forEach(selector => {
-            parentEl.querySelectorAll(selector).forEach(datePickerEl => {
+            parentEl.querySelectorAll(`${selector}:not([type="hidden"])`).forEach(datePickerEl => {
+                if(datePickerEl.closest('.djn-empty-form')){
+                    return
+                }
                 this.initFlatPickr(datePickerEl, datePickerSelector[selector])
             })
         })

src/django_smartbase_admin/static/sb_admin/src/css/_inlines.css

@@ -1,3 +1,10 @@
 {% include 'sb_admin/widgets/includes/field_label.html' %}
-{% include "sb_admin/widgets/input.html" %}
+<div class="relative inline-flex h-full">
+    {% include "sb_admin/widgets/input.html" %}
+    <label class="absolute right-10 top-0 bottom-0 h-full flex items-center pointer-events-none" for="{{ widget.attrs.id }}">
+        <svg class="w-20 h-20">
+            <use xlink:href="#Calendar"></use>
+        </svg>
+    </label>
+</div>
 {% include 'sb_admin/widgets/includes/help_text.html' %}