feat: add tooltip to options page (#129)

* change version to 1.0.0 * add tooltip to options page * update mock data
hypertrons · May 28, 2021 · 1dd292e · 1dd292e
1 parent e9faefb
commit 1dd292e
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hypertrons-crx",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "private": true,
   "description": "Hypertrons Chrome Extension",
   "license": "Apache",

diff --git a/publish/update_information.json b/publish/update_information.json
@@ -1,17 +1,14 @@
 {
   "chrome": {
-    "latest_version":"0.1.2",
-    "date":"2021-4-1",
+    "latest_version":"1.0.0",
     "url":"https://github.com/hypertrons/hypertrons-crx/releases"
   },
   "edge": {
-    "latest_version":"0.1.2",
-    "date":"2021-3-1",
+    "latest_version":"1.0.0",
     "url":"https://github.com/hypertrons/hypertrons-crx/releases"
   },
   "develop": {
-    "latest_version":"0.1.3",
-    "date":"2021-3-27",
+    "latest_version":"1.0.1",
     "url":"https://github.com/hypertrons/hypertrons-crx/releases"
   }
 }
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -155,6 +155,9 @@
   "options_text_checkUpdate": {
     "message": "Check"
   },
+  "options_text_update": {
+    "message": "Update"
+  },
   "options_text_checking": {
     "message": "Checking for updates"
   },
@@ -190,5 +193,17 @@
   },
   "teachingBubble_text_content": {
     "message": "Click here to see statistics data"
+  },
+  "options_toolTip_components": {
+    "message": "You can choose which component will be shown on github's page"
+  },
+  "options_toolTip_graphType": {
+    "message": "You can choose the rendering type of component，antv or echarts"
+  },
+  "options_toolTip_update": {
+    "message": "Keep up to date to get more components"
+  },
+  "options_toolTip_token": {
+    "message": "Github token will be used to visit files of a repository"
   }
 }
diff --git a/src/_locales/zh_CN/messages.json b/src/_locales/zh_CN/messages.json
@@ -152,6 +152,9 @@
   "options_text_checkUpdate": {
     "message": "检查更新"
   },
+  "options_text_update": {
+    "message": "更新"
+  },
   "options_text_checking": {
     "message": "正在检查更新"
   },
@@ -187,5 +190,17 @@
   },
   "teachingBubble_text_content": {
     "message": "点击以查看统计数据"
+  },
+  "options_toolTip_components": {
+    "message": "您可以在此次选择在github中展示的图表组件"
+  },
+  "options_toolTip_graphType": {
+    "message": "可选择图表组件的渲染方式，antv或者echarts"
+  },
+  "options_toolTip_update": {
+    "message": "始终保持插件状态为最新将为您呈现更丰富的内容"
+  },
+  "options_toolTip_token": {
+    "message": "Github凭据将被用于repository文件的访问"
   }
 }
diff --git a/src/components/OptionsPage/index.tsx b/src/components/OptionsPage/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import {
-  Pivot, PivotItem, PivotLinkFormat, Stack,
+  TooltipHost, Stack,
   Toggle, DefaultButton, Checkbox, Text, Link,
   Spinner, MessageBar, MessageBarType,
   Dialog, DialogType, TextField, ChoiceGroup, IChoiceGroupOption,
@@ -78,7 +78,7 @@ const OptionsPage: React.FC = () => {
     if(!inited){
       initMetaData();
     }
-  }, [metaData]);
+  }, [inited, metaData]);
 
   useEffect(() => {
     const initSettings = async () => {
@@ -89,7 +89,7 @@ const OptionsPage: React.FC = () => {
     if(!inited){
       initSettings();
     }
-  }, [settings]);
+  }, [inited, settings]);
 
   useEffect(() => {
     // @ts-ignore
@@ -244,11 +244,15 @@ const OptionsPage: React.FC = () => {
         }}
       >
         <Stack.Item className='Box'>
-          <Stack.Item className='Box-header'>
-            <h2 className='Box-title'>
-              {getMessageI18n("options_text_showDifferentComponent")}
-            </h2>
-          </Stack.Item>
+          <TooltipHost
+            content={getMessageI18n("options_toolTip_components")}
+          >
+            <Stack.Item className='Box-header'>
+              <h2 className='Box-title'>
+                {getMessageI18n("options_text_showDifferentComponent")}
+              </h2>
+            </Stack.Item>
+          </TooltipHost>
           <Stack
             style={{ margin: '10px 25px' }}
             tokens={{
@@ -274,11 +278,15 @@ const OptionsPage: React.FC = () => {
           </Stack>
         </Stack.Item>
         <Stack.Item className='Box'>
-          <Stack.Item className='Box-header'>
-            <h2 className='Box-title'>
-              {getMessageI18n("options_text_defaultGraphType")}
-            </h2>
-          </Stack.Item>
+          <TooltipHost
+            content={getMessageI18n("options_toolTip_graphType")}
+          >
+            <Stack.Item className='Box-header'>
+              <h2 className='Box-title'>
+                {getMessageI18n("options_text_defaultGraphType")}
+              </h2>
+            </Stack.Item>
+          </TooltipHost>
           <Stack
             style={{ margin: '10px 25px' }}
             tokens={{
@@ -297,11 +305,15 @@ const OptionsPage: React.FC = () => {
           </Stack>
         </Stack.Item>
         <Stack.Item className='Box'>
-          <Stack.Item className='Box-header'>
-            <h2 className='Box-title'>
-              {getMessageI18n("options_text_checking")}
-            </h2>
-          </Stack.Item>
+          <TooltipHost
+            content={getMessageI18n("options_toolTip_update")}
+          >
+            <Stack.Item className='Box-header'>
+              <h2 className='Box-title'>
+                {getMessageI18n("options_text_update")}
+              </h2>
+            </Stack.Item>
+          </TooltipHost>
           <Stack
             style={{ margin: '10px 25px' }}
             tokens={{
@@ -359,11 +371,15 @@ const OptionsPage: React.FC = () => {
           </Stack>
         </Stack.Item>
         <Stack.Item className='Box'>
-          <Stack.Item className='Box-header'>
-            <h2 className='Box-title'>
-              GitHub Token
-            </h2>
-          </Stack.Item>
+          <TooltipHost
+            content={getMessageI18n("options_toolTip_token")}
+          >
+            <Stack.Item className='Box-header'>
+              <h2 className='Box-title'>
+                GitHub Token
+              </h2>
+            </Stack.Item>
+          </TooltipHost>
           <Stack
             style={{ margin: '10px 25px' }}
             tokens={{

diff --git a/src/mock/background.data.ts b/src/mock/background.data.ts
@@ -1,17 +1,14 @@
 export const updateInformation = {
   "chrome": {
-    "latest_version":"0.1.2",
-    "date":"2021-4-1",
+    "latest_version":"1.0.0",
     "url":"https://github.com/hypertrons/hypertrons-crx/releases"
   },
   "edge": {
-    "latest_version":"0.1.2",
-    "date":"2021-3-1",
+    "latest_version":"1.0.0",
     "url":"https://github.com/hypertrons/hypertrons-crx/releases"
   },
   "develop": {
-    "latest_version":"0.1.3",
-    "date":"2021-3-27",
+    "latest_version":"1.0.1",
     "url":"https://github.com/hypertrons/hypertrons-crx/releases"
   }
 }