From 4614ad5a876f3b49992f4207fac8e93cf9e0976b Mon Sep 17 00:00:00 2001 From: LiuChangFreeman Date: Tue, 23 Mar 2021 22:41:39 +0800 Subject: [PATCH 1/3] wrapper for i18n api --- src/_locales/en/messages.json | 18 ++++++++++++++++++ src/_locales/zh_CN/messages.json | 18 ++++++++++++++++++ src/utils/utils.ts | 4 ++++ 3 files changed, 40 insertions(+) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 47d42855..dcaadf7d 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -8,7 +8,25 @@ "manifest_iconTitle": { "message": "[loading……]" }, + "global_btn_ok": { + "message": "ok" + }, "component_developerCollabrationNetwork_title": { "message": "Developer Collabration Network" + }, + "options_header_settings": { + "message": "Settings" + }, + "options_header_commandLine": { + "message": "Commandline" + }, + "options_toggle_checkForUpdates": { + "message": "check updates" + }, + "options_toggle_checkForUpdates_onText": { + "message": "on" + }, + "options_toggle_checkForUpdates_offText": { + "message": "off" } } \ No newline at end of file diff --git a/src/_locales/zh_CN/messages.json b/src/_locales/zh_CN/messages.json index 5493a1ed..a72d7bfe 100644 --- a/src/_locales/zh_CN/messages.json +++ b/src/_locales/zh_CN/messages.json @@ -8,7 +8,25 @@ "manifest_iconTitle": { "message": "[载入中……]" }, + "global_btn_ok": { + "message": "确定" + }, "component_developerCollabrationNetwork_title": { "message": "开发人员合作网络图" + }, + "options_header_settings": { + "message": "设置" + }, + "options_header_commandLine": { + "message": "命令行" + }, + "options_toggle_checkForUpdates": { + "message": "自动检测更新" + }, + "options_toggle_checkForUpdates_onText": { + "message": "开" + }, + "options_toggle_checkForUpdates_offText": { + "message": "关" } } \ No newline at end of file diff --git a/src/utils/utils.ts b/src/utils/utils.ts index 2faa56b9..45b0f45a 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -39,3 +39,7 @@ export async function chrome_get(key:string){ }) }); } + +export function getMessageI18n(key:string){ + return chrome.i18n.getMessage(key); +} \ No newline at end of file From b114d1873a1c33bed4b2497ad7441b32010ae661 Mon Sep 17 00:00:00 2001 From: LiuChangFreeman Date: Tue, 23 Mar 2021 22:42:09 +0800 Subject: [PATCH 2/3] add popup page --- src/components/PopupPage/index.css | 0 src/components/PopupPage/index.tsx | 19 +++++++++++++++++++ src/pages/Popup/index.tsx | 3 ++- 3 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/components/PopupPage/index.css create mode 100644 src/components/PopupPage/index.tsx diff --git a/src/components/PopupPage/index.css b/src/components/PopupPage/index.css new file mode 100644 index 00000000..e69de29b diff --git a/src/components/PopupPage/index.tsx b/src/components/PopupPage/index.tsx new file mode 100644 index 00000000..34965c9c --- /dev/null +++ b/src/components/PopupPage/index.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { + Stack +} from 'office-ui-fabric-react'; +import { initializeIcons } from '@uifabric/icons'; +import './index.css'; + +initializeIcons(); + +const PopupPage: React.FC<{}> = () => { + + return( + +

Hypertrons

+ + ) +} + +export default PopupPage; \ No newline at end of file diff --git a/src/pages/Popup/index.tsx b/src/pages/Popup/index.tsx index 8d88b07b..4238ee04 100644 --- a/src/pages/Popup/index.tsx +++ b/src/pages/Popup/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render } from 'react-dom'; +import PopupPage from '../../components/PopupPage/index' import './index.css'; -render(
, window.document.querySelector('#app-container')); +render(, window.document.querySelector('#app-container')); From d6a3801594d30a578b969238ad36b9bb82ca3bba Mon Sep 17 00:00:00 2001 From: LiuChangFreeman Date: Tue, 23 Mar 2021 22:42:26 +0800 Subject: [PATCH 3/3] add options page --- src/components/OptionsPage/index.css | 11 ++++ src/components/OptionsPage/index.tsx | 80 ++++++++++++++++++++++++++++ src/manifest.json | 1 + src/pages/Options/index.tsx | 3 +- 4 files changed, 94 insertions(+), 1 deletion(-) create mode 100644 src/components/OptionsPage/index.css create mode 100644 src/components/OptionsPage/index.tsx diff --git a/src/components/OptionsPage/index.css b/src/components/OptionsPage/index.css new file mode 100644 index 00000000..afe92956 --- /dev/null +++ b/src/components/OptionsPage/index.css @@ -0,0 +1,11 @@ +.container{ + width: 98vw; + min-height: calc(100vh - 100px); + margin-top: 10px; + opacity: 1; + background: white; + box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px; + transition: all 0.2s ease 0s; + border-radius: 3px; + overflow: hidden; +} \ No newline at end of file diff --git a/src/components/OptionsPage/index.tsx b/src/components/OptionsPage/index.tsx new file mode 100644 index 00000000..154e6331 --- /dev/null +++ b/src/components/OptionsPage/index.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { + Pivot, PivotItem, PivotLinkFormat,Stack, Toggle,DefaultButton +} from 'office-ui-fabric-react'; +import { initializeIcons } from '@uifabric/icons'; +import {getMessageI18n} from '../../utils/utils' +import './index.css'; + +initializeIcons(); + +const OptionsPage: React.FC<{}> = () => { + + return( + + +

HYPERTRONS

+ version 0.1.2 + + +
+ + + + + {}} + > + {getMessageI18n("global_btn_ok")} + + + { + + }} + /> + + + + + + + + + +
+ + + ) +} + +export default OptionsPage; \ No newline at end of file diff --git a/src/manifest.json b/src/manifest.json index d783dc63..95edf318 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,6 +1,7 @@ { "name": "Hypertrons", "default_locale": "zh_CN", + "options_page": "options.html", "icons": { "128": "128.png" }, diff --git a/src/pages/Options/index.tsx b/src/pages/Options/index.tsx index 8d88b07b..b3c23c1c 100644 --- a/src/pages/Options/index.tsx +++ b/src/pages/Options/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render } from 'react-dom'; +import OptionsPage from '../../components/OptionsPage/index' import './index.css'; -render(
, window.document.querySelector('#app-container')); +render(, window.document.querySelector('#app-container'));