teacher tool: add gear menu to host privacy links (#10242)

microsoft · Oct 23, 2024 · 6e95667 · 6e95667
1 parent a69d8b9
commit 6e95667
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 41 deletions.
diff --git a/teachertool/src/components/HeaderBar.tsx b/teachertool/src/components/HeaderBar.tsx
@@ -14,7 +14,7 @@ const betaTag = () => {
     return <div className={css["beta-tag"]}>{lf("Beta")}</div>;
 };
 
-interface HeaderBarProps {}
+interface HeaderBarProps { }
 
 export const HeaderBar: React.FC<HeaderBarProps> = () => {
     const { state: teacherTool } = useContext(AppStateContext);
@@ -151,45 +151,61 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
             <></>
         );
         return (
-            <>
-                <div>
+            <div className={css["user-menu"]}>
+                {teacherTool.userProfile ? (
+                    <MenuDropdown
+                        id="profile-dropdown"
+                        items={items}
+                        label={avatarElem || initialsElem}
+                        title={lf("Profile Settings")}
+                    />
+                ) : (
                     <Button
-                        className={css["feedback-btn"]}
-                        labelClassName="min-sm"
-                        leftIcon="xicon feedback"
-                        title={Strings.GiveFeedback}
-                        label={Strings.GiveFeedback}
+                        className={classList("inverted", css["sign-in-button"])}
+                        rightIcon="xicon cloud-user"
+                        title={lf("Sign In")}
+                        label={lf("Sign In")}
                         onClick={() => {
-                            pxt.tickEvent(Ticks.FeedbackForm);
+                            pxt.tickEvent(Ticks.UserMenuSignIn);
+                            showModal({ modal: "sign-in" });
                         }}
-                        href="https://aka.ms/teachertool-feedback"
                     />
-                </div>
-                <div className={css["user-menu"]}>
-                    {teacherTool.userProfile ? (
-                        <MenuDropdown
-                            id="profile-dropdown"
-                            items={items}
-                            label={avatarElem || initialsElem}
-                            title={lf("Profile Settings")}
-                        />
-                    ) : (
-                        <Button
-                            className={classList("inverted", css["sign-in-button"])}
-                            rightIcon="xicon cloud-user"
-                            title={lf("Sign In")}
-                            label={lf("Sign In")}
-                            onClick={() => {
-                                pxt.tickEvent(Ticks.UserMenuSignIn);
-                                showModal({ modal: "sign-in" });
-                            }}
-                        />
-                    )}
-                </div>
-            </>
+                )}
+            </div>
         );
     }
 
+    const privacyUrl = pxt?.appTarget?.appTheme?.privacyUrl;
+    const termsOfUseUrl = pxt?.appTarget?.appTheme?.termsOfUseUrl;
+
+    const getSettingItems = () => {
+        const items: MenuItem[] = [];
+
+        if (privacyUrl) {
+            items.push({
+                id: "privacy",
+                title: Strings.Privacy,
+                label: Strings.Privacy,
+                onClick: () => pxt.tickEvent(Ticks.PrivacyStatementClicked),
+                href: privacyUrl,
+            });
+        }
+
+        if (termsOfUseUrl) {
+            items.push({
+                id: "termsOfUse",
+                title: Strings.TermsOfUse,
+                label: Strings.TermsOfUse,
+                onClick: () => pxt.tickEvent(Ticks.TermsOfUseClicked),
+                href: termsOfUseUrl,
+            });
+        }
+
+        return items;
+    };
+
+    const settingItems = getSettingItems();
+
     return (
         <MenuBar className={css["header"]} ariaLabel={lf("Header")} role="navigation">
             <div className={css["left-menu"]}>
@@ -208,7 +224,27 @@ export const HeaderBar: React.FC<HeaderBarProps> = () => {
                 </div>
             </div>
 
-            <div className={css["right-menu"]}>{getUserMenu()}</div>
+            <div className={css["right-menu"]}>
+            <div>
+                    <Button
+                        className={css["feedback-btn"]}
+                        labelClassName="min-sm"
+                        leftIcon="xicon feedback"
+                        title={Strings.GiveFeedback}
+                        label={Strings.GiveFeedback}
+                        onClick={() => {
+                            pxt.tickEvent(Ticks.FeedbackForm);
+                        }}
+                        href="https://aka.ms/teachertool-feedback"
+                    />
+                </div>
+                <MenuDropdown
+                    id="settings-dropdown"
+                    items={settingItems}
+                    icon="fas fa-cog large"
+                    title={lf("Settings")} />
+                {getUserMenu()}
+            </div>
         </MenuBar>
     );
 };
diff --git a/teachertool/src/components/styling/HeaderBar.module.scss b/teachertool/src/components/styling/HeaderBar.module.scss
@@ -74,13 +74,6 @@
             color: var(--pxt-page-foreground);
         }
 
-        div[class*="common-menu-dropdown-pane"] {
-            border-radius: 0 0 0.25rem 0.25rem;
-            box-shadow: 0 1px 3px 0 var(--pxt-page-foreground-shadow);
-            background: var(--pxt-page-background);
-            padding: 0.15rem;
-        }
-
         .avatar {
             display: flex;
             align-items: center;
@@ -95,6 +88,28 @@
             }
         }
     }
+
+    div[class~="common-menu-dropdown"] {
+        &:hover {
+            background-color: var(--pxt-headerbar-background-smoke);
+        }
+
+        button[class~="menu-button"] {
+            background-color: var(--pxt-headerbar-background);
+        }
+
+        div[class~="common-menu-dropdown-pane"] {
+            border-radius: 0 0 0.25rem 0.25rem;
+            box-shadow: 0 4px 4px 0 var(--pxt-page-foreground-shadow);
+            background: var(--pxt-page-background);
+            padding: 0.15rem;
+            width: unset !important;
+
+            button[class~="common-menu-dropdown-item"]:hover {
+                background-color: var(--pxt-page-foreground-shadow);
+            }
+        }
+    }
 }
 
 .beta-tag {

diff --git a/teachertool/src/constants.ts b/teachertool/src/constants.ts
@@ -59,6 +59,8 @@ export namespace Strings {
     export const ExceedsMax = lf("Exceeds maximum value");
     export const InvalidValue = lf("Invalid value");
     export const InvalidShareLink = lf("Invalid share link");
+    export const Privacy = lf("Privacy");
+    export const TermsOfUse = lf("Terms of Use");
 }
 
 export namespace Ticks {
@@ -95,6 +97,8 @@ export namespace Ticks {
     export const LoadProjectInvalid = "teachertool.loadproject.invalid";
     export const BlockPickerBlockSelected = "teachertool.blockpicker.blockselected";
     export const BlockPickerOpened = "teachertool.blockpicker.opened";
+    export const PrivacyStatementClicked = "teachertool.privacystatement.clicked";
+    export const TermsOfUseClicked = "teachertool.termsofuse.clicked";
 }
 
 namespace Misc {