feat(project): add the Context of windows system button (#1638)

* feat(project): add windows system button context * refactor(flat-components): rename props * refactor(flat-pages): use the Context of the windows system button * refactor(renderer-app): remove unused function * refactor(flat-components): add onDoubleClick event and remove ref prop
netless-io · Aug 22, 2022 · 3203ef3 · 3203ef3
1 parent b1fbf5d
commit 3203ef3
Show file tree

Hide file tree

Showing 16 changed files with 267 additions and 145 deletions.
diff --git a/desktop/renderer-app/src/components/MainPageLayoutContainer/index.tsx b/desktop/renderer-app/src/components/MainPageLayoutContainer/index.tsx
@@ -2,7 +2,6 @@
 import "./index.less";
 
 import React, { useContext } from "react";
-import { shell } from "electron";
 import { useHistory, useLocation } from "react-router-dom";
 import {
     MainPageLayout,
@@ -19,15 +18,13 @@ import {
     SVGSetting,
     SVGFeedback,
     SVGLogout,
-    WindowsSystemBtnItem,
 } from "flat-components";
 import { observer } from "mobx-react-lite";
 import { useTranslate } from "@netless/flat-i18n";
 import { routeConfig, RouteNameType } from "../../route-config";
 import { GlobalStoreContext } from "../StoreProvider";
 import { generateAvatar } from "../../utils/generate-avatar";
-import { ipcAsyncByMainWindow } from "../../utils/ipc";
-import { runtime } from "../../utils/runtime";
+import { WindowsSystemBtnContext } from "@netless/flat-pages/src/components/StoreProvider";
 
 export interface MainPageLayoutContainerProps {
     subMenu?: MainPageLayoutItem[];
@@ -49,6 +46,8 @@ export const MainPageLayoutContainer = observer<MainPageLayoutContainerProps>(
         onBackPreviousPage,
     }) {
         const t = useTranslate();
+        const windowsBtnContext = useContext(WindowsSystemBtnContext);
+
         const sideMenu = [
             {
                 key: routeConfig[RouteNameType.HomePage].path,
@@ -121,7 +120,7 @@ export const MainPageLayoutContainer = observer<MainPageLayoutContainerProps>(
                     ? onRouteChange(mainPageLayoutItem)
                     : history.push(mainPageLayoutItem.route);
             } else {
-                void shell.openExternal(mainPageLayoutItem.route);
+                void window.electron.shell.openExternal(mainPageLayoutItem.route);
             }
         };
 
@@ -134,21 +133,17 @@ export const MainPageLayoutContainer = observer<MainPageLayoutContainerProps>(
         ];
 
         const onClickTopBarMenu = (mainPageTopBarMenuItem: MainPageTopBarMenuItem): void => {
-            void shell.openExternal(mainPageTopBarMenuItem.route);
-        };
-
-        const onClickWindowsSystemBtn = (winSystemBtn: WindowsSystemBtnItem): void => {
-            ipcAsyncByMainWindow("set-win-status", { windowStatus: winSystemBtn });
+            void window.electron.shell.openExternal(mainPageTopBarMenuItem.route);
         };
 
         return (
             <MainPageLayout
                 activeKeys={activeKeys}
                 avatarSrc={globalStore.userInfo?.avatar ?? ""}
                 generateAvatar={generateAvatar}
-                isWin={runtime.isWin}
                 popMenu={popMenu}
                 showMainPageHeader={showMainPageHeader}
+                showWindowsSystemBtn={windowsBtnContext?.showWindowsBtn}
                 sideMenu={sideMenu}
                 sideMenuFooter={sideMenuFooter}
                 subMenu={subMenu}
@@ -158,7 +153,7 @@ export const MainPageLayoutContainer = observer<MainPageLayoutContainerProps>(
                 onBackPreviousPage={onBackPreviousPage}
                 onClick={onMenuItemClick}
                 onClickTopBarMenu={onClickTopBarMenu}
-                onClickWindowsSystemBtn={onClickWindowsSystemBtn}
+                onClickWindowsSystemBtn={windowsBtnContext?.onClickWindowsSystemBtn}
             >
                 {children}
             </MainPageLayout>

diff --git a/desktop/renderer-app/src/components/WindowsBtnContext.ts b/desktop/renderer-app/src/components/WindowsBtnContext.ts
@@ -0,0 +1,27 @@
+import { WindowsBtnContextInterface } from "@netless/flat-pages/src/components/WindowsBtnContext";
+import { WindowsSystemBtnItem } from "flat-components";
+import { ipcAsyncByMainWindow, ipcReceive, ipcReceiveRemove } from "../utils/ipc";
+
+export class WindowsBtnContext implements WindowsBtnContextInterface {
+    public showWindowsBtn: boolean = window.node.os.platform() === "win32";
+
+    public onClickWindowsSystemBtn = (winSystemBtn: WindowsSystemBtnItem): void => {
+        ipcAsyncByMainWindow("set-win-status", { windowStatus: winSystemBtn });
+    };
+
+    public clickWindowMaximize = (): void => {
+        ipcAsyncByMainWindow("set-win-status", { windowStatus: "maximize" });
+    };
+
+    public sendWindowWillCloseEvent = (callback: () => void): void => {
+        ipcReceive("window-will-close", () => {
+            callback();
+        });
+    };
+
+    public removeWindowWillCloseEvent = (): void => {
+        ipcReceiveRemove("window-will-close");
+    };
+}
+
+export const windowsBtnContext = new WindowsBtnContext();
diff --git a/desktop/renderer-app/src/pages/DeviceCheckPages/DeviceCheckLayoutContainer.tsx b/desktop/renderer-app/src/pages/DeviceCheckPages/DeviceCheckLayoutContainer.tsx
@@ -11,10 +11,9 @@ import { useHistory, useLocation } from "react-router-dom";
 import { DeviceCheckState } from "./utils";
 import { MainPageLayoutItem } from "flat-components";
 import { useTranslate } from "@netless/flat-i18n";
+import { PageStoreContext } from "@netless/flat-pages/src/components/StoreProvider";
 
 export const DeviceCheckLayoutContainer: React.FC = ({ children }): React.ReactElement => {
-    useWindowSize("Main");
-
     const t = useTranslate();
     const history = useHistory<DeviceCheckState>();
     const location = useLocation<DeviceCheckState | undefined>();

diff --git a/desktop/renderer-app/src/tasks/init-ui.tsx b/desktop/renderer-app/src/tasks/init-ui.tsx
@@ -14,6 +14,7 @@ import { IPCContext } from "../components/IPCContext";
 
 /** configure right after import */
 import { configure } from "mobx";
+import { windowsBtnContext } from "../components/WindowsBtnContext";
 configure({
     isolateGlobalState: true,
 });
@@ -23,7 +24,7 @@ const App: React.FC = () => {
 
     return (
         <AntdProvider lang={language}>
-            <StoreProvider>
+            <StoreProvider WindowsBtnContext={windowsBtnContext}>
                 <IPCContext.Provider value={ipcStore}>
                     <FlatServicesContextProvider>
                         <AppRoutes />

diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBar.stories.tsx b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBar.stories.tsx
@@ -11,7 +11,7 @@ export default storyMeta;
 
 export const Overview: Story<TopBarProps> = args => <TopBar {...args} />;
 Overview.args = {
-    isMac: true,
+    showWindowsSystemBtn: true,
     left: <span>Hello</span>,
     center: <span>,</span>,
     right: <span>world</span>,

diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/index.tsx b/packages/flat-components/src/components/ClassroomPage/TopBar/index.tsx
@@ -18,28 +18,31 @@ export interface TopBarProps {
     left?: ReactNode;
     center?: ReactNode;
     right?: ReactNode;
-    isMac?: boolean;
+    showWindowsSystemBtn?: boolean;
     hiddenMaximizeBtn?: boolean;
-    topBarRef?: React.RefObject<HTMLDivElement>;
     // flat-web don't need pass this method.
     onClickWindowsSystemBtn?: WindowsSystemBtnProps["onClickWindowsSystemBtn"];
+    onDoubleClick?: () => void;
 }
 
 export const TopBar: FC<TopBarProps> = ({
     left,
     center,
     right,
-    isMac,
-    topBarRef,
+    showWindowsSystemBtn,
     hiddenMaximizeBtn,
     onClickWindowsSystemBtn,
+    onDoubleClick,
 }) => (
-    <div ref={topBarRef} className={classNames("topbar-box", { isMac, isWin: !isMac })}>
+    <div
+        className={classNames("topbar-box", { showWindowsSystemBtn })}
+        onDoubleClick={onDoubleClick}
+    >
         <div className="topbar-content-left">{left}</div>
         <div className="topbar-content-center">{center}</div>
         <div className="topbar-content-right">
             {right}
-            {!isMac && onClickWindowsSystemBtn && (
+            {showWindowsSystemBtn && onClickWindowsSystemBtn && (
                 <>
                     <WindowsSystemBtn
                         hiddenMaximizeBtn={hiddenMaximizeBtn}

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageTopBar/index.tsx b/packages/flat-components/src/components/MainPageLayout/MainPageTopBar/index.tsx
@@ -7,11 +7,11 @@ import { WindowsSystemBtn } from "./WindowsSystemBtn";
 
 export interface MainPageTopBarProps extends MainPageNavAvatarProps {
     topBarMenu: MainPageTopBarMenuItem[];
-    isWin?: boolean;
+    showWindowsSystemBtn?: boolean;
     onMinimizeClick?: () => void;
     onCloseClick?: () => void;
     onClickTopBarMenu: (menuItem: MainPageTopBarMenuItem) => void;
-    onClickWindowsSystemBtn: (winSystemBtn: WindowsSystemBtnItem) => void;
+    onClickWindowsSystemBtn?: (winSystemBtn: WindowsSystemBtnItem) => void;
 }
 
 export const MainPageTopBar: React.FC<MainPageTopBarProps> = ({
@@ -20,7 +20,7 @@ export const MainPageTopBar: React.FC<MainPageTopBarProps> = ({
     popMenu,
     topBarMenu,
     userName,
-    isWin,
+    showWindowsSystemBtn,
     generateAvatar,
     onClick,
     onClickTopBarMenu,
@@ -53,7 +53,7 @@ export const MainPageTopBar: React.FC<MainPageTopBarProps> = ({
                         </a>
                     );
                 })}
-                {isWin && (
+                {onClickWindowsSystemBtn && showWindowsSystemBtn && (
                     <>
                         <div className="main-page-top-bar-divider" />
                         <WindowsSystemBtn

diff --git a/packages/flat-pages/src/BigClassPage/BigClassPage.less b/packages/flat-pages/src/BigClassPage/BigClassPage.less
@@ -1,4 +1,16 @@
+.big-class-page-container {
+    // PATCH: low version Electron bug
+    // if a element location on the window edge that has drag attributes and the frames of BrowserWindow options is false,
+    // then this window can't to resize size of window.
+    // so that wrap draggable elements and add padding property to achieve resize feature.
+    // TODO: upgrade new version of the Electron after remove the PATCH.
+    height: 100%;
+    padding: 0.5px;
+}
+
 .big-class-realtime-container {
+    -webkit-app-region: drag;
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -7,6 +19,8 @@
 }
 
 .big-class-realtime-box {
+    -webkit-app-region: no-drag;
+
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -15,8 +29,6 @@
 
 .big-class-realtime-content-container {
     position: relative;
-    width: 100%;
-    height: 100%;
 }
 
 .big-class-realtime-content {

diff --git a/packages/flat-pages/src/BigClassPage/index.tsx b/packages/flat-pages/src/BigClassPage/index.tsx
@@ -15,7 +15,7 @@ import {
     SVGScreenSharing,
 } from "flat-components";
 import { observer } from "mobx-react-lite";
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { useTranslate } from "@netless/flat-i18n";
 import { RoomStatus } from "@netless/flat-server-api";
 import { ChatPanel } from "../components/ChatPanel";
@@ -29,11 +29,11 @@ import {
 import InviteButton from "../components/InviteButton";
 import { RealtimePanel } from "../components/RealtimePanel";
 import { Whiteboard } from "../components/Whiteboard";
-import { runtime } from "../utils/runtime";
 import { RTCAvatar } from "../components/RTCAvatar";
 import { ShareScreen } from "../components/ShareScreen";
 import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
+import { WindowsSystemBtnContext } from "../components/StoreProvider";
 
 export type BigClassPageProps = {};
 
@@ -44,6 +44,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
         const t = useTranslate();
 
         const whiteboardStore = classroomStore.whiteboardStore;
+        const windowsBtn = useContext(WindowsSystemBtnContext);
 
         const { confirm, ...exitConfirmModalProps } = useExitRoomConfirmModal(classroomStore);
 
@@ -61,32 +62,40 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
         }, [classroomStore]);
 
         return (
-            <div className="big-class-realtime-container">
-                <div className="big-class-realtime-box">
-                    <TopBar
-                        isMac={runtime.isMac}
-                        left={renderTopBarLeft()}
-                        right={renderTopBarRight()}
-                    />
-                    <div className="big-class-realtime-content">
-                        <div className="big-class-realtime-content-container">
-                            <ShareScreen classRoomStore={classroomStore} />
-                            <Whiteboard
-                                classRoomStore={classroomStore}
-                                whiteboardStore={whiteboardStore}
+            <div className="big-class-page-container">
+                <div className="big-class-realtime-container">
+                    <div className="big-class-realtime-box">
+                        {windowsBtn ? (
+                            <TopBar
+                                left={renderTopBarLeft()}
+                                right={renderTopBarRight()}
+                                showWindowsSystemBtn={windowsBtn.showWindowsBtn}
+                                onClickWindowsSystemBtn={windowsBtn.onClickWindowsSystemBtn}
+                                onDoubleClick={windowsBtn.clickWindowMaximize}
                             />
+                        ) : (
+                            <TopBar left={renderTopBarLeft()} right={renderTopBarRight()} />
+                        )}
+                        <div className="big-class-realtime-content">
+                            <div className="big-class-realtime-content-container">
+                                <ShareScreen classRoomStore={classroomStore} />
+                                <Whiteboard
+                                    classRoomStore={classroomStore}
+                                    whiteboardStore={whiteboardStore}
+                                />
+                            </div>
+                            {renderRealtimePanel()}
                         </div>
-                        {renderRealtimePanel()}
+                        <ExitRoomConfirm
+                            isCreator={classroomStore.isCreator}
+                            {...exitConfirmModalProps}
+                        />
+                        <RoomStatusStoppedModal
+                            isCreator={classroomStore.isCreator}
+                            isRemoteLogin={classroomStore.isRemoteLogin}
+                            roomStatus={classroomStore.roomStatus}
+                        />
                     </div>
-                    <ExitRoomConfirm
-                        isCreator={classroomStore.isCreator}
-                        {...exitConfirmModalProps}
-                    />
-                    <RoomStatusStoppedModal
-                        isCreator={classroomStore.isCreator}
-                        isRemoteLogin={classroomStore.isRemoteLogin}
-                        roomStatus={classroomStore.roomStatus}
-                    />
                 </div>
             </div>
         );
@@ -138,17 +147,20 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
                     {/* TODO: open cloud-storage sub window */}
                     <CloudStorageButton classroom={classroomStore} />
                     <InviteButton roomInfo={classroomStore.roomInfo} />
-                    <TopBarRightBtn
-                        icon={<SVGExit />}
-                        title={t("exit")}
-                        onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
-                    />
-                    <TopBarDivider />
+                    {!windowsBtn?.showWindowsBtn && (
+                        <TopBarRightBtn
+                            icon={<SVGExit />}
+                            title={t("exit")}
+                            onClick={() => confirm(ExitRoomConfirmType.ExitButton)}
+                        />
+                    )}
+                    {windowsBtn?.showWindowsBtn ? null : <TopBarDivider />}
                     <TopBarRightBtn
                         icon={isRealtimeSideOpen ? <SVGMenuUnfold /> : <SVGMenuFold />}
                         title={isRealtimeSideOpen ? t("side-panel.hide") : t("side-panel.show")}
                         onClick={handleSideOpenerSwitch}
                     />
+                    {windowsBtn?.showWindowsBtn && <TopBarDivider />}
                 </>
             );
         }