feat(dcellar-web-ui): fix share dropdown styles

node-real · Jan 2, 2024 · 162deeb · 162deeb
1 parent 1bf5f56
commit 162deeb
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 30 deletions.
diff --git a/apps/dcellar-web-ui/src/components/common/DCTable/ActionMenu.tsx b/apps/dcellar-web-ui/src/components/common/DCTable/ActionMenu.tsx
@@ -1,4 +1,4 @@
-import React, { memo, ReactNode } from 'react';
+import React, { memo } from 'react';
 import { Center, Flex, MenuButton } from '@totejs/uikit';
 import styled from '@emotion/styled';
 import { transientOptions } from '@/utils/css';
@@ -51,37 +51,39 @@ export const ActionMenu = memo<ActionMenuProps>(function ActionMenu({
 
   return (
     <Flex justifyContent="flex-end">
-      {operations.map((m) => (
-        <ActionButton
-          key={m}
-          gaClickName={OPERATIONS[m].ga}
-          mr={8}
-          onClick={() => onChange(m)}
-          tip={OPERATIONS[m].tip}
-        >
-          <IconFont type={OPERATIONS[m].type} w={OPERATIONS[m].w} color={'brand.brand6'} />
-        </ActionButton>
-      ))}
       {shareMode ? (
         <DownloadIcon onClick={() => onChange('download')}>
           <IconFont w={20} type={'download'} mx={2} />
         </DownloadIcon>
       ) : (
-        <DCMenu
-          strategy="fixed"
-          zIndex={1000}
-          stopPropagation={true}
-          placement="bottom-end"
-          trigger="hover"
-          options={menus}
-          onMenuSelect={(m) => onChange(m.value)}
-        >
-          {({ isOpen }) => (
-            <StyledMenuButton $open={isOpen}>
-              <IconFont w={20} type={'dots-v'} mx={2} />
-            </StyledMenuButton>
-          )}
-        </DCMenu>
+        <>
+          {operations.map((m) => (
+            <ActionButton
+              key={m}
+              gaClickName={OPERATIONS[m].ga}
+              mr={8}
+              onClick={() => onChange(m)}
+              tip={OPERATIONS[m].tip}
+            >
+              <IconFont type={OPERATIONS[m].type} w={OPERATIONS[m].w} color={'brand.brand6'} />
+            </ActionButton>
+          ))}
+          <DCMenu
+            strategy="fixed"
+            zIndex={1000}
+            stopPropagation={true}
+            placement="bottom-end"
+            trigger="hover"
+            options={menus}
+            onMenuSelect={(m) => onChange(m.value)}
+          >
+            {({ isOpen }) => (
+              <StyledMenuButton $open={isOpen}>
+                <IconFont w={20} type={'dots-v'} mx={2} />
+              </StyledMenuButton>
+            )}
+          </DCMenu>
+        </>
       )}
     </Flex>
   );

diff --git a/apps/dcellar-web-ui/src/components/layout/Header/AccountInfo.tsx b/apps/dcellar-web-ui/src/components/layout/Header/AccountInfo.tsx
@@ -1,5 +1,15 @@
 import React, { memo, useRef, useState } from 'react';
-import { Box, Button, Circle, Fade, Flex, Portal, Text, useDisclosure, useOutsideClick } from '@totejs/uikit';
+import {
+  Box,
+  Button,
+  Circle,
+  Fade,
+  Flex,
+  Portal,
+  Text,
+  useDisclosure,
+  useOutsideClick,
+} from '@totejs/uikit';
 import { CopyText } from '@/components/common/CopyText';
 import { Tips } from '@/components/common/Tips';
 import { NewBalance } from '@/components/layout/Header/NewBalance';
@@ -63,7 +73,7 @@ export const AccountInfo = memo<AccountInfoProps>(function AccountCard() {
       </LoginAccount>
       <Portal>
         <Fade in={isOpen} unmountOnExit position="absolute" zIndex="1400">
-          <PopContainer ref={ref}>
+          <PopContainer ref={ref} className={'header-avatar-dropdown'}>
             <Account>
               <Avatar id={shortAddress} w={20} />
               <CopyText value={loginAccount} gaClickName="dc.main.account.copy_add.click">

diff --git a/apps/dcellar-web-ui/src/modules/share/ShareFolder.tsx b/apps/dcellar-web-ui/src/modules/share/ShareFolder.tsx
@@ -18,6 +18,7 @@ import { DCLink } from '@/components/common/DCLink';
 import { GREENFIELD_CHAIN_EXPLORER_URL } from '@/base/env';
 import { useUnmount } from 'ahooks';
 import { ObjectFilterItems } from '@/modules/object/components/ObjectFilterItems';
+import { Global, css } from '@emotion/react';
 
 interface ShareFolderProps {
   fileName: string;
@@ -26,6 +27,12 @@ interface ShareFolderProps {
   primarySp: SpItem;
 }
 
+const headerDropDown = css`
+  body .header-avatar-dropdown {
+    right: 285px;
+  }
+`;
+
 export const ShareFolder = memo<ShareFolderProps>(function ShareFolder({ fileName }) {
   const dispatch = useAppDispatch();
   const router = useRouter();
@@ -49,7 +56,8 @@ export const ShareFolder = memo<ShareFolderProps>(function ShareFolder({ fileNam
   });
 
   return (
-    <Box maxW={1200} minH={'100%'} w={'100%'}>
+    <Box maxW={'calc(100% - 40px)'} minH={'100%'} w={'100%'}>
+      <Global styles={headerDropDown} />
       <Container>
         <Flex alignItems={'center'} gap={24} p={24} bg={'#FAFAFA'}>
           <IconFont w={64} type={'detail-folder'} />