From 309aa93607debab0bd9339eeafe6b032f4128af8 Mon Sep 17 00:00:00 2001 From: Michael Roytman Date: Thu, 13 Aug 2020 11:43:01 -0400 Subject: [PATCH] [WIP] New Header Work (#33) * update Studio header to include dropdown menus and internationalization * Added header improvements (#34) Added header improvements Squashing commits for header improvements added header improvements fixed typo moved api call to separate file added course lockup to mobile header, removed snapshot tests fixed css for mobile header simplified css styling updated testing updated css styling updated css simplified course lockup removed React fragments from lockup fixed mobile header styling Co-authored-by: alangsto <46360176+alangsto@users.noreply.github.com> --- src/data/services/LmsApiService.js | 22 ++ src/index.scss | 3 - src/studio-header/DesktopHeader.jsx | 33 ++- src/studio-header/Header.jsx | 105 ++++++-- src/studio-header/Header.messages.jsx | 156 +++++++++++ src/studio-header/Header.test.jsx | 103 ++++--- src/studio-header/MobileHeader.jsx | 27 +- .../__snapshots__/Header.test.jsx.snap | 253 ------------------ src/studio-header/header.scss | 109 +++++++- 9 files changed, 472 insertions(+), 339 deletions(-) create mode 100644 src/data/services/LmsApiService.js create mode 100644 src/studio-header/Header.messages.jsx delete mode 100644 src/studio-header/__snapshots__/Header.test.jsx.snap diff --git a/src/data/services/LmsApiService.js b/src/data/services/LmsApiService.js new file mode 100644 index 000000000..16198740a --- /dev/null +++ b/src/data/services/LmsApiService.js @@ -0,0 +1,22 @@ +import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth'; +import { getConfig, ensureConfig } from '@edx/frontend-platform'; + +ensureConfig([ + 'LMS_BASE_URL', +], 'LMS API service'); + +const lmsBaseUrl = getConfig().LMS_BASE_URL; + +class LmsApiService { + static getCourseDetailsUrl(courseID) { + return `${lmsBaseUrl}/api/courses/v1/courses/${courseID}`; + } + + static getCourseDetailsData(courseID) { + const apiClient = getAuthenticatedHttpClient(); + const url = LmsApiService.getCourseDetailsUrl(courseID); + return apiClient.get(url); + } +} + +export default LmsApiService; diff --git a/src/index.scss b/src/index.scss index 5c7b5f703..94e2ba80f 100755 --- a/src/index.scss +++ b/src/index.scss @@ -1,8 +1,5 @@ @import '~@edx/paragon/scss/edx/theme.scss'; -@import './example/index.scss'; - -@import "~@edx/frontend-component-header/dist/index"; @import "~@edx/frontend-component-footer/dist/footer"; @import "proctored-exam-settings/proctoredExamSettings.scss"; diff --git a/src/studio-header/DesktopHeader.jsx b/src/studio-header/DesktopHeader.jsx index 812dd5239..8673eccac 100644 --- a/src/studio-header/DesktopHeader.jsx +++ b/src/studio-header/DesktopHeader.jsx @@ -1,13 +1,16 @@ // This file was copied from edx/frontend-component-header-edx. import React from 'react'; import PropTypes from 'prop-types'; -import { injectIntl } from '@edx/frontend-platform/i18n'; +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; // Local Components import { Menu, MenuTrigger, MenuContent } from './Menu'; import Avatar from './Avatar'; import { LinkedLogo, Logo } from './Logo'; +// i18n +import messages from './Header.messages'; + // Assets import { CaretIcon } from './Icons'; @@ -56,13 +59,14 @@ class DesktopHeader extends React.Component { userMenu, avatar, username, + intl, } = this.props; return ( @@ -82,7 +86,7 @@ class DesktopHeader extends React.Component { logo, logoAltText, logoDestination, - courseTitleDestination, + intl, } = this.props; const logoProps = { src: logo, alt: logoAltText, href: logoDestination }; @@ -92,24 +96,15 @@ class DesktopHeader extends React.Component {
{logoDestination === null ? : } {/* This lockup HTML was copied from edx/frontend-app-learning/src/course-header/Header.jsx. */} - - {this.props.courseId} - + { this.props.courseLockUp }
) : null} -
+
{logoDestination === null ? : } + { this.props.courseLockUp }
@@ -141,6 +147,10 @@ MobileHeader.propTypes = { avatar: PropTypes.string, username: PropTypes.string, stickyOnMobile: PropTypes.bool, + courseLockUp: PropTypes.node.isRequired, + + // i18n + intl: intlShape.isRequired, }; MobileHeader.defaultProps = { @@ -152,7 +162,6 @@ MobileHeader.defaultProps = { avatar: null, username: null, stickyOnMobile: true, - }; export default injectIntl(MobileHeader); diff --git a/src/studio-header/__snapshots__/Header.test.jsx.snap b/src/studio-header/__snapshots__/Header.test.jsx.snap deleted file mode 100644 index 39d520ac2..000000000 --- a/src/studio-header/__snapshots__/Header.test.jsx.snap +++ /dev/null @@ -1,253 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`
renders correctly for authenticated users on desktop 1`] = ` -
- -
-`; - -exports[`
renders correctly for authenticated users on mobile 1`] = ` -
-
-
- -
-
-
- - Studio edX - -
-
- -
-
-`; diff --git a/src/studio-header/header.scss b/src/studio-header/header.scss index b8105bd6e..e63c58950 100644 --- a/src/studio-header/header.scss +++ b/src/studio-header/header.scss @@ -1,12 +1,115 @@ -// This SCSS was copied from edx/frontend-app-learning/src/index.scss. +// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss. +$spacer: 1rem; +$blue: #007db8; +$white: #fff; + +@import './Menu/menu.scss'; + .course-title-lockup { - padding: 1rem 0; + @media only screen and (max-width : 768px) { + padding-left: 0.5rem; + max-width: 70%; + } + @media only screen and (min-width : 769px) { + padding: 0.5rem; padding-right: 1rem; border-right: 1px solid #e5e5e5; - min-width: 0; + } + overflow: hidden; span { + color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } + +.mobile-lockup { + max-width: 50%; +} + +.dropdown-item a { + text-decoration: none; +} + +.icon-button { + display: inline-flex; + line-height: 3rem; + background: transparent; + vertical-align: middle; + text-align: center; + border: none; + height: 3rem; + width: 3rem; + padding: .75rem; + justify-content: center; + align-items:center; + &:hover, &:focus { + background: rgba(0,0,0,.1); + } +} + +.site-header-mobile, +.site-header-desktop { + position: relative; + z-index: 1000; +} + +.site-header-mobile { + .nav-link { + text-decoration: none; + cursor: pointer; + } + img { + height: 1.5rem; + } +} + + +.site-header-desktop { + height: 3.75rem; + box-shadow: 0 1px 0 0 rgba(0,0,0,.1); + background: $white; + .nav-link { + text-decoration: none; + } + .logo { + display: block; + box-sizing: content-box; + position: relative; + top: -.05em; + height: 1.75rem; + padding: 1rem 0; + margin-right: 1rem; + img { + display: block; + height: 100%; + } + } + .main-nav { + flex-wrap: nowrap; + .nav-link { + padding: 1.125rem 1rem; + text-decoration: none; + font-weight: 500; + letter-spacing: .01em; + } + .nav-link:hover, + .nav-link:focus, + .nav-link.active, + .expanded .nav-link { + background: $component-active-bg; + color: $component-active-color; + } + .menu { + position: relative; + .menu-content { + border-top: solid 2px $component-active-bg; + box-shadow: 0 1px 2px rgba(0,0,0,.25); + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; + padding: 1rem; + } + } + } +}