refactor(flat-components): update styles and fix trivial issues (#1831)

* refactor(flat-components): update windows system button background * refactor(flat-components): show left users staging state at beginning * refactor(desktop): remove splash page * refactor(flat-pages): update app upgrade modal colors * refactor(flat-components): update self message color * fix(flat-pages): dragging avatars null error * chore: upgrade @netless/app-slide, fix keyboard shortcut * fix(service-providers): disable scrolling whiteboard when necessary * chore(desktop): update installer icon
netless-io · Feb 8, 2023 · bbe58ab · bbe58ab
1 parent e58da46
commit bbe58ab
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 65 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,5 +12,8 @@
   "i18n-ally.displayLanguage": "zh-CN",
   "eslint.enable": true,
   "eslint.format.enable": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[less]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  }
 }
diff --git a/desktop/main-app/electron-builder/CN.yml b/desktop/main-app/electron-builder/CN.yml
@@ -53,6 +53,7 @@ nsis:
   createStartMenuShortcut: true
   allowToChangeInstallationDirectory: true
   installerIcon: resources/install.ico
+  installerHeaderIcon: resources/header.ico
   shortcutName: Flat
   artifactName: Flat-${version}.${ext}
 

diff --git a/desktop/main-app/electron-builder/US.yml b/desktop/main-app/electron-builder/US.yml
@@ -53,6 +53,7 @@ nsis:
   createStartMenuShortcut: true
   allowToChangeInstallationDirectory: true
   installerIcon: resources/install.ico
+  installerHeaderIcon: resources/header.ico
   shortcutName: Flint
   artifactName: Flint-${version}.${ext}
 

diff --git a/desktop/main-app/resources/header.ico b/desktop/main-app/resources/header.ico
diff --git a/desktop/main-app/resources/install.ico b/desktop/main-app/resources/install.ico
diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json
@@ -22,7 +22,7 @@
     "@netless/app-monaco": "0.2.0-canary.1",
     "@netless/app-quill": "^0.1.1",
     "@netless/app-selector": "^0.0.3",
-    "@netless/app-slide": "0.3.0-canary.17",
+    "@netless/app-slide": "0.3.0-canary.18",
     "@netless/combine-player": "^1.1.6",
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-pages": "workspace:*",

diff --git a/desktop/renderer-app/src/route-config.ts b/desktop/renderer-app/src/route-config.ts
@@ -58,7 +58,7 @@ export type ClassRouteName =
 export const routeConfig = {
     [RouteNameType.SplashPage]: {
         title: "SplashPage",
-        path: "/",
+        path: "/splash",
         component: SplashPage,
     },
     [RouteNameType.LoginPage]: {
@@ -68,7 +68,7 @@ export const routeConfig = {
     },
     [RouteNameType.HomePage]: {
         title: "HomePage",
-        path: "/home/",
+        path: "/",
         component: HomePage,
     },
     [RouteNameType.SmallClassPage]: {

diff --git a/packages/flat-components/src/components/ChatPanel/ChatMessage/style.less b/packages/flat-components/src/components/ChatPanel/ChatMessage/style.less
@@ -24,7 +24,7 @@
     background: #fff;
     font-size: 0;
 
-    & > img {
+    &>img {
         width: 100%;
         height: 100%;
         object-fit: cover;
@@ -63,13 +63,13 @@
     position: relative;
 
     &.is-self {
-        color: var(--primary-weaker);
+        color: var(--blue-0);
         background: var(--primary);
         border-color: transparent;
         border-radius: 4px;
     }
 
-    & > pre {
+    &>pre {
         margin: 0;
         padding: 0;
         overflow: visible;
@@ -119,7 +119,7 @@
     flex: 1;
     text-align: center;
 
-    & > span {
+    &>span {
         display: inline-block;
         padding: 2px 12px;
         font-size: 12px;
@@ -137,7 +137,7 @@
     background: var(--grey-0);
     color: var(--text);
 
-    & > pre {
+    &>pre {
         margin: 0;
         padding: 0;
         overflow: visible;

diff --git a/...s/flat-components/src/components/MainPageLayout/MainPageTopBar/WindowsSystemBtn/index.tsx b/...s/flat-components/src/components/MainPageLayout/MainPageTopBar/WindowsSystemBtn/index.tsx
@@ -15,30 +15,23 @@ export const WindowsSystemBtn: React.FC<WindowsSystemBtnProps> = ({
 }) => {
     return (
         <div className="windows-system-btn">
-            {
-                <>
-                    <a
-                        className="windows-system-btn-item"
-                        onClick={() => onClickWindowsSystemBtn("minimize")}
-                    >
-                        <SVGMinimize />
-                    </a>
-                    {hiddenMaximizeBtn ? null : (
-                        <a
-                            className="windows-system-btn-item"
-                            onClick={() => onClickWindowsSystemBtn("maximize")}
-                        >
-                            <SVGMaximize />
-                        </a>
-                    )}
-                    <a
-                        className="windows-system-btn-item"
-                        onClick={() => onClickWindowsSystemBtn("close")}
-                    >
-                        <SVGClose />
-                    </a>
-                </>
-            }
+            <a
+                className="windows-system-btn-item"
+                onClick={() => onClickWindowsSystemBtn("minimize")}
+            >
+                <SVGMinimize />
+            </a>
+            {hiddenMaximizeBtn ? null : (
+                <a
+                    className="windows-system-btn-item"
+                    onClick={() => onClickWindowsSystemBtn("maximize")}
+                >
+                    <SVGMaximize />
+                </a>
+            )}
+            <a className="windows-system-btn-item" onClick={() => onClickWindowsSystemBtn("close")}>
+                <SVGClose />
+            </a>
         </div>
     );
 };
diff --git a/.../flat-components/src/components/MainPageLayout/MainPageTopBar/WindowsSystemBtn/style.less b/.../flat-components/src/components/MainPageLayout/MainPageTopBar/WindowsSystemBtn/style.less
@@ -18,12 +18,7 @@
 }
 
 .flat-color-scheme-dark {
-    .windows-system-btn {
-        background-color: var(--grey-10);
-    }
-
-  .windows-system-btn-item:hover {
+    .windows-system-btn-item:hover {
         background-color: var(--grey-11);
-  }  
+    }
 }
-
diff --git a/packages/flat-components/src/components/UsersPanel/index.tsx b/packages/flat-components/src/components/UsersPanel/index.tsx
@@ -178,8 +178,8 @@ const Row = /* @__PURE__ */ observer(function Row({
             </td>
             <td>
                 <Switch
-                    checked={user.isSpeak}
-                    disabled={!(isCreator || (isSelf && user.isSpeak))}
+                    checked={user.hasLeft || user.isSpeak}
+                    disabled={!user.hasLeft || !(isCreator || (isSelf && user.isSpeak))}
                     onChange={checked => onStaging?.(user.userUUID, checked)}
                 />
             </td>

diff --git a/packages/flat-pages/package.json b/packages/flat-pages/package.json
@@ -8,7 +8,7 @@
     "@netless/app-geogebra": "^0.0.6",
     "@netless/app-iframe-bridge": "^0.0.2",
     "@netless/app-monaco": "0.2.0-canary.1",
-    "@netless/app-slide": "0.3.0-canary.17",
+    "@netless/app-slide": "0.3.0-canary.18",
     "@netless/combine-player": "^1.1.6",
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-server-api": "workspace:*",

diff --git a/packages/flat-pages/src/SmallClassPage/utils.tsx b/packages/flat-pages/src/SmallClassPage/utils.tsx
@@ -17,8 +17,11 @@ export function useDraggable(): Draggable {
             let stopListenMove = noop;
 
             const stopListenDown = listen(div, "pointerdown", ev => {
+                const classList = (ev.target as HTMLElement | null)?.classList;
+                const isAvatar =
+                    classList?.contains("video-avatar") ||
+                    classList?.contains("video-avatar-absent");
                 // is dragging avatar, not the buttons on it
-                const isAvatar = (ev.target as HTMLElement).className?.includes("video-avatar");
                 if (isAvatar && ev.pointerType === "mouse" && ev.isPrimary && ev.button === 0) {
                     div.setPointerCapture(ev.pointerId);
                     start.current = [ev.clientX, div.scrollLeft];

diff --git a/packages/flat-pages/src/components/AppUpgradeModal/index.less b/packages/flat-pages/src/components/AppUpgradeModal/index.less
@@ -12,27 +12,38 @@
 }
 
 .app-upgrade-modal-title {
-    color: #444e60;
+    color: var(--blue-12);
 }
 
 .app-upgrade-modal-font {
-    color: #7a7b7c;
+    color: var(--text);
 }
+
 .app-upgrade-modal-progress {
     height: 5px;
     border-radius: 3px;
-    background: #dbe1ea;
+    background: var(--grey-1);
 }
 
 .app-upgrade-active-progress {
     position: relative;
     height: 5px;
     top: -5px;
     border-radius: 3px;
-    background: #3381ff;
+    background: var(--primary);
 }
 
 .app-upgrade-modal-btn {
     text-align: right;
     margin-top: 30px;
 }
+
+.flat-color-scheme-dark {
+    .app-upgrade-modal-title {
+        color: var(--grey-0);
+    }
+
+    .app-upgrade-modal-progress {
+        background: var(--grey-8);
+    }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/service-providers/fastboard/src/index.ts b/service-providers/fastboard/src/index.ts
@@ -120,6 +120,7 @@ export class Fastboard extends IServiceWhiteboard {
                     return;
                 }
                 room.disableDeviceInputs = !allowDrawing;
+                room.disableCameraTransform = !allowDrawing;
             }),
             combine([this._app$, isWritable$]).subscribe(([app, isWritable]) => {
                 const room = app?.room;
@@ -374,7 +375,7 @@ export class Fastboard extends IServiceWhiteboard {
                 actions[i] = async () => {
                     try {
                         const scenePath = contextPath + scene.name;
-                        // @ts-ignore TODO: should fixe the typings in white-web-sdk
+                        // @ts-ignore TODO: should fix the typings in white-web-sdk
                         const rect = room.getBoundingRect(scenePath);
                         const canvas = document.createElement("canvas");
                         canvas.width = rect.width * devicePixelRatio;

diff --git a/service-providers/file-preview-netless-slide/package.json b/service-providers/file-preview-netless-slide/package.json
@@ -14,7 +14,7 @@
     "typescript": "^4.8.3"
   },
   "dependencies": {
-    "@netless/app-slide": "0.3.0-canary.17",
+    "@netless/app-slide": "0.3.0-canary.18",
     "@netless/flat-service-provider-file-convert-netless": "workspace:*",
     "@netless/flat-services": "workspace:*"
   }

diff --git a/web/flat-web/package.json b/web/flat-web/package.json
@@ -22,7 +22,7 @@
     "@netless/app-monaco": "0.2.0-canary.1",
     "@netless/app-quill": "^0.1.1",
     "@netless/app-selector": "^0.0.3",
-    "@netless/app-slide": "0.3.0-canary.17",
+    "@netless/app-slide": "0.3.0-canary.18",
     "@netless/combine-player": "^1.1.6",
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-pages": "workspace:*",