Add color to language model

integreat_cms/cms/constants/language_color.py

@@ -0,0 +1,90 @@
+"""
+This module contains constants for Language model.
+"""
+
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from django.utils.translation import gettext_lazy as _
+
+from ..utils.translation_utils import gettext_many_lazy as __
+
+if TYPE_CHECKING:
+    from typing import Final
+
+    from django.utils.functional import Promise
+
+MELLOW_APRICOT: Final = "#FFBB78"
+FOREST_GREEN: Final = "#2CA02C"
+ROSE: Final = "#FF9896"
+TROPICAL_VIOLET: Final = "#C5B0D5"
+RED: Final = "#FF4500"
+ORANGE: Final = "#FFA500"
+DARK_BLUE: Final = "#17157D"
+GREEN_BLUE: Final = "#1F77B4"
+YELLOW: Final = "#FFD700"
+TEAL: Final = "#008080"
+ARCTIC: Final = "#9EDAE5"
+AZURE: Final = "#5894E3"
+PACIFIC_BLUE: Final = "#17BECF"
+ORANGE_RED: Final = "#FF6347"
+LIGHT_GREEN: Final = "#98DF8A"
+VIOLET: Final = "#9467BD"
+LIME: Final = "#ADFF2F"
+LAVENDER: Final = "#E377C2"
+BROWN: Final = "#8C564B"
+PINK_ORANGE: Final = "#FFA07A"
+PASTEL_PINK: Final = "#FFE4F0"
+KHAKI: Final = "#F0E68C"
+YELLOW_GREEN: Final = "#BCBD22"
+MAUVE: Final = "#800080"
+PURPLE: Final = "#BA55D3"
+PRIMROSE: Final = "#DBDB8D"
+FIORD: Final = "#4B5563"
+QUICKSAND: Final = "#C49C94"
+GREY: Final = "#7F7F7F"
+AQUA: Final = "#26FCFF"
+PINE_GREEN: Final = "#20B2AA"
+ALMOND: Final = "#FFDAB9"
+CHERRY: Final = "#D62728"
+
+TOTAL_ACCESS: Final = "#000000"
+WEB_APP_ACCESS: Final = "#FF00A8"
+OFFLINE_ACCESS: Final = "#0500FF"
+
+COLORS: Final[list[tuple[str, Promise]]] = [
+    (MELLOW_APRICOT, _("Mellow apricot")),
+    (FOREST_GREEN, _("Forest green")),
+    (ROSE, _("Rose")),
+    (TROPICAL_VIOLET, _("Tropical violet")),
+    (RED, _("Red")),
+    (ORANGE, _("Orange")),
+    (DARK_BLUE, _("Dark blue")),
+    (GREEN_BLUE, _("Green blue")),
+    (YELLOW, _("Yellow")),
+    (TEAL, _("Teal")),
+    (ARCTIC, _("Arctic")),
+    (AZURE, _("Azure")),
+    (PACIFIC_BLUE, _("Pacific blue")),
+    (ORANGE_RED, _("Orange red")),
+    (LIGHT_GREEN, _("Light green")),
+    (VIOLET, _("Violet")),
+    (LIME, _("Lime")),
+    (LAVENDER, _("Lavender")),
+    (BROWN, _("Brown")),
+    (PINK_ORANGE, _("Pink orange")),
+    (PASTEL_PINK, _("Pastel pink")),
+    (KHAKI, _("Khaki")),
+    (YELLOW_GREEN, _("Yellow green")),
+    (MAUVE, _("Mauve")),
+    (PURPLE, _("Purple")),
+    (PRIMROSE, _("Primrose")),
+    (FIORD, _("Fiord")),
+    (QUICKSAND, _("Quicksand")),
+    (GREY, _("Grey")),
+    (AQUA, _("Aqua")),
+    (PINE_GREEN, _("Pine green")),
+    (ALMOND, _("Almond")),
+    (CHERRY, _("Cherry")),
+]

integreat_cms/cms/fixtures/test_data.json

@@ -497,6 +497,7 @@
       "text_direction": "LEFT_TO_RIGHT",
       "primary_country_code": "de",
       "secondary_country_code": "",
+      "language_color": "#FF4500",
       "created_date": "2019-08-12T07:50:18.139Z",
       "last_updated": "2019-08-12T07:50:18.140Z",
       "table_of_contents": "Inhaltsverzeichnis",
@@ -516,6 +517,7 @@
       "english_name": "English",
       "text_direction": "LEFT_TO_RIGHT",
       "primary_country_code": "gb",
+      "language_color": "#17157D",
       "secondary_country_code": "us",
       "created_date": "2019-08-12T07:50:24.635Z",
       "last_updated": "2019-08-12T07:50:24.636Z",
@@ -537,6 +539,7 @@
       "text_direction": "RIGHT_TO_LEFT",
       "primary_country_code": "ab",
       "secondary_country_code": "",
+      "language_color": "#5894E3",
       "created_date": "2019-08-12T07:51:29.233Z",
       "last_updated": "2019-08-12T07:51:29.233Z",
       "table_of_contents": "محتويات",
@@ -557,6 +560,7 @@
       "text_direction": "RIGHT_TO_LEFT",
       "primary_country_code": "fs",
       "secondary_country_code": "",
+      "language_color": "#7F7F7F",
       "created_date": "2019-08-12T07:52:21.399Z",
       "last_updated": "2019-08-12T07:52:21.400Z",
       "table_of_contents": "محتویات",
@@ -575,6 +579,7 @@
       "native_name": "Español",
       "english_name": "Spanish",
       "text_direction": "LEFT_TO_RIGHT",
+      "language_color": "#FFE4F0",
       "primary_country_code": "es",
       "secondary_country_code": "",
       "created_date": "2019-08-12T07:52:21.399Z",
@@ -597,6 +602,7 @@
       "text_direction": "LEFT_TO_RIGHT",
       "primary_country_code": "de",
       "secondary_country_code": "",
+      "language_color": "#FFA500",
       "created_date": "2022-09-13T16:33:38.750Z",
       "last_updated": "2022-09-13T16:48:51.807Z",
       "table_of_contents": "Inhaltsverzeichnis",
@@ -619,6 +625,7 @@
       "secondary_country_code": "",
       "created_date": "2022-11-30T09:16:00Z",
       "last_updated": "2022-11-30T09:16:00Z",
+      "language_color": "#98DF8A",
       "table_of_contents": "Table of Contents",
       "social_media_webapp_title": "Integreat",
       "social_media_webapp_description": "",
@@ -637,6 +644,7 @@
       "text_direction": "LEFT_TO_RIGHT",
       "primary_country_code": "et",
       "secondary_country_code": "",
+      "language_color": "#2CA02C",
       "created_date": "2022-09-13T16:33:38.750Z",
       "last_updated": "2022-09-13T16:48:51.807Z",
       "table_of_contents": "ዝርዝር ሁኔታ",
@@ -657,6 +665,7 @@
       "text_direction": "LEFT_TO_RIGHT",
       "primary_country_code": "ua",
       "secondary_country_code": "",
+      "language_color": "#20B2AA",
       "created_date": "2022-09-13T16:33:38.750Z",
       "last_updated": "2022-09-13T16:48:51.807Z",
       "table_of_contents": "Зміст",
@@ -677,6 +686,7 @@
       "text_direction": "LEFT_TO_RIGHT",
       "primary_country_code": "gr",
       "secondary_country_code": "",
+      "language_color": "#FFD700",
       "created_date": "2022-09-13T16:33:38.750Z",
       "last_updated": "2022-09-13T16:48:51.807Z",
       "table_of_contents": "Πίνακας περιεχομένων",

integreat_cms/cms/forms/languages/language_form.py

@@ -2,6 +2,7 @@
 
 from typing import TYPE_CHECKING
 
+from ...constants import language_color
 from ...models import Language
 from ..custom_model_form import CustomModelForm
 
@@ -34,6 +35,7 @@ class Meta:
             "social_media_webapp_description",
             "primary_country_code",
             "secondary_country_code",
+            "language_color",
             "message_content_not_available",
             "message_partial_live_content_not_available",
         ]
@@ -56,6 +58,26 @@ def __init__(self, *args: Any, **kwargs: Any) -> None:
         self.fields["primary_country_code"].choices = sorted_language_choices
         self.fields["secondary_country_code"].choices = sorted_language_choices
 
+        # Make the language color field required
+        self.fields["language_color"].required = True
+
+        # Show unused colors first in the list, after them used colors with the assigned language name
+        used_colors = []
+        unused_colors = []
+        for color in language_color.COLORS:
+            color_code, name = color
+            if language := Language.objects.filter(language_color=color_code).first():
+                modified_name = name + " (" + language.translated_name + ")"
+                used_colors += [(color_code, modified_name)]
+            else:
+                unused_colors += [color]
+        used_colors = sorted(used_colors, key=lambda x: x[1])
+        unused_colors = sorted(unused_colors, key=lambda x: x[1])
+        self.fields["language_color"].choices = unused_colors + used_colors
+
+        if self.instance.language_color:
+            self.fields["language_color"].initial = self.instance.language_color
+
         # Make left border rounded if no flag is selected yet
         if not self.instance.primary_country_code:
             self.fields["primary_country_code"].widget.attrs[
@@ -65,3 +87,5 @@ def __init__(self, *args: Any, **kwargs: Any) -> None:
             self.fields["secondary_country_code"].widget.attrs[
                 "class"
             ] = "rounded-l border-l"
+        if not self.instance.language_color:
+            self.fields["language_color"].widget.attrs["class"] = "rounded-l border-l"

integreat_cms/cms/migrations/0093_add_language_color.py

@@ -0,0 +1,61 @@
+# Generated by Django 4.2.10 on 2024-04-03 08:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    """
+    Migration file to add color field to language model
+    """
+
+    dependencies = [
+        ("cms", "0092_social_media_fields"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="language",
+            name="language_color",
+            field=models.CharField(
+                blank=False,
+                choices=[
+                    ("#FFBB78", "Mellow apricot"),
+                    ("#2CA02C", "Forest green"),
+                    ("#FF9896", "Rose"),
+                    ("#C5B0D5", "Tropical violet"),
+                    ("#FF4500", "Red"),
+                    ("#FFA500", "Orange"),
+                    ("#17157D", "Dark blue"),
+                    ("#1F77B4", "Green blue"),
+                    ("#FFD700", "Yellow"),
+                    ("#008080", "Teal"),
+                    ("#9EDAE5", "Arctic"),
+                    ("#5894E3", "Azure"),
+                    ("#17BECF", "Pacific blue"),
+                    ("#FF6347", "Orange red"),
+                    ("#98DF8A", "Light green"),
+                    ("#9467BD", "Violet"),
+                    ("#ADFF2F", "Lime"),
+                    ("#E377C2", "Lavender"),
+                    ("#8C564B", "Brown"),
+                    ("#FFA07A", "Pink orange"),
+                    ("#FFE4F0", "Pastel pink"),
+                    ("#F0E68C", "Khaki"),
+                    ("#BCBD22", "Yellow green"),
+                    ("#800080", "Mauve"),
+                    ("#BA55D3", "Purple"),
+                    ("#DBDB8D", "Primrose"),
+                    ("#4B5563", "Fiord"),
+                    ("#C49C94", "Quicksand"),
+                    ("#7F7F7F", "Grey"),
+                    ("#26FCFF", "Aqua"),
+                    ("#20B2AA", "Pine green"),
+                    ("#FFDAB9", "Almond"),
+                    ("#D62728", "Cherry"),
+                ],
+                help_text="This color is used to represent the color label of the chosen language",
+                max_length=7,
+                verbose_name="language color",
+            ),
+        ),
+    ]

integreat_cms/cms/models/languages/language.py

@@ -16,7 +16,7 @@
 from django.utils.translation import gettext
 from django.utils.translation import gettext_lazy as _
 
-from ...constants import countries, text_directions
+from ...constants import countries, language_color, text_directions
 from ...utils.translation_utils import gettext_many_lazy as __
 from ..abstract_base_model import AbstractBaseModel
 from ..regions.region import Region
@@ -92,6 +92,16 @@ class Language(AbstractBaseModel):
             _("This flag is used in the language switcher."),
         ),
     )
+    #: Manage choices in :mod:`~integreat_cms.cms.constants.language_color`
+    language_color = models.CharField(
+        choices=language_color.COLORS,
+        max_length=7,
+        verbose_name=_("language color"),
+        blank=False,
+        help_text=_(
+            "This color is used to represent the color label of the chosen language"
+        ),
+    )
     created_date = models.DateTimeField(
         default=timezone.now,
         verbose_name=_("creation date"),

integreat_cms/cms/templates/languages/language_form.html

@@ -195,6 +195,21 @@ <h3 class="font-bold text-black">
                             <div class="mb-2 text-s text-gray-600">
                                 {{ form.secondary_country_code.help_text }}
                             </div>
+                            <label for="{{ form.language_color.id_for_label }}" class="block mb-2">
+                                {{ form.language_color.label }}
+                            </label>
+                            <div class="flex my-2">
+                                <span class="language-color fp fp-{{ form.instance.language_color }} w-16 rounded-l {% if not form.instance.language_color %}hidden{% endif %}"
+                                      title="{{ form.instance.translated_name }}"
+                                      id="language-color-preview"
+                                      style="background-color: {{ form.instance.language_color }}"></span>
+                                <div class="flex-grow">
+                                    {% render_field form.language_color|add_error_class:"border-red-500" %}
+                                </div>
+                            </div>
+                            <div class="mb-2 text-s text-gray-600">
+                                {{ form.language_color.help_text }}
+                            </div>
                         </div>
                     </div>
                 </div>

integreat_cms/cms/templates/languages/language_list.html

@@ -32,6 +32,9 @@ <h1 class="heading">
                     <th class="text-sm text-left uppercase py-3 pr-2">
                         {% translate "Country Flags" %}
                     </th>
+                    <th class="text-sm text-left uppercase py-3 pr-2">
+                        {% translate "Language Color" %}
+                    </th>
                     <th class="text-sm text-left uppercase py-3 pr-2">
                         {% translate "Text direction" %}
                     </th>

integreat_cms/cms/templates/languages/language_list_row.html

@@ -21,6 +21,11 @@
         <span class="fp fp-{{ language.secondary_country_code }} fp-rounded "
               title="{{ language.get_secondary_country_code_display }}"></span>
     </td>
+    <td class="pr-2">
+        <span class="fp fp-{{ language.language_color }} w-5 h-5 rounded-full "
+              title="{{ language.get_language_color_display }}"
+              style="background-color: {{ language.language_color }}"></span>
+    </td>
     <td class="pr-2">
         {{ language.get_text_direction_display }}
     </td>