fix(script): script info tab overflow (#145)

* fix(script): overflow * fix(script): change style of script info * fix(script): close medal missed * fix(script): close button position * feat(tab): move the css code to the styled components * fix(script): remove more icon
nervosnetwork · Dec 1, 2023 · a44f6e3 · a44f6e3
1 parent 8177a05
commit a44f6e3
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 114 deletions.
diff --git a/src/index.css b/src/index.css
@@ -2,7 +2,7 @@
 
 body {
   --primary-color: #00cc9b;
-  --accent-color: #FA504F;
+  --accent-color: #fa504f;
   --primary-text-color: #333;
   --primary-hover-bg-color: #e8fff1;
   --primary-chiffon-color: #e6fcf7;
@@ -27,11 +27,11 @@ body[data-chain-type='testnet'] {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: Lato, sans-serif, Montserrat, "PingFang SC", -apple-system;
+  font-family: Lato, sans-serif, Montserrat, 'PingFang SC', -apple-system;
 }
 
 .monospace {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
 *[role]:focus {

diff --git a/src/pages/Script/index.tsx b/src/pages/Script/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useHistory } from 'react-router'
 import { useParams } from 'react-router-dom'
-import { Tabs } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import Content from '../../components/Content'
@@ -19,6 +18,7 @@ import DecimalCapacity from '../../components/DecimalCapacity'
 import styles from './styles.module.scss'
 import { explorerService } from '../../services/ExplorerService'
 import type { ScriptInfo } from '../../services/ExplorerService/fetcher'
+import { ScriptTab, ScriptTabPane, ScriptTabTitle } from './styled'
 
 const scriptDataList = isMainnet() ? MainnetContractHashTags : TestnetContractHashTags
 
@@ -153,12 +153,12 @@ export const ScriptPage = () => {
         <HashCardPanel isColumn={false}>
           <ScriptsTitleOverview scriptInfo={scriptInfo} />
         </HashCardPanel>
-        <Tabs
+        <ScriptTab
           key={currentLanguage + countOfTransactions + countOfDeployedCells + countOfReferringCells}
-          className={styles.scriptTabs}
           activeKey={tab ?? 'transactions'}
           animated={{ inkBar: false }}
           tabBarStyle={{
+            marginLeft: 40,
             marginBottom: 0,
             height: 56,
           }}
@@ -185,24 +185,38 @@ export const ScriptPage = () => {
               history.push(`/script/${codeHash}/${hashType}?page=${pageOfTransactions}&size=${pageSize}`)
             }
           }}
-          items={[
-            {
-              label: `${t('transaction.transactions')} (${localeNumberString(countOfTransactions!)})`,
-              key: 'transactions',
-              children: <ScriptTransactions page={currentPage} size={pageSize} />,
-            },
-            {
-              label: `${t('scripts.deployed_cells')} (${localeNumberString(countOfDeployedCells)})`,
-              key: 'deployed_cells',
-              children: <ScriptCells page={currentPage} size={pageSize} cellType="deployed_cells" />,
-            },
-            {
-              label: `${t('scripts.referring_cells')} (${localeNumberString(countOfReferringCells)})`,
-              key: 'referring_cells',
-              children: <ScriptCells page={currentPage} size={pageSize} cellType="referring_cells" />,
-            },
-          ]}
-        />
+        >
+          <ScriptTabPane
+            tab={
+              <ScriptTabTitle>
+                {`${t('transaction.transactions')} (${localeNumberString(countOfTransactions!)})`}
+              </ScriptTabTitle>
+            }
+            key="transactions"
+          >
+            <ScriptTransactions page={currentPage} size={pageSize} />
+          </ScriptTabPane>
+          <ScriptTabPane
+            tab={
+              <ScriptTabTitle>
+                {`${t('scripts.deployed_cells')} (${localeNumberString(countOfDeployedCells)})`}
+              </ScriptTabTitle>
+            }
+            key="deployed_cells"
+          >
+            <ScriptCells page={currentPage} size={pageSize} cellType="deployed_cells" />
+          </ScriptTabPane>
+          <ScriptTabPane
+            tab={
+              <ScriptTabTitle>
+                {`${t('scripts.referring_cells')} (${localeNumberString(countOfReferringCells)})`}
+              </ScriptTabTitle>
+            }
+            key="referring_cells"
+          >
+            <ScriptCells page={currentPage} size={pageSize} cellType="referring_cells" />
+          </ScriptTabPane>
+        </ScriptTab>
       </div>
     </Content>
   )

diff --git a/src/pages/Script/styled.tsx b/src/pages/Script/styled.tsx
@@ -0,0 +1,66 @@
+import { Tabs } from 'antd'
+import TabPane from 'antd/lib/tabs/TabPane'
+import styled from 'styled-components'
+
+export const ScriptTab = styled(Tabs)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 6px 6px 0 0;
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ant-tabs-nav-list {
+    padding-left: 40px;
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ant-tabs-tab.ant-tabs-tab-active {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-tabs-tab-btn {
+      color: var(--primary-color);
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ant-tabs-tab-active {
+    /* stylelint-disable-next-line selector-class-pattern */
+    .ant-tabs-tab-btn {
+      color: #333;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ant-tabs-tab-btn {
+    color: #333;
+    font-weight: 400;
+    font-size: 20px;
+    line-height: 23px;
+    margin-bottom: 0;
+
+    &[aria-selected='true'] {
+      font-weight: 500;
+    }
+  }
+
+  /* stylelint-disable-next-line selector-class-pattern */
+  .ant-tabs-nav .ant-tabs-ink-bar {
+    background: linear-gradient(
+      to right,
+      transparent 30%,
+      var(--primary-color) 30%,
+      var(--primary-color) 70%,
+      transparent 70%
+    );
+    height: 3px;
+    bottom: 3px;
+  }
+`
+export const ScriptTabTitle = styled.span`
+  font-size: 20px;
+`
+
+export const ScriptTabPane = styled(TabPane)`
+  color: #333;
+`
diff --git a/src/pages/Script/styles.module.scss b/src/pages/Script/styles.module.scss
@@ -16,63 +16,6 @@
   }
 }
 
-.scriptTabs {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-  background-color: #fff;
-  border-radius: 6px 6px 0 0;
-
-  :global {
-    /* stylelint-disable-next-line selector-class-pattern */
-    .ant-tabs-nav {
-      &::before {
-        border-bottom-width: 4px;
-      }
-    }
-
-    /* stylelint-disable-next-line selector-class-pattern */
-    .ant-tabs-nav-list {
-      padding-left: 40px;
-    }
-
-    /* stylelint-disable-next-line selector-class-pattern */
-    .ant-tabs-tab-btn {
-      color: #333;
-      font-weight: 400;
-      font-size: 20px;
-      line-height: 23px;
-      margin-bottom: 0;
-
-      &[aria-selected='true'] {
-        font-weight: 500;
-      }
-    }
-
-    /* stylelint-disable-next-line selector-class-pattern */
-    .ant-tabs-tab-active {
-      /* stylelint-disable-next-line selector-class-pattern */
-      .ant-tabs-tab-btn {
-        color: #333;
-      }
-    }
-  }
-
-  /* stylelint-disable-next-line selector-class-pattern */
-  & > :global(.ant-tabs-nav .ant-tabs-ink-bar) {
-    background: linear-gradient(
-      to right,
-      transparent 30%,
-      var(--primary-color) 30%,
-      var(--primary-color) 70%,
-      transparent 70%
-    );
-    height: 3px;
-    bottom: 3px;
-  }
-}
-
 .scriptCellsPanel,
 .scriptTransactionsPanel {
   table {

diff --git a/src/pages/Transaction/TransactionCellScript/index.tsx b/src/pages/Transaction/TransactionCellScript/index.tsx
@@ -9,13 +9,12 @@ import {
   TransactionDetailCopyButton,
   TransactionDetailContainer,
   TransactionDetailPanel,
-  TransactionDetailLock,
-  TransactionDetailType,
   TransactionCellDetailPanel,
-  TransactionDetailData,
-  TransactionDetailCapacityUsage,
   TransactionCellInfoValuePanel,
   TransactionDetailScriptButton,
+  TransactionCellDetailTab,
+  TransactionCellDetailPane,
+  TransactionCellDetailTitle,
 } from './styled'
 import SmallLoading from '../../../components/Loading/SmallLoading'
 import CloseIcon from './modal_close.png'
@@ -250,32 +249,54 @@ export default ({ cell, onClose }: TransactionCellScriptProps) => {
   return (
     <TransactionDetailContainer ref={ref}>
       <TransactionCellDetailPanel>
-        <TransactionDetailLock selected={selectedInfo === CellInfo.LOCK} onClick={() => changeType(CellInfo.LOCK)}>
-          {t('transaction.lock_script')}
-          <HelpTip title={t('glossary.lock_script')} placement="bottom" containerRef={ref} />
-        </TransactionDetailLock>
-        <TransactionDetailType selected={selectedInfo === CellInfo.TYPE} onClick={() => changeType(CellInfo.TYPE)}>
-          {t('transaction.type_script')}
-          <HelpTip title={t('glossary.type_script')} placement="bottom" containerRef={ref} />
-        </TransactionDetailType>
-        <TransactionDetailData selected={selectedInfo === CellInfo.DATA} onClick={() => changeType(CellInfo.DATA)}>
-          {t('transaction.data')}
-        </TransactionDetailData>
-        <TransactionDetailCapacityUsage
-          selected={selectedInfo === CellInfo.CAPACITY}
-          onClick={() => changeType(CellInfo.CAPACITY)}
+        <TransactionCellDetailTab
+          tabBarExtraContent={
+            <div className="transactionDetailModalClose">
+              <img src={CloseIcon} alt="close icon" tabIndex={-1} onKeyDown={() => {}} onClick={() => onClose()} />
+            </div>
+          }
+          tabBarStyle={{ fontSize: '10px' }}
+          onTabClick={key => {
+            const state = parseInt(key, 10)
+            if (state && !Number.isNaN(state)) {
+              changeType(state)
+            }
+          }}
         >
-          {t('transaction.capacity_usage')}
-          <HelpTip title={t('glossary.capacity_usage')} placement="bottom" containerRef={ref} />
-        </TransactionDetailCapacityUsage>
-
-        <div className="transactionDetailModalClose">
-          <img src={CloseIcon} alt="close icon" tabIndex={-1} onKeyDown={() => {}} onClick={() => onClose()} />
-        </div>
+          <TransactionCellDetailPane
+            tab={
+              <>
+                <TransactionCellDetailTitle>{t('transaction.lock_script')}</TransactionCellDetailTitle>
+                <HelpTip title={t('glossary.lock_script')} placement="bottom" containerRef={ref} />
+              </>
+            }
+            key={CellInfo.LOCK}
+          />
+          <TransactionCellDetailPane
+            tab={
+              <>
+                <TransactionCellDetailTitle>{t('transaction.type_script')}</TransactionCellDetailTitle>
+                <HelpTip title={t('glossary.type_script')} placement="bottom" containerRef={ref} />
+              </>
+            }
+            key={CellInfo.TYPE}
+          />
+          <TransactionCellDetailPane
+            tab={<TransactionCellDetailTitle>{t('transaction.data')}</TransactionCellDetailTitle>}
+            key={CellInfo.DATA}
+          />
+          <TransactionCellDetailPane
+            tab={
+              <>
+                <TransactionCellDetailTitle>{t('transaction.capacity_usage')}</TransactionCellDetailTitle>
+                <HelpTip title={t('glossary.capacity_usage')} placement="bottom" containerRef={ref} />
+              </>
+            }
+            key={CellInfo.CAPACITY}
+          />
+        </TransactionCellDetailTab>
       </TransactionCellDetailPanel>
 
-      <div className="transactionDetailSeparate" />
-
       <TransactionDetailPanel>
         {isFetched ? (
           <div className="transactionDetailContent">