From 2109d8358d4488b337ba164897bf7eb7d518f0f5 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 3 Nov 2023 18:16:17 +0100 Subject: [PATCH 1/8] fix(plus): add hash to Plus url --- client/src/plus/utils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/plus/utils.ts b/client/src/plus/utils.ts index 52ed78429820..3682e07f418d 100644 --- a/client/src/plus/utils.ts +++ b/client/src/plus/utils.ts @@ -16,7 +16,7 @@ export function usePlusUrl(): string { let target = `/${locale}/plus`; if (normalizedUrl(target) === normalizedUrl(pathname)) { - target = "#subscribe"; + target += "#subscribe"; } return target; From bd885e4808456d86e6d4cc36a766fe8f8f24ef30 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 3 Nov 2023 18:16:40 +0100 Subject: [PATCH 2/8] feat(menu): highlight current item --- client/src/ui/molecules/main-menu/index.tsx | 7 ++++++- client/src/ui/molecules/menu/index.scss | 7 +++++++ client/src/ui/molecules/menu/index.tsx | 8 +++++++- client/src/ui/molecules/submenu/index.scss | 4 ++++ client/src/ui/molecules/submenu/index.tsx | 7 +++++++ 5 files changed, 31 insertions(+), 2 deletions(-) diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx index 6af28855a65e..490409e8110f 100644 --- a/client/src/ui/molecules/main-menu/index.tsx +++ b/client/src/ui/molecules/main-menu/index.tsx @@ -9,6 +9,7 @@ import { PLUS_IS_ENABLED } from "../../../env"; import { useLocale } from "../../../hooks"; import { useGleanClick } from "../../../telemetry/glean-context"; import { MENU } from "../../../telemetry/constants"; +import { useLocation } from "react-router"; export default function MainMenu({ isOpenOnMobile }) { const locale = useLocale(); @@ -98,9 +99,13 @@ function TopLevelMenuLink({ to: string; children: React.ReactNode; }) { + const { pathname } = useLocation(); const gleanClick = useGleanClick(); + + const isActive = pathname.startsWith(to.split("#", 2)[0]); + return ( -
  • +
  • a { + &:link, + &:visited { + color: var(--text-inactive); + } + } + .top-level-entry-dot ~ .top-level-entry::after { background: var(--text-primary-blue); border: 1px solid var(--background-primary); diff --git a/client/src/ui/molecules/menu/index.tsx b/client/src/ui/molecules/menu/index.tsx index 86a39ea5447a..f97004f76665 100644 --- a/client/src/ui/molecules/menu/index.tsx +++ b/client/src/ui/molecules/menu/index.tsx @@ -1,3 +1,4 @@ +import { useLocation } from "react-router"; import { MENU } from "../../../telemetry/constants"; import { useGleanClick } from "../../../telemetry/glean-context"; import { MenuEntry, Submenu } from "../submenu"; @@ -10,15 +11,20 @@ interface MenuProps { } export const Menu = ({ menu, isOpen, toggle }: MenuProps) => { + const { pathname } = useLocation(); const gleanClick = useGleanClick(); const buttonId = `${menu.id}-button`; const submenuId = `${menu.id}-menu`; + const isActive = menu.to && pathname.startsWith(menu.to.split("#", 2)[0]); const hasAnyDot = menu.items.some((item) => item.dot); return ( -
  • +
  • {hasAnyDot && ( )} diff --git a/client/src/ui/molecules/submenu/index.scss b/client/src/ui/molecules/submenu/index.scss index b50aced84868..82f0025b0721 100644 --- a/client/src/ui/molecules/submenu/index.scss +++ b/client/src/ui/molecules/submenu/index.scss @@ -20,6 +20,10 @@ .submenu-item { border-radius: var(--elem-radius); padding: 0.75rem; + + &.active { + color: var(--text-inactive); + } } /* diff --git a/client/src/ui/molecules/submenu/index.tsx b/client/src/ui/molecules/submenu/index.tsx index 9f2313a1f71a..ba4232681439 100644 --- a/client/src/ui/molecules/submenu/index.tsx +++ b/client/src/ui/molecules/submenu/index.tsx @@ -1,3 +1,4 @@ +import { useLocation } from "react-router"; import { MENU } from "../../../telemetry/constants"; import { useGleanClick } from "../../../telemetry/glean-context"; import "./index.scss"; @@ -34,7 +35,9 @@ export const Submenu = ({ submenuId?: string; extraClasses?: string; }) => { + const { pathname } = useLocation(); const gleanClick = useGleanClick(); + return (
      gleanClick( From 68cfb36b8c3febeebbe7b56d469cac0b5e98bcff Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 3 Nov 2023 18:23:13 +0100 Subject: [PATCH 3/8] chore(ui): introduce --text-active + use for active menu items --- client/src/ui/_vars.scss | 2 ++ client/src/ui/base/_themes.scss | 2 ++ client/src/ui/molecules/menu/index.scss | 2 +- client/src/ui/molecules/submenu/index.scss | 2 +- 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/client/src/ui/_vars.scss b/client/src/ui/_vars.scss index b65341b91088..bc2f8155f607 100644 --- a/client/src/ui/_vars.scss +++ b/client/src/ui/_vars.scss @@ -154,6 +154,7 @@ $mdn-color-ads: #00d0aa; $mdn-theme-light-text-primary: $mdn-color-neutral-90; $mdn-theme-light-text-secondary: $mdn-color-neutral-70; +$mdn-theme-light-text-active: #{$mdn-color-neutral-50}; $mdn-theme-light-text-inactive: #{$mdn-color-neutral-40}a6; $mdn-theme-light-text-link: $mdn-color-light-theme-blue-60; $mdn-theme-light-text-invert: $mdn-color-white; @@ -200,6 +201,7 @@ $mdn-theme-light-code-background-block: $mdn-color-neutral-light-80; $mdn-theme-dark-text-primary: $mdn-color-white; $mdn-theme-dark-text-secondary: $mdn-color-neutral-20; +$mdn-theme-dark-text-active: #{$mdn-color-neutral-50}; $mdn-theme-dark-text-inactive: #{$mdn-color-neutral-20}a6; $mdn-theme-dark-text-link: $mdn-color-dark-theme-blue-30; $mdn-theme-dark-text-invert: $mdn-color-neutral-90; diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss index 1f9bfb7db77c..223831842e37 100644 --- a/client/src/ui/base/_themes.scss +++ b/client/src/ui/base/_themes.scss @@ -5,6 +5,7 @@ @mixin light-theme { --text-primary: #{$mdn-theme-light-text-primary}; --text-secondary: #{$mdn-theme-light-text-secondary}; + --text-active: #{$mdn-theme-light-text-active}; --text-inactive: #{$mdn-theme-light-text-inactive}; --text-link: #{$mdn-theme-light-text-link}; --text-visited: #551a8b; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1787-1790 @@ -204,6 +205,7 @@ @mixin dark-theme { --text-primary: #{$mdn-theme-dark-text-primary}; --text-secondary: #{$mdn-theme-dark-text-secondary}; + --text-active: #{$mdn-theme-dark-text-active}; --text-inactive: #{$mdn-theme-dark-text-inactive}; --text-link: #{$mdn-theme-dark-text-link}; --text-visited: #ffadff; // Source: https://searchfox.org/mozilla-central/rev/02841791400cf7cf5760c0cfaf31f5d772624253/modules/libpref/init/StaticPrefList.yaml#1794-1797 diff --git a/client/src/ui/molecules/menu/index.scss b/client/src/ui/molecules/menu/index.scss index 41a7a1544879..113f4036e943 100644 --- a/client/src/ui/molecules/menu/index.scss +++ b/client/src/ui/molecules/menu/index.scss @@ -2,7 +2,7 @@ &.active > a { &:link, &:visited { - color: var(--text-inactive); + color: var(--text-active); } } diff --git a/client/src/ui/molecules/submenu/index.scss b/client/src/ui/molecules/submenu/index.scss index 82f0025b0721..e5537c37fb81 100644 --- a/client/src/ui/molecules/submenu/index.scss +++ b/client/src/ui/molecules/submenu/index.scss @@ -22,7 +22,7 @@ padding: 0.75rem; &.active { - color: var(--text-inactive); + color: var(--text-active); } } From 7ce3528d3808732e61b69dc29898c702698f8a34 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Tue, 7 Nov 2023 15:49:08 +0100 Subject: [PATCH 4/8] chore(submenu): revert highlighting active item --- client/src/ui/molecules/submenu/index.scss | 4 ---- client/src/ui/molecules/submenu/index.tsx | 7 ------- 2 files changed, 11 deletions(-) diff --git a/client/src/ui/molecules/submenu/index.scss b/client/src/ui/molecules/submenu/index.scss index e5537c37fb81..b50aced84868 100644 --- a/client/src/ui/molecules/submenu/index.scss +++ b/client/src/ui/molecules/submenu/index.scss @@ -20,10 +20,6 @@ .submenu-item { border-radius: var(--elem-radius); padding: 0.75rem; - - &.active { - color: var(--text-active); - } } /* diff --git a/client/src/ui/molecules/submenu/index.tsx b/client/src/ui/molecules/submenu/index.tsx index ba4232681439..9f2313a1f71a 100644 --- a/client/src/ui/molecules/submenu/index.tsx +++ b/client/src/ui/molecules/submenu/index.tsx @@ -1,4 +1,3 @@ -import { useLocation } from "react-router"; import { MENU } from "../../../telemetry/constants"; import { useGleanClick } from "../../../telemetry/glean-context"; import "./index.scss"; @@ -35,9 +34,7 @@ export const Submenu = ({ submenuId?: string; extraClasses?: string; }) => { - const { pathname } = useLocation(); const gleanClick = useGleanClick(); - return (
        gleanClick( From 0a1e5568c979096e614ef45b6aff524046af50b8 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Tue, 7 Nov 2023 15:59:31 +0100 Subject: [PATCH 5/8] feat(menu): add isActive prop to override state --- client/src/ui/molecules/menu/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/client/src/ui/molecules/menu/index.tsx b/client/src/ui/molecules/menu/index.tsx index f97004f76665..f89f90ec1440 100644 --- a/client/src/ui/molecules/menu/index.tsx +++ b/client/src/ui/molecules/menu/index.tsx @@ -6,18 +6,27 @@ import "./index.scss"; interface MenuProps { menu: MenuEntry; + isActive?: boolean; isOpen: boolean; toggle: (id: string) => void; } -export const Menu = ({ menu, isOpen, toggle }: MenuProps) => { +export const Menu = ({ + menu, + isActive = undefined, + isOpen, + toggle, +}: MenuProps) => { const { pathname } = useLocation(); const gleanClick = useGleanClick(); const buttonId = `${menu.id}-button`; const submenuId = `${menu.id}-menu`; - const isActive = menu.to && pathname.startsWith(menu.to.split("#", 2)[0]); + isActive = + isActive ?? + (typeof menu.to === "string" && + pathname.startsWith(menu.to.split("#", 2)[0])); const hasAnyDot = menu.items.some((item) => item.dot); return ( From 96ddc217eb0dc189a13945f2699f30af6c9d6566 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Tue, 7 Nov 2023 16:00:03 +0100 Subject: [PATCH 6/8] fix(plus-menu): exclude AI Help from isActive state --- client/src/ui/molecules/plus-menu/index.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/client/src/ui/molecules/plus-menu/index.tsx b/client/src/ui/molecules/plus-menu/index.tsx index 9c3d4be8909a..9455dc5011cb 100644 --- a/client/src/ui/molecules/plus-menu/index.tsx +++ b/client/src/ui/molecules/plus-menu/index.tsx @@ -5,6 +5,7 @@ import { useIsServer, useLocale, useViewedState } from "../../../hooks"; import { useUserData } from "../../../user-context"; import { MenuEntry } from "../submenu"; import { FeatureId } from "../../../constants"; +import { useLocation } from "react-router"; export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => { const plusUrl = usePlusUrl(); @@ -15,6 +16,13 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => { const { isViewed } = useViewedState(); + // Avoid that "Plus" and "AI Help" are both active. + const { pathname } = useLocation(); + const aiHelpUrl = `/${locale}/plus/ai-help`; + const isActive = + pathname.startsWith(plusUrl.split("#", 2)[0]) && + !pathname.startsWith(aiHelpUrl); + const plusMenu: MenuEntry = { label: "Plus", id: "mdn-plus", @@ -32,7 +40,7 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => { hasIcon: true, iconClasses: "submenu-icon", label: "AI Help (beta)", - url: `/${locale}/plus/ai-help`, + url: aiHelpUrl, }, ...(!isServer && isAuthenticated ? [ @@ -75,5 +83,12 @@ export const PlusMenu = ({ visibleSubMenuId, toggleMenu }) => { }; const isOpen = visibleSubMenuId === plusMenu.id; - return ; + return ( + + ); }; From c530ef69f96d553b714ad0229e1b2a6fa1630014 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Tue, 7 Nov 2023 16:00:17 +0100 Subject: [PATCH 7/8] fix(main-menu): remove trailing slash from AI Help --- client/src/ui/molecules/main-menu/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx index 490409e8110f..7a8b10e52e32 100644 --- a/client/src/ui/molecules/main-menu/index.tsx +++ b/client/src/ui/molecules/main-menu/index.tsx @@ -84,7 +84,7 @@ export default function MainMenu({ isOpenOnMobile }) { )} Blog Play - + AI Help Beta
      From 12bd3c0397f652c12d51239b361fe7e2de7c2375 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Fri, 17 Nov 2023 16:58:19 +0100 Subject: [PATCH 8/8] fix(menu): use category color on hover/active --- client/src/ui/molecules/menu/index.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/src/ui/molecules/menu/index.scss b/client/src/ui/molecules/menu/index.scss index 113f4036e943..0378012f37cd 100644 --- a/client/src/ui/molecules/menu/index.scss +++ b/client/src/ui/molecules/menu/index.scss @@ -4,6 +4,11 @@ &:visited { color: var(--text-active); } + + &:hover, + &:active { + color: var(--category-color); + } } .top-level-entry-dot ~ .top-level-entry::after {