Clicking a swatch instantly swaps the body palette class for a live preview; OK commits silently (POST, no reload); click-elsewhere or 10 s auto-dismiss reverts. Tooltip portal shows label, shoptalk, lock state. Locked swatches show × (disabled). 20 FTs green. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
28 lines
1.2 KiB
HTML
28 lines
1.2 KiB
HTML
<section
|
|
id="id_applet_palette"
|
|
class="palette"
|
|
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
|
>
|
|
<h2>Palettes</h2>
|
|
<div class="palette-scroll">
|
|
{% for palette in palettes %}
|
|
<div class="palette-item">
|
|
<div
|
|
class="swatch {{ palette.name }}{% if user_palette == palette.name %} active{% endif %}{% if palette.locked %} locked{% endif %}"
|
|
data-palette="{{ palette.name }}"
|
|
data-label="{{ palette.label }}"
|
|
data-locked="{{ palette.locked|yesno:'true,false' }}"
|
|
data-unlocked-date="{% if not palette.locked %}Default{% endif %}"
|
|
data-shoptalk="Placeholder"
|
|
>
|
|
{% if not palette.locked %}
|
|
<button type="button" class="btn btn-confirm palette-ok" hidden>OK</button>
|
|
{% else %}
|
|
<button type="button" class="btn btn-disabled palette-ok" hidden>×</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|