Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update checkbox, radioselect styles #5

Merged
merged 1 commit into from
Sep 14, 2024
Merged

update checkbox, radioselect styles #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions src/django_formify/tailwind/formify_helper.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,16 @@


class CSSContainer:
def __init__(self, css_styles, error_styles):
self.css_styles = css_styles.copy()
self.error_styles = error_styles.copy()
def __init__(self, css_styles):
for key, value in css_styles.items():
setattr(self, key, value)

def get_input_class(self, field):
def get_field_class(self, field):
widget_cls = field.field.widget.__class__.__name__
key = camel_to_snake(widget_cls)
css_classes = getattr(self, "css_styles", {}).get(key, "")
css_classes = getattr(self, key, "")
return css_classes

def get_error_class(self, field):
widget_cls = field.field.widget.__class__.__name__
key = camel_to_snake(widget_cls)
error_classes = getattr(self, "error_styles", {}).get(key, "")
return error_classes


class FormifyHelper:
"""
Expand Down Expand Up @@ -66,13 +60,19 @@ class FormifyHelper:
"time_input": common_style,
"date_time_input": common_style,
"clearable_file_input": "w-full overflow-clip rounded-lg border border-gray-300 bg-gray-50/50 text-gray-600 file:mr-4 file:cursor-pointer file:border-none file:bg-gray-50 file:px-4 file:py-2 file:font-medium file:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-300 dark:file:bg-gray-900 dark:file:text-white dark:focus-visible:outline-white",
"radio_select_option_label": "inline-flex items-center gap-2 text-gray-700",
"checkbox_label": "inline-flex items-center gap-2 text-gray-700",
}

default_error_styles = {
# border-red-300
"clearable_file_input": "w-full overflow-clip rounded-lg border border-red-300 bg-gray-50/50 text-gray-600 file:mr-4 file:cursor-pointer file:border-none file:bg-gray-50 file:px-4 file:py-2 file:font-medium file:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-gray-700 dark:bg-gray-900/50 dark:text-gray-300 dark:file:bg-gray-900 dark:file:text-white dark:focus-visible:outline-white",
}

css_container = None

error_css_container = None

################################################################################
# label
################################################################################
Expand All @@ -96,10 +96,11 @@ class FormifyHelper:
layout = None

def __init__(self):
self.css_container = self.get_css_container()
self.prepare_css_container()

def get_css_container(self):
return CSSContainer(self.default_styles, self.default_error_styles)
def prepare_css_container(self):
self.css_container = CSSContainer(self.default_styles)
self.error_css_container = CSSContainer(self.default_error_styles)

def get_context_data(self, context_data) -> Context:
if isinstance(context_data, Context):
Expand Down Expand Up @@ -267,12 +268,11 @@ def render_as_tailwind_field(self, context):
# if class is not set, then add additional css classes

# add default input class
css_container = self.css_container
css = " " + css_container.get_input_class(field)
css = " " + self.css_container.get_field_class(field)
css_class += css

if field.errors:
error_css = css_container.get_error_class(field)
error_css = self.error_css_container.get_field_class(field)
if error_css:
css_class = error_css
else:
Expand Down
2 changes: 1 addition & 1 deletion src/django_formify/templates/formify/tailwind/checkbox_input.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% endcall %}

{% call field_component.input %}
<label for="{{ field.id_for_label }}" class="inline-flex items-center gap-2 text-gray-700">
<label for="{{ field.id_for_label }}" class="{{ formify_helper.css_container.checkbox_label|default_if_none:'' }}">
{{ field_html }}
{% comment %}line break here would cause extra white space around the checkbox{% endcomment %}
{{ field.label|safe }}
Expand Down
6 changes: 3 additions & 3 deletions src/django_formify/templates/formify/tailwind/checkbox_select_multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
{% call field_component.input %}
<div class="{{ formify_helper.field_class }}" {% if flat_attrs %} {{ flat_attrs|safe }}{% endif %}>
{% for choice in field.field.choices %}
<div class="mr-3">
<label class="inline-flex items-center gap-2 text-gray-700" for="id_{{ field.html_name }}_{{ forloop.counter }}">
<input type="checkbox" class="{{ css_container.checkboxselectmultiple }}"{% if choice.0 in field.value or choice.0|stringformat:"s" in field.value or choice.0|stringformat:"s" == field.value|default_if_none:""|stringformat:"s" %} checked="checked"{% endif %} name="{{ field.html_name }}" id="id_{{ field.html_name }}_{{ forloop.counter }}" value="{{ choice.0|unlocalize }}" {{ field.field.widget.attrs|flatatt }}>
<div>
<label class="{{ formify_helper.css_container.checkbox_label|default_if_none:'' }}" for="id_{{ field.html_name }}_{{ forloop.counter }}">
<input type="checkbox" class="{{ formify_helper.css_container.checkboxselectmultiple }}"{% if choice.0 in field.value or choice.0|stringformat:"s" in field.value or choice.0|stringformat:"s" == field.value|default_if_none:""|stringformat:"s" %} checked="checked"{% endif %} name="{{ field.html_name }}" id="id_{{ field.html_name }}_{{ forloop.counter }}" value="{{ choice.0|unlocalize }}" {{ field.field.widget.attrs|flatatt }}>
{% comment %}line break here would cause extra white space around the checkbox{% endcomment %}
{{ choice.1|unlocalize }}
</label>
Expand Down
10 changes: 6 additions & 4 deletions src/django_formify/templates/formify/tailwind/radio_select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@
{% call field_component.input %}
<div {% if flat_attrs %} {{ flat_attrs|safe }}{% endif %}>
{% for choice in field.field.choices %}
<label for="id_{{ field.html_name }}_{{ forloop.counter }}" class="{% if css_container.option_label %}{{ css_container.option_label }}{% else %}block text-gray-700{% endif %} mr-3">
<input type="radio" class="{{ css_container.radioselect }}"{% if choice.0|stringformat:"s" == field.value|default_if_none:""|stringformat:"s" %} checked="checked"{% endif %} name="{{ field.html_name }}" id="id_{{ field.html_name }}_{{ forloop.counter }}" value="{{ choice.0|unlocalize }}" {{ field.field.widget.attrs|flatatt }}>
{{ choice.1|unlocalize }}
</label>
<div>
<label for="id_{{ field.html_name }}_{{ forloop.counter }}" class="{{ formify_helper.css_container.radio_select_option_label|default_if_none:'' }}">
<input type="radio" class="{{ formify_helper.css_container.radio_select_option_input }}"{% if choice.0|stringformat:"s" == field.value|default_if_none:""|stringformat:"s" %} checked="checked"{% endif %} name="{{ field.html_name }}" id="id_{{ field.html_name }}_{{ forloop.counter }}" value="{{ choice.0|unlocalize }}" {{ field.field.widget.attrs|flatatt }}>
{{ choice.1|unlocalize }}
</label>
</div>
{% endfor %}
</div>
{% endcall %}
Expand Down