feat: déplacer bouton ℹ hors du PeriodSelector → bouton flottant isolé
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
- Sous ☰ sur mobile (top-16 left-4), top-4 left-4 sur desktop - PeriodSelector : suppression prop onInfo + bouton ℹ intégré Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+9
-1
@@ -131,6 +131,15 @@ export default function App() {
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Bouton info — sous ☰ sur mobile, top-left sur desktop */}
|
||||||
|
<button
|
||||||
|
onClick={() => setInfoOpen(true)}
|
||||||
|
className={`absolute ${isMobile ? 'top-16' : 'top-4'} left-4 z-[1001] w-10 h-10 bg-[#0a0b0f]/90 backdrop-blur-sm border border-[#2e2f3a] rounded-xl flex items-center justify-center text-[#6b7280] hover:text-[#d4a843] transition-colors text-base`}
|
||||||
|
aria-label="Aide"
|
||||||
|
>
|
||||||
|
ℹ
|
||||||
|
</button>
|
||||||
|
|
||||||
{/* Period selector — floating over map */}
|
{/* Period selector — floating over map */}
|
||||||
<div className={`absolute top-4 z-[1000] ${isMobile ? 'left-16 right-4' : 'left-1/2 -translate-x-1/2'}`}>
|
<div className={`absolute top-4 z-[1000] ${isMobile ? 'left-16 right-4' : 'left-1/2 -translate-x-1/2'}`}>
|
||||||
<PeriodSelector
|
<PeriodSelector
|
||||||
@@ -143,7 +152,6 @@ export default function App() {
|
|||||||
geoPercent={visibleStats && visibleStats.transactionCount > 0
|
geoPercent={visibleStats && visibleStats.transactionCount > 0
|
||||||
? Math.round((visibleStats.geoCount / visibleStats.transactionCount) * 100)
|
? Math.round((visibleStats.geoCount / visibleStats.transactionCount) * 100)
|
||||||
: null}
|
: null}
|
||||||
onInfo={() => setInfoOpen(true)}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ interface PeriodSelectorProps {
|
|||||||
viewMode: 'heatmap' | 'flow';
|
viewMode: 'heatmap' | 'flow';
|
||||||
onViewModeChange: (mode: 'heatmap' | 'flow') => void;
|
onViewModeChange: (mode: 'heatmap' | 'flow') => void;
|
||||||
geoPercent?: number | null;
|
geoPercent?: number | null;
|
||||||
onInfo: () => void;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const PERIODS = [
|
const PERIODS = [
|
||||||
@@ -19,7 +18,7 @@ const PERIODS = [
|
|||||||
|
|
||||||
const PRESET_DAYS = new Set([1, 7, 30]);
|
const PRESET_DAYS = new Set([1, 7, 30]);
|
||||||
|
|
||||||
export function PeriodSelector({ value, onChange, animationActive, onAnimate, viewMode, onViewModeChange, geoPercent, onInfo }: PeriodSelectorProps) {
|
export function PeriodSelector({ value, onChange, animationActive, onAnimate, viewMode, onViewModeChange, geoPercent }: PeriodSelectorProps) {
|
||||||
const [customOpen, setCustomOpen] = useState(false);
|
const [customOpen, setCustomOpen] = useState(false);
|
||||||
const [inputVal, setInputVal] = useState('');
|
const [inputVal, setInputVal] = useState('');
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
@@ -132,15 +131,6 @@ export function PeriodSelector({ value, onChange, animationActive, onAnimate, vi
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="w-px mx-1 bg-[#2e2f3a] self-stretch" />
|
|
||||||
|
|
||||||
<button
|
|
||||||
onClick={onInfo}
|
|
||||||
className="px-2 py-1.5 rounded-md text-sm text-[#6b7280] hover:text-[#d4a843] hover:bg-[#1a1b23] transition-all duration-200 cursor-pointer leading-none"
|
|
||||||
aria-label="Aide"
|
|
||||||
>
|
|
||||||
ℹ
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user