Commit 40bf19b3 authored by vertighel's avatar vertighel
Browse files

refactor: viewer_panel — fieldset, label Box, input-group-sm unificato 



- _controls: div → fieldset; full: label col-auto + unico input-group
  con inputs e bottoni Reset/↺; compact: Min/Max come span.input-group-text
- _mini: span Box → label.input-group-text con for/id; panel_id come param
- rimossi btn-sm ridondanti (sizing delegato a input-group-sm)

Co-Authored-By: default avatarClaude Sonnet 4.6 <noreply@anthropic.com>
parent 6b02b2f5

noctua/web/pages/macros/viewer_panel.html

+24 −27
Original line number Diff line number Diff line
@@ -48,7 +48,7 @@ 
{% endmacro %}





{% macro _mini(mini_col) %}

{% macro _mini(mini_col, panel_id) %}

<div class="row g-1">

    <div class="{{ mini_col }} bg-black rounded-1 overflow-hidden">

        <canvas class="cv-explore d-block w-100" width="256" height="256"
@@ -59,10 +59,11 @@ 
    </div>

    <div class="col-12 mt-1">

        <div class="input-group input-group-sm">

            <span class="input-group-text"

            <label class="input-group-text" for="ctrl-explore-w-{{ panel_id }}"

                   style="font-size:.65rem; padding:2px 6px;

                         background:#1a1a1a; border-color:#333; color:#aaa;">Box</span>

            <input type="number" class="ctrl-explore-w form-control form-control-sm"

                          background:#1a1a1a; border-color:#333; color:#aaa;">Box</label>

            <input type="number" class="ctrl-explore-w form-control"

                   id="ctrl-explore-w-{{ panel_id }}"

                   value="32" step="8"

                   style="background:#111; border-color:#333; font-size:.7rem; color:#b0ffb0;">

        </div>
@@ -72,26 +73,26 @@ 




{% macro _controls(panel_id, cam_id, has_loop, compact=False) %}

<div class="viewer-controls mt-2 p-2 rounded"

<fieldset class="viewer-controls mt-2 p-2 rounded"

          style="background:#0d0d0d; border:1px solid #222;">



    {% if compact %}

    {# ── Compact: stacked vertically, no label ───────────────────────────── #}

    {# ── Compact: stacked, inputs+bottoni in un unico input-group ─────────── #}

    <div class="d-flex flex-column gap-2">

        <div class="input-group input-group-sm">

            <input type="number" class="ctrl-vmin form-control bg-black" step="any">

            <input type="number" class="ctrl-vmax form-control bg-black" step="any">

        </div>

        <div class="d-flex align-items-center gap-1">

        <div class="input-group input-group-sm">

            <button class="btn btn-sm btn-outline-secondary btn-reset-{{ panel_id }}">Reset</button>

            <button class="btn btn-sm btn-outline-secondary btn-refresh-{{ panel_id }}"

            <button class="btn btn-outline-secondary btn-reset-{{ panel_id }}">Reset</button>

            <button class="btn btn-outline-secondary btn-refresh-{{ panel_id }}"

                    title="Fetch current image">↺</button>          

        </div>

        <div class="d-flex align-items-center gap-1">

            <input type="checkbox" class="ctrl-auto form-check-input"

                   id="ctrl-auto-{{ panel_id }}"

                   data-cam-id="{{ cam_id }}" checked>

            <label class="small"

            <label class="col-form-label col-form-label-sm"

                   for="ctrl-auto-{{ panel_id }}">Auto</label>

        </div>

        {% if has_loop %}
@@ -108,19 +109,15 @@ 
    </div>



    {% else %}

    {# ── Full/stacked: horizontal row with Min/Max label ─────────────────── #}

    <div class="row g-2 align-items-center flex-wrap">

        <label class="col-md-2 col-form-label">Min/Max</label>

        <div class="col-md">

    {# ── Full/stacked: una riga, label + unico input-group con tutto ──────── #}

    <div class="row g-2 align-items-center">

        <label class="col-auto col-form-label col-form-label-sm">Min/Max</label>

        <div class="col">

            <div class="input-group input-group-sm">

                <input type="number" class="ctrl-vmin form-control bg-black" step="any">

                <input type="number" class="ctrl-vmax form-control bg-black" step="any">

            </div>

        </div>

        <div class="col-md">

            <div class="input-group input-group-sm">

                <button class="btn btn-sm btn-outline-secondary btn-reset-{{ panel_id }}">Reset</button>

                <button class="btn btn-sm btn-outline-secondary btn-refresh-{{ panel_id }}"

                <button class="btn btn-outline-secondary btn-reset-{{ panel_id }}">Reset</button>

                <button class="btn btn-outline-secondary btn-refresh-{{ panel_id }}"

                        title="Fetch current image">↺</button>

            </div>

        </div>
@@ -128,7 +125,7 @@ 
            <input type="checkbox" class="ctrl-auto form-check-input"

                   id="ctrl-auto-{{ panel_id }}"

                   data-cam-id="{{ cam_id }}" checked>

            <label class="small"

            <label class="col-form-label col-form-label-sm"

                   for="ctrl-auto-{{ panel_id }}">Auto</label>

        </div>

        {% if has_loop %}
@@ -148,7 +145,7 @@ 


    {% endif %}



</div>

</fieldset>

{% endmacro %}
@@ -170,7 +167,7 @@ 
    {% if layout == 'compact' %}

    {# ── Compact: explore+panner row on top, canvas full-width below ─────── #}



    <div class="mb-2">{{ _mini('col-6') }}</div>

    <div class="mb-2">{{ _mini('col-6', panel_id) }}</div>

    {{ _canvas() }}

    {{ _controls(panel_id, cam_id, has_loop, compact=True) }}
@@ -188,7 +185,7 @@ 


        {# Right: explore + panner + nested slot #}

        <div class="col-xl-3 col-lg-4 d-flex flex-column gap-2">

            {{ _mini(mini_col) }}

            {{ _mini(mini_col, panel_id) }}

            {# Nested slot — filled by {% call %} in combo views #}

            {% if caller is defined %}

            <div class="viewer-nested-slot">{{ caller() }}</div>