🚸 improves quick timer user experience

babybuddy/templates/babybuddy/nav-dropdown.html

@@ -26,14 +26,11 @@
             </div>
         </div>
 
+
         <div class="d-lg-none d-md-none d-flex ml-auto p-0 mr-2">
-            <form action="{% url 'core:timer-add-quick' %}" role="form" method="post" class="mr-2">
+
-                {% csrf_token %}
+            {% quick_timer_nav %}
-                <label class="sr-only">{% trans "Quick Start Timer" %}</label>
+
-                <button class="btn m-0 p-0 text-success">
-                    <i class="icon-2x icon-timer" aria-hidden="true"></i>
-                </button>
-            </form>
             <div class="dropdown show">
                 <a class="text-success"
                    href="#"
@@ -138,7 +135,7 @@
                                     {% trans "Note" %}
                                 </a>
                             {% endif %}
-                             
+
                         </div>
                     </li>
 
@@ -170,7 +167,7 @@
                             {% if perms.core.view_head_circumference %}
                                 <a class="dropdown-item{% if request.path == '/head-circumference/' %} active{% endif %}"
                                    href="{% url 'core:head-circumference-list' %}">
-                                    <i class="icon-head-circumference aria-hidden="true"></i>
+                                    <i class="icon-head-circumference" aria-hidden="true"></i>
                                     {% trans "Head Circumference" %}
                                 </a>
                             {% endif %}
@@ -350,4 +347,4 @@
                 {% endif %}
             </div>
     </nav>
-{% endblock %}
+{% endblock %}

core/templates/core/quick_timer_nav.html

@@ -0,0 +1,34 @@
+{% load i18n %}
+
+
+<form action="{% url 'core:timer-add-quick' %}" role="form" method="post" class="mr-2">
+    {% csrf_token %}
+    {% if children.count > 1 %}
+        <div class="dropdown show">
+            <a class="m-0 p-0 text-success"
+               title="{% trans "Quick Start Timer" %}"
+               href="#"
+               role="button"
+               id="quick-timer-menu-toggle"
+               data-toggle="dropdown"
+               aria-haspopup="true"
+               aria-expanded="false"><i class="icon-2x icon-timer" aria-hidden="true"></i>
+            </a>
+
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="quick-timer-menu-toggle">
+                <h6 class="dropdown-header">{% trans "Quick Start Timer For…" %}</h6>
+                {% for child in children %}
+                    <button class="dropdown-item d-flex align-items-center" type="submit" name="child" value="{{ child.pk }}">
+                        {% include "core/child_thumbnail.html" %}
+                        <span class="text-wrap ml-2">{{ child }}</span>
+                    </button>
+                {% endfor %}
+            </div>
+        </div>
+    {% else %}
+        <label class="sr-only">{% trans "Quick Start Timer" %}</label>
+        <button class="btn m-0 p-0 text-success">
+            <i class="icon-2x icon-timer" aria-hidden="true"></i>
+        </button>
+    {% endif %}
+</form>

core/templates/core/timer_nav.html

@@ -11,14 +11,6 @@
     </a>
     <div class="dropdown-menu" aria-labelledby="nav-timer-menu-link">
         {% if perms.core.add_timer %}
-            <div class="dropdown-item">
-                <form action="{% url 'core:timer-add-quick' %}" role="form" method="post" class="d-inline">
-                    {% csrf_token %}
-                    <button class="btn text-left p-0">
-                        <i class="icon-timer" aria-hidden="true"></i> {% trans "Quick Start Timer" %}
-                    </button>
-                </form>
-            </div>
             <a class="dropdown-item" href="{% url 'core:timer-add' %}">
                 <i class="icon-add" aria-hidden="true"></i> {% trans "Start Timer" %}
             </a>
@@ -28,7 +20,27 @@
                 <i class="icon-list" aria-hidden="true"></i> {% trans "View Timers" %}
             </a>
         {% endif %}
+        {% if perms.core.add_timer %}
+            <form action="{% url 'core:timer-add-quick' %}" role="form" method="post" class="d-inline">
+                {% csrf_token %}
+                {% if children.count > 1 %}
+                    <div class="dropdown-divider"></div>
+                    <h6 class="dropdown-header">{% trans "Quick Start Timer For…" %}</h6>
+                    {% for child in children %}
+                        <button class="dropdown-item d-flex align-items-center" type="submit" name="child" value="{{ child.pk }}">
+                            {% include "core/child_thumbnail.html" %}
+                            <span class="text-wrap ml-2">{{ child }}</span>
+                        </button>
+                    {% endfor %}
+                {% else %}
+                    <button class="dropdown-item" type="submit">
+                        <i class="icon-timer" aria-hidden="true"></i> {% trans "Quick Start Timer" %}
+                    </button>
+                {% endif %}
+            </form>
+        {% endif %}
         {% if timers %}
+            <div class="dropdown-divider"></div>
             <h6 class="dropdown-header">{% trans "Active Timers" %}</h6>
             {% for timer in timers %}
                 <a class="dropdown-item" href="{% url 'core:timer-detail' timer.id %}">
@@ -39,4 +51,4 @@
             {% endfor %}
         {% endif %}
     </div>
-</li>
+</li>

core/templatetags/timers.py

@@ -2,8 +2,7 @@
 from django import template
 from django.urls import reverse
 
-from core.models import Timer
+from core.models import Timer, Child
-
 
 register = template.Library()
 
@@ -18,9 +17,22 @@ def timer_nav(context, active=True):
     """
     request = context["request"] or None
     timers = Timer.objects.filter(active=active)
+    children = Child.objects.all()
     perms = context["perms"] or None
     # The 'next' parameter is currently not used.
-    return {"timers": timers, "perms": perms, "next": request.path}
+    return {
+        "timers": timers,
+        "children": children,
+        "perms": perms,
+        "next": request.path,
+    }
+
+
+@register.inclusion_tag("core/quick_timer_nav.html", takes_context=True)
+def quick_timer_nav(context):
+    children = Child.objects.all()
+    perms = context["perms"] or None
+    return {"children": children, "perms": perms}
 
 
 @register.simple_tag(takes_context=True)

core/views.py

@@ -448,8 +448,13 @@ class TimerAddQuick(PermissionRequiredMixin, RedirectView):
 
     def post(self, request, *args, **kwargs):
         instance = models.Timer.objects.create(user=request.user)
+        # Find child from child pk in POST
+        child_id = request.POST.get("child", False)
+        child = models.Child.objects.get(pk=child_id) if child_id else None
+        if child:
+            instance.child = child
         # Add child relationship if there is only Child instance.
-        if models.Child.count() == 1:
+        elif models.Child.count() == 1:
             instance.child = models.Child.objects.first()
         instance.save()
         self.url = request.GET.get(