feat(ui): change Share icon and improve layout of item header actio…

…ns (#566) chore: improve layout of item header actions chore: use smaller sized favorite icon in item actions and bigger sized icon in item card
graasp · Feb 24, 2023 · 5238321 · 5238321
1 parent 12e3a2f
commit 5238321
Show file tree

Hide file tree

Showing 27 changed files with 1,080 additions and 1,088 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,4 +1,5 @@
 {
+  "root": true,
   "extends": [
     "react-app",
     "airbnb",
@@ -7,7 +8,7 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
-  "plugins": ["import", "jsx-a11y", "react", "@typescript-eslint"],
+  "plugins": ["import", "jsx-a11y", "@typescript-eslint"],
   "env": {
     "browser": true,
     "node": true,

diff --git a/package.json b/package.json
@@ -15,8 +15,8 @@
     "@graasp/chatbox": "1.0.3",
     "@graasp/query-client": "0.2.1",
     "@graasp/sdk": "0.4.1",
-    "@graasp/translations": "1.3.0",
-    "@graasp/ui": "0.11.1",
+    "@graasp/translations": "1.5.0",
+    "@graasp/ui": "0.13.0",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.117",
     "@mui/material": "5.11.6",
@@ -72,7 +72,7 @@
     "dist": "env-cmd -f ./.env.production react-app-rewired build",
     "dist:dev": "env-cmd -f ./.env.development react-app-rewired build",
     "eject": "react-scripts eject",
-    "lint": "eslint .",
+    "lint": "eslint --resolve-plugins-relative-to .",
     "type-check": "tsc --noEmit",
     "check": "yarn prettier:check && yarn lint && yarn type-check",
     "prettier:check": "prettier --check src/**/*.{js,ts,tsx,json}",
@@ -87,9 +87,6 @@
     "release:major": "standard-version -a --release-as major",
     "release:patch": "standard-version -a --release-as patch"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -122,8 +119,8 @@
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
     "@types/uuid": "9.0.0",
-    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.51.0",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "concurrently": "7.6.0",
     "cypress": "12.6.0",
     "cypress-localstorage-commands": "2.2.2",
@@ -147,19 +144,11 @@
     "wait-on": "7.0.1"
   },
   "resolutions": {
-    "@graasp/sdk": "0.4.1",
-    "@graasp/ui": "0.11.1",
     "@mui/icons-material": "5.11.0",
     "@mui/material": "5.11.6",
-    "ansi-html": "0.0.8",
-    "browserslist": "4.16.5",
-    "glob-parent": "5.1.2",
-    "i18next": "21.8.1",
     "immer": "9.0.6",
     "immutable": "4.2.4",
-    "node-forge": "1.3.0",
-    "nth-check": "2.0.1",
-    "react-error-overlay": "6.0.9"
+    "@svgr/webpack": "6.5.1"
   },
   "packageManager": "[email protected]"
 }
diff --git a/src/components/common/AnalyticsDashboardButton.tsx b/src/components/common/AnalyticsDashboardButton.tsx
@@ -30,17 +30,19 @@ const AnalyticsDashboardButton: FC<Props> = ({ id }) => {
 
   return (
     <Tooltip title={translateBuilder(BUILDER.ANALYTICS_DASHBOARD_LABEL)}>
-      <IconButton
-        aria-label={translateBuilder(BUILDER.ANALYTICS_DASHBOARD_LABEL)}
-        onClick={onClick}
-        id={buildDashboardButtonId(id)}
-      >
-        {openedActionTabId === ItemActionTabs.Dashboard ? (
-          <CloseIcon />
-        ) : (
-          <PieChartIcon />
-        )}
-      </IconButton>
+      <span>
+        <IconButton
+          aria-label={translateBuilder(BUILDER.ANALYTICS_DASHBOARD_LABEL)}
+          onClick={onClick}
+          id={buildDashboardButtonId(id)}
+        >
+          {openedActionTabId === ItemActionTabs.Dashboard ? (
+            <CloseIcon />
+          ) : (
+            <PieChartIcon />
+          )}
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/components/common/CollapseButton.tsx b/src/components/common/CollapseButton.tsx
@@ -72,13 +72,15 @@ const CollapseButton = ({
     default:
       return (
         <Tooltip title={text}>
-          <IconButton
-            aria-label={text}
-            className={COLLAPSE_ITEM_BUTTON_CLASS}
-            onClick={handleCollapse}
-          >
-            {icon}
-          </IconButton>
+          <span>
+            <IconButton
+              aria-label={text}
+              className={COLLAPSE_ITEM_BUTTON_CLASS}
+              onClick={handleCollapse}
+            >
+              {icon}
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/components/common/EditItemCaptionButton.tsx b/src/components/common/EditItemCaptionButton.tsx
@@ -0,0 +1,37 @@
+import EditIcon from '@mui/icons-material/Edit';
+import { IconButton, Tooltip } from '@mui/material';
+
+import { BUILDER } from '@graasp/translations';
+
+import { useBuilderTranslation } from '../../config/i18n';
+import { buildEditButtonId } from '../../config/selectors';
+import { useLayoutContext } from '../context/LayoutContext';
+
+type Props = {
+  itemId: string;
+};
+
+const EditItemCaptionButton = ({ itemId }: Props): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
+  const { setEditingItemId } = useLayoutContext();
+
+  const onClick = () => {
+    setEditingItemId(itemId);
+  };
+
+  return (
+    <Tooltip title={translateBuilder(BUILDER.EDIT_BUTTON_TOOLTIP)}>
+      <span>
+        <IconButton
+          aria-label="edit"
+          onClick={onClick}
+          id={buildEditButtonId(itemId)}
+        >
+          <EditIcon />
+        </IconButton>
+      </span>
+    </Tooltip>
+  );
+};
+
+export default EditItemCaptionButton;
diff --git a/src/components/common/ItemMetadataButton.tsx b/src/components/common/ItemMetadataButton.tsx
@@ -0,0 +1,43 @@
+import InfoIcon from '@mui/icons-material/Info';
+import { IconButton, Tooltip } from '@mui/material';
+
+import { BUILDER } from '@graasp/translations';
+
+import { useBuilderTranslation } from '../../config/i18n';
+import {
+  ITEM_INFORMATION_BUTTON_ID,
+  ITEM_INFORMATION_ICON_IS_OPEN_CLASS,
+} from '../../config/selectors';
+import { useLayoutContext } from '../context/LayoutContext';
+
+const ItemMetadataButton = (): JSX.Element => {
+  const { t: translateBuilder } = useBuilderTranslation();
+  const {
+    isItemMetadataMenuOpen,
+    setIsItemMetadataMenuOpen,
+    setIsChatboxMenuOpen,
+  } = useLayoutContext();
+
+  const onClick = () => {
+    setIsItemMetadataMenuOpen(!isItemMetadataMenuOpen);
+    setIsChatboxMenuOpen(false);
+  };
+
+  return (
+    <Tooltip title={translateBuilder(BUILDER.ITEM_METADATA_TITLE)}>
+      <span>
+        <IconButton
+          id={ITEM_INFORMATION_BUTTON_ID}
+          onClick={onClick}
+          className={
+            isItemMetadataMenuOpen ? ITEM_INFORMATION_ICON_IS_OPEN_CLASS : ''
+          }
+        >
+          <InfoIcon />
+        </IconButton>
+      </span>
+    </Tooltip>
+  );
+};
+
+export default ItemMetadataButton;
diff --git a/src/components/common/PlayerViewButton.tsx b/src/components/common/PlayerViewButton.tsx
@@ -31,13 +31,15 @@ const PlayerViewButton: FC<Props> = ({ itemId }) => {
 
   return (
     <Tooltip title={translateBuilder(BUILDER.PLAY_BUTTON_TOOLTIP)}>
-      <IconButton
-        aria-label={translateBuilder(BUILDER.PLAY_BUTTON_TOOLTIP)}
-        onClick={onClick}
-        id={buildPlayerButtonId(itemId)}
-      >
-        <PlayIcon size={ITEM_HEADER_ICON_HEIGHT} primaryColor="grey" />
-      </IconButton>
+      <span>
+        <IconButton
+          aria-label={translateBuilder(BUILDER.PLAY_BUTTON_TOOLTIP)}
+          onClick={onClick}
+          id={buildPlayerButtonId(itemId)}
+        >
+          <PlayIcon size={ITEM_HEADER_ICON_HEIGHT} primaryColor="grey" />
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/components/common/PublishButton.tsx b/src/components/common/PublishButton.tsx
@@ -1,5 +1,5 @@
 import CloseIcon from '@mui/icons-material/Close';
-import ExploreIcon from '@mui/icons-material/Explore';
+import ShareIcon from '@mui/icons-material/Share';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -35,18 +35,20 @@ const PublishButton: FC<Props> = ({ itemId }) => {
 
   return (
     <Tooltip title={title}>
-      <IconButton
-        aria-label={title}
-        className={PUBLISH_ITEM_BUTTON_CLASS}
-        onClick={onClick}
-        id={buildPublishButtonId(itemId)}
-      >
-        {openedActionTabId === ItemActionTabs.Library ? (
-          <CloseIcon />
-        ) : (
-          <ExploreIcon />
-        )}
-      </IconButton>
+      <span>
+        <IconButton
+          aria-label={title}
+          className={PUBLISH_ITEM_BUTTON_CLASS}
+          onClick={onClick}
+          id={buildPublishButtonId(itemId)}
+        >
+          {openedActionTabId === ItemActionTabs.Library ? (
+            <CloseIcon />
+          ) : (
+            <ShareIcon />
+          )}
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

diff --git a/src/components/common/RecycleButton.tsx b/src/components/common/RecycleButton.tsx
@@ -62,15 +62,17 @@ const RecycleButton: FC<Props> = ({
     default:
       return (
         <Tooltip title={text}>
-          <IconButton
-            id={id}
-            color={color}
-            className={ITEM_RECYCLE_BUTTON_CLASS}
-            aria-label={text}
-            onClick={handleClick}
-          >
-            <DeleteIcon />
-          </IconButton>
+          <span>
+            <IconButton
+              id={id}
+              color={color}
+              className={ITEM_RECYCLE_BUTTON_CLASS}
+              aria-label={text}
+              onClick={handleClick}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </span>
         </Tooltip>
       );
   }

diff --git a/src/components/context/CurrentUserContext.tsx b/src/components/context/CurrentUserContext.tsx
@@ -6,9 +6,9 @@ import { MemberRecord } from '@graasp/sdk/frontend';
 import i18n from '../../config/i18n';
 import { hooks } from '../../config/queryClient';
 
-type CurrentUserContextType = QueryObserverResult<MemberRecord> | null;
+type CurrentUserContextType = QueryObserverResult<MemberRecord> | undefined;
 
-const CurrentUserContext = createContext<CurrentUserContextType>(null);
+const CurrentUserContext = createContext<CurrentUserContextType>(undefined);
 
 type Props = {
   children: JSX.Element | JSX.Element[];

diff --git a/src/components/context/LayoutContext.tsx b/src/components/context/LayoutContext.tsx
@@ -11,7 +11,7 @@ interface LayoutContextInterface {
   isMainMenuOpen: boolean;
   setIsMainMenuOpen: (isOpen: boolean) => void;
   openedActionTabId: string | null;
-  setOpenedActionTabId: (action: string) => void;
+  setOpenedActionTabId: (action: string | null) => void;
   isItemMetadataMenuOpen: boolean;
   setIsItemMetadataMenuOpen: (isOpen: boolean) => void;
   isChatboxMenuOpen: boolean;
@@ -20,7 +20,7 @@ interface LayoutContextInterface {
   setIsItemSharingOpen: (isOpen: boolean) => void;
 }
 
-const LayoutContext = createContext<LayoutContextInterface>({
+export const LayoutContext = createContext<LayoutContextInterface>({
   mode: ITEM_LAYOUT_MODES.LIST,
   setMode: () => {
     // do nothing
@@ -65,7 +65,9 @@ export const LayoutContextProvider = ({
 
   // item settings page open
   // todo: separate in item specific context
-  const [openedActionTabId, setOpenedActionTabId] = useState<string>(null);
+  const [openedActionTabId, setOpenedActionTabId] = useState<string | null>(
+    null,
+  );
 
   const [isMainMenuOpen, setIsMainMenuOpen] = useState(true);
   const [isItemSharingOpen, setIsItemSharingOpen] = useState(true);
@@ -110,4 +112,4 @@ export const LayoutContextProvider = ({
 };
 
 export const useLayoutContext = (): LayoutContextInterface =>
-  useContext(LayoutContext);
+  useContext<LayoutContextInterface>(LayoutContext);
diff --git a/src/components/file/FileUploader.js b/src/components/file/FileUploader.js
@@ -19,7 +19,9 @@ import { humanFileSize } from '../../utils/uppy';
 import { useLayoutContext } from '../context/LayoutContext';
 import { UppyContext } from './UppyContext';
 
-const StyledContainer = styled(Box)(({ theme, isMainMenuOpen }) => ({
+const StyledContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'myProp',
+})(({ theme, isMainMenuOpen }) => ({
   display: 'none',
   height: '100vh',
   width: '100%',

diff --git a/src/components/item/ItemMain.tsx b/src/components/item/ItemMain.tsx
@@ -60,14 +60,6 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
     setIsChatboxMenuOpen,
   } = useLayoutContext();
 
-  const handleToggleMetadataMenu = () => {
-    setIsItemMetadataMenuOpen(!isItemMetadataMenuOpen);
-    setIsChatboxMenuOpen(false);
-  };
-  const handleToggleChatboxMenu = () => {
-    setIsChatboxMenuOpen(!isChatboxMenuOpen);
-    setIsItemMetadataMenuOpen(false);
-  };
   return (
     <div id={id} className={ITEM_MAIN_CLASS}>
       {isChatboxMenuOpen && (
@@ -104,11 +96,7 @@ const ItemMain = ({ id, children, item }: Props): JSX.Element => {
       </ItemPanel>
 
       <StyledContainer open={isChatboxMenuOpen || isItemMetadataMenuOpen}>
-        <ItemHeader
-          showNavigation
-          onClickMetadata={handleToggleMetadataMenu}
-          onClickChatbox={handleToggleChatboxMenu}
-        />
+        <ItemHeader showNavigation />
 
         {children}
       </StyledContainer>