teacher-tool: initial support for universal app theming

microsoft · Jan 29, 2024 · 2a822f7 · 2a822f7
1 parent 732a406
commit 2a822f7
Show file tree

Hide file tree

Showing 20 changed files with 566 additions and 573 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -9,7 +9,8 @@
 			"stopOnEntry": false,
 			"args": [
 				"serve",
-				"--rebundle"
+				"--rebundle",
+				"--noauth"
 			],
 			"cwd": "${workspaceRoot}/../pxt-microbit",
 			"runtimeExecutable": null,
@@ -31,7 +32,8 @@
 			"stopOnEntry": false,
 			"args": [
 				"serve",
-				"--rebundle"
+				"--rebundle",
+				"--noauth"
 			],
 			"cwd": "${workspaceRoot}/../pxt-arcade",
 			"runtimeExecutable": null,

diff --git a/pxtlib/browserutils.ts b/pxtlib/browserutils.ts
@@ -1424,4 +1424,24 @@ namespace pxt.BrowserUtils {
             return false;
         }
     }
+
+    /**
+     * Sets the theme of the application by adding a class to the body. Themes
+     * are defined in CSS variable packs. The default theme is defined in
+     * `themes/themepacks.less`, in the `:root` pseudoclass. `highcontrast` is
+     * also defined there. Target-specific themes are defined in the target
+     * repo's `theme/themepack.less`.
+     */
+    export function setApplicationTheme(theme: string | undefined) {
+        const body = document.body;
+        const classes = body.classList;
+        for (let i = 0; i < classes.length; i++) {
+            if (/^theme-/.test(classes[i])) {
+                body.classList.remove(classes[i]);
+            }
+        }
+        if (theme) {
+            body.classList.add(`theme-${theme}`);
+        }
+    }
 }
diff --git a/teachertool/package-lock.json b/teachertool/package-lock.json
diff --git a/teachertool/package.json b/teachertool/package.json
@@ -7,6 +7,7 @@
     "idb": "^7.1.1",
     "nanoid": "^4.0.2",
     "react-scripts": "5.0.1",
+    "sass": "^1.70.0",
     "tslib": "^2.6.2",
     "typescript": "^4.6.4"
   },

diff --git a/teachertool/src/App.tsx b/teachertool/src/App.tsx
@@ -1,6 +1,4 @@
 import { useEffect, useContext, useState } from "react";
-// eslint-disable-next-line import/no-unassigned-import
-import "./teacherTool.css";
 import { AppStateContext, AppStateReady } from "./state/appStateContext";
 import { usePromise } from "./hooks";
 import { makeNotification } from "./utils";

diff --git a/teachertool/src/components/ActiveRubricDisplay.tsx b/teachertool/src/components/ActiveRubricDisplay.tsx
@@ -34,7 +34,7 @@ export const ActiveRubricDisplay: React.FC<IProps> = ({}) => {
                 );
             })}
             <Button
-                className="add-criteria secondary"
+                className="btn-inline"
                 label={lf("+ Add Criteria")}
                 onClick={showCatalogModal}
                 title={lf("Add Criteria")}

diff --git a/teachertool/src/components/CatalogModal.tsx b/teachertool/src/components/CatalogModal.tsx
@@ -43,12 +43,12 @@ export const CatalogModal: React.FC<IProps> = ({}) => {
     const modalActions = [
         {
             label: lf("Cancel"),
-            className: "secondary",
+            className: "btn-secondary",
             onClick: closeModal,
         },
         {
             label: lf("Add Selected"),
-            className: "primary",
+            className: "btn-primary",
             onClick: handleAddSelectedClicked,
         },
     ];

diff --git a/teachertool/src/components/DebugInput.tsx b/teachertool/src/components/DebugInput.tsx
@@ -32,11 +32,11 @@ export const DebugInput: React.FC<IProps> = ({}) => {
             </div>
             <div className="rubric-json-input-container">
                 {lf("Rubric:")}
-                <Textarea id="rubricJsonInput" className="json-input" rows={20} onChange={setRubric} />
+                <Textarea id="rubricJsonInput" className="json-input" onChange={setRubric} resize="horizontal" />
             </div>
             <Button
                 id="evaluateSingleProjectButton"
-                className="ui button primary"
+                className="btn-primary"
                 onClick={evaluate}
                 title={"Evaluate"}
                 label={lf("Evaluate")}

diff --git a/teachertool/src/components/HeaderBar.tsx b/teachertool/src/components/HeaderBar.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
-
+// eslint-disable-next-line import/no-internal-modules
+import css from "./styling/HeaderBar.module.scss";
 import { Button } from "react-common/components/controls/Button";
 import { MenuBar } from "react-common/components/controls/MenuBar";
 
@@ -12,10 +13,10 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
 
     const getOrganizationLogo = () => {
         return (
-            <div className="ui item logo organization">
+            <div className={css["org"]}>
                 {appTheme.organizationWideLogo || appTheme.organizationLogo ? (
                     <img
-                        className={`ui logo`}
+                        className={css["logo"]}
                         src={appTheme.organizationWideLogo || appTheme.organizationLogo}
                         alt={lf("{0} Logo", appTheme.organization)}
                     />
@@ -29,28 +30,28 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
     const getTargetLogo = () => {
         return (
             <div
+                className={css["brand"]}
                 aria-label={lf("{0} Logo", appTheme.boardName)}
                 role="menuitem"
-                className={`ui item logo brand mobile hide`}
                 onClick={brandIconClick}
             >
                 {appTheme.useTextLogo ? (
                     [
-                        <span className="name" key="org-name">
+                        <span className={css["name"]} key="org-name">
                             {appTheme.organizationText}
                         </span>,
-                        <span className="name-short" key="org-name-short">
+                        <span className={css["name-short"]} key="org-name-short">
                             {appTheme.organizationShortText || appTheme.organizationText}
                         </span>,
                     ]
                 ) : appTheme.logo || appTheme.portraitLogo ? (
                     <img
-                        className={`ui ${appTheme.logoWide ? "small" : ""} logo`}
+                        className={css["logo"]}
                         src={appTheme.logo || appTheme.portraitLogo}
                         alt={lf("{0} Logo", appTheme.boardName)}
                     />
                 ) : (
-                    <span className="name">{appTheme.boardName}</span>
+                    <span className={css["name"]}>{appTheme.boardName}</span>
                 )}
             </div>
         );
@@ -72,24 +73,20 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
     };
 
     return (
-        <header className="menubar" role="banner">
-            <MenuBar className={`ui menu ${appTheme?.invertedMenu ? `inverted` : ""} header`} ariaLabel={lf("Header")}>
-                <div className="left menu">
-                    {getOrganizationLogo()}
-                    {getTargetLogo()}
-                </div>
-
-                <div className="spacer" />
+        <MenuBar className={css["header"]} ariaLabel={lf("Header")}>
+            <div className={css["left-menu"]}>
+                {getOrganizationLogo()}
+                {getTargetLogo()}
+            </div>
 
-                <div className="header-right">
-                    <Button
-                        className="menu-button"
-                        leftIcon="fas fa-home large"
-                        title={lf("Return to the editor homepage")}
-                        onClick={onHomeClicked}
-                    />
-                </div>
-            </MenuBar>
-        </header>
+            <div className={css["right-menu"]}>
+                <Button
+                    className="menu-button"
+                    leftIcon="fas fa-home large"
+                    title={lf("Return to the editor homepage")}
+                    onClick={onHomeClicked}
+                />
+            </div>
+        </MenuBar>
     );
 };
diff --git a/teachertool/src/components/MainPanel.tsx b/teachertool/src/components/MainPanel.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 // eslint-disable-next-line import/no-internal-modules
-import css from "./styling/MainPanel.module.css";
+import css from "./styling/MainPanel.module.scss";
 
 import { DebugInput } from "./DebugInput";
 import { MakeCodeFrame } from "./MakecodeFrame";

diff --git a/teachertool/src/components/SplitPane.tsx b/teachertool/src/components/SplitPane.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 // eslint-disable-next-line import/no-internal-modules
-import css from "./styling/SplitPane.module.css";
+import css from "./styling/SplitPane.module.scss";
 import { classList } from "react-common/components/util";
 
 interface IProps {

diff --git a/teachertool/src/components/styling/HeaderBar.module.scss b/teachertool/src/components/styling/HeaderBar.module.scss
@@ -0,0 +1,46 @@
+/*******************************/
+/***** HEADER BAR  *****/
+/*******************************/
+
+.header {
+    background-color: var(--pxt-c0-background);
+    color: var(--pxt-c0-foreground);
+    display: flex;
+    flex-direction: row;
+    height: 4rem;
+    align-items: center;
+    justify-content: space-between;
+    flex-grow: 0;
+    flex-shrink: 0;
+    z-index: var(--above-frame-zindex);
+
+    .left-menu,
+    .right-menu {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+
+    .org {
+        display: flex;
+        align-items: center;
+        .logo {
+            height: 1.4rem;
+            margin: 0 1rem;
+        }
+    }
+
+    .brand {
+        display: flex;
+        align-items: center;
+        &:before {
+            height: 1.5rem;
+            border-left: 2px solid var(--pxt-c0-foreground);
+            content: " ";
+        }
+        .logo {
+            height: 1.1rem;
+            margin: 0 1rem;
+        }
+    }
+}
diff --git a/teachertool/src/components/styling/MainPanel.module.css b/teachertool/src/components/styling/MainPanel.module.css
diff --git a/teachertool/src/components/styling/MainPanel.module.scss b/teachertool/src/components/styling/MainPanel.module.scss
@@ -0,0 +1,10 @@
+
+
+.main-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: var(--pxt-c1-background);
+    color: var(--pxt-c1-foreground);
+}
diff --git a/...c/components/styling/SplitPane.module.css → .../components/styling/SplitPane.module.scss b/...c/components/styling/SplitPane.module.css → .../components/styling/SplitPane.module.scss
@@ -1,5 +1,5 @@
 
-/* Vertical split pane */
+// TODO make this scssy
 
 .split-pane-vertical {
   display: flex;
@@ -19,22 +19,22 @@
 }
 
 .splitter-vertical {
-  background-color: #ccc;
-  width: 1px;
+  background-color: var(--pxt-c1-border);
+  width: 0.5px;
 }
 
 .splitter-vertical-inner {
   position: relative;
   background-color: transparent;
   transition: background-color 0.2s ease;
-  left: -3px;
-  width: 6px;
+  left: -2.5px;
+  width: 5px;
   height: 100%;
   cursor: ew-resize;
 }
 
 .splitter-vertical-inner:hover {
-  background-color: #000000aa;
+  background-color: var(--pxt-c1-foreground);
   transition: background-color 0.2s ease;
   transition-delay: 0.2s;
 }
@@ -60,7 +60,7 @@
 
 .splitter-horizontal {
   flex: 0 0 1px;
-  background-color: #ccc;
+  background-color: var(--pxt-c0-background);
   height: 5px;
   cursor: ns-resize;
 }