Add color to language model #2715

lunars97 · 2024-03-28T16:28:52Z

Short description

Add static color labels to language model in order to improve understanding of statistics regardless of to which region it belongs.

Proposed changes

Add static representative colors to languages
Add color field to language model like in Poi Category
Make the color labels in statistic and in other components round

Side effects

None?

Additional info

Should be done before #1097

Resolved issues

Fixes: #2390

Pull Request Review Guidelines

lunars97 · 2024-03-28T16:30:15Z

I am not sure whether I am doing it right or not. I would be glad to get some guidance :)

codeclimate · 2024-03-28T16:32:30Z

Code Climate has analyzed commit 9924d25 and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 81.9% (-0.2% change).

View more on Code Climate.

MizukiTemma

Thank you so much for the PR 💪

You are already in a good direction 😸 There are some suggestions (find in comments) 👍

integreat_cms/cms/models/languages/language.py

integreat_cms/cms/constants/language_color.py

integreat_cms/cms/migrations/0089_add_language_color.py

MizukiTemma · 2024-04-03T09:04:29Z

@lunars97
Thank you for the updates 🙂
Could you add a color column in the region language tree (in the first picture, like the language list of network management) and a color circle or something like that in the region language node form (second picture, like the country flag)?

…del' into feature/add-color-to-language-model

MizukiTemma

Looks good 😸 Now we can adapt the matomo_api_client.py 💪 Find the comments please.

integreat_cms/cms/constants/language_color.py

integreat_cms/matomo_api/matomo_api_client.py

MizukiTemma · 2024-04-11T07:12:54Z

A new specification came after the Service-UI/UX-CMS monthly meeting on the last monday: only colors should be shown as choice which are not yet assigned to any language so one doesn't have to check the list every time when assigning a color to another language 🙏

lunars97 · 2024-04-15T07:17:20Z

A new specification came after the Service-UI/UX-CMS monthly meeting on the last monday: only colors should be shown as choice which are not yet assigned to any language so one doesn't have to check the list every time when assigning a color to another language 🙏

Can I then remove blocked and ui/ux labels and continue working on it?

MizukiTemma · 2024-04-16T17:21:24Z

A new specification came after the Service-UI/UX-CMS monthly meeting on the last monday: only colors should be shown as choice which are not yet assigned to any language so one doesn't have to check the list every time when assigning a color to another language 🙏

@osmers
To this thema there is a suggestion as below and we want to hear your opinion.

If the language has no color, the blank choice will be shown

and when clicked on the drop down, the choice appears including colors that are assigned to other languages but with note which language is using the color

If the language has a color, it looks like this first

After clicking on the drop dow

In this way it's easier to swap colors (because one doesn't have to think about which color is free for a temporary assigment during the swap) and also you can see directly in the choice which color and language are paired.

The demonstration above was done with less color choices to make screen shot of the choice list easier

@lunars97 I ~~will push~~ pushed this suggestion

osmers · 2024-04-17T06:18:15Z

A new specification came after the Service-UI/UX-CMS monthly meeting on the last monday: only colors should be shown as choice which are not yet assigned to any language so one doesn't have to check the list every time when assigning a color to another language 🙏

@osmers To this thema there is a suggestion as below and we want to hear your opinion.

If the language has no color, the blank choice will be shown

and when clicked on the drop down, the choice appears including colors that are assigned to other languages but with note which language is using the color

If the language has a color, it looks like this first

After clicking on the drop dow

In this way it's easier to swap colors (because one doesn't have to think about which color is free for a temporary assigment during the swap) and also you can see directly in the choice which color and language are paired.

The demonstration above was done with less color choices to make screen shot of the choice list easier

@lunars97 I will push pushed this suggestion

Looks good and I like the fact, that we can see which color belongs to which language. I would also suggest to make the color field mandatory so that we do not end up with a language without color, ok?

lunars97 · 2024-04-17T09:47:18Z

@MizukiTemma thank you for improving it :)
Should we leave statistics page for now as it is? Because the proposed final design of the page on ticket #1097 is like this

lunars97 · 2024-04-18T10:45:46Z

I am receiving test error. Could someone help me to identify the testing file which is causing current error. I would appreciate it a lot :)

MizukiTemma · 2024-04-18T10:54:01Z

@osmers

Looks good and I like the fact, that we can see which color belongs to which language. I would also suggest to make the color field mandatory so that we do not end up with a language without color, ok?

Yup, we can do that 👍

lunars97 · 2024-04-18T11:00:27Z

integreat_cms/cms/forms/languages/language_form.py

@@ -54,6 +56,29 @@ 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


@MizukiTemma I added required attribute here. Is that okay? and seems like it is causing testing error.

Thank you for updates 👍 Yes, we have to adjust the tests. language_color is a new field and therefore not correctly handled in the test, that's the cause (I guess).

@MizukiTemma yep, that is what is saying, but I cannot identify the file where I should add that field :(

I suggest to remove blank=True and null=True from the language_color in the model to allow no language to exist without color, before adjusting the tests.
But then we have to assign a color to each existing language in the migration file (otherwise it goes broken since languages stored in the database don't have any color so far), and the design for the color-language pairs can be now changed, because we asked for color/design for total access numbers too.

So, let's wait 😉

Though I can already show you which parts are (look) relevant to the tests:

Default language objects are given here
They need now language_color field.

And here too.

@MizukiTemma ahh I see now. I tried filling the necessary objects in test_data.json without adding it as well to view_config.py and that way I was also getting errors. Now I see why, thank you a lot :)

MizukiTemma · 2024-04-18T11:00:59Z

@MizukiTemma thank you for improving it :) Should we leave statistics page for now as it is? Because the proposed final design of the page on ticket #1097 is like this

Sounds reasonable 👍 I've totally forgotten the issue 😅

hauf-toni · 2024-05-07T07:50:56Z

I have added colors for WebApp Access and Offline Access to the original 🎨 figma file. Thanks for being so patient!

lunars97 · 2024-05-08T07:23:24Z

I have added colors for WebApp Access and Offline Access to the original 🎨 figma file. Thanks for being so patient!

@MizukiTemma hmm do we also need for Total Access? Currently we do not have a designated color for it, it uses default color, can I designate the default to total access then?

EDIT: I assigned the default color for TotalAccess. If it is okay, then we can leave it as it is...

…color labels round

hauf-toni · 2024-05-12T08:29:05Z

I have added colors for WebApp Access and Offline Access to the original 🎨 figma file. Thanks for being so patient!

@MizukiTemma hmm do we also need for Total Access? Currently we do not have a designated color for it, it uses default color, can I designate the default to total access then?

EDIT: I assigned the default color for TotalAccess. If it is okay, then we can leave it as it is...

You can also use black (#000000) for Total Access. I have added it to the design.

JoeyStk

Thank you a lot for this PR. You did a very good job. I have a few suggestion and after that I think this PR is ready for release 🚀

JoeyStk · 2024-05-27T08:14:51Z

integreat_cms/cms/migrations/0090_add_poicategory_icons.py

@@ -9,7 +9,7 @@ class Migration(migrations.Migration):
    """

    dependencies = [
-        ("cms", "0088_rename_mt_related_fields"),
+        ("cms", "0089_add_language_color"),


Suggested change

("cms", "0089_add_language_color"),

("cms", "0088_rename_mt_related_fields"),

JoeyStk · 2024-05-27T08:15:33Z

integreat_cms/cms/migrations/0089_add_language_color.py

+    """
+
+    dependencies = [
+        ("cms", "0088_rename_mt_related_fields"),


Suggested change

("cms", "0088_rename_mt_related_fields"),

("cms", "0089_add_language_color"),

JoeyStk · 2024-05-27T08:16:04Z

integreat_cms/cms/migrations/0089_add_language_color.py

Please rename this file to 0090_... (or even a later number if 90 is already taken by now) :)

JoeyStk · 2024-05-27T08:18:11Z

integreat_cms/locale/de/LC_MESSAGES/django.po

+
+#: cms/constants/language_color.py
+msgid "Green blue"
+msgstr "Grün-blau"


Suggested change

msgstr "Grün-blau"

msgstr "Grünblau"

Duden says no dash in between :)

JoeyStk · 2024-05-27T08:20:50Z

integreat_cms/locale/de/LC_MESSAGES/django.po

+
+#: cms/constants/language_color.py
+msgid "Pink orange"
+msgstr "Rosa-orange"


Not found in Duden, probably rosaorange? But it's a newly created word as far as Duden is concerned 😅

JoeyStk · 2024-05-27T08:25:55Z

integreat_cms/release_notes/current/unreleased/2390.yml

@@ -0,0 +1,2 @@
+en: Add color to the language model


Suggested change

en: Add color to the language model

en: Add fixed colors to the languages in the statistics

JoeyStk · 2024-05-27T08:26:17Z

integreat_cms/release_notes/current/unreleased/2390.yml

@@ -0,0 +1,2 @@
+en: Add color to the language model
+de: Füge einer Farbe zum Sprachmodell hinzu


Suggested change

de: Füge einer Farbe zum Sprachmodell hinzu

de: Füge den Sprachen in den Statistiken eine feste Farbe hinzu

JoeyStk · 2024-05-27T08:42:24Z

integreat_cms/locale/de/LC_MESSAGES/django.po

+
+#: cms/models/languages/language.py
+msgid "This is used to represent the color label of the chosen language"
+msgstr "Diese Flagge wird verwendet, um die Sprache graphisch darzustellen."


Suggested change

msgstr "Diese Flagge wird verwendet, um die Sprache graphisch darzustellen."

msgstr "Diese Farbe wird verwendet, um die Sprache graphisch darzustellen."

JoeyStk · 2024-05-27T08:45:51Z

integreat_cms/cms/forms/languages/language_form.py

+        used_colors = []
+        unused_colors = []
+        for color in language_color.COLORS:
+            code, name = color


Suggested change

code, name = color

color_code, name = color

I'd rather name this color_code to be more specific, but I'll leave it up to you to decide :)

JoeyStk · 2024-05-27T08:50:49Z

integreat_cms/static/src/js/languages/language-color-fields.ts

@@ -0,0 +1,20 @@
+const renderLanguageColorPreview = ({ target }: Event) => {
+    const colorSelect = target as HTMLSelectElement;


To be honest, I don't fully understand the difference between selectedColor and colorSelect. Could you please find a better naming for either one? :)

Add color to language model

d4f4248

lunars97 requested a review from a team as a code owner March 28, 2024 16:28

MizukiTemma requested changes Apr 1, 2024

View reviewed changes

integreat_cms/cms/models/languages/language.py Outdated Show resolved Hide resolved

integreat_cms/cms/constants/language_color.py Outdated Show resolved Hide resolved

Remove fixed language color pairs and add color to language template

3b40715

lunars97 requested a review from MizukiTemma April 2, 2024 16:06

Add migration

bc5e0a8

MizukiTemma reviewed Apr 3, 2024

View reviewed changes

integreat_cms/cms/migrations/0089_add_language_color.py Outdated Show resolved Hide resolved

lunars97 added 2 commits April 3, 2024 11:39

Add language color to language tree

a2e94b6

Merge remote-tracking branch 'origin/feature/add-color-to-language-mo…

c9d70a5

…del' into feature/add-color-to-language-model

lunars97 force-pushed the feature/add-color-to-language-model branch from 0c2ad59 to c9d70a5 Compare April 3, 2024 11:15

lunars97 requested a review from MizukiTemma April 3, 2024 11:32

MizukiTemma requested changes Apr 3, 2024

View reviewed changes

integreat_cms/cms/constants/language_color.py Show resolved Hide resolved

integreat_cms/matomo_api/matomo_api_client.py Outdated Show resolved Hide resolved

JoeyStk added ❓ question Further information is requested 🌈 ui-ux Issues that requires an UI/UX perspective. ⛔ blocked Blocked by external dependency and removed ❓ question Further information is requested labels Apr 8, 2024

lunars97 removed 🌈 ui-ux Issues that requires an UI/UX perspective. ⛔ blocked Blocked by external dependency labels Apr 15, 2024

Adjust color choice list

d58a3ed

Delete color file and add required to the field

5800174

lunars97 commented Apr 18, 2024

View reviewed changes

lunars97 added 🌈 ui-ux Issues that requires an UI/UX perspective. ⛔ blocked Blocked by external dependency labels Apr 18, 2024

lunars97 and others added 2 commits April 19, 2024 21:25

Add language color to test data and make appropriate adjustments

54c7d45

Merge branch 'develop' into feature/add-color-to-language-model

88146a0

lunars97 removed 🌈 ui-ux Issues that requires an UI/UX perspective. ⛔ blocked Blocked by external dependency labels May 8, 2024

Add color codes to WebAppAccess, TotalAccess, OfflineAccess and make …

c858681

…color labels round

lunars97 added the ❓ question Further information is requested label May 8, 2024

lunars97 removed the ❓ question Further information is requested label May 13, 2024

MizukiTemma and others added 2 commits May 13, 2024 15:25

Change language_color in testdata from name to code

bf7a154

Add color code for total access and resolve migration error

8a86bc1

lunars97 force-pushed the feature/add-color-to-language-model branch from 6a08f3d to 8a86bc1 Compare May 22, 2024 11:23

lunars97 requested a review from MizukiTemma May 22, 2024 11:34

Add release note

84b3169

lunars97 force-pushed the feature/add-color-to-language-model branch from 63ebe99 to 84b3169 Compare May 27, 2024 07:48

JoeyStk requested changes May 27, 2024

View reviewed changes

lunars97 force-pushed the feature/add-color-to-language-model branch from 19bd128 to 9409657 Compare May 27, 2024 12:21

Make suggested changes

9924d25

lunars97 force-pushed the feature/add-color-to-language-model branch from 9409657 to 9924d25 Compare May 27, 2024 14:41

lunars97 requested a review from JoeyStk May 27, 2024 14:51

JoeyStk self-assigned this May 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add color to language model #2715

Add color to language model #2715

lunars97 commented Mar 28, 2024 •

edited

lunars97 commented Mar 28, 2024

codeclimate bot commented Mar 28, 2024 •

edited

MizukiTemma left a comment

MizukiTemma commented Apr 3, 2024

MizukiTemma left a comment

MizukiTemma commented Apr 11, 2024

lunars97 commented Apr 15, 2024

MizukiTemma commented Apr 16, 2024 •

edited

osmers commented Apr 17, 2024

lunars97 commented Apr 17, 2024

lunars97 commented Apr 18, 2024

MizukiTemma commented Apr 18, 2024

lunars97 Apr 18, 2024

MizukiTemma Apr 18, 2024

lunars97 Apr 18, 2024

MizukiTemma Apr 18, 2024

MizukiTemma Apr 18, 2024 •

edited

lunars97 Apr 18, 2024

MizukiTemma commented Apr 18, 2024

hauf-toni commented May 7, 2024

lunars97 commented May 8, 2024 •

edited

hauf-toni commented May 12, 2024

JoeyStk left a comment

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

JoeyStk May 27, 2024

	("cms", "0089_add_language_color"),
	("cms", "0088_rename_mt_related_fields"),

	en: Add color to the language model
	en: Add fixed colors to the languages in the statistics

		@@ -0,0 +1,2 @@
		en: Add color to the language model
		de: Füge einer Farbe zum Sprachmodell hinzu

	de: Füge einer Farbe zum Sprachmodell hinzu
	de: Füge den Sprachen in den Statistiken eine feste Farbe hinzu

	msgstr "Diese Flagge wird verwendet, um die Sprache graphisch darzustellen."
	msgstr "Diese Farbe wird verwendet, um die Sprache graphisch darzustellen."

		@@ -0,0 +1,20 @@
		const renderLanguageColorPreview = ({ target }: Event) => {
		const colorSelect = target as HTMLSelectElement;

Add color to language model #2715

Are you sure you want to change the base?

Add color to language model #2715

Conversation

lunars97 commented Mar 28, 2024 • edited

Short description

Proposed changes

Side effects

Additional info

Resolved issues

lunars97 commented Mar 28, 2024

codeclimate bot commented Mar 28, 2024 • edited

MizukiTemma left a comment

Choose a reason for hiding this comment

MizukiTemma commented Apr 3, 2024

MizukiTemma left a comment

Choose a reason for hiding this comment

MizukiTemma commented Apr 11, 2024

lunars97 commented Apr 15, 2024

MizukiTemma commented Apr 16, 2024 • edited

osmers commented Apr 17, 2024

lunars97 commented Apr 17, 2024

lunars97 commented Apr 18, 2024

MizukiTemma commented Apr 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MizukiTemma Apr 18, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MizukiTemma commented Apr 18, 2024

hauf-toni commented May 7, 2024

lunars97 commented May 8, 2024 • edited

hauf-toni commented May 12, 2024

JoeyStk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lunars97 commented Mar 28, 2024 •

edited

codeclimate bot commented Mar 28, 2024 •

edited

MizukiTemma commented Apr 16, 2024 •

edited

MizukiTemma Apr 18, 2024 •

edited

lunars97 commented May 8, 2024 •

edited