Skip to content

Commit 212be91

Browse files
nini22Pnini22P
authored
Merge pull request #217 from nini22P/dev
feat: dashBoard migrating to fluent ui v9
2 parents 4eb8ece + 0369ee0 commit 212be91

18 files changed

+1294
-1424
lines changed

‎packages/origine2/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
},
1414
"dependencies": {
1515
"@fluentui/react": "^8.77.3",
16+
"@fluentui/react-components": "^9.44.1",
17+
"@fluentui/react-icons": "^2.0.224",
1618
"@fluentui/react-icons-mdl2": "^1.3.41",
1719
"@icon-park/react": "^1.4.2",
1820
"@monaco-editor/react": "^4.4.5",

‎packages/origine2/src/App.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
.App {
22
text-align: center;
3+
background-color: #fafafa;
4+
width: 100%;
5+
height: 100%;
36
}
47

58
.App-logo {

‎packages/origine2/src/App.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,10 @@ function App() {
5151
}, triggerCharacters: ["-", "", ":", "\n"]
5252
});
5353
});
54+
5455
return (
5556
// 将编辑器的根元素占满整个视口
56-
<div className="App" style={{width: "100vw", height: "100vh", overflow: "hidden"}}>
57+
<div className="App">
5758
<Provider store={origineStore}>
5859
<PersistGate loading={null} persistor={persistor}>
5960
<Translation/>

‎packages/origine2/src/main.tsx

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,37 @@ import { jp } from "./translations/jp";
1010
import 'primereact/resources/themes/fluent-light/theme.css';
1111
import "primereact/resources/primereact.min.css";
1212
import "./primereact.scss";
13+
import { BrandVariants, createLightTheme, createDarkTheme, FluentProvider, makeStyles, Theme } from "@fluentui/react-components";
14+
15+
const terre: BrandVariants = {
16+
10: "#020306",
17+
20: "#111725",
18+
30: "#152642",
19+
40: "#17325A",
20+
50: "#163E73",
21+
60: "#124B8D",
22+
70: "#0558A8",
23+
80: "#2A65B4",
24+
90: "#4672BC",
25+
100: "#5D80C3",
26+
110: "#728ECA",
27+
120: "#859CD1",
28+
130: "#98ABD8",
29+
140: "#ABB9DF",
30+
150: "#BEC8E7",
31+
160: "#D0D7EE"
32+
};
33+
34+
const lightTheme: Theme = {
35+
...createLightTheme(terre),
36+
};
37+
38+
const darkTheme: Theme = {
39+
...createDarkTheme(terre),
40+
};
41+
42+
darkTheme.colorBrandForeground1 = terre[110];
43+
darkTheme.colorBrandForeground2 = terre[120];
1344

1445
function initTranslation() {
1546
i18n.use(initReactI18next) // passes i18n down to react-i18next
@@ -38,6 +69,8 @@ initializeIcons();
3869
// 不用 StrictMode，因为会和 react-butiful-dnd 冲突
3970
ReactDOM.createRoot(document.getElementById("root")!).render(
4071
// <React.StrictMode>
41-
<App />
72+
<FluentProvider theme={lightTheme} style={{width: '100%', height: '100%'}}>
73+
<App />
74+
</FluentProvider>
4275
// </React.StrictMode>
4376
);

‎packages/origine2/src/pages/dashboard/About.tsx

Lines changed: 29 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import * as React from 'react';
2-
import { Callout, Link, Text } from '@fluentui/react';
3-
import { useBoolean, useId } from '@fluentui/react-hooks';
4-
import { CommandBarButton } from '@fluentui/react/lib/Button';
5-
import styles from './about.module.scss';
62
import { __INFO } from "@/config/info";
73
import { useRelease } from "../../hooks/useRelease";
84
import { logger } from '@/utils/logger';
95
import useTrans from '@/hooks/useTrans';
6+
import { Link, Popover, PopoverSurface, PopoverTrigger, Text, Title1, ToolbarButton } from '@fluentui/react-components';
7+
import { Info24Filled, Info24Regular, bundleIcon } from '@fluentui/react-icons';
8+
import { useState } from 'react';
109

1110
interface DateTimeFormatOptions {
1211
year: 'numeric' | '2-digit';
@@ -15,15 +14,12 @@ interface DateTimeFormatOptions {
1514
}
1615

1716
const About: React.FunctionComponent = () => {
18-
const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
19-
const buttonId = useId('callout-button');
20-
const labelId = useId('callout-label');
21-
const descriptionId = useId('callout-description');
22-
17+
const [open, setOpen] = useState(false);
2318
const t = useTrans('editor.topBar.');
24-
2519
const latestRelease = useRelease();
2620

21+
const InfoIcon = bundleIcon(Info24Filled, Info24Regular);
22+
2723
/**
2824
* 比较版本号
2925
* @param latestVersion 最新版本
@@ -60,29 +56,23 @@ const About: React.FunctionComponent = () => {
6056
const dateTimeOptions: DateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit' };
6157

6258
return (
63-
<>
64-
<CommandBarButton
65-
className={styles.button}
66-
id={buttonId}
67-
onClick={toggleIsCalloutVisible}
68-
text={`${t('about.about')} ${isNewRelease ? `(${t('about.checkedForNewVersion')})` : ''}`}
69-
iconProps={{ iconName: 'Info' }}
70-
/>
71-
{isCalloutVisible &&
72-
<Callout
73-
className={styles.callout}
74-
ariaLabelledBy={labelId}
75-
ariaDescribedBy={descriptionId}
76-
role="dialog"
77-
gapSpace={0}
78-
target={`#${buttonId}`}
79-
onDismiss={toggleIsCalloutVisible}
80-
setInitialFocus
81-
>
82-
<Text as="h1" block variant="xLarge" className={styles.title} id={labelId}>
59+
<Popover
60+
withArrow
61+
trapFocus
62+
open={open}
63+
onOpenChange={() => setOpen(!open)}
64+
>
65+
<PopoverTrigger disableButtonEnhancement>
66+
<ToolbarButton aria-label={t('about.about')} icon={<InfoIcon />}>
67+
{t('about.about')} {isNewRelease ? `(${t('about.checkedForNewVersion')})` : ''}
68+
</ToolbarButton>
69+
</PopoverTrigger>
70+
<PopoverSurface>
71+
<div>
72+
<Text as='h1' block size={500}>
8373
WebGAL Terre
8474
</Text>
85-
<Text block variant="medium" className={styles.info} id={descriptionId}>
75+
<Text as='b' block>
8676
<p>{t('about.slogan')}</p>
8777
<small>
8878
{t('about.currentVersion')}: {`${__INFO.version} (${new Date(__INFO.buildTime).toLocaleString('zh-CN', dateTimeOptions).replaceAll('/', '-')})`}<br />
@@ -95,7 +85,7 @@ const About: React.FunctionComponent = () => {
9585
<p>
9686
{
9787
isNewRelease &&
98-
<Link href="https://openwebgal.com/download/" target="_blank" className={styles.link}>
88+
<Link href="https://openwebgal.com/download/" target="_blank">
9989
{t('about.downloadLatest')}
10090
</Link>
10191
}
@@ -109,20 +99,20 @@ const About: React.FunctionComponent = () => {
10999
</div>
110100
</small>
111101
</Text>
112-
<div className={styles.link_group}>
113-
<Link href="https://openwebgal.com/" target="_blank" className={styles.link}>
102+
<div style={{display:'flex', gap:'0.5rem', marginTop:'1rem'}}>
103+
<Link href="https://openwebgal.com/" target="_blank">
114104
{t('about.homePage')}
115105
</Link>
116-
<Link href="https://docs.openwebgal.com/" target="_blank" className={styles.link}>
106+
<Link href="https://docs.openwebgal.com/" target="_blank">
117107
{t('about.document')}
118108
</Link>
119-
<Link href="https://github.com/MakinoharaShoko/WebGAL_Terre" target="_blank" className={styles.link}>
109+
<Link href="https://github.com/MakinoharaShoko/WebGAL_Terre" target="_blank">
120110
GitHub
121111
</Link>
122112
</div>
123-
</Callout>
124-
}
125-
</>
113+
</div>
114+
</PopoverSurface>
115+
</Popover>
126116
);
127117
};
128118

‎packages/origine2/src/pages/dashboard/DashBoard.tsx

Lines changed: 46 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ import { logger } from "../../utils/logger";
55
import { Message, TestRefRef } from "../../components/message/Message";
66
import styles from "./dashboard.module.scss";
77
import Sidebar from "./Sidebar";
8-
import { GamePreview } from "./GamePreview";
8+
import GamePreview from "./GamePreview";
99
import { useSelector } from "react-redux";
10-
import { origineStore, RootState } from "../../store/origineStore";
10+
import { RootState } from "../../store/origineStore";
1111
import useTrans from "@/hooks/useTrans";
1212
import useLanguage from "@/hooks/useLanguage";
13-
import { CommandBar, ICommandBarItemProps } from "@fluentui/react";
1413
import { language } from "@/store/statusReducer";
1514
import About from "./About";
1615
import { WebgalParser } from "../editor/GraphicalEditor/parser";
16+
import { Card, Menu, MenuItem, MenuList, MenuPopover, MenuTrigger, Toolbar, ToolbarButton } from "@fluentui/react-components";
17+
import { LocalLanguage24Filled, LocalLanguage24Regular, bundleIcon } from "@fluentui/react-icons";
1718

1819
// 返回的文件信息（单个）
1920
interface IFileInfo {
@@ -33,6 +34,8 @@ export default function DashBoard() {
3334
const setLanguage = useLanguage();
3435
const trans = useTrans('dashBoard.');
3536

37+
const LocalLanguageIcon = bundleIcon(LocalLanguage24Filled, LocalLanguage24Regular);
38+
3639
const isDashboardShow:boolean = useSelector((state: RootState) => state.status.dashboard.showDashBoard);
3740

3841
const messageRef = useRef<TestRefRef>(null);
@@ -83,68 +86,53 @@ export default function DashBoard() {
8386
refreashDashboard();
8487
}, []);
8588

86-
const _items: ICommandBarItemProps[] = [
87-
{
88-
key: "language",
89-
text: t('commandBar.items.language.text'),
90-
cacheKey: 'language',
91-
iconProps: { iconName: 'LocaleLanguage'},
92-
subMenuProps: {
93-
items: [
94-
{
95-
key: 'zhCn',
96-
text: '简体中文',
97-
onClick() {setLanguage(language.zhCn);}
98-
},
99-
{
100-
key: 'en',
101-
text: 'English',
102-
onClick() {setLanguage(language.en);}
103-
},
104-
{
105-
key: 'jp',
106-
text: '日本語',
107-
onClick() {setLanguage(language.jp);}
108-
}
109-
]
110-
}
111-
},
112-
];
113-
11489
const refreash = () => {
11590
refreashDashboard();
11691
setCurrentGame(null);
11792
};
11893

11994
return <>
120-
{ isDashboardShow && (<div className={styles.dashboard_container}>
121-
<div className={styles.topBar}>
95+
{ isDashboardShow &&
96+
<div className={styles.dashboard_container}>
97+
<div className={styles.topBar}>
12298
WebGAL Terre
123-
<div>
124-
<CommandBar
125-
items={_items}
126-
ariaLabel="Inbox actions"
127-
primaryGroupAriaLabel="Email actions"
128-
farItemsGroupAriaLabel="More actions"
129-
/>
99+
<Toolbar>
100+
<About />
101+
<Menu>
102+
<MenuTrigger>
103+
<ToolbarButton aria-label={t('commandBar.items.language.text')} icon={<LocalLanguageIcon />}>{t('commandBar.items.language.text')}</ToolbarButton>
104+
</MenuTrigger>
105+
<MenuPopover>
106+
<MenuList>
107+
<MenuItem onClick={() => setLanguage(language.zhCn)}>简体中文</MenuItem>
108+
<MenuItem onClick={() => setLanguage(language.en)}>English</MenuItem>
109+
<MenuItem onClick={() => setLanguage(language.jp)}>日本语</MenuItem>
110+
</MenuList>
111+
</MenuPopover>
112+
</Menu>
113+
</Toolbar>
114+
</div>
115+
<div className={styles.dashboard_main}>
116+
<Card style={{width: '100%', height: '100%'}}>
117+
<div style={{width: '100%', height: '100%', display: 'flex', overflow: 'auto'}}>
118+
<Message ref={messageRef} />
119+
{
120+
currentGame.value &&
121+
<GamePreview
122+
currentGame={currentGame.value}
123+
setCurrentGame={setCurrentGame}
124+
gameInfo={gameInfoList.value.find(e => e.dir === currentGame.value)!}
125+
/>
126+
}
127+
<Sidebar
128+
refreash={refreash}
129+
createGame={createGame}
130+
setCurrentGame={setCurrentGame}
131+
currentSetGame={currentGame.value}
132+
gameList={gameInfoList.value} />
133+
</div>
134+
</Card>
130135
</div>
131-
<About />
132-
</div>
133-
<div className={styles.dashboard_main}>
134-
<Message ref={messageRef} />
135-
<Sidebar
136-
refreash={refreash}
137-
createGame={createGame}
138-
setCurrentGame={setCurrentGame}
139-
currentSetGame={currentGame.value}
140-
gameList={gameInfoList.value} />
141-
{currentGame.value &&
142-
<GamePreview
143-
currentGame={currentGame.value}
144-
setCurrentGame={setCurrentGame}
145-
gameInfo={gameInfoList.value.find(e => e.dir === currentGame.value)!}/>}
146-
{/* <PrimaryButton onClick={createGame}>测试新建游戏</PrimaryButton> */}
147-
</div>
148-
</div>)}
136+
</div>}
149137
</>;
150138
}

0 commit comments

Comments
 (0)