Support for themes and new design system. (HyphaApp#4543)

Implementing theme support with https://daisyui.com

Co-authored-by: Wes Appler <wes@opentech.fund>
Co-authored-by: Wes Appler <145372368+wes-otf@users.noreply.github.com>
Co-authored-by: sandeepsajan0 <sandeepsajan0@gmail.com>
Co-authored-by: Fredrik Jonsson <frjo@xdeb.org>

Author: 4 people

.gitignore

@@ -9,8 +9,8 @@
 __pycache__
 db.sqlite3
 media/
-static/
 tmp/
+/static/
 
 # Node
 node_modules/

.vscode/settings.json

@@ -12,5 +12,9 @@
     "svgwrite",
     "WAGTAILADMIN",
     "wagtailcore"
-  ]
+  ],
+  "html.format.templating": true,
+  "files.associations": {
+    "*.html": "django-html"
+  }
 }

docs/setup/administrators/machine-translations.md

@@ -23,14 +23,42 @@ This requirements file will specifically attempt to install the CPU version of [
 
 ## Installing languages
 
-Argostranslate handles translations via it's own packages - ie. Arabic -> English translation would be one package, while English -> Arabic would be another.
+Argostranslate handles translations via its own packages—e.g., Arabic → English translation is one package, while English → Arabic is another.
 
-Installing/uninstalling these packages can be done with the management commands `install_languages`/`uninstall_languages` respectively, utilizing the format of <from language code>_<to language code>. For example, installing the Arabic -> English & French -> English packages would look like:
+You can install/uninstall these packages using the management commands `install_languages` and `uninstall_languages`, respectively. The format for specifying a package is `<from language code>_<to language code>`. For example, to install the Arabic → English and French → English packages:
 
 ```bash
 python3 manage.py install_languages ar_en fr_en
 ```
 
+### Additional options
+
+The `install_languages` command supports several options for flexibility:
+
+- **Install all available packages:**
+  ```bash
+  python3 manage.py install_languages --all
+  ```
+  > ⚠️ This may install many packages and consume significant disk space.
+
+- **Interactively select packages:**
+  ```bash
+  python3 manage.py install_languages --select
+  ```
+  This will present a numbered list of available language packages for you to choose from.
+
+- **Skip confirmation prompts:**
+  ```bash
+  python3 manage.py install_languages ar_en --noinput
+  ```
+  This will install the specified packages without asking for confirmation.
+
+You can combine these options as needed. For example, to interactively select packages and skip confirmation:
+
+```bash
+python3 manage.py install_languages --select --noinput
+```
+
 ## Enabling on the system
 
 To enable machine translations on an instance, the proper configuration variables need to be set. These can be found in the [configuration options](configuration.md#hypha-custom-settings)

hypha/addressfield/static/address_form.js

@@ -26,7 +26,9 @@
   };
 
   function labelFor(field) {
-    return $('label[for="' + $(field).attr("id") + '"]');
+    var fieldId = $(field).attr("id");
+    var label = $('label[for="' + fieldId + '"]');
+    return label;
   }
 
   function makeFieldNotRequired(field) {
@@ -54,13 +56,11 @@
     oldValidate.call(this, field, config);
   };
 
-  var selectWrap = '<div class="form__select"></div>';
-
   // Hook into the select builder to update the display
   var oldConvertToSelect = $.fn.addressfield.convertToSelect;
   $.fn.addressfield.convertToSelect = function () {
     var $select = oldConvertToSelect.call(this);
-    $select.wrap(selectWrap);
+    $select.wrap('<div class="form__select"></div>');
     return $select;
   };
 
@@ -73,19 +73,21 @@
   };
 
   $(document).ready(function formReady() {
-    $(".form div.address").each(function () {
-      $(".form div#" + this.id).addressfield({
+    $(".form .address").each(function () {
+      var config = {
         json: "/static/addressfield.min.json",
         fields: {
-          country: ".country",
-          thoroughfare: ".thoroughfare",
-          premise: ".premise",
-          locality: ".locality",
-          localityname: ".localityname",
-          administrativearea: ".administrativearea",
-          postalcode: ".postalcode",
+          country: "[data-js-addressfield-name='country']",
+          thoroughfare: "[data-js-addressfield-name='thoroughfare']",
+          premise: "[data-js-addressfield-name='premise']",
+          locality: "[data-js-addressfield-name='locality']",
+          localityname: "[data-js-addressfield-name='localityname']",
+          administrativearea:
+            "[data-js-addressfield-name='administrativearea']",
+          postalcode: "[data-js-addressfield-name='postalcode'] ",
         },
-      });
+      };
+      $(".form div#" + this.id).addressfield(config);
     });
   });
 })(jQuery);

hypha/addressfield/templates/addressfield/widgets/nested_with_label.html

@@ -1,8 +1,8 @@
-<div {% include "django/forms/widgets/attrs.html" %}>{% spaceless %}
+<div {% include "django/forms/widgets/attrs.html" %}>
     {% for widget in widget.subwidgets %}
         {% if not widget.subwidgets %}
-            <div class="form__group">
-                <label class="form__question" for="{{ widget.attrs.id }}">{{ widget.attrs.display }}</label>
+            <div class="fieldset">
+                <label class="label" for="{{ widget.attrs.id }}">{{ widget.attrs.display }}</label>
         {% endif %}
 
         {% include widget.template_name %}
@@ -11,4 +11,4 @@
             </div>
         {% endif %}
     {% endfor %}
-{% endspaceless %}</div>
+</div>

hypha/addressfield/widgets.py

@@ -20,11 +20,11 @@ class KeepAttrsTextInput(KeepOwnAttrsWidget, forms.TextInput):
     pass
 
 
-def classify(field):
+def classify(field: str) -> str:
     return field.replace("_", "")
 
 
-def display(field):
+def display(field: str) -> str:
     return field.replace("_", " ").title()
 
 
@@ -36,6 +36,7 @@ def __init__(self, *args, **kwargs):
             widget(
                 attrs={
                     "class": classify(field),
+                    "data-js-addressfield-name": classify(field),
                     "required": False,
                     "display": display(field),
                 }
@@ -95,6 +96,6 @@ class Media:
 
     def __init__(self, *args, **kwargs):
         attrs = kwargs.get("attrs", {})
-        attrs["class"] = "address"
+        attrs["class"] = "address -mt-2"
         kwargs["attrs"] = attrs
         super().__init__(*args, **kwargs)

hypha/apply/activity/templates/activity/include/activity_list.html

@@ -1,9 +1,9 @@
 {% load i18n %}
 
-<div class="border-b-2 border-b-slate-300">
-    <section class="ml-4 max-w-3xl md:ml-20">
+<div class="border-b-2 border-b-base-300">
+    <section class="max-w-3xl ms-4 md:ms-20">
 
-        <div class="timeline">
+        <div class="h-timeline">
             {% for activity in activities %}
                 {% if activity.type == "comment" %}
                     {% include "activity/ui/activity-comment-item.html" with activity=activity %}
@@ -15,12 +15,12 @@
             {% if page.has_next %}
                 <a
                     href="{{ request.path }}?page={{ page.next_page_number }}"
-                    class="block py-2 text-sm text-slate-500 hover:text-slate-700"
+                    class="btn btn-sm"
                     hx-get="{{ request.path }}?page={{ page.next_page_number }}"
                     hx-trigger="intersect"
                     hx-target="this"
                     hx-swap="outerHTML transition:true"
-                    hx-select=".timeline"
+                    hx-select=".h-timeline"
                 >Show more...</a>
             {% endif %}
         </div>

hypha/apply/activity/templates/activity/notifications.html

@@ -2,39 +2,36 @@
 {% load i18n activity_tags heroicons %}
 {% block title %}{% trans "Notifications" %}{% endblock %}
 
-{% block content %}
-
-    {% adminbar %}
-        {% slot header %}{% trans "Notifications" %}{% endslot %}
-        {% slot sub_heading %}
-            {% if PROJECTS_ENABLED %}
-                {% trans "Activity feed across all applications and projects" %}
-            {% else %}
-                {% trans "Activity feed across all the applications" %}
-            {% endif %}
-        {% endslot %}
-
-        <form
-            class="[&>label]:sr-only text-black flex items-center justify-between gap-2"
-            method="get"
+{% block hero %}
+    <c-hero>
+        <c-hero.header
+            title="{% trans 'Notifications' %}"
+            subtitle="{% if PROJECTS_ENABLED %}{% trans 'Activity feed across all applications and projects' %}{% else %}{% trans 'Activity feed across all the applications' %}{% endif %}"
         >
-            {{ filter.form }}
-            <button class="button button--primary" type="submit" value="Filter">
-                {% trans "Filter" %}
-            </button>
-        </form>
-    {% endadminbar %}
+            <form
+                class="[&>label]:sr-only text-base-content flex items-center justify-between gap-2"
+                method="get"
+            >
+                {{ filter.form }}
+                <button class="btn btn-primary" type="submit" value="Filter">
+                    {% trans "Filter" %}
+                </button>
+            </form>
+        </c-hero.header>
+    </c-hero>
+{% endblock %}
 
-    <div class="wrapper wrapper--large wrapper--outer-space-medium">
-        <div class="border-b-2 border-b-slate-300">
+{% block content %}
+    <div class="my-4">
+        <div class="border-b-2 border-b-base-300">
             <section class="ml-4 max-w-3xl md:ml-20">
 
-                <div class="timeline">
+                <div class="h-timeline">
                     {% for activity in object_list %}
                         {% with activity|display_for:request.user as activity_text %}
-                            <div class="relative timeline-item" id="communications#{{ activity.id }}">
+                            <div class="relative h-timeline-item" id="communications#{{ activity.id }}">
                                 {% ifchanged activity.source.id %}
-                                    <div class="py-0.5 mt-4 bg-gray-100 ps-5 pe-2 border-s-2 border-slate-300">
+                                    <div class="py-0.5 mt-4 bg-base-200 ps-5 pe-2 border-s-2 border-slate-300">
                                         <span class="text-sm font-semibold text-fg-muted">{{ activity.source_content_type.name|source_type }}</span> <a href="{{ activity.source.get_absolute_url }}">{{ activity.source.fund_name }} #{{ activity.source.application_id }}: {{ activity.source.title|capfirst|truncatechars:50 }}</a>
                                     </div>
                                 {% endifchanged %}

hypha/apply/activity/templates/activity/partial_comment_message.html

@@ -12,17 +12,11 @@
     {% if attachments %}
         <div class="flex flex-wrap gap-2 pb-2 mt-4 max-w-xl min-w-40">
             {% for attachment in attachments %}
-                <a href="{{attachment.get_absolute_url }}"
-                   class="inline-flex items-center py-2 px-3 font-medium rounded-sm border transition-colors bg-slate-50 hover:bg-slate-200"
-                   target="_blank"
-                   rel="noopener noreferrer"
-                   title="{{ attachment.filename }}"
-                >
-                    <span class="text-sm truncate">
-                        {% heroicon_mini "paper-clip" class="inline align-text-bottom" aria_hidden=true %}
-                        {{ attachment.filename|truncatechars_middle:45 }}
-                    </span>
-                </a>
+                <c-card-attachment
+                    :href="attachment.get_absolute_url"
+                    :title="attachment.filename"
+                    :filename="attachment.filename"
+                />
             {% endfor %}
         </div>
     {% endif %}

hypha/apply/activity/templates/activity/ui/activity-action-item.html

@@ -1,12 +1,12 @@
 {% load i18n activity_tags heroicons %}
 
 {% with activity|display_for:request.user as activity_text %}
-    <div class="relative timeline-item" id="communications#{{ activity.id }}">
+    <div class="relative h-timeline-item" id="communications#{{ activity.id }}">
         <div
-            class="flex items-center py-2 -ml-3 before:block before:-z-10 before:absolute before:top-0 before:bottom-0 before:left-0 before:w-0.5 before:bg-slate-300"
+            class="flex items-center py-2 -ml-3 before:block before:absolute before:top-0 before:bottom-0 before:left-0 before:w-(--border) before:bg-base-300"
         >
-            <div class="inline-flex relative justify-center items-start me-2">
-                <div class="relative rounded-full inline-flex items-center justify-center border-white border-2 -ms-0.5 {% if activity.user.is_staff %}bg-slate-200 {% else %}bg-gray-200{% endif %}">
+            <div class="inline-flex relative justify-center items-start me-2 z-1">
+                <div class="inline-flex relative justify-center items-center rounded-full bg-base-100">
                     <div class="inline-flex justify-center items-center w-6 h-6 text-fg-muted">
                         {% if 'edit' in activity_text.lower %}
                             {% heroicon_micro "pencil-square" class="inline" aria_hidden=true size=14 %}
@@ -40,7 +40,7 @@
                 {% if not submission_title and activity|user_can_see_related:request.user %}
                     {% with url=activity.related_object.get_absolute_url %}
                         {% if url %}
-                            <a href="{{ url }}" class="font-semibold transition-opacity hover:opacity-70 ms-2">
+                            <a href="{{ url }}" class="link">
                                 {% trans "View" %}
                             </a>
                         {% endif %}