front: make comparison buttons slide behind the entity selectors

tournesol-app · May 23, 2024 · c1fe5c1 · c1fe5c1
1 parent 8447d17
commit c1fe5c1
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 8 deletions.
diff --git a/frontend/src/features/comparisons/Comparison.tsx b/frontend/src/features/comparisons/Comparison.tsx
@@ -9,7 +9,7 @@ import { useHistory, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Location } from 'history';
 
-import { Box, Card, CircularProgress, Grid } from '@mui/material';
+import { Box, Card, CircularProgress, Grid, useTheme } from '@mui/material';
 
 import { useNotifications } from 'src/hooks';
 import {
@@ -86,6 +86,7 @@ const Comparison = ({
   const { t, i18n } = useTranslation();
   const currentLang = i18n.resolvedLanguage;
 
+  const theme = useTheme();
   const history = useHistory();
   const location = useLocation();
   const { showSuccessAlert, displayErrorsFrom } = useNotifications();
@@ -297,7 +298,14 @@ const Comparison = ({
 
   return (
     <>
-      <Grid container gap={1} mb={1} maxWidth={COMPARISON_MAX_WIDTH}>
+      <Grid
+        container
+        gap={1}
+        mb={1}
+        maxWidth={COMPARISON_MAX_WIDTH}
+        // Allow the CriterionButtons to slide behind the entity selectors.
+        zIndex={theme.zIndex.comparisonElevation1}
+      >
         <Grid item xs display="flex" flexDirection="column" alignSelf="stretch">
           <EntitySelector
             alignment="left"

diff --git a/frontend/src/features/comparisons/inputs/CriteriaButtons.tsx b/frontend/src/features/comparisons/inputs/CriteriaButtons.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useDrag } from '@use-gesture/react';
@@ -15,7 +15,7 @@ import { ComparisonRequest } from 'src/services/openapi';
 
 import CriterionButtons, { BUTTON_SCORE_MAX } from './CriterionButtons';
 
-const SWIPE_TIMEOUT = 225;
+const SWIPE_TIMEOUT = 160;
 const SWIPE_VELOCITY: number | Vector2 = [0.25, 0.25];
 
 interface CriteriaButtonsProps {
@@ -45,8 +45,9 @@ const CriteriaButtons = ({
   onSubmit,
 }: CriteriaButtonsProps) => {
   const { t } = useTranslation();
-  const tutorial = useContext(TutorialContext);
+  const containerRef = useRef<HTMLElement>(null);
 
+  const tutorial = useContext(TutorialContext);
   const { criterias: pollCriteria, name: pollName, options } = useCurrentPoll();
   const mainCriterionName = options?.mainCriterionName;
 
@@ -212,7 +213,7 @@ const CriteriaButtons = ({
   };
 
   return (
-    <Box display="flex" flexDirection="column" rowGap={1}>
+    <Box display="flex" flexDirection="column" rowGap={1} ref={containerRef}>
       {!navigationDisabled && (
         <Box display="flex" justifyContent="center">
           <IconButton
@@ -232,6 +233,7 @@ const CriteriaButtons = ({
         onExited={onSlideExited}
         onExiting={() => setDisableScoreButtons(true)}
         timeout={SWIPE_TIMEOUT}
+        container={containerRef.current}
       >
         <Box {...bindDrag()} sx={{ touchAction: 'pan-x' }}>
           <CriterionButtons

diff --git a/frontend/src/features/comparisons/inputs/CriteriaButtonsScoreReview.tsx b/frontend/src/features/comparisons/inputs/CriteriaButtonsScoreReview.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Box, Zoom } from '@mui/material';
+import { Box, Zoom, useTheme } from '@mui/material';
 
 import { CriteriaIcon } from 'src/components';
 import { useCurrentPoll } from 'src/hooks';
@@ -15,6 +15,7 @@ interface CriteriaButtonsScoreReviewProps {
 const CriteriaButtonsScoreReview = ({
   initialComparison,
 }: CriteriaButtonsScoreReviewProps) => {
+  const theme = useTheme();
   const { criterias } = useCurrentPoll();
 
   const orderedCriteriaScores = criterias
@@ -35,6 +36,8 @@ const CriteriaButtonsScoreReview = ({
       px={1}
       display="flex"
       sx={{ justifyContent: { xs: 'space-between', md: 'space-around' } }}
+      // Allow the CriterionButtons to slide behind this component.
+      zIndex={theme.zIndex.comparisonElevation1}
     >
       {scoreButtons.map((scoreBtn) => (
         <Box

diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
@@ -16,6 +16,7 @@ declare module '@mui/material/styles' {
   }
 
   interface ZIndex {
+    comparisonElevation1: number;
     videoCardDuration: number;
   }
 }
@@ -81,7 +82,8 @@ export const theme = createTheme({
     ].join(','),
   },
   zIndex: {
-    videoCardDuration: 1,
+    comparisonElevation1: 2,
+    videoCardDuration: 3,
   },
   components: {
     MuiInputBase: {