mirror of
https://github.com/ChuckBuilds/LEDMatrix.git
synced 2026-08-02 17:28:05 +00:00
Claude
58a28f3a14
Help users quickly find settings and understand how each one works. Tooltips: a new delegated controller (static/v3/js/tooltips.js) drives an accessible (i) info tooltip that appears on hover, keyboard focus, and tap. A shared `help_tip` Jinja macro (partials/_macros.html) emits the trigger; the plugin config macro and the core settings partials now surface help text through it. Per the design, the always-visible field help paragraphs are folded into the tooltip to declutter the forms, and the hardware/display settings carry authored detail (default, range, recommendation). Search: a global header search box finds settings across every settings tab — even ones not yet opened — via a lazy client-side index built by scanning the same field markup (static/v3/js/settings-search.js). Selecting a result switches tabs, waits for the field to load, then scrolls to and flashes it. A per-tab filter box hides non-matching fields on the current tab. Plugin settings get tooltips for free by reusing each field's schema `description`; every settings field also gets a stable `setting-<tab>-<key>` anchor id for search navigation. Styling uses the existing --color-* theme vars so light/dark mode both work, and honors prefers-reduced-motion. Adds Flask render smoke tests that assert each settings partial ships tooltips, anchors, and a filter box. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014gZxznuxw8L92FUMBN3Nqz
43 lines
2.4 KiB
HTML
43 lines
2.4 KiB
HTML
{# ============================================================================ #}
|
|
{# Shared UI macros for the v3 web interface. #}
|
|
{# #}
|
|
{# Import at the top of a partial with: #}
|
|
{# {% import 'v3/partials/_macros.html' as ui %} #}
|
|
{# #}
|
|
{# These power the settings tooltips and the settings search feature: #}
|
|
{# - help_tip(text, label): the (i) info icon whose hover/focus tooltip #}
|
|
{# explains a setting. This replaces the old always-visible <p> help. #}
|
|
{# - fg_id(tab, key): stable anchor id for a .form-group so global search #}
|
|
{# can scroll to it (e.g. "setting-display-brightness"). #}
|
|
{# - settings_filter(): the per-tab filter box shown under a partial title. #}
|
|
{# ============================================================================ #}
|
|
|
|
{# Info (i) tooltip trigger placed next to a setting label. #}
|
|
{# `text` supports "\n" line breaks (rendered via CSS white-space: pre-line). #}
|
|
{# Renders nothing when `text` is empty so callers can pass through schema data. #}
|
|
{% macro help_tip(text, label='') -%}
|
|
{%- if text -%}
|
|
<button type="button" class="help-tip" data-tooltip="{{ text }}"
|
|
aria-label="{% if label %}Help for {{ label }}{% else %}More information{% endif %}">
|
|
<i class="fas fa-circle-info" aria-hidden="true"></i>
|
|
</button>
|
|
{%- endif -%}
|
|
{%- endmacro %}
|
|
|
|
{# Stable anchor id for a settings field's .form-group wrapper. #}
|
|
{% macro fg_id(tab, key) -%}setting-{{ tab }}-{{ key }}{%- endmacro %}
|
|
|
|
{# Per-tab filter box. Place directly under a partial's <h2> title block. #}
|
|
{# The delegated handler in settings-search.js scopes to the enclosing tab. #}
|
|
{% macro settings_filter(placeholder='Filter these settings…') -%}
|
|
<div class="settings-filter-wrap relative mb-6">
|
|
<input type="text"
|
|
class="settings-filter form-control text-sm pl-9 pr-4 py-2 w-full"
|
|
placeholder="{{ placeholder }}"
|
|
aria-label="Filter settings on this tab"
|
|
autocomplete="off">
|
|
<i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm" aria-hidden="true"></i>
|
|
<p class="settings-filter-empty text-sm text-gray-500 mt-3 hidden">No settings match your filter.</p>
|
|
</div>
|
|
{%- endmacro %}
|