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.
Aidan Gerber
committed
May 31, 2022
1 parent
94f6c37
commit c9cde6b
Showing
6 changed files
with
103 additions
and
46 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 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
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 |
---|---|---|
@@ -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 %} |