alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: add 4 built-in gradients, searchable gradient picker, cleaner modal titles
All checks were successful
Lint & Test / test (push) Successful in 1m29s
Details

Browse Source 
- Add warm, cool, neon, pastel built-in gradients (promoted from frontend presets)
- Change gradient seeding to add missing built-ins on every startup (not just first run)
- Add searchable option to IconSelect component for filtering by name
- Enable search on gradient, effect palette, and audio palette pickers
- Simplify modal titles: "Add Gradient" / "Edit Gradient" instead of "Add Color Strip Source: Gradient"
- Update INSTALLATION.md and .env.example
This commit is contained in:
Admin
2026-03-25 22:38:24 +03:00
parent 82ce2a7e2b
commit a5e7a4e52f
10 changed files with 104 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
server/src/wled_controller/static/js/core/icon-select.ts
View File

@@ -58,6 +58,8 @@ export interface IconSelectOpts {
onChange?: (value: string) => void;
columns?: number;
placeholder?: string;
searchable?: boolean;
searchPlaceholder?: string;
}
export class IconSelect {
@@ -66,12 +68,15 @@ export class IconSelect {
_onChange: ((value: string) => void) | undefined;
_columns: number;
_placeholder: string;
_searchable: boolean;
_searchPlaceholder: string;
_trigger: HTMLButtonElement;
_popup: HTMLDivElement;
_searchInput: HTMLInputElement | null = null;
_scrollHandler: (() => void) | null = null;
_scrollTargets: (HTMLElement | Window)[] = [];
constructor({ target, items, onChange, columns = 2, placeholder = '' }: IconSelectOpts) {
constructor({ target, items, onChange, columns = 2, placeholder = '', searchable = false, searchPlaceholder = 'Filter…' }: IconSelectOpts) {
_ensureGlobalListener();
this._select = target;
@@ -79,6 +84,8 @@ export class IconSelect {
this._onChange = onChange;
this._columns = columns;
this._placeholder = placeholder;
this._searchable = searchable;
this._searchPlaceholder = searchPlaceholder;
// Hide the native select
this._select.style.display = 'none';
@@ -100,6 +107,13 @@ export class IconSelect {
this._popup.innerHTML = this._buildGrid();
document.body.appendChild(this._popup);
this._bindPopupEvents();
// Sync to current select value
this._syncTrigger();
}
_bindPopupEvents() {
// Bind item clicks
this._popup.querySelectorAll('.icon-select-cell').forEach(cell => {
cell.addEventListener('click', () => {
@@ -109,20 +123,33 @@ export class IconSelect {
});
});
// Sync to current select value
this._syncTrigger();
// Bind search input
this._searchInput = this._popup.querySelector('.icon-select-search') as HTMLInputElement | null;
if (this._searchInput) {
this._searchInput.addEventListener('input', () => {
const q = this._searchInput!.value.toLowerCase().trim();
this._popup.querySelectorAll('.icon-select-cell').forEach(cell => {
const el = cell as HTMLElement;
el.classList.toggle('disabled', !!q && !el.dataset.search!.includes(q));
});
});
}
}
_buildGrid() {
const cells = this._items.map(item => {
return `<div class="icon-select-cell" data-value="${item.value}">
const search = (item.label + ' ' + (item.desc || '')).toLowerCase();
return `<div class="icon-select-cell" data-value="${item.value}" data-search="${search}">
<span class="icon-select-cell-icon">${item.icon}</span>
<span class="icon-select-cell-label">${item.label}</span>
${item.desc ? `<span class="icon-select-cell-desc">${item.desc}</span>` : ''}
</div>`;
}).join('');
return `<div class="icon-select-grid" style="grid-template-columns:repeat(${this._columns},1fr)">${cells}</div>`;
const searchHTML = this._searchable
? `<input class="icon-select-search" type="text" placeholder="${this._searchPlaceholder}" autocomplete="off">`
: '';
return searchHTML + `<div class="icon-select-grid" style="grid-template-columns:repeat(${this._columns},1fr)">${cells}</div>`;
}
_syncTrigger() {
@@ -184,6 +211,13 @@ export class IconSelect {
this._positionPopup();
this._popup.classList.add('open');
this._addScrollListener();
if (this._searchInput) {
this._searchInput.value = '';
this._popup.querySelectorAll('.icon-select-cell').forEach(cell => {
(cell as HTMLElement).classList.remove('disabled');
});
requestAnimationFrame(() => desktopFocus(this._searchInput!));
}
}
}
@@ -233,12 +267,7 @@ export class IconSelect {
updateItems(items: IconSelectItem[]) {
this._items = items;
this._popup.innerHTML = this._buildGrid();
this._popup.querySelectorAll('.icon-select-cell').forEach(cell => {
cell.addEventListener('click', () => {
this.setValue((cell as HTMLElement).dataset.value!, true);
this._popup.classList.remove('open');
});
});
this._bindPopupEvents();
this._syncTrigger();
}

14
server/src/wled_controller/static/js/features/color-strips.ts
View File

@@ -433,7 +433,7 @@ function _ensureEffectPaletteIconSelect() {
const items = _buildGradientEntityItems();
_syncSelectOptions(sel, items);
if (_effectPaletteIconSelect) { _effectPaletteIconSelect.updateItems(items); return; }
_effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
_effectPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2, searchable: true, searchPlaceholder: t('palette.search') });
}
function _ensureGradientEasingIconSelect() {
@@ -468,7 +468,7 @@ function _ensureAudioPaletteIconSelect() {
const items = _buildGradientEntityItems();
_syncSelectOptions(sel, items);
if (_audioPaletteIconSelect) { _audioPaletteIconSelect.updateItems(items); return; }
_audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2 });
_audioPaletteIconSelect = new IconSelect({ target: sel, items, columns: 2, searchable: true, searchPlaceholder: t('palette.search') });
}
function _ensureAudioVizIconSelect() {
@@ -507,7 +507,7 @@ function _ensureGradientPresetIconSelect() {
const items = _buildGradientEntityItems();
_syncSelectOptions(sel, items);
if (_gradientPresetIconSelect) { _gradientPresetIconSelect.updateItems(items); return; }
_gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3 });
_gradientPresetIconSelect = new IconSelect({ target: sel, items, columns: 3, searchable: true, searchPlaceholder: t('palette.search') });
}
/** Rebuild the gradient picker after entity changes. */
@@ -1728,12 +1728,14 @@ export async function showCSSEditor(cssId: any = null, cloneData: any = null, pr
}
await _populateFromCSS(css);
(document.getElementById('css-editor-title') as HTMLElement).innerHTML = `${ICON_FILM} ${t('color_strip.edit')}`;
const editIcon = getColorStripIcon(css.source_type);
(document.getElementById('css-editor-title') as HTMLElement).innerHTML = `${editIcon} ${t('color_strip.edit')} ${t(`color_strip.type.${css.source_type}`)}`;
} else if (cloneData) {
(document.getElementById('css-editor-id') as HTMLInputElement).value = '';
(document.getElementById('css-editor-name') as HTMLInputElement).value = (cloneData.name || '') + ' (Copy)';
await _populateFromCSS(cloneData);
(document.getElementById('css-editor-title') as HTMLElement).innerHTML = `${ICON_FILM} ${t('color_strip.add')}`;
const cloneIcon = getColorStripIcon(cloneData.source_type);
(document.getElementById('css-editor-title') as HTMLElement).innerHTML = `${cloneIcon} ${t('color_strip.add')} ${t(`color_strip.type.${cloneData.source_type}`)}`;
} else {
(document.getElementById('css-editor-id') as HTMLInputElement).value = '';
(document.getElementById('css-editor-name') as HTMLInputElement).value = '';
@@ -1748,7 +1750,7 @@ export async function showCSSEditor(cssId: any = null, cloneData: any = null, pr
}
const typeIcon = getColorStripIcon(effectiveType);
(document.getElementById('css-editor-title') as HTMLElement).innerHTML = `${typeIcon} ${t('color_strip.add')}: ${t(`color_strip.type.${effectiveType}`)}`;
(document.getElementById('css-editor-title') as HTMLElement).innerHTML = `${typeIcon} ${t('color_strip.add')} ${t(`color_strip.type.${effectiveType}`)}`;
_autoGenerateCSSName();
}