Add dark mode palettes + Woodpecker CI pipeline
- Add 2 dark palettes (Nuit, Ocean) to DisplaySettings with full SVG theme tokens — all hardcoded SVG colors (grids, legends, text fills, pills, dot strokes, drag handles) replaced with reactive bindings - Update scoped CSS to use var(--color-*) and var(--svg-*) throughout - Add Woodpecker CI pipeline (.woodpecker.yml): build → docker push → deploy - Add multi-stage Dockerfiles for backend (Python) and frontend (Nuxt) - Add production docker-compose with Traefik labels + dev override - Remove old single-stage Dockerfiles and root docker-compose.yml - Update Makefile with docker-dev target - Exclude data files (pdf, xls, ipynb) from git Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="ds-selector" ref="selectorRef">
|
||||
<button class="ds-trigger" aria-label="Réglages d'affichage" @click="isOpen = !isOpen">
|
||||
<button class="ds-trigger" aria-label="Reglages d'affichage" @click="isOpen = !isOpen">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
||||
</svg>
|
||||
@@ -38,14 +38,20 @@
|
||||
<div class="ds-section">
|
||||
<span class="ds-label">Ambiance</span>
|
||||
<div class="ds-palette-grid">
|
||||
<button v-for="p in palettes" :key="p.name"
|
||||
class="ds-palette-btn" :class="{ 'ds-palette-btn--active': currentPalette === p.name }"
|
||||
<button v-for="p in paletteList" :key="p.name"
|
||||
class="ds-palette-btn" :class="{
|
||||
'ds-palette-btn--active': currentPalette === p.name,
|
||||
'ds-palette-btn--dark': p.dark,
|
||||
}"
|
||||
@click="setPalette(p.name)">
|
||||
<span class="ds-palette-dots">
|
||||
<span class="ds-dot" :style="{ background: p.primary }"></span>
|
||||
<span class="ds-dot" :style="{ background: p.accent }"></span>
|
||||
</span>
|
||||
<span class="ds-palette-name">{{ p.label }}</span>
|
||||
<span class="ds-palette-info">
|
||||
<span class="ds-palette-name">{{ p.label }}</span>
|
||||
<span class="ds-palette-mode">{{ p.dark ? 'Sombre' : 'Clair' }}</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,6 +61,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Global shared dark mode state (accessible from any component via useState)
|
||||
const isDark = useState('theme-dark', () => false)
|
||||
|
||||
const selectorRef = ref<HTMLElement>()
|
||||
const isOpen = ref(false)
|
||||
|
||||
@@ -92,24 +101,82 @@ function setDensity(d: string) {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Palette (color ambiance) ──
|
||||
const palettes = [
|
||||
{ name: 'eau', label: 'Eau', primary: '#2563eb', accent: '#059669' },
|
||||
{ name: 'terre', label: 'Terre', primary: '#92400e', accent: '#d97706' },
|
||||
{ name: 'foret', label: 'Foret', primary: '#166534', accent: '#65a30d' },
|
||||
{ name: 'ardoise', label: 'Ardoise', primary: '#475569', accent: '#64748b' },
|
||||
// ── Palette definitions ──
|
||||
interface Palette {
|
||||
name: string; label: string; dark: boolean
|
||||
primary: string; accent: string
|
||||
bg: string; surface: string; text: string; textMuted: string; border: string
|
||||
// SVG-specific
|
||||
svgPlotBg: string; svgGrid: string; svgLegendBg: string; svgText: string; svgTextLight: string
|
||||
}
|
||||
|
||||
const paletteList: Palette[] = [
|
||||
// ── Light palettes ──
|
||||
{
|
||||
name: 'eau', label: 'Eau', dark: false,
|
||||
primary: '#2563eb', accent: '#059669',
|
||||
bg: '#f8fafc', surface: '#ffffff', text: '#1e293b', textMuted: '#64748b', border: '#e2e8f0',
|
||||
svgPlotBg: '#f8fafc', svgGrid: '#e2e8f0', svgLegendBg: 'white', svgText: '#334155', svgTextLight: '#64748b',
|
||||
},
|
||||
{
|
||||
name: 'terre', label: 'Terre', dark: false,
|
||||
primary: '#92400e', accent: '#d97706',
|
||||
bg: '#fefbf6', surface: '#ffffff', text: '#1c1917', textMuted: '#78716c', border: '#e7e5e4',
|
||||
svgPlotBg: '#faf8f5', svgGrid: '#e7e5e4', svgLegendBg: 'white', svgText: '#44403c', svgTextLight: '#78716c',
|
||||
},
|
||||
{
|
||||
name: 'foret', label: 'Foret', dark: false,
|
||||
primary: '#166534', accent: '#65a30d',
|
||||
bg: '#f7fdf9', surface: '#ffffff', text: '#14532d', textMuted: '#6b7c6e', border: '#d1e7d6',
|
||||
svgPlotBg: '#f5fbf7', svgGrid: '#d1e7d6', svgLegendBg: 'white', svgText: '#2d4a35', svgTextLight: '#6b7c6e',
|
||||
},
|
||||
{
|
||||
name: 'ardoise', label: 'Ardoise', dark: false,
|
||||
primary: '#475569', accent: '#64748b',
|
||||
bg: '#f8fafc', surface: '#ffffff', text: '#1e293b', textMuted: '#64748b', border: '#e2e8f0',
|
||||
svgPlotBg: '#f8fafc', svgGrid: '#e2e8f0', svgLegendBg: 'white', svgText: '#334155', svgTextLight: '#64748b',
|
||||
},
|
||||
// ── Dark palettes ──
|
||||
{
|
||||
name: 'nuit', label: 'Nuit', dark: true,
|
||||
primary: '#60a5fa', accent: '#34d399',
|
||||
bg: '#0f172a', surface: '#1e293b', text: '#f1f5f9', textMuted: '#94a3b8', border: '#334155',
|
||||
svgPlotBg: '#1e293b', svgGrid: '#334155', svgLegendBg: '#1e293b', svgText: '#cbd5e1', svgTextLight: '#94a3b8',
|
||||
},
|
||||
{
|
||||
name: 'ocean', label: 'Ocean', dark: true,
|
||||
primary: '#38bdf8', accent: '#2dd4bf',
|
||||
bg: '#0c1222', surface: '#162032', text: '#e2e8f0', textMuted: '#7dd3fc', border: '#1e3a5f',
|
||||
svgPlotBg: '#162032', svgGrid: '#1e3a5f', svgLegendBg: '#162032', svgText: '#bae6fd', svgTextLight: '#7dd3fc',
|
||||
},
|
||||
]
|
||||
const currentPalette = ref('eau')
|
||||
|
||||
function setPalette(name: string) {
|
||||
currentPalette.value = name
|
||||
const p = palettes.find(x => x.name === name)
|
||||
const p = paletteList.find(x => x.name === name)
|
||||
if (!p || !import.meta.client) return
|
||||
localStorage.setItem('sej-palette', name)
|
||||
const root = document.documentElement.style
|
||||
root.setProperty('--color-primary', p.primary)
|
||||
root.setProperty('--color-primary-dark', darken(p.primary))
|
||||
root.setProperty('--color-secondary', p.accent)
|
||||
|
||||
const root = document.documentElement
|
||||
const s = root.style
|
||||
s.setProperty('--color-primary', p.primary)
|
||||
s.setProperty('--color-primary-dark', darken(p.primary))
|
||||
s.setProperty('--color-secondary', p.accent)
|
||||
s.setProperty('--color-bg', p.bg)
|
||||
s.setProperty('--color-surface', p.surface)
|
||||
s.setProperty('--color-text', p.text)
|
||||
s.setProperty('--color-text-muted', p.textMuted)
|
||||
s.setProperty('--color-border', p.border)
|
||||
// SVG theme vars
|
||||
s.setProperty('--svg-plot-bg', p.svgPlotBg)
|
||||
s.setProperty('--svg-grid', p.svgGrid)
|
||||
s.setProperty('--svg-legend-bg', p.svgLegendBg)
|
||||
s.setProperty('--svg-text', p.svgText)
|
||||
s.setProperty('--svg-text-light', p.svgTextLight)
|
||||
|
||||
root.classList.toggle('palette-dark', p.dark)
|
||||
isDark.value = p.dark
|
||||
}
|
||||
|
||||
function darken(hex: string): string {
|
||||
@@ -166,7 +233,7 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
||||
position: absolute;
|
||||
top: calc(100% + 0.5rem);
|
||||
right: 0;
|
||||
width: 240px;
|
||||
width: 260px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 10px;
|
||||
background: var(--color-surface);
|
||||
@@ -240,8 +307,8 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
||||
.ds-palette-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.35rem 0.4rem;
|
||||
gap: 0.35rem;
|
||||
padding: 0.3rem 0.35rem;
|
||||
border-radius: 6px;
|
||||
background: var(--color-bg);
|
||||
border: 1.5px solid transparent;
|
||||
@@ -251,12 +318,17 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
||||
.ds-palette-btn:hover { border-color: var(--color-border); }
|
||||
.ds-palette-btn--active {
|
||||
border-color: var(--color-primary);
|
||||
background: white;
|
||||
}
|
||||
.ds-palette-btn--dark {
|
||||
background: #1e293b;
|
||||
}
|
||||
.ds-palette-btn--dark .ds-palette-name { color: #e2e8f0; }
|
||||
.ds-palette-btn--dark .ds-palette-mode { color: #94a3b8; }
|
||||
|
||||
.ds-palette-dots {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.ds-dot {
|
||||
width: 10px;
|
||||
@@ -265,10 +337,21 @@ onUnmounted(() => document.removeEventListener('click', onClickOutside))
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.ds-palette-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
.ds-palette-name {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.ds-palette-mode {
|
||||
font-size: 0.58rem;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Transition */
|
||||
|
||||
@@ -13,13 +13,13 @@
|
||||
v-for="v in gridVolumes"
|
||||
:key="'gv' + v"
|
||||
:x1="toSvgX(v)" :y1="toSvgY(0)" :x2="toSvgX(v)" :y2="toSvgY(pmax)"
|
||||
stroke="#e2e8f0" stroke-width="0.5"
|
||||
stroke="var(--svg-grid)" stroke-width="0.5"
|
||||
/>
|
||||
<line
|
||||
v-for="p in gridPrices"
|
||||
:key="'gp' + p"
|
||||
:x1="toSvgX(0)" :y1="toSvgY(p)" :x2="toSvgX(vmax)" :y2="toSvgY(p)"
|
||||
stroke="#e2e8f0" stroke-width="0.5"
|
||||
stroke="var(--svg-grid)" stroke-width="0.5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
@@ -33,16 +33,16 @@
|
||||
|
||||
<!-- Median curve (if available) -->
|
||||
<g v-if="medianVote">
|
||||
<path :d="getVotePath(medianVote, 1)" fill="none" stroke="#1e40af" stroke-width="4" />
|
||||
<path :d="getVotePath(medianVote, 2)" fill="none" stroke="#991b1b" stroke-width="4" />
|
||||
<path :d="getVotePath(medianVote, 1)" fill="none" stroke="var(--color-primary)" stroke-width="4" />
|
||||
<path :d="getVotePath(medianVote, 2)" fill="none" stroke="#ef4444" stroke-width="4" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Axis labels -->
|
||||
<text :x="svgW / 2" :y="svgH - 2" text-anchor="middle" font-size="11" fill="#64748b">
|
||||
<text :x="svgW / 2" :y="svgH - 2" text-anchor="middle" font-size="11" fill="var(--svg-text-light)">
|
||||
Volume (m³)
|
||||
</text>
|
||||
<text :x="6" :y="12" font-size="11" fill="#64748b">€/m³</text>
|
||||
<text :x="6" :y="12" font-size="11" fill="var(--svg-text-light)">€/m³</text>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
@@ -117,7 +117,7 @@ onMounted(async () => {
|
||||
.overlay-chart svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: white;
|
||||
background: var(--color-surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user