tfaour
b15747a604
A Widget-level property (border_style/border_thickness/border_color_index), not a per-type config field, since every widget type can have one -- drawn once centrally in device.py's _render_widgets before compositing, using an exact panel palette color so it never dithers. Styles: solid, dashed, dotted, and a fancy double-line picture-frame-mat look. Configurable from a shared "Border" card in every widget's gear-icon dialog.
33 lines
1.6 KiB
HTML
33 lines
1.6 KiB
HTML
<section class="card" style="margin-top: 20px;">
|
|
<h2 class="card-title">Border</h2>
|
|
<p class="sub">An optional border drawn around this widget's own box --
|
|
"None" (the default) draws nothing. Shows on the frame's actual live
|
|
view, not in the standalone preview below.</p>
|
|
<form id="border-config-form">
|
|
<label>Style
|
|
<select id="border_style">
|
|
{% for style in border_styles %}
|
|
<option value="{{ style }}" {% if widget.border_style == style %}selected{% endif %}>{{ border_style_labels[style] }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label>Thickness
|
|
<input type="range" id="border_thickness" min="{{ min_border_thickness }}" max="{{ max_border_thickness }}" step="1"
|
|
value="{{ widget.border_thickness }}">
|
|
<span class="slider-value" id="border_thickness_value">{{ widget.border_thickness }}px</span>
|
|
</label>
|
|
<label>Color</label>
|
|
{% set current_palette = frame.palette_rgb or default_palette_rgb %}
|
|
{% set current_hex = palette_to_hex(current_palette) %}
|
|
<div class="border-color-picker" id="border-color-picker">
|
|
{% for label in border_color_labels %}
|
|
<button type="button" class="color-swatch {% if widget.border_color_index == loop.index0 %}selected{% endif %}"
|
|
data-index="{{ loop.index0 }}" title="{{ label }}"
|
|
style="background-color: {{ current_hex[loop.index0] }};"></button>
|
|
{% endfor %}
|
|
</div>
|
|
<input type="hidden" id="border_color_index" value="{{ widget.border_color_index }}">
|
|
<button type="submit">Save</button>
|
|
</form>
|
|
</section>
|