Merge pull request #45 from graasp/fix-hiding-buttons-size-and-style

Fix hiding buttons size and style
graasp · Jan 10, 2023 · f771ec1 · f771ec1
2 parents cb543cb + c5ac879
commit f771ec1
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 18 deletions.
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -60,10 +60,14 @@ const theme = createTheme({
   },
   typography: {
     h2: {
-      fontSize: '2rem',
+      fontSize: '1.5rem',
     },
     h3: {
-      fontSize: '1.8rem',
+      fontSize: '1.2rem',
+      fontWeight: 'bold',
+    },
+    h4: {
+      fontSize: '1.2rem',
     },
   },
   status: {

diff --git a/src/components/main/tasks/TasksList.tsx b/src/components/main/tasks/TasksList.tsx
@@ -6,7 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Button } from '@graasp/ui';
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { useTheme } from '@mui/material';
+import { styled, useTheme } from '@mui/material';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
@@ -20,6 +20,10 @@ import AddTask from './AddTask';
 import DraggableTask from './DraggableTask';
 import TasksListTitle from './TasksListTitle';
 
+const FullHeightStack = styled(Stack)(() => ({
+  height: '100%',
+}));
+
 type TasksListProps = {
   title: string;
   tasks: List<ExistingTaskType>;
@@ -70,10 +74,11 @@ const TasksList: FC<TasksListProps> = ({
         position: 'relative',
         zIndex: 1,
         boxShadow: isOver ? `0 0 1em ${theme.palette.primary.light}` : 'none',
+        maxWidth: '40em',
       }}
       key={label}
     >
-      <Stack alignItems="center" position="relative">
+      <FullHeightStack alignItems="center" position="relative">
         <TasksListTitle title={title} tasksNumber={tasks.size} />
         <Button
           size="small"
@@ -84,7 +89,11 @@ const TasksList: FC<TasksListProps> = ({
           <ExpandMoreIcon />
         </Button>
 
-        <Stack ref={setNodeRef} spacing={1} sx={{ m: 1, width: '100%' }}>
+        <FullHeightStack
+          ref={setNodeRef}
+          spacing={1}
+          sx={{ m: 1, width: '100%' }}
+        >
           {addComponent && <AddTask addTask={addTask} label={label} />}
           {tasks.size ? (
             tasks.map((task: ExistingTaskType, key: number) => (
@@ -101,8 +110,8 @@ const TasksList: FC<TasksListProps> = ({
               {t('NO_TASKS', { title })}
             </Typography>
           )}
-        </Stack>
-      </Stack>
+        </FullHeightStack>
+      </FullHeightStack>
     </Paper>
   );
 };

diff --git a/src/components/main/tasks/TasksListMinimized.tsx b/src/components/main/tasks/TasksListMinimized.tsx
@@ -1,31 +1,30 @@
-import { List } from 'immutable';
-
 import React, { forwardRef } from 'react';
 
 import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import { Badge } from '@mui/material';
 import Button from '@mui/material/Button';
-
-import { ExistingTaskType } from '../../../config/appDataTypes';
-import TasksListTitle from './TasksListTitle';
+import Typography from '@mui/material/Typography';
 
 type TasksListMinimizedProps = {
   title: string;
-  tasks: List<ExistingTaskType>;
+  tasksNumber?: number;
   onShow: () => void;
 };
 
 const TasksListMinimized = forwardRef<
   HTMLButtonElement,
   TasksListMinimizedProps
->(({ title, tasks, onShow }, ref) => (
+>(({ title, tasksNumber = 0, onShow }, ref) => (
   <Button
     ref={ref}
     variant="outlined"
     endIcon={<ArrowForwardIosIcon />}
     onClick={onShow}
-    sx={{ width: '100%', mt: 2 }}
+    sx={{ width: '100%', mt: 2, pt: 2, pb: 2 }}
   >
-    <TasksListTitle title={title} tasksNumber={tasks.size} />
+    <Badge badgeContent={tasksNumber} color="secondary">
+      <Typography>{title}</Typography>
+    </Badge>
   </Button>
 ));
 

diff --git a/src/components/views/TasksManager.tsx b/src/components/views/TasksManager.tsx
@@ -60,6 +60,13 @@ const TasksManager: FC = () => {
     [TASK_LABELS.COMPLETED]: false,
   });
 
+  const numberOfColumnsInGridForVisibleList =
+    12 /
+    Object.values(hiddenLists).reduce(
+      (total, x) => (x === false ? total + 1 : total),
+      0,
+    );
+
   const [activeTask, setActiveTask] = useState<ExistingTaskType | null>(null);
 
   const filteredMembersSetting = appSettingArray.find(
@@ -182,7 +189,12 @@ const TasksManager: FC = () => {
         unmountOnExit
         style={{ height: 'auto' }}
       >
-        <Grid item sm={12} md={4} height="100%">
+        <Grid
+          item
+          sm={12}
+          md={numberOfColumnsInGridForVisibleList}
+          height="100%"
+        >
           <TasksList
             title={title}
             label={label}
@@ -217,7 +229,7 @@ const TasksManager: FC = () => {
       >
         <TasksListMinimized
           title={title}
-          tasks={tasksArray}
+          tasksNumber={tasksArray.size}
           onShow={() => handleHide(label, false)}
         />
       </Slide>