From 40aa3fbb79f8399538776c7f6ae565873b03141c Mon Sep 17 00:00:00 2001 From: Jun Ma Date: Mon, 19 Jun 2023 09:58:00 +0800 Subject: [PATCH] fix: Hover/Click transaction style exception --- .../src/components/History/history.module.scss | 2 +- packages/neuron-ui/src/components/History/index.tsx | 2 +- .../HistoryDetailPage/historyDetailPage.module.scss | 10 ++++++++++ .../src/components/HistoryDetailPage/index.tsx | 9 ++++----- packages/neuron-ui/src/components/Overview/index.tsx | 9 ++++++++- packages/neuron-ui/src/containers/Navbar/index.tsx | 12 ++++++++++-- packages/neuron-ui/src/widgets/Icons/GoBack.svg | 4 ++++ packages/neuron-ui/src/widgets/Icons/icon.tsx | 2 ++ packages/neuron-ui/src/widgets/Table/index.tsx | 5 ++++- .../neuron-ui/src/widgets/Table/table.module.scss | 10 ++++++++++ 10 files changed, 54 insertions(+), 11 deletions(-) create mode 100644 packages/neuron-ui/src/widgets/Icons/GoBack.svg diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss index 977ec55084..d3931c4916 100644 --- a/packages/neuron-ui/src/components/History/history.module.scss +++ b/packages/neuron-ui/src/components/History/history.module.scss @@ -146,7 +146,7 @@ body { } } - &[data-is-open='true'] { + &[data-is-expand-show='true'] { transform: rotate(90deg); } } diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx index 71bf97107a..19d814cbde 100644 --- a/packages/neuron-ui/src/components/History/index.tsx +++ b/packages/neuron-ui/src/components/History/index.tsx @@ -213,7 +213,7 @@ const History = () => { return ( handleExpandClick(idx)} /> ) diff --git a/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss b/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss index fa0034b35e..4e7d8d45f3 100644 --- a/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss +++ b/packages/neuron-ui/src/components/HistoryDetailPage/historyDetailPage.module.scss @@ -41,6 +41,16 @@ color: var(--main-text-color); } } + +.goBack { + margin-right: 8px; + cursor: pointer; + + & path { + stroke: var(--main-text-color); + } +} + .address { font-family: 'JetBrains Mono'; } diff --git a/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx b/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx index 540b670bec..cc271bd0d3 100644 --- a/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx +++ b/packages/neuron-ui/src/components/HistoryDetailPage/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useState } from 'react' -import { Link, useParams } from 'react-router-dom' +import { useNavigate, useParams } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { scriptToAddress } from '@nervosnetwork/ckb-sdk-utils' import { getTransaction, showErrorMessage } from 'services/remote' @@ -10,6 +10,7 @@ import ScriptTag from 'components/ScriptTag' import Tabs from 'widgets/Tabs' import Table from 'widgets/Table' import CopyZone from 'widgets/CopyZone' +import { GoBack } from 'widgets/Icons/icon' import { ErrorCode, @@ -18,7 +19,6 @@ import { uniformTimeFormatter, shannonToCKBFormatter, isSuccessResponse, - RoutePath, } from 'utils' import { HIDE_BALANCE } from 'utils/const' @@ -37,6 +37,7 @@ const InfoItem = ({ label, value, className }: { label: string; value: React.Rea const HistoryDetailPage = () => { const { hash } = useParams() + const navigate = useNavigate() const { app: { pageNotice }, chain: { networkID }, @@ -216,9 +217,7 @@ const HistoryDetailPage = () => { }} head={
- - {`${t('history.title')} / `} - + navigate(-1)} /> {`${t('history.title-detail')}`}
} diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx index 227f09547c..436e109dea 100644 --- a/packages/neuron-ui/src/components/Overview/index.tsx +++ b/packages/neuron-ui/src/components/Overview/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo, useEffect, useState } from 'react' -import { Link } from 'react-router-dom' +import { Link, useNavigate } from 'react-router-dom' import { Trans, useTranslation } from 'react-i18next' import { showTransactionDetails } from 'services/remote' import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states' @@ -157,6 +157,7 @@ const Overview = () => { } = useGlobalState() const dispatch = useDispatch() const [t] = useTranslation() + const navigate = useNavigate() useEffect(() => { if (id) { @@ -179,6 +180,11 @@ const Overview = () => { } }, []) + const onRecentActivityClick = useCallback((_, item: State.Transaction) => { + const { hash } = item + navigate(`${RoutePath.HistoryDetailPage}/${hash}`) + }, []) + const recentItems = useMemo(() => { return items.slice(0, 10) }, [items]) @@ -286,6 +292,7 @@ const Overview = () => { dataSource={recentItems} noDataContent={t('overview.no-recent-activities')} onRowDoubleClick={onRecentActivityDoubleClick} + onRowClick={onRecentActivityClick} /> ) diff --git a/packages/neuron-ui/src/containers/Navbar/index.tsx b/packages/neuron-ui/src/containers/Navbar/index.tsx index b336570195..7c45530421 100644 --- a/packages/neuron-ui/src/containers/Navbar/index.tsx +++ b/packages/neuron-ui/src/containers/Navbar/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { createPortal } from 'react-dom' import { useLocation, NavLink, useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' @@ -74,7 +74,15 @@ const Navbar = () => { } = neuronWallet const [t, i18n] = useTranslation() useOnLocaleChange(i18n) - const selectedKey = menuItems.find(item => item.key === pathname || item.children?.some(v => v.key === pathname))?.key + const [selectedKey, setSelectedKey] = useState() + const computedKey = menuItems.find(item => item.key === pathname || item.children?.some(v => v.key === pathname))?.key + + useEffect(() => { + if (computedKey) { + setSelectedKey(computedKey) + } + }, [computedKey]) + const [menuExpanded, setMenuExpanded] = useState(true) const onClickExpand = useCallback(() => { setMenuExpanded(v => !v) diff --git a/packages/neuron-ui/src/widgets/Icons/GoBack.svg b/packages/neuron-ui/src/widgets/Icons/GoBack.svg new file mode 100644 index 0000000000..dc8d16e4cb --- /dev/null +++ b/packages/neuron-ui/src/widgets/Icons/GoBack.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/packages/neuron-ui/src/widgets/Icons/icon.tsx b/packages/neuron-ui/src/widgets/Icons/icon.tsx index 8003926071..718dfeaad8 100644 --- a/packages/neuron-ui/src/widgets/Icons/icon.tsx +++ b/packages/neuron-ui/src/widgets/Icons/icon.tsx @@ -63,6 +63,7 @@ import { ReactComponent as ExplorerIconSvg } from './ExplorerIcon.svg' import { ReactComponent as DetailIconSvg } from './DetailIcon.svg' import { ReactComponent as CheckUpdateIconSvg } from './CheckUpdateIcon.svg' import { ReactComponent as LanguageSelectSvg } from './LanguageSelect.svg' +import { ReactComponent as GoBackSvg } from './GoBack.svg' import styles from './icon.module.scss' @@ -140,3 +141,4 @@ export const EyesClose = WrapSvg(EyesCloseSvg) export const Success = WrapSvg(SuccessSvg) export const CheckUpdateIcon = WrapSvg(CheckUpdateIconSvg) export const LanguageSelect = WrapSvg(LanguageSelectSvg) +export const GoBack = WrapSvg(GoBackSvg) diff --git a/packages/neuron-ui/src/widgets/Table/index.tsx b/packages/neuron-ui/src/widgets/Table/index.tsx index 5d3ce04002..cc5408b42b 100755 --- a/packages/neuron-ui/src/widgets/Table/index.tsx +++ b/packages/neuron-ui/src/widgets/Table/index.tsx @@ -104,12 +104,15 @@ const Table = >(props: TableProps) => { key={dataKey ? item[dataKey] : idx} className={styles.trClassName} data-idx={idx} + data-is-expand={expandedRow === idx} > {columnList.map(({ dataIndex, key, render, align, className: bodyTdClassName, tdClassName }) => ( {render ? render(item[dataIndex], idx, item, showBalance) : item[dataIndex]} diff --git a/packages/neuron-ui/src/widgets/Table/table.module.scss b/packages/neuron-ui/src/widgets/Table/table.module.scss index f061d28129..07f00a48f8 100755 --- a/packages/neuron-ui/src/widgets/Table/table.module.scss +++ b/packages/neuron-ui/src/widgets/Table/table.module.scss @@ -50,6 +50,16 @@ $head-height: 52px; tr { height: 58px; cursor: pointer; + &:hover { + &[data-is-expand='false'] { + background-color: var(--hover-background-color); + } + } + &:last-child { + td { + border-bottom: none; + } + } } td { padding: 0 0 0 18px;