From c39923fc814ad1e9f8dffe737772174538fa142b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Chris=20Ch=C3=A1vez?= Date: Fri, 13 Feb 2026 15:09:28 -0500 Subject: [PATCH] fix: Nits on UX/UI in the new sidebars in course outline and unit page [FC-0114] (#2871) - Fixes the open nits/issues listed in https://github.com/openedx/frontend-app-authoring/issues/2868 - Fixes the small nit in the back button in the import workflow: https://github.com/openedx/frontend-app-authoring/issues/2524#issuecomment-3849649651 - Fixes the small nit in the unsupported text in the import workflow: https://github.com/openedx/frontend-app-authoring/issues/2525#issuecomment-3862737018. This fix depends on https://github.com/openedx/openedx-platform/pull/38005 --- .../outline-sidebar/AddSidebar.tsx | 2 +- .../info-sidebar/SectionInfoSidebar.tsx | 2 +- .../info-sidebar/SubsectionInfoSidebar.tsx | 2 +- .../info-sidebar/UnitInfoSidebar.tsx | 2 +- src/course-unit/unit-sidebar/AddSidebar.tsx | 2 +- .../unit-info/UnitInfoSidebar.tsx | 2 +- src/generic/sidebar/Sidebar.tsx | 19 ++++++------- src/generic/sidebar/SidebarTitle.tsx | 27 ++++++++++--------- src/generic/sidebar/icons/CollapsedIcon.tsx | 14 ++++++++++ src/generic/sidebar/icons/ExpandedIcon.tsx | 14 ++++++++++ src/generic/sidebar/index.scss | 19 +++++++++++++ src/library-authoring/LibraryContent.test.tsx | 4 +-- src/library-authoring/data/api.mocks.ts | 2 +- .../import-course/ImportDetailsPage.test.tsx | 2 +- .../stepper/ImportStepperPage.tsx | 2 +- 15 files changed, 83 insertions(+), 32 deletions(-) create mode 100644 src/generic/sidebar/icons/CollapsedIcon.tsx create mode 100644 src/generic/sidebar/icons/ExpandedIcon.tsx diff --git a/src/course-outline/outline-sidebar/AddSidebar.tsx b/src/course-outline/outline-sidebar/AddSidebar.tsx index f6a2dcdd3..ac04263b2 100644 --- a/src/course-outline/outline-sidebar/AddSidebar.tsx +++ b/src/course-outline/outline-sidebar/AddSidebar.tsx @@ -327,7 +327,7 @@ const AddTabs = () => { return ( { {sectionData?.hasChanges && } { {subsectionData?.hasChanges && } { { diff --git a/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.tsx b/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.tsx index 00a8d6941..9ce62515d 100644 --- a/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.tsx +++ b/src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.tsx @@ -212,7 +212,7 @@ export const UnitInfoSidebar = () => { /> diff --git a/src/generic/sidebar/Sidebar.tsx b/src/generic/sidebar/Sidebar.tsx index 60584d561..a91e76584 100644 --- a/src/generic/sidebar/Sidebar.tsx +++ b/src/generic/sidebar/Sidebar.tsx @@ -7,14 +7,12 @@ import { IconButtonToggle, Stack, } from '@openedx/paragon'; -import { - FormatIndentDecrease, - FormatIndentIncrease, -} from '@openedx/paragon/icons'; import { ResizableBox } from '@src/generic/resizable/Resizable'; import type { MessageDescriptor } from 'react-intl'; import messages from './messages'; +import { CollapsedIcon } from './icons/CollapsedIcon'; +import { ExpandedIcon } from './icons/ExpandedIcon'; export interface SidebarPage { component: React.ComponentType; @@ -88,10 +86,11 @@ export function Sidebar({ const intl = useIntl(); const SidebarComponent = pages[currentPageKey].component; + const activeKey = isOpen ? currentPageKey : undefined; return ( - {isOpen && !!currentPageKey && ( + {(isOpen && !!currentPageKey) ? (
@@ -121,16 +120,18 @@ export function Sidebar({
+ ) : ( +
)} -
+
{Object.entries(pages).map(([key, page]) => ( @@ -142,7 +143,7 @@ export function Sidebar({ value={key} src={page.icon} alt={intl.formatMessage(page.title)} - className="rounded-iconbutton" + className="rounded-iconbutton my-2" /> ))} diff --git a/src/generic/sidebar/SidebarTitle.tsx b/src/generic/sidebar/SidebarTitle.tsx index a565e31eb..52a3e9e0c 100644 --- a/src/generic/sidebar/SidebarTitle.tsx +++ b/src/generic/sidebar/SidebarTitle.tsx @@ -27,17 +27,20 @@ export const SidebarTitle = ({ }: SidebarTitleProps) => { const intl = useIntl(); return ( - - {onBackBtnClick && ( - - )} - -

{title}

- + <> + + {onBackBtnClick && ( + + )} + +

{title}

+ +
+ ); }; diff --git a/src/generic/sidebar/icons/CollapsedIcon.tsx b/src/generic/sidebar/icons/CollapsedIcon.tsx new file mode 100644 index 000000000..a3e0dd6c8 --- /dev/null +++ b/src/generic/sidebar/icons/CollapsedIcon.tsx @@ -0,0 +1,14 @@ +export const CollapsedIcon = (props) => ( + + + +); diff --git a/src/generic/sidebar/icons/ExpandedIcon.tsx b/src/generic/sidebar/icons/ExpandedIcon.tsx new file mode 100644 index 000000000..2e5eb7802 --- /dev/null +++ b/src/generic/sidebar/icons/ExpandedIcon.tsx @@ -0,0 +1,14 @@ +export const ExpandedIcon = (props) => ( + + + +); diff --git a/src/generic/sidebar/index.scss b/src/generic/sidebar/index.scss index 2611e97ed..8c2710de1 100644 --- a/src/generic/sidebar/index.scss +++ b/src/generic/sidebar/index.scss @@ -6,6 +6,25 @@ min-height: 100vh; height: 100%; max-height: 300vh; + + /* + * Change the styles for tabs in all sidebars. + * + * The tabs occupy the entire width of the sidebar, + * and each tab shares the space equally. + * The clickable area of ​​the tab is the entire + * area it occupies, not just the label. + */ + .pgn__tabs { + .nav-item { + flex: 1 1 0; + text-align: center; + } + + .pgn__tab_more { + display: none; + } + } } .dropdown-toggle { diff --git a/src/library-authoring/LibraryContent.test.tsx b/src/library-authoring/LibraryContent.test.tsx index fab12aa14..f9deb418c 100644 --- a/src/library-authoring/LibraryContent.test.tsx +++ b/src/library-authoring/LibraryContent.test.tsx @@ -120,12 +120,12 @@ describe('', () => { { sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@library_content+block@test_lib_content', targetKey: null, - unsupportedReason: 'The "library_content" XBlock (ID: "test_lib_content") has children, so it not supported in content libraries. It has 2 children blocks.', + unsupportedReason: 'The "library_content" XBlock (ID: "test_lib_content") has children, so it is not supported in content libraries. It has 2 children blocks.', }, { sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@conditional+block@test_conditional', targetKey: null, - unsupportedReason: 'The "conditional" XBlock (ID: "test_conditional") has children, so it not supported in content libraries. It has 2 children blocks.', + unsupportedReason: 'The "conditional" XBlock (ID: "test_conditional") has children, so it is not supported in content libraries. It has 2 children blocks.', }, ]); (useGetContentHits as jest.Mock).mockReturnValue({ diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts index 8620a818f..aac440005 100644 --- a/src/library-authoring/data/api.mocks.ts +++ b/src/library-authoring/data/api.mocks.ts @@ -68,7 +68,7 @@ export const mockGetModulestoreMigratedBlocksInfo = { { sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@library_content+block@test_lib_content', targetKey: null, - unsupportedReason: 'The "library_content" XBlock (ID: "test_lib_content") has children, so it not supported in content libraries. It has 2 children blocks.', + unsupportedReason: 'The "library_content" XBlock (ID: "test_lib_content") has children, so it is not supported in content libraries. It has 2 children blocks.', }, { sourceKey: 'block-v1:UNIX+UX2+2025_T2+type@html+block@1', diff --git a/src/library-authoring/import-course/ImportDetailsPage.test.tsx b/src/library-authoring/import-course/ImportDetailsPage.test.tsx index 34d10d626..1c05ab360 100644 --- a/src/library-authoring/import-course/ImportDetailsPage.test.tsx +++ b/src/library-authoring/import-course/ImportDetailsPage.test.tsx @@ -159,7 +159,7 @@ describe('', () => { name: 'library_content', })).toBeInTheDocument(); expect(await screen.findByRole('cell', { - name: /has children, so it not supported in content libraries/i, + name: /has children, so it is not supported in content libraries/i, })).toBeInTheDocument(); const viewImportedContentBtn = screen.getByRole('button', { diff --git a/src/library-authoring/import-course/stepper/ImportStepperPage.tsx b/src/library-authoring/import-course/stepper/ImportStepperPage.tsx index c05e017c8..cddf34168 100644 --- a/src/library-authoring/import-course/stepper/ImportStepperPage.tsx +++ b/src/library-authoring/import-course/stepper/ImportStepperPage.tsx @@ -163,7 +163,7 @@ export const ImportStepperPage = () => { ) : ( - {importIsBlocked ? (