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!

crispy_tailwind/templates/tailwind/layout/select.html

crispy_tailwind/templatetags/tailwind_field.py

docs/custom.txt

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

I have no clue why its still complaining about this, i tried all different variations newlines and indents to make it happy, but it still complains

Maybe @smithdc1 knows what to do here?

GitRon · 2024-06-20T15:03:37Z

Hi @Thutmose3!

Are you aware of my review some months ago? I realised that sometimes GitHub forgets to send update messages.

Best
Ronny

becurrie · 2024-07-14T20:42:13Z

Bumping this as I would love to see this merged in 👍

becurrie · 2024-07-14T20:52:04Z

@GitRon this might be the wrong place to ask this question, but could you point me to or provide a clear example of how to use the CSSContainer currently to support styling my form elements?

GitRon · 2024-07-16T12:04:04Z

Hi @becurrie!

We like to see this in as well, we are currently waiting for @Thutmose3 or somebody else to take on the code review findings.

About the CSSContainer, maybe one of the others might be able to help out, I haven't used it so far, sorry 😔

Best from Cologne
Ronny

Thutmose3 · 2024-07-30T08:30:04Z

Hi all, sorry for late reply. Life got a little in the way! I commented/resolved the issues @GitRon

Thutmose3 · 2024-07-30T08:48:31Z

All comments got resolved, except the warning for indentation in the docstring, i tried to fix it, but it keeps complaining. Maybe someone else can fix it?

vagrants0140 · 2024-07-30T12:36:31Z

Hi @Thutmose3 ,

I noticed a minor adjustment that could resolve the syntax warnings being flagged by the GitHub Actions / docs bot.
Specifically, changing a single colon to a double colon should fix the issue.

For instance, on line 25 of docs/custom.txt, please replace:

Example:

with:

Example::

Similarly, on line 35, change:

These are the fields you can override:

with:

These are the fields you can override::

I tested these changes in my fork, and it resolved the bot's complaints about syntax warnings. You can review the modifications in my pull request here:
https://github.com/vagrants0140/crispy-tailwind/pull/1/files?diff=unified&w=0

Thanks!
Jonah

Thutmose3 · 2024-08-01T21:21:43Z

Thanks @vagrants0140
PR should be good now

Thutmose3 · 2024-08-14T20:52:18Z

@GitRon The PR is ready for merging

GitRon

@Thutmose3 Thanks for all your work! I think it seems like a neat and solid solution. Just found some minor things (which I'd still like to see fixed 🙃). Maybe @smithdc1 could have a look as well. Would give me a lot of confidence to get the 👍 of a crispy veteran on this topic.

crispy_tailwind/templates/tailwind/layout/select.html

GitRon · 2024-08-19T06:40:21Z

crispy_tailwind/templatetags/tailwind_field.py

@@ -76,41 +76,54 @@ def pairwise(iterable):
    return zip(a, a)


+@register.filter
+def tailwind_field_class(field):


thought: how about a unit-test? this is a massive piece of python code, though not so much complicated logic.

GitRon · 2024-08-19T06:40:46Z

docs/custom.txt


-While our opinionated Tailwind styles may get you so far you may wish to change these.
+The first one is to override CRISPY_TAILWIND_STYLE in your settings. This will override the defaults for all forms. 


Suggested change

The first one is to override CRISPY_TAILWIND_STYLE in your settings. This will override the defaults for all forms.

The first one is to override ``CRISPY_TAILWIND_STYLE`` in your settings. This will override the defaults for all forms.

GitRon · 2024-08-19T06:41:11Z

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.


Suggested change

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.

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.

GitRon · 2024-08-19T06:42:02Z

docs/custom.txt

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


Maybe @smithdc1 knows what to do here?

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 4 commits February 24, 2024 13:41

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

thejpanganiban mentioned this pull request Jul 24, 2024

Problems with django-smart-select #168

Open

deftcat approved these changes Jul 30, 2024

View reviewed changes

Thutmose3 added 2 commits July 30, 2024 10:25

Update tailwind_field.py

523633c

Update custom.txt

a78b908

Thutmose3 added 6 commits July 30, 2024 10:32

Update custom.txt

f0353dc

Update custom.txt

c3d8f15

Update custom.txt

b9e47b7

Update custom.txt

71b2f13

Update custom.txt

3e85456

Update custom.txt

9d0201e

Update custom.txt

df82130

GitRon requested changes Aug 19, 2024

View reviewed changes


		While our opinionated Tailwind styles may get you so far you may wish to change these.
		The first one is to override CRISPY_TAILWIND_STYLE in your settings. This will override the defaults for all forms.

	The first one is to override CRISPY_TAILWIND_STYLE in your settings. This will override the defaults for all forms.
	The first one is to override ``CRISPY_TAILWIND_STYLE`` in your settings. This will override the defaults for all 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.
	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.

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 Loading

GitRon commented Feb 13, 2024

blasferna commented Feb 13, 2024

Thutmose3 commented Feb 13, 2024

GitRon commented Feb 13, 2024 • edited Loading

Thutmose3 commented Feb 13, 2024

carltongibson commented Feb 13, 2024 • edited Loading

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 Loading

carltongibson commented Feb 14, 2024

GitRon commented Feb 16, 2024

Thutmose3 commented Feb 16, 2024

Thutmose3 commented Feb 24, 2024 • edited Loading

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

GitRon commented Jun 20, 2024

becurrie commented Jul 14, 2024 • edited Loading

becurrie commented Jul 14, 2024

GitRon commented Jul 16, 2024

Thutmose3 commented Jul 30, 2024

Thutmose3 commented Jul 30, 2024

vagrants0140 commented Jul 30, 2024

Thutmose3 commented Aug 1, 2024

Thutmose3 commented Aug 14, 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

blasferna commented Feb 13, 2024 •

edited

Loading

GitRon commented Feb 13, 2024 •

edited

Loading

carltongibson commented Feb 13, 2024 •

edited

Loading

Thutmose3 commented Feb 13, 2024 •

edited

Loading

Thutmose3 commented Feb 24, 2024 •

edited

Loading

becurrie commented Jul 14, 2024 •

edited

Loading