fix(web): link to asset and refer to item icons (#1272)

* link to assets and reference icon * fix refer icon * i18n
reearth · Oct 24, 2024 · 00acd2f · 00acd2f
1 parent 0f3f72a
commit 00acd2f
Show file tree

Hide file tree

Showing 9 changed files with 1,141 additions and 1,145 deletions.
diff --git a/web/src/components/atoms/Icon/Icons/arrowUpRightSlash.svg b/web/src/components/atoms/Icon/Icons/arrowUpRightSlash.svg
diff --git a/web/src/components/atoms/Icon/icons.ts b/web/src/components/atoms/Icon/icons.ts
@@ -56,6 +56,7 @@ import {
 
 import ArrowSquareOut from "./Icons/arrowSquareOut.svg";
 import ArrowUpRight from "./Icons/arrowUpRight.svg";
+import ArrowUpRightSlash from "./Icons/arrowUpRightSlash.svg";
 import Asset from "./Icons/asset.svg";
 import Boolean from "./Icons/boolean.svg";
 import CheckSquare from "./Icons/checkSquare.svg";
@@ -124,6 +125,7 @@ export default {
   asset: Asset,
   listBullets: ListBullets,
   arrowUpRight: ArrowUpRight,
+  arrowUpRightSlash: ArrowUpRightSlash,
   numberNine: NumberNine,
   link: Link,
   linkSolid: LinkSolid,

diff --git a/web/src/components/molecules/Common/LinkAssetModal/LinkAssetModal.tsx b/web/src/components/molecules/Common/LinkAssetModal/LinkAssetModal.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useState, useRef, useCallback, useMemo } from "react";
+import { useRef, useCallback, useMemo } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
@@ -74,7 +74,6 @@ const LinkAssetModal: React.FC<Props> = ({
   onUploadAndLink,
 }) => {
   const t = useT();
-  const [hoveredAssetId, setHoveredAssetId] = useState<string>();
   const resetFlag = useRef(false);
 
   const options: OptionConfig = useMemo(
@@ -127,14 +126,10 @@ const LinkAssetModal: React.FC<Props> = ({
         width: 48,
         minWidth: 48,
         render: (_, asset) => {
-          const isLink =
-            (asset.id === linkedAsset?.id && hoveredAssetId !== asset.id) ||
-            (asset.id !== linkedAsset?.id && hoveredAssetId === asset.id);
+          const isLink = asset.id !== linkedAsset?.id;
           return (
             <Button
               type="link"
-              onMouseEnter={() => setHoveredAssetId(asset.id)}
-              onMouseLeave={() => setHoveredAssetId(undefined)}
               icon={<Icon icon={isLink ? "linkSolid" : "unlinkSolid"} size={16} />}
               onClick={() => onLinkClick(isLink, asset)}
             />
@@ -184,7 +179,7 @@ const LinkAssetModal: React.FC<Props> = ({
         minWidth: 100,
       },
     ],
-    [hoveredAssetId, linkedAsset?.id, onLinkClick, t],
+    [linkedAsset?.id, onLinkClick, t],
   );
 
   const handleChange = useCallback(
@@ -242,9 +237,7 @@ const LinkAssetModal: React.FC<Props> = ({
       width="70vw"
       styles={{
         body: {
-          minHeight: "50vh",
-          position: "relative",
-          padding: "12px",
+          height: "70vh",
         },
       }}>
       <ResizableProTable

diff --git a/web/src/components/molecules/Common/ResizableProTable/index.tsx b/web/src/components/molecules/Common/ResizableProTable/index.tsx
@@ -136,9 +136,13 @@ const StyledProTable = styled(ProTable)<{
     overflow: auto !important;
     height: calc(100% - 47px);
   }
+  .ant-pro-table-list-toolbar-container {
+    flex-direction: row;
+  }
   .ant-pro-table-list-toolbar-left {
     flex: 1;
     max-width: calc(100% - 150px);
+    margin: 0;
     .ant-pro-table-list-toolbar-search {
       width: 100%;
     }

diff --git a/web/src/components/molecules/Content/Form/ReferenceFormItem/index.tsx b/web/src/components/molecules/Content/Form/ReferenceFormItem/index.tsx
@@ -89,9 +89,9 @@ const ReferenceFormItem: React.FC<Props> = ({
             disabled={disabled}
           />
           {!disabled && (
-            <Button
+            <UnreferButton
               type="link"
-              icon={<Icon icon={"unlinkSolid"} size={16} />}
+              icon={<Icon icon={"arrowUpRightSlash"} size={16} />}
               onClick={() => {
                 onChange?.();
               }}
@@ -101,7 +101,7 @@ const ReferenceFormItem: React.FC<Props> = ({
       )}
       {!disabled && (
         <StyledButton onClick={handleClick} type="primary">
-          <Icon icon="arrowUpRight" size={14} /> {t("Refer to item")}
+          <Icon icon="arrowUpRight" size={14} /> {value ? t("Replace item") : t("Refer to item")}
         </StyledButton>
       )}
       {!!onSearchTerm &&
@@ -130,13 +130,14 @@ const ReferenceFormItem: React.FC<Props> = ({
   );
 };
 
+const UnreferButton = styled(Button)`
+  color: #000000d9;
+`;
+
 const StyledButton = styled(Button)`
   display: flex;
   align-items: center;
   margin-top: 8px;
-  > span {
-    padding: 4px;
-  }
 `;
 
 const ReferenceItemWrapper = styled.div`

diff --git a/web/src/components/molecules/Content/LinkItemModal/index.tsx b/web/src/components/molecules/Content/LinkItemModal/index.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { useState, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
 
 import Button from "@reearth-cms/components/atoms/Button";
 import Icon from "@reearth-cms/components/atoms/Icon";
@@ -53,7 +53,6 @@ const LinkItemModal: React.FC<Props> = ({
   onChange,
   onCheckItemReference,
 }) => {
-  const [hoveredAssetId, setHoveredItemId] = useState<string>();
   const t = useT();
   const { confirm } = Modal;
   const { value, pagination, handleInput } = useHooks(
@@ -110,16 +109,12 @@ const LinkItemModal: React.FC<Props> = ({
         width: 48,
         minWidth: 48,
         render: (_, item) => {
-          const link =
-            (item.id === linkedItem && hoveredAssetId !== item.id) ||
-            (item.id !== linkedItem && hoveredAssetId === item.id);
+          const isLink = item.id !== linkedItem;
           return (
             <Button
               type="link"
-              onMouseEnter={() => setHoveredItemId(item.id)}
-              onMouseLeave={() => setHoveredItemId(undefined)}
-              icon={<Icon icon={link ? "linkSolid" : "unlinkSolid"} size={16} />}
-              onClick={() => handleClick(link, item)}
+              icon={<Icon icon={isLink ? "arrowUpRight" : "arrowUpRightSlash"} size={18} />}
+              onClick={() => handleClick(isLink, item)}
             />
           );
         },
@@ -158,7 +153,7 @@ const LinkItemModal: React.FC<Props> = ({
         render: (_text, record) => dateTimeFormat(record.createdAt),
       },
     ],
-    [t, linkedItem, hoveredAssetId, handleClick],
+    [t, linkedItem, handleClick],
   );
 
   const toolbar: ListToolBarProps = useMemo(
@@ -188,9 +183,7 @@ const LinkItemModal: React.FC<Props> = ({
       onCancel={onLinkItemModalCancel}
       styles={{
         body: {
-          minHeight: "50vh",
-          position: "relative",
-          padding: "12px",
+          height: "70vh",
         },
       }}>
       <ResizableProTable

diff --git a/web/src/components/molecules/Content/LinkItemRequestModal/LinkItemRequestModal.tsx b/web/src/components/molecules/Content/LinkItemRequestModal/LinkItemRequestModal.tsx
@@ -169,9 +169,7 @@ const LinkItemRequestModal: React.FC<Props> = ({
       width="70vw"
       styles={{
         body: {
-          minHeight: "50vh",
-          position: "relative",
-          padding: "12px 12px 0",
+          height: "70vh",
         },
       }}
       afterClose={() => {