feat: add alignment and sizing settings (#1300)

* fix: add alignment and sizing settings * fix: use default for file max-width * fix: add translations and fix some hard codded strings * fix: make controls smaller * fix: tests * fix: remove defaults * fix: tests with 'default' * fix: update deps
graasp · Jun 28, 2024 · 4ef2378 · 4ef2378
1 parent a1dfedc
commit 4ef2378
Show file tree

Hide file tree

Showing 17 changed files with 369 additions and 180 deletions.
diff --git a/cypress/e2e/item/settings/itemSettings.cy.ts b/cypress/e2e/item/settings/itemSettings.cy.ts
@@ -398,14 +398,11 @@ describe('Item Settings', () => {
         cy.visit(buildItemSettingsPath(itemId));
 
         // default value
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
-          'have.value',
-          MaxWidth.ExtraLarge,
-        );
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).should('have.value', 'default');
 
         const newMaxWidth = MaxWidth.Small;
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).click();
-        cy.get(`[role="option"][data-value="${newMaxWidth}"]`).click();
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).select(newMaxWidth);
+        // cy.get(`[role="option"][data-value="${newMaxWidth}"]`).click();
 
         cy.wait('@editItem').then(
           ({
@@ -432,15 +429,15 @@ describe('Item Settings', () => {
             },
           },
           settings: {
-            maxWidth: MaxWidth.ExtraLarge,
+            maxWidth: MaxWidth.Large,
           },
         });
         cy.setUpApi({ items: [FILE] });
         const { id: itemId } = FILE;
 
         cy.visit(buildItemSettingsPath(itemId));
 
-        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID} + input`).should(
+        cy.get(`#${FILE_SETTING_MAX_WIDTH_ID}`).should(
           'have.value',
           FILE.settings.maxWidth,
         );

diff --git a/package.json b/package.json
@@ -22,9 +22,9 @@
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.15.0",
     "@graasp/query-client": "3.14.0",
-    "@graasp/sdk": "4.15.0",
-    "@graasp/translations": "1.28.0",
-    "@graasp/ui": "4.20.0",
+    "@graasp/sdk": "4.15.1",
+    "@graasp/translations": "1.30.3",
+    "@graasp/ui": "4.20.2",
     "@mui/icons-material": "5.15.19",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.19",

diff --git a/src/components/item/ItemContent.tsx b/src/components/item/ItemContent.tsx
@@ -1,6 +1,6 @@
 import { useOutletContext } from 'react-router-dom';
 
-import { Container, Skeleton, styled } from '@mui/material';
+import { Container, Skeleton, Stack, styled } from '@mui/material';
 
 import { Api } from '@graasp/query-client';
 import {
@@ -50,12 +50,13 @@ import Items from '../main/Items';
 import NewItemButton from '../main/NewItemButton';
 import { OutletType } from '../pages/item/type';
 import { useItemSearch } from './ItemSearch';
+import FileAlignmentSetting from './settings/file/FileAlignmentSetting';
+import FileMaxWidthSetting from './settings/file/FileMaxWidthSetting';
+import { SettingVariant } from './settings/settingTypes';
 
 const { useChildren, useFileContentUrl, useEtherpad } = hooks;
 
 const StyledContainer = styled(Container)(() => ({
-  textAlign: 'center',
-  height: '80vh',
   flexGrow: 1,
 }));
 
@@ -72,12 +73,18 @@ const FileContent = ({
   if (fileUrl) {
     return (
       <StyledContainer>
-        <FileItem
-          fileUrl={fileUrl}
-          id={buildFileItemId(item.id)}
-          item={item}
-          pdfViewerLink={buildPdfViewerLink(GRAASP_ASSETS_URL)}
-        />
+        <Stack direction="column" alignItems="center" gap={2} width="100%">
+          <Stack direction="row" gap={1}>
+            <FileMaxWidthSetting item={item} variant={SettingVariant.Button} />
+            <FileAlignmentSetting item={item} variant={SettingVariant.Button} />
+          </Stack>
+          <FileItem
+            fileUrl={fileUrl}
+            id={buildFileItemId(item.id)}
+            item={item}
+            pdfViewerLink={buildPdfViewerLink(GRAASP_ASSETS_URL)}
+          />
+        </Stack>
       </StyledContainer>
     );
   }

diff --git a/src/components/item/form/DescriptionPlacementForm.tsx b/src/components/item/form/DescriptionPlacementForm.tsx
@@ -6,6 +6,8 @@ import {
   DiscriminatedItem,
 } from '@graasp/sdk';
 
+import { CornerDownRightIcon, CornerUpRightIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '@/config/i18n';
 import {
   ITEM_SETTING_DESCRIPTION_PLACEMENT_SELECT_ID,
@@ -31,32 +33,37 @@ const DescriptionPlacementForm = ({
   const handlePlacementChanged = (placement: string): void => {
     onPlacementChanged(placement as DescriptionPlacementType);
   };
+  const descriptionPlacement =
+    updatedProperties.settings?.descriptionPlacement ?? DEFAULT_PLACEMENT;
 
   return (
     <ItemSettingProperty
       title={t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE)}
+      icon={
+        descriptionPlacement === DescriptionPlacement.ABOVE ? (
+          <CornerUpRightIcon />
+        ) : (
+          <CornerDownRightIcon />
+        )
+      }
+      valueText={t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_HELPER, {
+        placement: t(descriptionPlacement).toLowerCase(),
+      })}
       inputSetting={
         <Select
           id={ITEM_SETTING_DESCRIPTION_PLACEMENT_SELECT_ID}
-          value={
-            updatedProperties.settings?.descriptionPlacement ??
-            DEFAULT_PLACEMENT
-          }
+          value={descriptionPlacement}
           onChange={(e) => handlePlacementChanged(e.target.value)}
           size="small"
         >
-          <MenuItem
-            id={buildDescriptionPlacementId(DescriptionPlacement.ABOVE)}
-            value={DescriptionPlacement.ABOVE}
-          >
-            {t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_ABOVE)}
-          </MenuItem>
-          <MenuItem
-            id={buildDescriptionPlacementId(DescriptionPlacement.BELOW)}
-            value={DescriptionPlacement.BELOW}
-          >
-            {t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_BELOW)}
-          </MenuItem>
+          {Object.values(DescriptionPlacement).map((placement) => (
+            <MenuItem
+              id={buildDescriptionPlacementId(placement)}
+              value={placement}
+            >
+              {t(placement)}
+            </MenuItem>
+          ))}
         </Select>
       }
     />

diff --git a/src/components/item/settings/AdminChatSettings.tsx b/src/components/item/settings/AdminChatSettings.tsx
@@ -1,5 +1,7 @@
 import { PackedItem, PermissionLevel } from '@graasp/sdk';
 
+import { MessageSquareTextIcon } from 'lucide-react';
+
 import { useBuilderTranslation } from '@/config/i18n';
 import { BUILDER } from '@/langs/constants';
 
@@ -28,6 +30,7 @@ const AdminChatSettings = ({ item }: Props): JSX.Element | null => {
     <ItemSettingProperty
       title={t(BUILDER.ITEM_SETTINGS_CHAT_SETTINGS_TITLE)}
       valueText={t(BUILDER.ITEM_SETTINGS_CLEAR_CHAT_EXPLANATION)}
+      icon={<MessageSquareTextIcon />}
       inputSetting={<ClearChatButton chatId={itemId} />}
     />
   );

diff --git a/src/components/item/settings/FileSettings.tsx b/src/components/item/settings/FileSettings.tsx
diff --git a/src/components/item/settings/ItemSettingProperty.tsx b/src/components/item/settings/ItemSettingProperty.tsx
@@ -1,4 +1,4 @@
-import { Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 
 type Props = {
   title: string;
@@ -18,8 +18,8 @@ const ItemSettingProperty = ({
   <Stack>
     <Stack direction="row" alignItems="center" justifyContent="space-between">
       <Stack direction="row" alignItems="center" gap={1}>
-        {icon}
-        <Stack direction="column">
+        <Box flexShrink={0}>{icon}</Box>
+        <Stack direction="column" alignItems="flex-start">
           <Typography variant="body1" fontWeight="bold">
             {title}
           </Typography>

diff --git a/src/components/item/settings/ItemSettingsProperties.tsx b/src/components/item/settings/ItemSettingsProperties.tsx
@@ -21,9 +21,11 @@ import {
 import { BUILDER } from '@/langs/constants';
 
 import DescriptionPlacementForm from '../form/DescriptionPlacementForm';
-import FileSettings from './FileSettings';
 import ItemSettingCheckBoxProperty from './ItemSettingCheckBoxProperty';
 import LinkSettings from './LinkSettings';
+import FileAlignmentSetting from './file/FileAlignmentSetting';
+import FileMaxWidthSetting from './file/FileMaxWidthSetting';
+import { SettingVariant } from './settingTypes';
 
 type Props = {
   item: DiscriminatedItem;
@@ -64,7 +66,13 @@ const ItemSettingsProperties = ({ item }: Props): JSX.Element => {
         return <LinkSettings item={item} />;
       case ItemType.S3_FILE:
       case ItemType.LOCAL_FILE:
-        return <FileSettings item={item} />;
+        return (
+          <>
+            <FileMaxWidthSetting item={item} variant={SettingVariant.List} />
+            <FileAlignmentSetting item={item} variant={SettingVariant.List} />
+          </>
+        );
+
       case ItemType.APP:
         return (
           <ItemSettingCheckBoxProperty