refactor(flat-pages): update styles in room (netless-io#1766)

hyrious · web-flow · commit 3769ec8a24d4 · 2022-11-11T11:56:46.000+08:00
diff --git a/.eslintignore b/.eslintignore
@@ -4,3 +4,4 @@ dist/
 public/
 storybook-static/
 .eslintrc.js
+*.json
diff --git a/cspell.config.js b/cspell.config.js
@@ -95,7 +95,8 @@ module.exports = {
         "pickone", // chance
         "viewports", // storybook
         "videojs", // @videojs/vhs-utils
-        "telebox", // @netless/widnow-manager
+        "tele", // @netless/widnow-manager
+        "telebox",
         "Buildin", // @netless/widnow-manager
         "zindex", // antd
         "geogebra", // @netless/app-geogebra
diff --git a/desktop/renderer-app/src/tasks/init-ui.tsx b/desktop/renderer-app/src/tasks/init-ui.tsx
@@ -11,10 +11,11 @@ import { StoreProvider } from "@netless/flat-pages/src/components/StoreProvider"
 import { FlatServicesContextProvider } from "@netless/flat-pages/src/components/FlatServicesContext";
 import { ipcStore } from "../stores/ipc-store";
 import { IPCContext } from "../components/IPCContext";
+import { windowsBtnContext } from "../components/WindowsBtnContext";
+import { runtime } from "../utils/runtime";
 
 /** configure right after import */
 import { configure } from "mobx";
-import { windowsBtnContext } from "../components/WindowsBtnContext";
 configure({
     isolateGlobalState: true,
 });
@@ -24,7 +25,7 @@ const App: React.FC = () => {
 
     return (
         <AntdProvider lang={language}>
-            <StoreProvider WindowsBtnContext={windowsBtnContext}>
+            <StoreProvider WindowsBtnContext={windowsBtnContext} runtime={runtime}>
                 <IPCContext.Provider value={ipcStore}>
                     <FlatServicesContextProvider>
                         <AppRoutes />
diff --git a/packages/flat-components/src/components/ChatPanel/style.less b/packages/flat-components/src/components/ChatPanel/style.less
@@ -15,7 +15,7 @@
     }
 
     .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-        color: var(--primary);
+        color: var(--primary-strong);
     }
 
     .ant-tabs-top > .ant-tabs-nav::before {
@@ -45,20 +45,11 @@
 
 .flat-color-scheme-dark {
     .chat-panel {
-        .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-            color: var(--grey-0);
-        }
         .ant-tabs-ink-bar {
-            background: var(--grey-0);
+            background: var(--primary-strong);
         }
         .ant-tabs-top > .ant-tabs-nav::before {
             border-bottom-color: var(--grey-8);
         }
-        .ant-tabs-tab:hover {
-            color: var(--grey-4);
-        }
-        .ant-tabs-tab-btn:focus {
-            color: var(--grey-0);
-        }
     }
 }
diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less b/packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less
@@ -31,10 +31,10 @@
 
 .flat-color-scheme-dark {
     .topbar-right-btn {
-        background-color: var(--grey-10);
+        background-color: transparent;
 
         &:hover {
-            background-color: var(--grey-11);
+            background-color: var(--grey-7);
         }
 
         &:active {
diff --git a/packages/flat-components/src/components/ClassroomPage/TopBar/style.less b/packages/flat-components/src/components/ClassroomPage/TopBar/style.less
@@ -19,6 +19,7 @@
     padding: 0 8px;
     font-size: 16px;
     user-select: none;
+
     &.isMac {
         border-top: none;
     }
@@ -48,6 +49,7 @@
 .flat-color-scheme-dark {
     .topbar-box {
         border-color: var(--grey-8);
+        background: linear-gradient(270deg, #383B42 0%, #2B2F38 100%);
     }
 
     .topbar-divider,
diff --git a/packages/flat-pages/src/BigClassPage/BigClassPage.less b/packages/flat-pages/src/BigClassPage/BigClassPage.less
@@ -58,7 +58,7 @@
     .big-class-realtime-container,
     .big-class-realtime-box {
         color: var(--text);
-        background-color: var(--grey-10);
+        background-color: var(--grey-9);
     }
 
     .big-class-realtime-box .topbar-box {
diff --git a/packages/flat-pages/src/BigClassPage/index.tsx b/packages/flat-pages/src/BigClassPage/index.tsx
@@ -35,6 +35,7 @@ import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
+import { ExtraPadding } from "../components/ExtraPadding";
 
 export type BigClassPageProps = {};
 
@@ -103,6 +104,7 @@ export const BigClassPage = withClassroomStore<BigClassPageProps>(
         function renderTopBarLeft(): React.ReactNode {
             return (
                 <>
+                    <ExtraPadding />
                     <NetworkStatus networkQuality={classroomStore.networkQuality} />
                     {classroomStore.isCreator ? (
                         classroomStore.roomInfo?.beginTime && (
diff --git a/packages/flat-pages/src/OneToOnePage/index.tsx b/packages/flat-pages/src/OneToOnePage/index.tsx
@@ -35,6 +35,7 @@ import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
+import { ExtraPadding } from "../components/ExtraPadding";
 
 export type OneToOnePageProps = {};
 
@@ -97,6 +98,7 @@ export const OneToOnePage = withClassroomStore<OneToOnePageProps>(
         function renderTopBarLeft(): React.ReactNode {
             return (
                 <>
+                    <ExtraPadding />
                     <NetworkStatus networkQuality={classroomStore.networkQuality} />
                     {classroomStore.isCreator ? (
                         classroomStore.roomInfo?.beginTime && (
diff --git a/packages/flat-pages/src/SmallClassPage/index.tsx b/packages/flat-pages/src/SmallClassPage/index.tsx
@@ -37,6 +37,7 @@ import { useLoginCheck } from "../utils/use-login-check";
 import { withClassroomStore, WithClassroomStoreProps } from "../utils/with-classroom-store";
 import { WindowsSystemBtnContext } from "../components/StoreProvider";
 import { ShareScreenPicker } from "../components/ShareScreen/ShareScreenPicker";
+import { ExtraPadding } from "../components/ExtraPadding";
 
 export type SmallClassPageProps = {};
 
@@ -134,6 +135,7 @@ export const SmallClassPage = withClassroomStore<SmallClassPageProps>(
         function renderTopBarLeft(): React.ReactNode {
             return (
                 <>
+                    <ExtraPadding />
                     <NetworkStatus networkQuality={classroomStore.networkQuality} />
                     {classroomStore.isCreator ? (
                         classroomStore.roomInfo?.beginTime && (
diff --git a/packages/flat-pages/src/components/ExtraPadding.less b/packages/flat-pages/src/components/ExtraPadding.less
@@ -0,0 +1,5 @@
+.extra-padding {
+    display: inline-block;
+    width: 64px;
+    height: 1px;
+}
diff --git a/packages/flat-pages/src/components/ExtraPadding.tsx b/packages/flat-pages/src/components/ExtraPadding.tsx
@@ -0,0 +1,9 @@
+import "./ExtraPadding.less";
+
+import React, { useContext } from "react";
+import { RuntimeContext } from "./StoreProvider";
+
+export const ExtraPadding: React.FC = React.memo(function ExtraPadding() {
+    const runtime = useContext(RuntimeContext);
+    return runtime?.isMac ? <div className="extra-padding" /> : null;
+});
diff --git a/packages/flat-pages/src/components/RuntimeContext.ts b/packages/flat-pages/src/components/RuntimeContext.ts
@@ -0,0 +1,3 @@
+export interface IRuntimeContext {
+    isMac?: boolean;
+}
diff --git a/packages/flat-pages/src/components/StoreProvider.tsx b/packages/flat-pages/src/components/StoreProvider.tsx
@@ -2,6 +2,7 @@ import React, { createContext, FC } from "react";
 import { preferencesStore, globalStore, roomStore } from "@netless/flat-stores";
 import { pageStore } from "../stores/page-store";
 import { WindowsBtnContextInterface } from "./WindowsBtnContext";
+import { IRuntimeContext } from "./RuntimeContext";
 
 export const GlobalStoreContext = createContext(globalStore);
 
@@ -15,18 +16,23 @@ export const WindowsSystemBtnContext = createContext<WindowsBtnContextInterface
     undefined,
 );
 
+export const RuntimeContext = createContext<IRuntimeContext | undefined>(undefined);
+
 interface StoreProviderProps {
     children: React.ReactNode;
     WindowsBtnContext?: WindowsBtnContextInterface;
+    runtime?: IRuntimeContext;
 }
 
-export const StoreProvider: FC<StoreProviderProps> = ({ children, WindowsBtnContext }) => (
+export const StoreProvider: FC<StoreProviderProps> = ({ children, WindowsBtnContext, runtime }) => (
     <GlobalStoreContext.Provider value={globalStore}>
         <PreferencesStoreContext.Provider value={preferencesStore}>
             <RoomStoreContext.Provider value={roomStore}>
                 <PageStoreContext.Provider value={pageStore}>
                     <WindowsSystemBtnContext.Provider value={WindowsBtnContext}>
-                        {children}
+                        <RuntimeContext.Provider value={runtime}>
+                            {children}
+                        </RuntimeContext.Provider>
                     </WindowsSystemBtnContext.Provider>
                 </PageStoreContext.Provider>
             </RoomStoreContext.Provider>
diff --git a/packages/flat-pages/src/components/Whiteboard.less b/packages/flat-pages/src/components/Whiteboard.less
@@ -107,6 +107,15 @@
     opacity: 0;
 }
 
+.telebox-manager-container {
+    --tele-managerStageShadow: none;
+}
+
+.fastboard-root {
+    --fastboard-bg-color: #fff;
+    --fastboard-border-color: var(--grey-1);
+}
+
 .flat-color-scheme-dark {
     .whiteboard-container {
         background: #15181d;
@@ -120,4 +129,14 @@
     .whiteboard-scroll-page {
         background: #15181d;
     }
+
+    .fastboard-root {
+        --fastboard-bg-color: var(--grey-9);
+        --fastboard-border-color: var(--grey-8);
+    }
+}
+
+.telebox-color-scheme-dark.telebox-manager-container {
+    --tele-managerStageShadow: none;
+    --tele-managerContainerBackground: #222429;
 }
diff --git a/packages/flat-pages/src/utils/runtime.ts b/packages/flat-pages/src/utils/runtime.ts
diff --git a/packages/flat-stores/package.json b/packages/flat-stores/package.json
@@ -14,7 +14,7 @@
     "white-web-sdk": ">=2.16"
   },
   "devDependencies": {
-    "@netless/fastboard": "1.0.0-canary.7",
+    "@netless/fastboard": "1.0.0-canary.8",
     "@netless/window-manager": "1.0.0-canary.69",
     "mobx": "^6.6.1",
     "prettier": "^2.7.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/service-providers/agora-rtc/agora-rtc-web/src/rtc-share-screen.ts b/service-providers/agora-rtc/agora-rtc-web/src/rtc-share-screen.ts
@@ -113,6 +113,7 @@ export class AgoraRTCWebShareScreen extends IServiceShareScreen {
 
     public override async destroy(): Promise<void> {
         this._sideEffect.flushAll();
+        await this.disableShareScreen();
     }
 
     private _pTogglingShareScreen?: Promise<unknown>;
diff --git a/service-providers/fastboard/package.json b/service-providers/fastboard/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@lukeed/uuid": "^2.0.0",
-    "@netless/fastboard": "1.0.0-canary.7",
+    "@netless/fastboard": "1.0.0-canary.8",
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-server-api": "workspace:*",
     "@netless/flat-service-provider-file-convert-netless": "workspace:*",

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {`
`18`		`- color: var(--primary);`
	`18`	`+ color: var(--primary-strong);`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`.ant-tabs-top > .ant-tabs-nav::before {`
`@@ -45,20 +45,11 @@`
`45`	`45`
`46`	`46`	`.flat-color-scheme-dark {`
`47`	`47`	`.chat-panel {`
`48`		`- .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {`
`49`		`- color: var(--grey-0);`
`50`		`- }`
`51`	`48`	`.ant-tabs-ink-bar {`
`52`		`- background: var(--grey-0);`
	`49`	`+ background: var(--primary-strong);`
`53`	`50`	`}`
`54`	`51`	`.ant-tabs-top > .ant-tabs-nav::before {`
`55`	`52`	`border-bottom-color: var(--grey-8);`
`56`	`53`	`}`
`57`		`- .ant-tabs-tab:hover {`
`58`		`- color: var(--grey-4);`
`59`		`- }`
`60`		`- .ant-tabs-tab-btn:focus {`
`61`		`- color: var(--grey-0);`
`62`		`- }`
`63`	`54`	`}`
`64`	`55`	`}`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@`
`19`	`19`	`padding: 0 8px;`
`20`	`20`	`font-size: 16px;`
`21`	`21`	`user-select: none;`
	`22`	`+`
`22`	`23`	`&.isMac {`
`23`	`24`	`border-top: none;`
`24`	`25`	`}`
`@@ -48,6 +49,7 @@`
`48`	`49`	`.flat-color-scheme-dark {`
`49`	`50`	`.topbar-box {`
`50`	`51`	`border-color: var(--grey-8);`
	`52`	`+ background: linear-gradient(270deg, #383B42 0%, #2B2F38 100%);`
`51`	`53`	`}`
`52`	`54`
`53`	`55`	`.topbar-divider,`
Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@`
`58`	`58`	`.big-class-realtime-container,`
`59`	`59`	`.big-class-realtime-box {`
`60`	`60`	`color: var(--text);`
`61`		`- background-color: var(--grey-10);`
	`61`	`+ background-color: var(--grey-9);`
`62`	`62`	`}`
`63`	`63`
`64`	`64`	`.big-class-realtime-box .topbar-box {`