From 4e07eb3a247f24affa532ce959d89708ac8abf55 Mon Sep 17 00:00:00 2001 From: Aidan Gerber Date: Fri, 20 May 2022 15:12:28 -0700 Subject: [PATCH 01/11] button start --- sampleapp/templates/components/button.jinja | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/sampleapp/templates/components/button.jinja b/sampleapp/templates/components/button.jinja index 943c610..3a96b0f 100644 --- a/sampleapp/templates/components/button.jinja +++ b/sampleapp/templates/components/button.jinja @@ -1,6 +1,17 @@ -{% macro button(button_content='Button', type='button') %} +{% macro button(button_content='Button', dispatch_name='click', variant='normal', color= 'primary', shape='rounded', size='md', type='button') %} + {# Variant support: normal, outline #} + {# Color support: primary, secondary, success, danger, warning, info, light, dark #} + {# Shape support: rounded, square, circle #} + {# Size support: xs, sm, md, lg, xl #} + {% set class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %} + {% if variant == 'outline' %} + {% set class = class + " border border-transparent" %} + {% endif %} + {% set class = class + " text-white bg-" + color + '-500' + "hover:bg-" + color + '-600' %} {% endmacro %} From 5c56916a21b7f4f485a0a31b4d5da9667848a4af Mon Sep 17 00:00:00 2001 From: Aidan Gerber Date: Fri, 20 May 2022 15:25:20 -0700 Subject: [PATCH 02/11] more button --- sampleapp/templates/components/button.jinja | 22 +++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/sampleapp/templates/components/button.jinja b/sampleapp/templates/components/button.jinja index 3a96b0f..89aa824 100644 --- a/sampleapp/templates/components/button.jinja +++ b/sampleapp/templates/components/button.jinja @@ -3,9 +3,27 @@ {# Color support: primary, secondary, success, danger, warning, info, light, dark #} {# Shape support: rounded, square, circle #} {# Size support: xs, sm, md, lg, xl #} - {% set class="inline-flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %} - {% if variant == 'outline' %} + {% set class="inline-flex items-center shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+color+"600" %} + {% if variant == 'normal' %} {% set class = class + " border border-transparent" %} + {% elif variant == 'outline' %} + {% set class = class + "border border-" + color + '-700' %} + {% endif %} + {% if size == 'xs' %} + {% set class = class + " px-2.5 py-1.5 text-xs" %} + {% elif size == 'sm' %} + {% set class = class + " px-3 py-2 text-sm" %} + {% elif size == 'md' %} + {% set class = class + " px-4 py-2 text-sm" %} + {% elif size == 'lg' %} + {% set class = class + " px-4 py-2 text-base" %} + {% elif size == 'xl' %} + {% set class = class + " px-6 py-3 text-base" %} + {% endif %} + {% if shape == 'rounded' %} + {% set class = class + " rounded" %} + {% elif shape == 'circle' %} + {% set class = class + 'rounded-full' %} {% endif %} {% set class = class + " text-white bg-" + color + '-500' + "hover:bg-" + color + '-600' %} {% endmacro %} From 2d3a08e815b7268051d76991fe932a4466c5c8b7 Mon Sep 17 00:00:00 2001 From: Aidan Gerber Date: Mon, 23 May 2022 16:53:17 -0700 Subject: [PATCH 04/11] button work --- sampleapp/templates/components.jinja | 13 ++++- sampleapp/templates/components/button.jinja | 10 +++- sampleapp/templates/components/link.jinja | 5 ++ .../templates/header/desktop_center.jinja | 2 +- sampleapp/templates/header/mobile_menu.jinja | 2 +- tailwind.config.js | 48 ++++++++++++++----- 6 files changed, 62 insertions(+), 18 deletions(-) create mode 100644 sampleapp/templates/components/link.jinja diff --git a/sampleapp/templates/components.jinja b/sampleapp/templates/components.jinja index 5ba2e56..f56c870 100644 --- a/sampleapp/templates/components.jinja +++ b/sampleapp/templates/components.jinja @@ -4,5 +4,16 @@ Components {% endblock title %} {% block content %} -
{{ button() }}
+
+

Components

+
+

Buttons

+ {{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }} + {{ button('secondary normal rounded', color='secondary', variant='normal', shape='rounded') }} + {{ button('accent normal rounded', color='accent', variant='normal', shape='rounded') }} + {{ button('primary outline rounded', color='primary', variant='outline', shape='rounded') }} + {{ button('secondary outline rounded', color='secondary', variant='outline', shape='rounded') }} + {{ button('accent outline rounded', color='accent', variant='outline', shape='rounded') }} +
+
{% endblock content %} diff --git a/sampleapp/templates/components/button.jinja b/sampleapp/templates/components/button.jinja index fc94d35..f9fffe1 100644 --- a/sampleapp/templates/components/button.jinja +++ b/sampleapp/templates/components/button.jinja @@ -1,6 +1,6 @@ -{% macro button(button_content='Button', dispatch_name='click', variant='normal', color= 'primary', shape='rounded', size='md', type='button') %} +{% macro button(button_content='Button', dispatch_name='click', variant='normal', color='neutral', shape='rounded', size='md', type='button') %} {# Variant support: normal, outline #} - {# Color support: primary, secondary, success, danger, warning, info, light, dark #} + {# Color support: primary, secondary, accent #} {# Shape support: rounded, square, circle #} {# Size support: xs, sm, md, lg, xl #} {% set class="inline-flex items-center shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+color+"-600" %} @@ -32,3 +32,9 @@ {{ button_content }} {% endmacro %} +{# +text-neutral-content bg-neutral-500 hover:bg-neutral-600 border-neutral-700 focus:ring-neutral-600 +text-primary-content bg-primary-500 hover:bg-primary-600 border-primary-700 focus:ring-primary-600 +text-secondary-content bg-secondary-500 hover:bg-secondary-600 border-secondary-700 focus:ring-secondary-600 +text-accent-content bg-accent-500 hover:bg-accent-600 border-accent-700 focus:ring-accent-600 +#} diff --git a/sampleapp/templates/components/link.jinja b/sampleapp/templates/components/link.jinja new file mode 100644 index 0000000..7fc9d94 --- /dev/null +++ b/sampleapp/templates/components/link.jinja @@ -0,0 +1,5 @@ +{% macro link(url, text='', target='') %} + {{ text }} +{% endmacro %} diff --git a/sampleapp/templates/header/desktop_center.jinja b/sampleapp/templates/header/desktop_center.jinja index c938799..bfd3f53 100644 --- a/sampleapp/templates/header/desktop_center.jinja +++ b/sampleapp/templates/header/desktop_center.jinja @@ -1,7 +1,7 @@ {% endblock content %} diff --git a/sampleapp/templates/components/button.jinja b/sampleapp/templates/components/button.jinja index f9fffe1..197fcbb 100644 --- a/sampleapp/templates/components/button.jinja +++ b/sampleapp/templates/components/button.jinja @@ -1,13 +1,13 @@ -{% macro button(button_content='Button', dispatch_name='click', variant='normal', color='neutral', shape='rounded', size='md', type='button') %} +{% macro button(button_content='Button', dispatch_name='button-click', variant='normal', color='primary', shape='rounded', size='md', type='button') %} {# Variant support: normal, outline #} - {# Color support: primary, secondary, accent #} + {# Color support: primary, secondary, accent, success, info, warning, error #} {# Shape support: rounded, square, circle #} {# Size support: xs, sm, md, lg, xl #} {% set class="inline-flex items-center shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-"+color+"-600" %} {% if variant == 'normal' %} {% set class = class + " border border-transparent" %} {% elif variant == 'outline' %} - {% set class = class + "border border-" + color + '-700' %} + {% set class = "{} border border-{}-focus".format(class, color) %} {% endif %} {% if size == 'xs' %} {% set class = class + " px-2.5 py-1.5 text-xs" %} @@ -23,18 +23,21 @@ {% if shape == 'rounded' %} {% set class = class + " rounded" %} {% elif shape == 'circle' %} - {% set class = class + 'rounded-full' %} + {% set class = class + ' rounded-full' %} {% endif %} - {% set class = class + " text-white bg-" + color + '-500 hover:bg-' + color + '-600' %} + {% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %} {% endmacro %} {# -text-neutral-content bg-neutral-500 hover:bg-neutral-600 border-neutral-700 focus:ring-neutral-600 -text-primary-content bg-primary-500 hover:bg-primary-600 border-primary-700 focus:ring-primary-600 -text-secondary-content bg-secondary-500 hover:bg-secondary-600 border-secondary-700 focus:ring-secondary-600 -text-accent-content bg-accent-500 hover:bg-accent-600 border-accent-700 focus:ring-accent-600 +text-primary-content bg-primary hover:bg-primary-focus border-primary-focus +text-secondary-content bg-secondary hover:bg-secondary-focus border-secondary-focus +text-accent-content bg-accent hover:bg-accent-focus border-accent-focus +text-success-content bg-success hover:bg-success-focus border-success-focus +text-info-content bg-info hover:bg-info-focus border-info-focus +text-warning-content bg-warning hover:bg-warning-focus border-warning-focus +text-error-content bg-error hover:bg-error-focus border-error-focus #} diff --git a/sampleapp/templates/django/forms/widgets/input.jinja b/sampleapp/templates/django/forms/widgets/input.jinja index d4949b1..2cc6423 100644 --- a/sampleapp/templates/django/forms/widgets/input.jinja +++ b/sampleapp/templates/django/forms/widgets/input.jinja @@ -1,4 +1,3 @@ + {% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}> diff --git a/sampleapp/templates/header/desktop_center.jinja b/sampleapp/templates/header/desktop_center.jinja index bfd3f53..98fef6a 100644 --- a/sampleapp/templates/header/desktop_center.jinja +++ b/sampleapp/templates/header/desktop_center.jinja @@ -1,8 +1,7 @@ {% endblock content %} diff --git a/sampleapp/templates/components/button.jinja b/sampleapp/templates/components/button.jinja index d733ee7..84d8fb9 100644 --- a/sampleapp/templates/components/button.jinja +++ b/sampleapp/templates/components/button.jinja @@ -26,7 +26,7 @@ {% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %} {% endif %} diff --git a/sampleapp/templates/components/toggle.jinja b/sampleapp/templates/components/toggle.jinja index 19223ee..e2aa8f6 100644 --- a/sampleapp/templates/components/toggle.jinja +++ b/sampleapp/templates/components/toggle.jinja @@ -1,42 +1,88 @@ -{% macro toggle(color='primary', icon=false, model='checked', start=false) %} - +{% endmacro %} +{% set default_toggle %} +{{ toggle() }} +{% endset %} +{% macro toggle_label(toggle=default_toggle, side='right', label='100% Jedi Strength: Agen Kolar, Saesee Tiin, Kit Fisto, Mace Windu', description='99.9% Jedi Strength: Mace Windu') %} +
+ {% if side.lower() in ('left', 'l') %} + {{ toggle }} + {% endif %} + + {{ label }} + {{ description }} - + {% if side.lower() not in ('left', 'l') %} + {{ toggle }} + {% endif %} +
{% endmacro %}