Gato/Pena
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

refactor: remplacer le panneau CSS par une modale centrée avec tabs

Browse Source
This commit is contained in:
Gato
2026-06-19 13:18:10 +02:00
parent 7bac69be6d
commit 2df558e10f
3 changed files with 177 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+24 -8
View File
@@ -44,16 +44,32 @@
Personnaliser le CSS Personnaliser le CSS
</button> </button>
<button id="btn-back" class="btn-back">← Accueil</button> <button id="btn-back" class="btn-back">← Accueil</button>
</div>
<div id="css-editor-panel" class="css-editor-panel hidden"> <!-- Modale CSS -->
<div class="css-editor-panel__header"> <div id="css-modal-overlay" class="css-modal-overlay hidden">
<span>CSS personnalisé</span> <div class="css-modal">
<button id="btn-css-close" class="css-editor-panel__close">✕</button> <div class="css-modal__header">
<span class="css-modal__title">CSS personnalisé</span>
<button id="btn-css-close" class="css-modal__close">✕</button>
</div> </div>
<textarea id="css-editor" class="css-editor__textarea" placeholder="/* Entrez votre CSS personnalisé ici */&#10;/* Exemple : .content { font-size: 18px; } */"></textarea> <div class="css-modal__tabs" id="css-tabs">
<div class="css-editor-panel__footer"> <button class="css-modal__tab active" data-tab="general">Arrière-scène</button>
<button id="btn-css-reset" class="css-editor-panel__btn css-editor-panel__btn--secondary">Réinitialiser</button> <button class="css-modal__tab" data-tab="police">Police</button>
<button id="btn-css-apply" class="css-editor-panel__btn css-editor-panel__btn--primary">Appliquer</button> <button class="css-modal__tab" data-tab="contenu">Contenu fond</button>
<button class="css-modal__tab" data-tab="avance">Développement</button>
</div>
<div class="css-modal__body">
<p class="css-modal__description">Personnalisez l'apparence de vos pages en modifiant le CSS ci-dessous. Les styles s'appliquent à l'onglet actif.</p>
<textarea id="css-editor" class="css-modal__editor" placeholder="/* Entrez votre CSS ici */&#10;/* Exemple : .content { font-size: 18px; } */"></textarea>
</div>
<div class="css-modal__footer">
<input type="text" id="css-config-name" class="css-modal__config-name" placeholder="Nom de la configuration..." />
<div class="css-modal__footer-actions">
<button id="btn-css-reset" class="css-modal__btn css-modal__btn--ghost">Réinitialiser</button>
<button id="btn-css-cancel" class="css-modal__btn css-modal__btn--ghost">Fermer</button>
<button id="btn-css-apply" class="css-modal__btn css-modal__btn--primary">★ Enregistrer</button>
</div>
</div> </div>
</div> </div>
</div> </div>
src/main.js
+45 -22
View File
@@ -274,48 +274,71 @@ document.getElementById('btn-back').addEventListener('click', () => {
}); });
// ── CSS personnalisé ── // ── CSS personnalisé ──
const CSS_STORAGE_KEY = 'pena_custom_css'; const CSS_TABS = ['general', 'police', 'contenu', 'avance'];
let activeTab = CSS_TABS[0];
function applyCustomCss(css) { function cssKey(tab) { return `pena_css_${tab}`; }
function loadTabCss(tab) { return localStorage.getItem(cssKey(tab)) ?? ''; }
function saveTabCss(tab, css) {
if (css.trim()) localStorage.setItem(cssKey(tab), css);
else localStorage.removeItem(cssKey(tab));
}
function buildCombinedCss() {
return CSS_TABS.map(t => loadTabCss(t)).filter(Boolean).join('\n');
}
function applyCustomCss() {
let styleEl = document.getElementById('pena-custom-style'); let styleEl = document.getElementById('pena-custom-style');
if (!styleEl) { if (!styleEl) {
styleEl = document.createElement('style'); styleEl = document.createElement('style');
styleEl.id = 'pena-custom-style'; styleEl.id = 'pena-custom-style';
document.head.appendChild(styleEl); document.head.appendChild(styleEl);
} }
styleEl.textContent = css; styleEl.textContent = buildCombinedCss();
} }
function loadCustomCss() { applyCustomCss();
return localStorage.getItem(CSS_STORAGE_KEY) ?? '';
}
const savedCss = loadCustomCss(); const cssModalOverlay = document.getElementById('css-modal-overlay');
if (savedCss) applyCustomCss(savedCss);
const btnCustomizeCss = document.getElementById('btn-customize-css');
const cssEditorPanel = document.getElementById('css-editor-panel');
const cssEditor = document.getElementById('css-editor'); const cssEditor = document.getElementById('css-editor');
cssEditor.value = loadCustomCss(); function openCssModal() {
cssEditor.value = loadTabCss(activeTab);
cssModalOverlay.classList.remove('hidden');
}
btnCustomizeCss.addEventListener('click', () => { function closeCssModal() {
cssEditorPanel.classList.toggle('hidden'); cssModalOverlay.classList.add('hidden');
}
document.getElementById('btn-customize-css').addEventListener('click', openCssModal);
document.getElementById('btn-css-close').addEventListener('click', closeCssModal);
document.getElementById('btn-css-cancel').addEventListener('click', closeCssModal);
cssModalOverlay.addEventListener('click', (e) => {
if (e.target === cssModalOverlay) closeCssModal();
}); });
document.getElementById('btn-css-close').addEventListener('click', () => { document.getElementById('css-tabs').addEventListener('click', (e) => {
cssEditorPanel.classList.add('hidden'); const tab = e.target.closest('.css-modal__tab');
if (!tab) return;
saveTabCss(activeTab, cssEditor.value);
activeTab = tab.dataset.tab;
document.querySelectorAll('.css-modal__tab').forEach(t => t.classList.toggle('active', t === tab));
cssEditor.value = loadTabCss(activeTab);
}); });
document.getElementById('btn-css-apply').addEventListener('click', () => { document.getElementById('btn-css-apply').addEventListener('click', () => {
const css = cssEditor.value.trim(); saveTabCss(activeTab, cssEditor.value);
applyCustomCss(css); applyCustomCss();
localStorage.setItem(CSS_STORAGE_KEY, css); closeCssModal();
cssEditorPanel.classList.add('hidden');
}); });
document.getElementById('btn-css-reset').addEventListener('click', () => { document.getElementById('btn-css-reset').addEventListener('click', () => {
CSS_TABS.forEach(t => localStorage.removeItem(cssKey(t)));
cssEditor.value = ''; cssEditor.value = '';
applyCustomCss(''); applyCustomCss();
localStorage.removeItem(CSS_STORAGE_KEY);
}); });
src/style.css
+108 -59
View File
@@ -484,96 +484,145 @@ body {
border-color: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.35);
background: rgba(255,255,255,0.06); background: rgba(255,255,255,0.06);
} }
.btn-customize-css__icon { .btn-customize-css__icon { font-size: 15px; opacity: 0.8; }
font-size: 15px;
opacity: 0.8;
}
/* ── CSS editor panel ── */ /* ── CSS modal ── */
.css-editor-panel { .css-modal-overlay {
position: fixed; position: fixed;
bottom: 120px; inset: 0;
left: 12px; background: rgba(0,0,0,0.55);
width: 240px; z-index: 300;
background: #12132a; display: flex;
border: 1px solid rgba(255,255,255,0.15); align-items: center;
border-radius: 10px; justify-content: center;
z-index: 101; backdrop-filter: blur(2px);
}
.css-modal {
width: 580px;
max-height: 82vh;
background: #fff;
border-radius: 12px;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 8px 32px rgba(0,0,0,0.5); box-shadow: 0 24px 64px rgba(0,0,0,0.45);
overflow: hidden;
} }
.css-editor-panel__header { .css-modal__header {
background: #1a1b2e;
padding: 14px 20px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 10px 14px; flex-shrink: 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
} }
.css-editor-panel__close { .css-modal__title {
color: #fff;
font-size: 14px;
font-weight: 600;
}
.css-modal__close {
background: transparent; background: transparent;
border: none; border: none;
color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.45);
font-size: 13px; font-size: 14px;
cursor: pointer; cursor: pointer;
padding: 2px 4px; padding: 3px 6px;
border-radius: 4px; border-radius: 4px;
font-family: inherit; font-family: inherit;
transition: color 0.15s, background 0.15s; transition: color 0.15s, background 0.15s;
line-height: 1;
} }
.css-editor-panel__close:hover { .css-modal__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
color: #fff; .css-modal__tabs {
background: rgba(255,255,255,0.08); display: flex;
border-bottom: 1px solid #e8e8ee;
background: #f6f6fa;
flex-shrink: 0;
} }
.css-editor__textarea { .css-modal__tab {
width: 100%; padding: 10px 18px;
height: 180px; background: transparent;
background: #0e0f24;
border: none; border: none;
color: rgba(255,255,255,0.8); border-bottom: 2px solid transparent;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: #888;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.css-modal__tab:hover { color: #444; }
.css-modal__tab.active { color: #ff5577; border-bottom-color: #ff5577; font-weight: 600; }
.css-modal__body {
padding: 18px 20px 12px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
overflow: hidden;
min-height: 0;
}
.css-modal__description {
font-size: 12px;
color: #999;
margin: 0;
line-height: 1.5;
}
.css-modal__editor {
flex: 1;
min-height: 200px;
background: #1e1e2e;
border: none;
border-radius: 6px;
color: #cdd6f4;
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-size: 11px; font-size: 12px;
line-height: 1.6; line-height: 1.65;
padding: 12px; padding: 14px 16px;
resize: none; resize: none;
outline: none; outline: none;
} }
.css-editor__textarea::placeholder { .css-modal__editor::placeholder { color: rgba(255,255,255,0.18); }
color: rgba(255,255,255,0.2); .css-modal__footer {
} padding: 12px 20px;
.css-editor-panel__footer { border-top: 1px solid #e8e8ee;
display: flex; display: flex;
gap: 8px; align-items: center;
padding: 10px 12px; gap: 10px;
border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
background: #fafafa;
} }
.css-editor-panel__btn { .css-modal__config-name {
flex: 1; flex: 1;
padding: 6px 10px; border: 1px solid #ddd;
border: none;
border-radius: 6px; border-radius: 6px;
padding: 7px 12px;
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
font-size: 12px; font-size: 12px;
color: #444;
outline: none;
transition: border-color 0.15s;
background: #fff;
}
.css-modal__config-name:focus { border-color: #ff5577; }
.css-modal__config-name::placeholder { color: #bbb; }
.css-modal__footer-actions { display: flex; gap: 8px; flex-shrink: 0; }
.css-modal__btn {
padding: 7px 16px;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background 0.15s; border: none;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
} }
.css-editor-panel__btn--primary { .css-modal__btn--primary { background: #ff5577; color: #fff; }
background: #ff5577; .css-modal__btn--primary:hover { background: #ff3355; }
color: #fff; .css-modal__btn--ghost { background: transparent; color: #777; border: 1px solid #ddd; }
} .css-modal__btn--ghost:hover { background: #f0f0f4; color: #444; }
.css-editor-panel__btn--primary:hover { background: #ff3355; }
.css-editor-panel__btn--secondary {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
}
.css-editor-panel__btn--secondary:hover { background: rgba(255,255,255,0.14); }
/* ── Back button ── */ /* ── Back button ── */
.btn-back { .btn-back {