aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил больше цветовых схем

Browse Source
This commit is contained in:
AidarKC
2026-09-26 20:32:37 +03:00
parent f8900e531a
commit 451280edd2
5 changed files with 85 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/js/components/palette-editor.js
+14 -13
View File
@@ -1,4 +1,4 @@
// Скрытый редактор палитры: открывается долгим нажатием на «День» или «Ночь» в настройках.
// Редактор точной настройки палитры.
import {
PALETTE_PRESETS,
PALETTE_ROLES,
@@ -24,7 +24,8 @@ export function openPaletteEditor({ theme = resolveThemeMode(), onClose } = {})
</div>
<div class="palette-editor__section">
<span class="palette-editor__label">Основа</span>
<div class="tabs tabs--auto palette-editor__presets" role="radiogroup" aria-label="Готовая палитра"></div>
<select class="input palette-editor__presets" aria-label="Готовая цветовая тема"></select>
<div class="palette-editor__preview" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
</div>
<div class="palette-editor__section">
<span class="palette-editor__label">Настраиваемая тема</span>
@@ -59,13 +60,10 @@ export function openPaletteEditor({ theme = resolveThemeMode(), onClose } = {})
const errorEl = modal.querySelector('.palette-editor__error');
for (const [id, preset] of Object.entries(PALETTE_PRESETS)) {
const btn = document.createElement('button');
btn.type = 'button';
btn.className = 'tab-btn';
btn.setAttribute('role', 'radio');
btn.dataset.preset = id;
btn.textContent = preset.label;
presetsEl.append(btn);
const option = document.createElement('option');
option.value = id;
option.textContent = preset.label;
presetsEl.append(option);
}
const update = (mutate) => {
@@ -80,8 +78,9 @@ export function openPaletteEditor({ theme = resolveThemeMode(), onClose } = {})
const settings = getPaletteSettings();
const colors = resolvePalette(editTheme, settings);
const custom = settings.custom[editTheme];
modal.querySelectorAll('[data-preset]').forEach((btn) => {
btn.setAttribute('aria-checked', String(btn.dataset.preset === settings.preset));
presetsEl.value = settings.preset;
modal.querySelectorAll('.palette-editor__preview span').forEach((swatch, index) => {
swatch.style.backgroundColor = [colors.background, colors.surface, colors.accent, colors['surface-selected']][index];
});
modal.querySelectorAll('[data-edit-theme]').forEach((btn) => {
btn.setAttribute('aria-checked', String(btn.dataset.editTheme === editTheme));
@@ -117,8 +116,6 @@ export function openPaletteEditor({ theme = resolveThemeMode(), onClose } = {})
modal.addEventListener('click', async (event) => {
if (event.target === modal) { close(); return; }
const presetBtn = event.target.closest('[data-preset]');
if (presetBtn) { update((next) => { next.preset = presetBtn.dataset.preset; }); return; }
// data-edit-theme, а не data-theme: data-theme стоит на <html>, и closest() находил бы его при любом клике.
const themeBtn = event.target.closest('[data-edit-theme]');
if (themeBtn) { editTheme = themeBtn.dataset.editTheme; render(); return; }
@@ -143,6 +140,10 @@ export function openPaletteEditor({ theme = resolveThemeMode(), onClose } = {})
}
}
});
presetsEl.addEventListener('change', () => update((next) => {
next.preset = presetsEl.value;
next.custom = { dark: {}, light: {} };
}));
document.addEventListener('keydown', onKeydown);
render();