fix: add alignment and sizing settings

graasp · Jun 27, 2024 · eb243f2 · eb243f2
1 parent 153f503
commit eb243f2
Show file tree

Hide file tree

Showing 21 changed files with 235 additions and 146 deletions.
diff --git a/cypress/e2e/item/share/shareItem.cy.ts b/cypress/e2e/item/share/shareItem.cy.ts
@@ -1,7 +1,6 @@
 import { Context, ShortLink, appendPathToUrl } from '@graasp/sdk';
 
 import { buildItemPath, buildItemSharePath } from '@/config/paths';
-import { ShortLinkPlatform } from '@/utils/shortLink';
 
 import {
   SHARE_ITEM_QR_BTN_ID,
@@ -19,6 +18,7 @@ import {
   buildGraaspPlayerView,
 } from '../../../support/paths';
 
+type ShortLinkPlatform = ShortLink['platform'];
 export const checkContainPlatformText = (platform: ShortLinkPlatform): void => {
   cy.get(`#${buildShortLinkPlatformTextId(platform)}`).should(
     'contain',

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.14.0",
-    "@graasp/translations": "1.28.0",
-    "@graasp/ui": "4.20.0",
+    "@graasp/sdk": "4.15.0",
+    "@graasp/translations": "1.30.3",
+    "@graasp/ui": "github:graasp/graasp-ui#alignment-setting",
     "@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
@@ -50,12 +50,11 @@ import Items from '../main/Items';
 import NewItemButton from '../main/NewItemButton';
 import { OutletType } from '../pages/item/type';
 import { useItemSearch } from './ItemSearch';
+import FileSettings from './settings/FileSettings';
 
 const { useChildren, useFileContentUrl, useEtherpad } = hooks;
 
 const StyledContainer = styled(Container)(() => ({
-  textAlign: 'center',
-  height: '80vh',
   flexGrow: 1,
 }));
 
@@ -72,6 +71,7 @@ const FileContent = ({
   if (fileUrl) {
     return (
       <StyledContainer>
+        <FileSettings item={item} />
         <FileItem
           fileUrl={fileUrl}
           id={buildFileItemId(item.id)}

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/publish/publicationButtons/PublishedButton.tsx b/src/components/item/publish/publicationButtons/PublishedButton.tsx
@@ -2,7 +2,7 @@ import LinkIcon from '@mui/icons-material/Link';
 import { LoadingButton } from '@mui/lab';
 import { Alert, Button } from '@mui/material';
 
-import { ClientHostManager, PackedItem, ShortLinkPlatform } from '@graasp/sdk';
+import { ClientHostManager, Context, PackedItem } from '@graasp/sdk';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { mutations } from '@/config/queryClient';
@@ -29,7 +29,7 @@ export const PublishedButton = ({ item, isLoading }: Props): JSX.Element => {
 
   const getLibraryLink = () => {
     const clientHostManager = ClientHostManager.getInstance();
-    return clientHostManager.getItemLink(ShortLinkPlatform.library, itemId);
+    return clientHostManager.getItemLink(Context.Library, itemId);
   };
 
   const description = (

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
@@ -1,9 +1,31 @@
-import { SelectChangeEvent } from '@mui/material';
+import { type MouseEvent } from 'react';
 
-import { LocalFileItemType, MaxWidth, S3FileItemType } from '@graasp/sdk';
-import { Select } from '@graasp/ui';
+import {
+  ToggleButton as MuiToggleButton,
+  Paper,
+  SelectChangeEvent,
+  ToggleButtonGroup,
+  styled,
+  toggleButtonGroupClasses,
+} from '@mui/material';
 
-import { Expand as ExpandIcon } from 'lucide-react';
+import {
+  AlignmentType,
+  DEFAULT_FILE_ALIGNMENT_SETTING,
+  DEFAULT_FILE_MAX_WIDTH_SETTING,
+  LocalFileItemType,
+  MaxWidth,
+  S3FileItemType,
+} from '@graasp/sdk';
+import { DEFAULT_LIGHT_PRIMARY_COLOR, Select } from '@graasp/ui';
+
+import {
+  AlignCenterIcon,
+  AlignCenterVerticalIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  Expand as ExpandIcon,
+} from 'lucide-react';
 
 import { useBuilderTranslation, useEnumsTranslation } from '@/config/i18n';
 import { mutations } from '@/config/queryClient';
@@ -12,6 +34,30 @@ import { BUILDER } from '@/langs/constants';
 
 import ItemSettingProperty from './ItemSettingProperty';
 
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  backgroundColor: 'white',
+  border: `1px solid ${theme.palette.divider}`,
+}));
+const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+  [`& .${toggleButtonGroupClasses.grouped}`]: {
+    margin: theme.spacing(0.5),
+    border: 0,
+    borderRadius: theme.shape.borderRadius,
+    [`&.${toggleButtonGroupClasses.disabled}`]: {
+      border: 0,
+    },
+  },
+}));
+const ToggleButton = styled(MuiToggleButton)(({ theme }) => ({
+  '&.Mui-selected': {
+    color: theme.palette.primary.main,
+    backgroundColor: DEFAULT_LIGHT_PRIMARY_COLOR.main,
+    '&:hover': {
+      backgroundColor: DEFAULT_LIGHT_PRIMARY_COLOR.dark,
+    },
+  },
+}));
+
 const FileSettings = ({
   item,
 }: {
@@ -21,31 +67,75 @@ const FileSettings = ({
   const { t: translateBuilder } = useBuilderTranslation();
   const { mutate: editItem } = mutations.useEditItem();
 
-  const onChange = (e: SelectChangeEvent<MaxWidth>) => {
+  const onChangeMaxWidth = (e: SelectChangeEvent<MaxWidth>) => {
     editItem({
       id: item.id,
       settings: { maxWidth: e.target.value as MaxWidth },
     });
   };
 
+  const onChangeAlignment = (
+    _e: MouseEvent<HTMLElement>,
+    value: AlignmentType,
+  ) => {
+    // only send an update when the value is not null, as this is sent when clicking a selected button
+    if (value !== null) {
+      editItem({
+        id: item.id,
+        settings: { alignment: value },
+      });
+    }
+  };
+
+  const alignment = item.settings.alignment ?? DEFAULT_FILE_ALIGNMENT_SETTING;
+  const maxWidth = item.settings.maxWidth ?? DEFAULT_FILE_MAX_WIDTH_SETTING;
+
   return (
-    <ItemSettingProperty
-      title={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
-      valueText={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
-      icon={<ExpandIcon />}
-      inputSetting={
-        <Select
-          id={FILE_SETTING_MAX_WIDTH_ID}
-          size="small"
-          values={Object.values(MaxWidth).map((s) => ({
-            text: translateEnum(s),
-            value: s,
-          }))}
-          onChange={onChange}
-          defaultValue={item.settings.maxWidth || MaxWidth.ExtraLarge}
-        />
-      }
-    />
+    <>
+      <ItemSettingProperty
+        title={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+        valueText={translateBuilder(BUILDER.SETTINGS_MAX_WIDTH_LABEL)}
+        icon={<ExpandIcon />}
+        inputSetting={
+          <Select
+            id={FILE_SETTING_MAX_WIDTH_ID}
+            size="small"
+            values={Object.values(MaxWidth).map((s) => ({
+              text: translateEnum(s),
+              value: s,
+            }))}
+            onChange={onChangeMaxWidth}
+            value={maxWidth}
+          />
+        }
+      />
+      <ItemSettingProperty
+        title={translateBuilder(BUILDER.SETTINGS_ALIGNMENT_LABEL)}
+        valueText={translateBuilder(BUILDER.SETTINGS_ALIGNMENT_HELPER)}
+        icon={<AlignCenterVerticalIcon />}
+        inputSetting={
+          <StyledPaper elevation={0}>
+            <StyledToggleButtonGroup
+              value={alignment}
+              exclusive
+              onChange={onChangeAlignment}
+              aria-label="text alignment"
+              size="small"
+            >
+              <ToggleButton value="left" aria-label="left aligned">
+                <AlignLeftIcon />
+              </ToggleButton>
+              <ToggleButton value="center" aria-label="centered">
+                <AlignCenterIcon />
+              </ToggleButton>
+              <ToggleButton value="right" aria-label="right aligned">
+                <AlignRightIcon />
+              </ToggleButton>
+            </StyledToggleButtonGroup>
+          </StyledPaper>
+        }
+      />
+    </>
   );
 };
 

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/sharing/shortLink/PlatformIcon.tsx b/src/components/item/sharing/shortLink/PlatformIcon.tsx
@@ -1,12 +1,10 @@
-import { Context } from '@graasp/sdk';
+import { Context, ShortLink } from '@graasp/sdk';
 import { BuildIcon, GraaspLogo, LibraryIcon, PlayIcon } from '@graasp/ui';
 
-import { ShortLinkPlatform } from '@/utils/shortLink';
-
 const DEFAULT_ICON_SIZE = 25;
 
 type Props = {
-  platform: ShortLinkPlatform;
+  platform: ShortLink['platform'];
   accentColor: string;
   size?: number;
 };

diff --git a/src/components/item/sharing/shortLink/PlatformSelect.tsx b/src/components/item/sharing/shortLink/PlatformSelect.tsx
@@ -1,11 +1,11 @@
 import { MenuItem, Select, SelectChangeEvent } from '@mui/material';
 
-import { Context, ItemPublished } from '@graasp/sdk';
+import { Context, ItemPublished, ShortLink } from '@graasp/sdk';
 
 import { useEnumsTranslation } from '@/config/i18n';
 import { SHORT_LINK_PLATFORM_SELECT_ID } from '@/config/selectors';
-import { ShortLinkPlatform } from '@/utils/shortLink';
 
+type ShortLinkPlatform = ShortLink['platform'];
 type Props = {
   platform: ShortLinkPlatform;
   publishedEntry?: ItemPublished;

diff --git a/src/components/item/sharing/shortLink/ShortLinkDialogContent.tsx b/src/components/item/sharing/shortLink/ShortLinkDialogContent.tsx
@@ -8,6 +8,8 @@ import {
   Stack,
 } from '@mui/material';
 
+import { ShortLink } from '@graasp/sdk';
+
 import CancelButton from '@/components/common/CancelButton';
 import { SHORT_LINK_API_CALL_DEBOUNCE_MS } from '@/config/constants';
 import { useBuilderTranslation } from '@/config/i18n';
@@ -17,7 +19,6 @@ import {
   buildShortLinkCancelBtnId,
 } from '@/config/selectors';
 import { BUILDER } from '@/langs/constants';
-import { ShortLinkPlatform } from '@/utils/shortLink';
 import { useDebouncedCallback } from '@/utils/useDebounce';
 
 import AliasInput from './AliasInput';
@@ -29,7 +30,7 @@ const { useShortLinkAvailable } = hooks;
 type Props = {
   itemId: string;
   initialAlias: string;
-  initialPlatform: ShortLinkPlatform;
+  initialPlatform: ShortLink['platform'];
   isNew: boolean;
   handleClose: () => void;
 };