forked from Lightmatter/sampleapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from AidanG1/feature/toggle
Feature/toggle
- Loading branch information
Showing
16 changed files
with
311 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
.link { | ||
@apply cursor-pointer no-underline; | ||
@apply text-indigo-500; | ||
@apply text-indigo-600; | ||
@apply hover:underline; | ||
@apply hover:text-indigo-700; | ||
@apply hover:text-indigo-800; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
{% extends "base.jinja" %} | ||
{% from 'components/button.jinja' import button %} | ||
{% from 'components/toggle.jinja' import toggle, toggle_label %} | ||
{% block title %} | ||
Components | ||
{% endblock title %} | ||
{% block content %} | ||
<div class="container p-2"> | ||
<h1>Components</h1> | ||
<div> | ||
<h2>Headings</h2> | ||
<h1>Heading 1</h1> | ||
<h2>Heading 2</h2> | ||
<h3>Heading 3</h3> | ||
<h4>Heading 4</h4> | ||
<h5>Heading 5</h5> | ||
<h6>Heading 6</h6> | ||
<p> | ||
Paragraph, <a href="#" class="link">link with link class</a> | ||
</p> | ||
</div> | ||
<div> | ||
<h2>Buttons</h2> | ||
<div x-data="{ clicked: 'none' }" | ||
@button-click.window="clicked = $event.detail"> | ||
<h4> | ||
Clicked Button: <span x-text="clicked"></span> | ||
</h4> | ||
<div> | ||
<h3>Colors</h3> | ||
{{ 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('success normal rounded', color='success', variant='normal', shape='rounded') }} | ||
{{ button('info normal rounded', color='info', variant='normal', shape='rounded') }} | ||
{{ button('warning normal rounded', color='warning', variant='normal', shape='rounded') }} | ||
{{ button('error normal rounded', color='error', variant='normal', shape='rounded') }} | ||
</div> | ||
<div> | ||
<h3>Shapes</h3> | ||
{{ button('primary normal rounded', color='primary', variant='normal', shape='rounded') }} | ||
{{ button('primary normal square', color='primary', variant='normal', shape='square') }} | ||
{{ button('primary normal circle', color='primary', variant='normal', shape='circle') }} | ||
</div> | ||
<div> | ||
<h3>Outlines</h3> | ||
{{ 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') }} | ||
{{ button('success outline rounded', color='success', variant='outline', shape='rounded') }} | ||
{{ button('info outline rounded', color='info', variant='outline', shape='rounded') }} | ||
{{ button('warning outline rounded', color='warning', variant='outline', shape='rounded') }} | ||
{{ button('error outline rounded', color='error', variant='outline', shape='rounded') }} | ||
</div> | ||
<div> | ||
<h3>Sizes</h3> | ||
{{ button('primary normal rounded xs', color='primary', size="xs") }} | ||
{{ button('primary normal rounded sm', color='primary', size="sm") }} | ||
{{ button('primary normal rounded md', color='primary', size="md") }} | ||
{{ button('primary normal rounded lg', color='primary', size="lg") }} | ||
{{ button('primary normal rounded xl', color='primary', size="xl") }} | ||
</div> | ||
</div> | ||
</div> | ||
<div> | ||
<h2>Toggle</h2> | ||
{{ 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 %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,42 @@ | ||
{% macro button(button_content='Button', 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, 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 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 %} | ||
{% if variant == 'outline' %} | ||
{% set class = "{} text-{} bg-{}-content hover:text-{}-focus border border-{}".format(class, color, color, color, color) %} | ||
{% else %} | ||
{% set class = "{} text-{}-content bg-{} hover:bg-{}-focus".format(class, color, color, color) %} | ||
{% endif %} | ||
<button type="{{ type }}" | ||
class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> | ||
x-on:click="$dispatch('{{ dispatch_name }}', '{{ variant }} {{ color }} {{ shape }} {{ size }}')" | ||
class="{{ class }}"> | ||
{{ button_content }} | ||
</button> | ||
{% endmacro %} | ||
{# | ||
text-primary-content bg-primary hover:bg-primary-focus border-primary bg-primary-content hover:text-primary-focus text-primary | ||
text-secondary-content bg-secondary hover:bg-secondary-focus border-secondary bg-secondary-content hover:text-secondary-focus text-secondary | ||
text-accent-content bg-accent hover:bg-accent-focus border-accent bg-accent-content hover:text-accent-focus text-accent | ||
text-success-content bg-success hover:bg-success-focus border-success bg-success-content hover:text-success-focus text-success | ||
text-info-content bg-info hover:bg-info-focus border-info bg-info-content hover:text-info-focus text-info | ||
text-warning-content bg-warning hover:bg-warning-focus border-warning bg-warning-content hover:text-warning-focus text-warning | ||
text-error-content bg-error hover:bg-error-focus border-error bg-error-content hover:text-error-focus text-error | ||
#} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
{% macro link(url, text='', target='') %} | ||
<a href="{{ url }}" | ||
target="{{ target }}" | ||
class="text-blue-500; hover:text-blue-700; underline">{{ text }}</a> | ||
{% endmacro %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
{% 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 %}{{ 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> | ||
{% if side.lower() not in ('left', 'l') %} | ||
{{ toggle }} | ||
{% endif %} | ||
</div> | ||
{% endmacro %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,9 @@ | ||
{% from 'django/forms/inputgroup.jinja' import inputgroup %} | ||
{% macro default(field, errors) %} | ||
{% macro default(fields, errors, hidden_fields) %} | ||
<div class="form-wrapper"> | ||
<span class="text-red">{{ errors }}</span> | ||
{% for field, errors in fields %}{{ inputgroup(field, errors )}}{% endfor %} | ||
{% for field in hidden_fields %}{{ field }}{% endfor %} | ||
</div> | ||
{% endmacro %} | ||
{{ default(fields, errors, hidden_fields) }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,3 @@ | ||
<input type="{{ widget.type }}" | ||
name="{{ widget.name }}" | ||
{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %} | ||
{% include "django/forms/widgets/attrs.jinja" %}> | ||
{% if widget.value != None %} value="{{ widget.value|stringformat:'s' }}"{% endif %}> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.