shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor large toolbox modules
All checks were successful
Deploy Sokko G / deploy (push) Successful in 16s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-25 08:20:56 +02:00
parent c2e37ad3f2
commit 6dd64f87c3
19 changed files with 2042 additions and 1659 deletions
Download patch file Download diff file Expand all files Collapse all files

145
website/src/features/toolboxes/modules/CalendarEventControls.jsx Normal file
View file

@ -0,0 +1,145 @@
// Rôle : regroupe les switches, alertes et choix de couleur du formulaire calendrier.
import { Icon } from "../../../components/Icon.jsx";
import {
CALENDAR_ALERT_OFFSETS,
CALENDAR_COLORS
} from "./calendarUtils.js";
import { ALERT_MODES } from "./timerOptions.js";
const CALENDAR_COLOR_VALUES = {
violet: "#8b5cf6",
gold: "#f6c453",
cyan: "#22d3ee",
pink: "#d946ef",
green: "#22c55e",
gray: "#7d879f"
};
export function MonthlyRepeatSwitch({ value, textContent, onChange }) {
const options = [
{ value: "monthDay", icon: "day-number", label: textContent.monthlyRepeatMonthDay || "Numéro du jour" },
{ value: "weekday", icon: "day-name", label: textContent.monthlyRepeatWeekday || "Jour de semaine" }
];
return (
<div className="layout-switch calendar-month-repeat-switch" role="group" aria-label={textContent.monthlyRepeatLabel || "Règle mensuelle"}>
{options.map((option) => (
<button
key={option.value}
className={value === option.value ? "active" : ""}
type="button"
onClick={() => onChange(option.value)}
aria-pressed={value === option.value}
aria-label={option.label}
title={option.label}
>
<Icon name={option.icon} />
</button>
))}
</div>
);
}
export function MonthEventRepeatSwitch({ value, monthlyRepeatBy, textContent, onChange }) {
const options = [
{ value: "none", icon: "close", label: textContent.repeatNone || "Aucune" },
{ value: "weekly", icon: "calendar-week", label: textContent.repeatWeekly || "Chaque semaine", disabled: monthlyRepeatBy === "monthDay" },
{ value: "monthly", icon: "calendar-month", label: textContent.repeatMonthly || "Chaque mois" }
];
const safeValue = monthlyRepeatBy === "monthDay" && value === "weekly" ? "none" : value;
return (
<div className="calendar-month-event-repeat-switch" role="group" aria-label={textContent.repeatLabel || "Répétition"}>
{options.map((option) => (
<button
key={option.value}
className={safeValue === option.value ? "active" : ""}
type="button"
disabled={option.disabled}
onClick={() => onChange(option.value)}
aria-pressed={safeValue === option.value}
aria-label={option.label}
title={option.label}
>
<Icon name={option.icon} />
</button>
))}
</div>
);
}
export function CalendarAlertOffsets({ selectedOffsets, textContent, onToggle }) {
const labels = {
10: textContent.alertOffset10 || "10 min avant",
5: textContent.alertOffset5 || "5 min avant",
0: textContent.alertOffset0 || "Au début"
};
return (
<fieldset className="calendar-alert-offsets">
<legend>{textContent.alertOffsetLabel || "Alerte"}</legend>
{CALENDAR_ALERT_OFFSETS.map((offset) => (
<label key={offset}>
<input type="checkbox" checked={selectedOffsets.includes(offset)} onChange={() => onToggle(offset)} />
<span>{labels[offset]}</span>
</label>
))}
</fieldset>
);
}
export function CalendarColorPicker({ value, textContent, onChange }) {
const label = textContent.colorLabel || "Couleur";
return (
<div className="calendar-color-picker notepad-color-dropdown">
<span>{label}</span>
<button
className="calendar-color-toggle notepad-color-toggle"
type="button"
title={label}
aria-label={label}
style={{ "--swatch-color": CALENDAR_COLOR_VALUES[value] || CALENDAR_COLOR_VALUES.violet }}
/>
<div className="calendar-color-menu notepad-color-menu" role="menu" aria-label={label}>
{CALENDAR_COLORS.map((color) => (
<button
key={color}
className={`notepad-swatch ${value === color ? "active" : ""}`}
type="button"
title={textContent[`color${color.charAt(0).toUpperCase()}${color.slice(1)}`] || color}
aria-label={textContent[`color${color.charAt(0).toUpperCase()}${color.slice(1)}`] || color}
aria-pressed={value === color}
style={{ "--swatch-color": CALENDAR_COLOR_VALUES[color] }}
onClick={() => onChange(color)}
/>
))}
</div>
</div>
);
}
export function CalendarAlertModeSwitch({ mode, textContent, onChange }) {
const labels = {
off: textContent.alertOffTitle || "Pas d'alerte",
visible: textContent.alertVisibleTitle || "Alerte quand la toolbox est affichée",
site: textContent.alertSiteTitle || "Alerte sur tout le site"
};
return (
<div className="timer-alert-mode-switch calendar-alert-mode-switch" role="group" aria-label={textContent.alertModeTitle || "Mode d'alerte"}>
{ALERT_MODES.map((option) => (
<button
key={option.mode}
className={`timer-alert-mode-button ${mode === option.mode ? "active" : ""}`}
type="button"
onClick={() => onChange(option.mode)}
aria-pressed={mode === option.mode}
aria-label={labels[option.mode]}
title={labels[option.mode]}
>
<Icon name={option.icon} />
</button>
))}
</div>
);
}