From 7c9ac88877b793292a5e2838c9b50082568ee848 Mon Sep 17 00:00:00 2001 From: Tenzin Choeying Date: Sat, 27 Jun 2026 23:16:44 +0530 Subject: [PATCH 1/2] feat: make studio course outline help sidebar collapsible with header --- .../outline-sidebar/OutlineSidebar.jsx | 28 +++++++----- .../outline-sidebar/messages.js | 4 ++ src/generic/help-sidebar/HelpSidebar.scss | 44 +++++++++++++++++++ 3 files changed, 64 insertions(+), 12 deletions(-) diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.jsx b/src/course-outline/outline-sidebar/OutlineSidebar.jsx index 6d659d238d..383ed3f20e 100644 --- a/src/course-outline/outline-sidebar/OutlineSidebar.jsx +++ b/src/course-outline/outline-sidebar/OutlineSidebar.jsx @@ -1,11 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Hyperlink } from '@openedx/paragon'; +import { Collapsible, Hyperlink } from '@openedx/paragon'; import { useIntl } from '@edx/frontend-platform/i18n'; import { HelpSidebar } from '../../generic/help-sidebar'; import { useHelpUrls } from '../../help-urls/hooks'; import { getFormattedSidebarMessages } from './utils'; +import messages from './messages'; const OutlineSideBar = ({ courseId }) => { const intl = useIntl(); @@ -28,15 +29,19 @@ const OutlineSideBar = ({ courseId }) => { - {sidebarMessages.map(({ title, descriptions, link }, index) => { - const isLastSection = index === sidebarMessages.length - 1; - - return ( -
-

{title}

+

{intl.formatMessage(messages.sidebar_header)}

+
+ {sidebarMessages.map(({ title, descriptions, link }) => ( + {title}} + > {descriptions.map((description) => (

{description}

))} @@ -50,10 +55,9 @@ const OutlineSideBar = ({ courseId }) => { {link.text} )} - {!isLastSection &&
} -
- ); - })} + + ))} +
); }; diff --git a/src/course-outline/outline-sidebar/messages.js b/src/course-outline/outline-sidebar/messages.js index 7ef0cf0cfb..c8f6f2aa8b 100644 --- a/src/course-outline/outline-sidebar/messages.js +++ b/src/course-outline/outline-sidebar/messages.js @@ -1,6 +1,10 @@ import { defineMessages } from '@edx/frontend-platform/i18n'; const messages = defineMessages({ + sidebar_header: { + id: 'course-authoring.course-outline.sidebar.header', + defaultMessage: 'Need help with your course?', + }, section_1_title: { id: 'course-authoring.course-outline.sidebar.section-1.title', defaultMessage: 'Creating your course organization', diff --git a/src/generic/help-sidebar/HelpSidebar.scss b/src/generic/help-sidebar/HelpSidebar.scss index c4b24300fd..49ec4d2748 100644 --- a/src/generic/help-sidebar/HelpSidebar.scss +++ b/src/generic/help-sidebar/HelpSidebar.scss @@ -32,3 +32,47 @@ margin-bottom: .5rem; } } + +.outline-sidebar { + // Keep the header at the very top of the sidebar column (aligned with the + // StatusBar on the content side). + margin-top: 0; +} + +.outline-sidebar .outline-sidebar-header { + // Nudge the header down a bit from the very top of the column. + margin-top: 1.5rem; + font: normal var(--pgn-typography-font-weight-bold) 1.375rem/1.75rem var(--pgn-typography-font-family-base); + color: var(--pgn-color-info-500); + margin-bottom: 0; +} + +.outline-sidebar .outline-sidebar-sections { + // Align the first collapsible with the top border of the section cards on + // the content side. + margin-top: 2rem; +} + +.outline-sidebar .outline-sidebar-section.collapsible-basic { + .collapsible-trigger { + justify-content: space-between; + text-decoration: none; + color: var(--pgn-color-black); + padding-left: 0; + padding-right: 0; + } + + .help-sidebar-about-title { + color: var(--pgn-color-black); + } + + .collapsible-icon { + color: var(--pgn-color-black); + margin-left: auto; + } + + .collapsible-body { + padding-left: 0; + padding-right: 0; + } +} From aec2689823ab013cb66f8575fc229519e7e7fc08 Mon Sep 17 00:00:00 2001 From: tenkalden Date: Mon, 29 Jun 2026 12:15:10 +0530 Subject: [PATCH 2/2] refactor: redesign outline sidebar with card-style collapsibles and improved visual hierarchy Update the outline sidebar to use card-lg styling for collapsible sections with enhanced hover states, borders, and shadows. Adjust header positioning to align the first collapsible with content cards. Replace default launch icon with custom OpenInNew icon on section links. Add consistent spacing with flexbox gaps between sections and improved padding throughout. Update typography and colors for better read --- .../outline-sidebar/OutlineSidebar.jsx | 12 ++- src/generic/help-sidebar/HelpSidebar.scss | 88 ++++++++++++++++--- 2 files changed, 83 insertions(+), 17 deletions(-) diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.jsx b/src/course-outline/outline-sidebar/OutlineSidebar.jsx index 383ed3f20e..318ef25945 100644 --- a/src/course-outline/outline-sidebar/OutlineSidebar.jsx +++ b/src/course-outline/outline-sidebar/OutlineSidebar.jsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { Collapsible, Hyperlink } from '@openedx/paragon'; +import { Collapsible, Hyperlink, Icon } from '@openedx/paragon'; +import { OpenInNew } from '@openedx/paragon/icons'; import { useIntl } from '@edx/frontend-platform/i18n'; import { HelpSidebar } from '../../generic/help-sidebar'; @@ -32,13 +33,15 @@ const OutlineSideBar = ({ courseId }) => { className="outline-sidebar" data-testid="outline-sidebar" > -

{intl.formatMessage(messages.sidebar_header)}

+
+

{intl.formatMessage(messages.sidebar_header)}

+
{sidebarMessages.map(({ title, descriptions, link }) => ( {title}} > @@ -47,12 +50,13 @@ const OutlineSideBar = ({ courseId }) => { ))} {Boolean(link) && Boolean(link.href) && ( {link.text} + )} diff --git a/src/generic/help-sidebar/HelpSidebar.scss b/src/generic/help-sidebar/HelpSidebar.scss index 49ec4d2748..d60ef2fe29 100644 --- a/src/generic/help-sidebar/HelpSidebar.scss +++ b/src/generic/help-sidebar/HelpSidebar.scss @@ -40,39 +40,101 @@ } .outline-sidebar .outline-sidebar-header { - // Nudge the header down a bit from the very top of the column. - margin-top: 1.5rem; - font: normal var(--pgn-typography-font-weight-bold) 1.375rem/1.75rem var(--pgn-typography-font-family-base); - color: var(--pgn-color-info-500); - margin-bottom: 0; + // Offset the header so the FIRST collapsible card lines up with the top of + // the "Optimize your course with AI" box on the content side (the heading + // sits above it). + margin-top: 2.25rem; + + .outline-sidebar-header-title { + font: normal var(--pgn-typography-font-weight-bold) 1.375rem/1.75rem var(--pgn-typography-font-family-base); + color: var(--pgn-color-info-500); + } } .outline-sidebar .outline-sidebar-sections { // Align the first collapsible with the top border of the section cards on // the content side. - margin-top: 2rem; + margin-top: 1.5rem; + display: flex; + flex-direction: column; + gap: .75rem; } -.outline-sidebar .outline-sidebar-section.collapsible-basic { +.outline-sidebar .outline-sidebar-section.collapsible-card-lg { + border: 1px solid var(--pgn-color-light-400) !important; + border-radius: .5rem; + background: var(--pgn-color-white); + overflow: hidden; + transition: border-color .15s ease, box-shadow .15s ease; + + &:hover { + border-color: var(--pgn-color-info-300) !important; + box-shadow: 0 .125rem .5rem rgba(15, 14, 40, .06); + } + + &.is-open { + border-color: var(--pgn-color-info-300) !important; + box-shadow: 0 .125rem .75rem rgba(15, 14, 40, .08); + } + .collapsible-trigger { justify-content: space-between; + align-items: center; text-decoration: none; color: var(--pgn-color-black); - padding-left: 0; - padding-right: 0; + padding: .875rem 1rem; + border: 0; + cursor: pointer; + transition: background .15s ease; + + &:hover { + background: var(--pgn-color-light-200); + } } .help-sidebar-about-title { + font: normal var(--pgn-typography-font-weight-bold) .9375rem/1.375rem var(--pgn-typography-font-family-base); color: var(--pgn-color-black); } .collapsible-icon { - color: var(--pgn-color-black); - margin-left: auto; + color: var(--pgn-color-gray-500); + margin-left: .5rem; + flex-shrink: 0; + } + + &.is-open .collapsible-icon { + color: var(--pgn-color-info-500); } .collapsible-body { - padding-left: 0; - padding-right: 0; + padding: 0 1rem 1rem; + } + + .help-sidebar-about-descriptions { + font: normal var(--pgn-typography-font-weight-normal) .875rem/1.5rem var(--pgn-typography-font-family-base); + color: $text-color-base; + margin-bottom: .75rem; + + &:last-of-type { + margin-bottom: 0; + } + } + + .outline-sidebar-section-link { + margin-top: .75rem; + color: var(--pgn-color-info-500); + font-weight: var(--pgn-typography-font-weight-bold); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + + .outline-sidebar-section-link-icon { + width: 1rem; + height: 1rem; + margin-left: .25rem; + } } }