Update tailwind_field.py #163

Thutmose3 · 2024-02-13T13:43:28Z

No description provided.

Thutmose3 · 2024-02-13T13:45:38Z

@GitRon could you check this one out?

GitRon · 2024-02-13T13:54:19Z

Hi @Thutmose3!

Interesting idea! But "docs or it didnt happen" - so we'd need some way to tell the users how they can use this.

@smithdc1 @carltongibson What do you think about this approach? I'm still the new kid on the block 🙃

Thutmose3 · 2024-02-13T13:57:40Z

Ok, i'm adding a few more improvements, and will document it

blasferna · 2024-02-13T14:06:56Z

Hi @Thutmose3,

I just wanted to comment that this package supports class customization by widget as follows:

settings.py

CRISPY_CLASS_CONVERTERS = {
    'textinput': 'dark:text-gray-100 dark:bh-gray-700'
}

It's just not documented.

Does this new functionality conflict with CRISPY_CLASS_CONVERTERS?

Regards.

GitRon · 2024-02-13T14:08:14Z

Oh, nice one @blasferna! Do you think you have the time to add a small snippet about it to the docs?

blasferna · 2024-02-13T14:18:26Z

Hello @GitRon,

CRISPY_CLASS_CONVERTERS apparently adds the classes defined in settings.py to the widgets rather than replacing them. In many scenarios, replacement would be required.

I could add some examples to the documentation without any problem.

Thutmose3 · 2024-02-13T14:21:59Z

Credit for this PR goes to @amitjindal as i basically copied his proposals from here: #90.

This feature should not conflict with CRISPY_CLASS_CONVERTERS (I think).

I also removed the hardcoded tailwind classes from select.html, and added these classes to the default_styles. Which should work as usual, and give people the posibility to easily overwrite these classes.

GitRon · 2024-02-13T14:22:25Z

@blasferna Sounds good! 👌

@Thutmose3 Sounds good as well! 🚀

Thutmose3 · 2024-02-13T14:24:03Z

This PR has 2 features basically:

Possibilty to overwrite default_styles from settings.py
Move away from hardcoded Tailwind classes in templates (only select.html has been done at the moment)

carltongibson · 2024-02-13T15:54:09Z

@smithdc1 @carltongibson What do you think about this approach? I'm still the new kid on the block 🙃

@GitRon Sorry for the slow reply. I don't have a concrete preference. Goal is to parameterise the classes used. So OK. Having one clear, documented, way to do that is the answer. Beyond that, all I can say, What's the API you want to use? Keep it clean. Head there. (That's very high-level I know.)

"docs or it didnt happen"

💯

Update: I realise it was only two hours, so I won't worry about the slow reply 😅

Thutmose3 · 2024-02-13T19:33:08Z

@GitRon i added documentation to explain this new feature, there is still some work to improve on this, but if it's merged, i'll continue to expand on this feature.

It seems the tests are failing, do you know why or can point me in the good direction?

smithdc1 · 2024-02-13T19:43:14Z

Hi all 👋

Having one clear, documented, way to do that is the answer.

Completely agree. Styles can be customised already, but it's not documented. So that doesn't count. That's on me.

The code currently allows you to customise by setting the styles on the form helper. Here's the draft docs for that.

https://github.com/smithdc1/crispy-tailwind/blob/c5941952ceb1e05e84634a12b1244fbd14b504d2/docs/custom.txt#L71

Happy to go with whichever option you think is best.

Another thought, Textual/rich does css in python code? Any inspiration from there? (Likely not but...)

Thutmose3 · 2024-02-13T19:48:19Z

@smithdc1 i saw the CSSContainer class, but i was unable to get it to work as i could not find good documentation about it. And it seems it will only work when using FormHelper, which only work when doing {% crispy form %} and not with {{ form|crispy }} if i'm not mistaken?

smithdc1 · 2024-02-13T20:03:46Z

Thats a good point and seems about right to me. 👍

FormHelper gives more flexibility. It allows customising of styles per form. I imagine being able to switch between light and dark modes for example depending on a user setting. (Does that sound right? 🤔)

I wonder if there are any other considerations to take into account. I'll have a ponder tomorrow.

Thutmose3 · 2024-02-13T20:17:07Z

Yeah, i use FormHelper only on big/complex forms, but when starting on a new form i dont do it, only when it becomes necessary.

The CSSContainer is handy as you can customize each form with different styles. But it's a bit more complex to set up.

By configuring it in CRISPY_TAILWIND_STYLE it is applied on all forms uniformly, but is a bit less flexible and simpler.
But in my opinion forms should all have the same styling across a project anyway, it's like "configure and forget".

Both have pros/cons, but I think both can be used. Possibility to have a default config, and be able to update it on complex forms with CSSContainer.

carltongibson · 2024-02-14T06:00:57Z

@Thutmose3 That sounds plausible. If you could put that thought into a few points for the docs I think it would make a good clarification. 👍

GitRon · 2024-02-16T20:11:07Z

@Thutmose3 I agree with @carltongibson.

If you could put that thought into a few points for the docs I think it would make a good clarification. 👍

Please let us know when you've done that, then we can have a review-look and continue from there. Would that be fine for you?

Thutmose3 · 2024-02-16T20:25:53Z

@carltongibson @GitRon yes will do for sure, my newborn son arrived yesterday so i'm a bit busy at the moment, but will do it once i have some more free time!

Thutmose3 · 2024-02-24T13:16:49Z

Hi all, i just finished updating the documentation for this, can you let me know if this is ok for you?

I'm using Flowbite theme for Tailwind, and i think with this setup, we could have different "default_styles" dicts in the backend with different Tailwind themes, and people can configure a setting for what theme they want and it will take these classes.

But thats for another PR, once this is merged i will continue working on making this work on more fields, and cleanly move away from the "hardcoded" nature of the project.

Thutmose3 · 2024-02-27T07:48:21Z

@GitRon, what do you think, is it ok to merge?

GitRon · 2024-02-27T15:19:33Z

Hi @Thutmose3! Hope your son is well? 🙂

I'm very busy at the moment but your are not forgotten. I'll have a look at it as soon as I find a couple of quite minutes.

Thutmose3 · 2024-02-27T20:11:04Z

Yes doing wonderfull thanks 🙂 ok thanks!

GitRon

Hi @Thutmose3! Sorry for the late reply! Great work, only a few things popped up!

GitRon · 2024-03-08T07:25:29Z

crispy_tailwind/templates/tailwind/layout/select.html

 {% load l10n %}

 <div class="relative">
-    <select class="bg-white focus:outline-none border {% if field.errors %}border-red-500 {% else %}border-gray-300 {% endif %}rounded-lg py-2 px-4 block w-full appearance-none leading-normal text-gray-700" name="{{ field.html_name }}" {{ field|build_attrs }}>
+    <select class="{{ field|tailwind_field_class }}{% if field.errors %} border-red-500{% endif %}" name="{{ field.html_name }}" {{ field|build_attrs }}>


praise: that sounds like a solid idea! 👌

question: why did you only change the select field, shouldn't this apply to all elements? 🤔

ah, it's just a starting point?

GitRon · 2024-03-08T07:27:37Z

crispy_tailwind/templatetags/tailwind_field.py

+    "error_border": "border-red-500",
+}
+
+tailwind_styles = {**default_styles, **getattr(settings, "CRISPY_TAILWIND_STYLE", {})}


suggestion: personally, I'm a big fan of inline-comments. you could add some to explain whats going on here.

# Merging default styles with declaration from settings

for example.

The same ges for all blocks of code in this file.

GitRon · 2024-03-08T07:28:31Z

docs/custom.txt

+The second way is to configure ``CSSContainer`` on a specific form. This will only work for forms that use FormHelper.
+This allows you to override a specific form, this is usefull for unique/complex forms.
+
+The idea is that you can easily configure all forms by overriding CRISPY_TAILWIND_STYLE in settings, and if you want to customize a specific form, you can use CSSContainer for that specific form.


praise: well-written 👍

GitRon · 2024-03-08T07:29:16Z

docs/custom.txt

+-----------------------------------------------------------------------------
+
+Example:
+``CRISPY_TAILWIND_STYLE = {


issue: github docs complains here about something

GitRon · 2024-03-08T07:30:04Z

docs/custom.txt

+This is currently only working for the input fields and the select field. More coming soon.
+
+These are the fields you can override:
+CRISPY_TAILWIND_STYLE = {


suggestion: might be worth marking it as python code?

GitRon · 2024-03-08T07:30:18Z

docs/custom.txt

+    "selectdate": "",
+    "error_border": "",
+}
+


issue: github actions docs complains

Update tailwind_field.py

70a11d9

Thutmose3 mentioned this pull request Feb 13, 2024

Less opiniated defaults #90

Open

Update tailwind_field.py

0535c32

Update tailwind_field.py

5f14404

Update select.html

f691dba

thomas added 4 commits February 13, 2024 20:21

fix black

b6092a5

add documentation

af19990

fix black

b21bcd5

push

60cc327

Thutmose3 added 3 commits February 24, 2024 13:31

Update custom.txt

12d1862

Update getting_started.txt

30ad236

Update custom.txt

e9fbfdf

Thutmose3 and others added 6 commits February 24, 2024 13:40

Update select.html

f37dd37

Update crispy_filter.html

2131738

Update tailwind_field.py

50609dc

Update crispy_filter.html

9017693

add classes to multiple select

4fa7e3b

Update custom.txt

c65735a

GitRon requested changes Mar 8, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update tailwind_field.py #163

Update tailwind_field.py #163

Thutmose3 commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

GitRon commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

blasferna commented Feb 13, 2024 •

edited

GitRon commented Feb 13, 2024

blasferna commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

GitRon commented Feb 13, 2024 •

edited

Thutmose3 commented Feb 13, 2024

carltongibson commented Feb 13, 2024 •

edited

Thutmose3 commented Feb 13, 2024

smithdc1 commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

smithdc1 commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024 •

edited

carltongibson commented Feb 14, 2024

GitRon commented Feb 16, 2024

Thutmose3 commented Feb 16, 2024

Thutmose3 commented Feb 24, 2024 •

edited

Thutmose3 commented Feb 27, 2024

GitRon commented Feb 27, 2024

Thutmose3 commented Feb 27, 2024

GitRon left a comment

GitRon Mar 8, 2024

GitRon Mar 8, 2024

GitRon Mar 8, 2024

GitRon Mar 8, 2024

GitRon Mar 8, 2024

GitRon Mar 8, 2024

GitRon Mar 8, 2024

GitRon Mar 8, 2024

Update tailwind_field.py #163

Are you sure you want to change the base?

Update tailwind_field.py #163

Conversation

Thutmose3 commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

GitRon commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

blasferna commented Feb 13, 2024 • edited

GitRon commented Feb 13, 2024

blasferna commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

GitRon commented Feb 13, 2024 • edited

Thutmose3 commented Feb 13, 2024

carltongibson commented Feb 13, 2024 • edited

Thutmose3 commented Feb 13, 2024

smithdc1 commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

smithdc1 commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024 • edited

carltongibson commented Feb 14, 2024

GitRon commented Feb 16, 2024

Thutmose3 commented Feb 16, 2024

Thutmose3 commented Feb 24, 2024 • edited

Thutmose3 commented Feb 27, 2024

GitRon commented Feb 27, 2024

Thutmose3 commented Feb 27, 2024

GitRon 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

blasferna commented Feb 13, 2024 •

edited

GitRon commented Feb 13, 2024 •

edited

carltongibson commented Feb 13, 2024 •

edited

Thutmose3 commented Feb 13, 2024 •

edited

Thutmose3 commented Feb 24, 2024 •

edited