feat(ui): add tip message to home header item

nervosnetwork · May 29, 2019 · f3ad33d · f3ad33d
1 parent eb57b90
commit f3ad33d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
@@ -29,6 +29,7 @@ import BestBlockImage from '../../asserts/best_block_background.png'
 import BlockTimeImage from '../../asserts/block_time_background.png'
 import DifficultyImage from '../../asserts/difficulty_background.png'
 import HashRateImage from '../../asserts/hash_rate_background.png'
+
 import { fetchBlocks } from '../../http/fetcher'
 import { BlockWrapper } from '../../http/response/Block'
 import { Response } from '../../http/response/Response'
@@ -38,7 +39,12 @@ const BlockchainItem = ({ name, value, image, tip }: { name: string; value: stri
   return (
     <HomeHeaderItemPanel image={image}>
       <div className="blockchain__item__value">{value}</div>
-      <div className="blockchain__item__name">{`${name} ${tip}`}</div>
+      <div className="blockchain__item__name">{`${name}`}</div>
+      {tip && (
+        <div className="blockchain__item__tip">
+          <div className="blockchain__item__tip__content">{tip}</div>
+        </div>
+      )}
     </HomeHeaderItemPanel>
   )
 }
@@ -92,28 +98,33 @@ export default () => {
     name: string
     value: string
     image: any
+    tip: string
   }
 
   const BlockchainDatas: BlockchainData[] = [
     {
       name: 'Best Block',
       value: '10000',
       image: BestBlockImage,
+      tip: '',
     },
     {
       name: 'Difficulty',
       value: '1 874 086 735',
       image: DifficultyImage,
+      tip: 'Average Difficulty of the current Epoch',
     },
     {
       name: 'Hash Rate',
       value: '1 KH/s',
       image: HashRateImage,
+      tip: 'Average Hash Rate of the current Epoch',
     },
     {
       name: 'Average Block Time',
       value: '5.3 s',
       image: BlockTimeImage,
+      tip: 'Average Block Time of the current Epoch',
     },
   ]
 
@@ -122,7 +133,7 @@ export default () => {
       <HomeHeaderPanel>
         {window.innerWidth > 700 &&
           BlockchainDatas.map((data: BlockchainData) => {
-            return <BlockchainItem name={data.name} value={data.value} image={data.image} />
+            return <BlockchainItem name={data.name} value={data.value} image={data.image} tip={data.tip} />
           })}
         {window.innerWidth <= 700 &&
           BlockchainDatas.map((data: BlockchainData) => {

diff --git a/web/src/pages/Home/styled.tsx b/web/src/pages/Home/styled.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import BlockchainTipImage from '../../asserts/blockchain_tip_background.png'
 
 export const HomeHeaderPanel = styled.div`
   min-height: 180px;
@@ -66,7 +67,27 @@ export const HomeHeaderItemPanel = styled.div`
   }
 
   .blockchain__item__tip {
-    background-image: url('../../asserts/blockchain_tip_background.png');
+    margin-top: 8px;
+    opacity: 0;
+    width: 285px;
+    height: 41px;
+    background-image: url(${BlockchainTipImage});
+    background-repeat: no-repeat;
+    background-size: 285px 41px;
+  }
+
+  &:hover .blockchain__item__tip {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .blockchain__item__tip__content {
+    width: 285px;
+    height: 41px;
+    text-align: center;
+    line-height: 41px;
+    color: white;
+    font-size: 12px;
   }
 `