Skip to content

Commit

Permalink
toggles looking good
Browse files Browse the repository at this point in the history
Aidan Gerber committed May 31, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 94f6c37 commit c9cde6b
Showing 6 changed files with 103 additions and 46 deletions.
1 change: 0 additions & 1 deletion frontend/css/app-components.css
Original file line number Diff line number Diff line change
@@ -25,6 +25,5 @@
/* @import './pages/homepage.pcss'; */

@import "@/css/components/messages.scss";
@import "@/css/components/buttons.scss";
@import "@/css/components/links.scss";
@import "@/css/components/forms.scss";
6 changes: 0 additions & 6 deletions frontend/css/components/buttons.scss

This file was deleted.

7 changes: 7 additions & 0 deletions sampleapp/config/jinja2.py
Original file line number Diff line number Diff line change
@@ -37,6 +37,12 @@ def random_chart(
return results


def convert_tf(item1: str | bool) -> bool:
if item1:
return "true"
return ""


options = {
"constants": {"csrf_cookie_name": "sampleapp"},
"filters": {
@@ -49,5 +55,6 @@ def random_chart(
"now": datetime.datetime.utcnow,
"template_localtime": "django.utils.timezone.template_localtime",
"random_chart": random_chart,
"convert_tf": convert_tf,
},
}
17 changes: 14 additions & 3 deletions sampleapp/templates/components.jinja
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% extends "base.jinja" %}
{% from 'components/button.jinja' import button %}
{% from 'components/toggle.jinja' import toggle %}
{% from 'components/toggle.jinja' import toggle, toggle_label %}
{% block title %}
Components
{% endblock title %}
@@ -64,8 +64,19 @@
</div>
<div>
<h2>Toggle</h2>
{{ toggle('primary') }}
{{ toggle('primary', true) }}
{{ toggle(color='primary', size="normal", icon=False) }}
{{ toggle(color='primary', size="normal", icon=True) }}
{{ toggle(color='primary', size="sm", icon=False) }}
{{ toggle(color='primary', size="sm", icon=True) }}
{{ toggle_label(side='left') }}
{{ toggle_label(side='right') }}
{{ toggle(color='primary', size="normal", icon=True) }}
{{ toggle(color='secondary', size="normal", icon=True) }}
{{ toggle(color='accent', size="normal", icon=True) }}
{{ toggle(color='success', size="normal", icon=True) }}
{{ toggle(color='info', size="normal", icon=True) }}
{{ toggle(color='warning', size="normal", icon=True) }}
{{ toggle(color='error', size="normal", icon=True) }}
</div>
</div>
{% endblock content %}
2 changes: 1 addition & 1 deletion sampleapp/templates/components/button.jinja
Original file line number Diff line number Diff line change
@@ -26,7 +26,7 @@
{% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %}
{% endif %}
<button type="{{ type }}"
x-on:click="$dispatch('{{ dispatch_name }}', '{{ button_content }}')"
x-on:click="$dispatch('{{ dispatch_name }}', '{{ variant }} {{ color }} {{ shape }} {{ size }}')"
class="{{ class }}">
{{ button_content }}
</button>
116 changes: 81 additions & 35 deletions sampleapp/templates/components/toggle.jinja
Original file line number Diff line number Diff line change
@@ -1,42 +1,88 @@
{% macro toggle(color='primary', icon=false, model='checked', start=false) %}
<button type="button"
class="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
role="switch"
aria-checked="{{ start }}"
x-model="{{ model }}"
x-data="on: '{{ start }}'"
x-on:click="on = !on"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }">
<span class="sr-only">Use setting</span>
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
{% macro toggle(dispatch_name='toggle-slide', color='primary', size="normal", icon=False, initial=False) %}
{% set initial_tf = convert_tf(initial) %}
{% set icon_span %}
<span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
aria-hidden="true"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }">
<svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</span>
<!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
<span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
aria-hidden="true"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }">
<svg class="h-3 w-3 text-{{ color }}"
fill="currentColor"
viewBox="0 0 12 12">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"/>
</svg>
</span>
{% endset %}
{% set class = "flex-shrink-0 inline-flex relative rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-{{ color }}" %}
{% if size == 'small' or size == 'sm' %}
{% set class = class + 'group items-center justify-center h-5 w-10 ' %}
{% else %}
{% set class = class + 'bg-gray-200 h-6 w-11 border-2 border-transparent transition-colors ease-in-out duration-200' %}
{% endif %}
<button type="button"
class="{{ class }}"
role="switch"
aria-checked="'{{ initial_tf }}'"
x-data="{on: '{{ initial_tf }}' }"
x-on:click="on = !on; $dispatch('{{ dispatch_name }}', on)"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'bg-{{ color }}': on, 'bg-gray-200': !(on) }">
<span class="sr-only">Use setting</span>
{% if size == 'small' or size == 'sm' %}
<span aria-hidden="true"
class="pointer-events-none absolute bg-white w-full h-full rounded-md"></span>
<span aria-hidden="true"
class="bg-gray-200 pointer-events-none absolute h-4 w-9 mx-auto rounded-full transition-colors ease-in-out duration-200"
:class="{ 'bg-{{ color }}': on, 'bg-gray-200': !(on) }"
x-state:on="Enabled"
x-state:off="Not Enabled"></span>
<span aria-hidden="true"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"
class="translate-x-0 pointer-events-none absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white shadow transform ring-0 transition-transform ease-in-out duration-200">
{% if icon %}{{ icon_span }}{% endif %}
</span>
{% else %}
<span aria-hidden="true"
class="translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
x-state:on="Enabled"
x-state:off="Not Enabled"
:class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
{% if icon %}
<span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
aria-hidden="true">
<svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"/>
</svg>
</span>
<!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" -->
<span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
aria-hidden="true">
<svg class="h-3 w-3 text-indigo-600"
fill="currentColor"
viewBox="0 0 12 12">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"/>
</svg>
</span>
{% endif %}
{% if icon %}{{ icon_span }}{% endif %}
</span>
{% endif %}
</button>
{% 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') %}
<div class="flex items-center justify-between">
{% if side.lower() in ('left', 'l') %}
<span class="mr-2">{{ toggle }}</span>
{% endif %}
<span class="flex-grow flex flex-col">
<span class="text-sm font-medium text-gray-900">{{ label }}</span>
<span class="text-sm text-gray-500">{{ description }}</span>
</span>
</button>
{% if side.lower() not in ('left', 'l') %}
{{ toggle }}
{% endif %}
</div>
{% endmacro %}

0 comments on commit c9cde6b

Please sign in to comment.