Add lean Studio header component. (#24)
* add component from edx/frontend-component-header-edx * adapt header components from edx/frontend-component-header-edx to fit the Studio header use case
This commit is contained in:
Michael Roytman
60
package-lock.json
generated
60
package-lock.json
generated
@@ -1385,6 +1385,30 @@
|
||||
"babel-polyfill": "6.26.0",
|
||||
"react-responsive": "8.0.3",
|
||||
"react-transition-group": "4.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-responsive": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz",
|
||||
"integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==",
|
||||
"requires": {
|
||||
"hyphenate-style-name": "^1.0.0",
|
||||
"matchmediaquery": "^0.3.0",
|
||||
"prop-types": "^15.6.1",
|
||||
"shallow-equal": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
|
||||
"integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
"loose-envify": "^1.4.0",
|
||||
"prop-types": "^15.6.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@edx/frontend-platform": {
|
||||
@@ -16706,9 +16730,9 @@
|
||||
}
|
||||
},
|
||||
"react-responsive": {
|
||||
"version": "8.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.0.3.tgz",
|
||||
"integrity": "sha512-F9VXyLao7O8XHXbLjQbIr4+mC6Zr0RDTwNjd7ixTmYEAyKyNanBkLkFchNaMZgszoSK6PgSs/3m/QDWw33/gpg==",
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.1.0.tgz",
|
||||
"integrity": "sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==",
|
||||
"requires": {
|
||||
"hyphenate-style-name": "^1.0.0",
|
||||
"matchmediaquery": "^0.3.0",
|
||||
@@ -16747,10 +16771,34 @@
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-test-renderer": {
|
||||
"version": "16.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
|
||||
"integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.9.0",
|
||||
"scheduler": "^0.15.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"scheduler": {
|
||||
"version": "0.15.0",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
|
||||
"integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-transition-group": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
|
||||
"integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
|
||||
"integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.5",
|
||||
"dom-helpers": "^5.0.1",
|
||||
|
||||
@@ -50,8 +50,10 @@
|
||||
"react": "16.12.0",
|
||||
"react-dom": "16.12.0",
|
||||
"react-redux": "7.1.3",
|
||||
"react-responsive": "^8.1.0",
|
||||
"react-router": "5.1.2",
|
||||
"react-router-dom": "5.1.2",
|
||||
"react-transition-group": "^4.4.1",
|
||||
"redux": "4.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -64,6 +66,7 @@
|
||||
"glob": "7.1.6",
|
||||
"husky": "3.1.0",
|
||||
"jest": "24.9.0",
|
||||
"reactifex": "1.1.1"
|
||||
"reactifex": "1.1.1",
|
||||
"react-test-renderer": "16.9.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import Footer, { messages as footerMessages } from '@edx/frontend-component-foot
|
||||
import appMessages from './i18n';
|
||||
import ExamplePage from './example/ExamplePage';
|
||||
import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettings';
|
||||
import StudioHeader from './studio-header/Header';
|
||||
|
||||
import './index.scss';
|
||||
import './assets/favicon.ico';
|
||||
@@ -21,16 +22,22 @@ import './assets/favicon.ico';
|
||||
subscribe(APP_READY, () => {
|
||||
ReactDOM.render(
|
||||
<AppProvider>
|
||||
<Header />
|
||||
<Switch>
|
||||
<Route
|
||||
path="/proctored-exam-settings/:course_id"
|
||||
exact
|
||||
render={({ match }) => (
|
||||
<ProctoredExamSettings courseId={match.params.course_id} />
|
||||
)}
|
||||
render={({ match }) => {
|
||||
const courseId = decodeURIComponent(match.params.course_id);
|
||||
return (
|
||||
<>
|
||||
<StudioHeader courseId={courseId} />
|
||||
<ProctoredExamSettings courseId={courseId} />
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Route path="/example">
|
||||
<Header />
|
||||
<ExamplePage />
|
||||
</Route>
|
||||
</Switch>
|
||||
|
||||
@@ -6,3 +6,4 @@
|
||||
@import "~@edx/frontend-component-footer/dist/footer";
|
||||
|
||||
@import "proctored-exam-settings/proctoredExamSettings.scss";
|
||||
@import "studio-header/header.scss";
|
||||
|
||||
43
src/studio-header/Avatar.jsx
Normal file
43
src/studio-header/Avatar.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { AvatarIcon } from './Icons';
|
||||
|
||||
function Avatar({
|
||||
size,
|
||||
src,
|
||||
alt,
|
||||
className,
|
||||
}) {
|
||||
const avatar = src ? (
|
||||
<img className="d-block w-100 h-100" src={src} alt={alt} />
|
||||
) : (
|
||||
<AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
|
||||
);
|
||||
|
||||
return (
|
||||
<span
|
||||
style={{ height: size, width: size }}
|
||||
className={`avatar overflow-hidden d-inline-flex rounded-circle ${className}`}
|
||||
>
|
||||
{avatar}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
Avatar.propTypes = {
|
||||
src: PropTypes.string,
|
||||
size: PropTypes.string,
|
||||
alt: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
|
||||
Avatar.defaultProps = {
|
||||
src: null,
|
||||
size: '2rem',
|
||||
alt: null,
|
||||
className: null,
|
||||
};
|
||||
|
||||
export default Avatar;
|
||||
157
src/studio-header/DesktopHeader.jsx
Normal file
157
src/studio-header/DesktopHeader.jsx
Normal file
@@ -0,0 +1,157 @@
|
||||
// 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';
|
||||
|
||||
// Local Components
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
import Avatar from './Avatar';
|
||||
import { LinkedLogo, Logo } from './Logo';
|
||||
|
||||
// Assets
|
||||
import { CaretIcon } from './Icons';
|
||||
|
||||
class DesktopHeader extends React.Component {
|
||||
constructor(props) { // eslint-disable-line no-useless-constructor
|
||||
super(props);
|
||||
}
|
||||
|
||||
renderMainMenu() {
|
||||
const { mainMenu } = this.props;
|
||||
|
||||
// Nodes are accepted as a prop
|
||||
if (!Array.isArray(mainMenu)) {
|
||||
return mainMenu;
|
||||
}
|
||||
|
||||
return mainMenu.map((menuItem) => {
|
||||
const {
|
||||
type,
|
||||
href,
|
||||
content,
|
||||
submenuContent,
|
||||
} = menuItem;
|
||||
|
||||
if (type === 'item') {
|
||||
return (
|
||||
<a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
|
||||
<MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
|
||||
{content} <CaretIcon role="img" aria-hidden focusable="false" />
|
||||
</MenuTrigger>
|
||||
<MenuContent className="pin-left pin-right shadow py-2">
|
||||
{submenuContent}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderUserMenu() {
|
||||
const {
|
||||
userMenu,
|
||||
avatar,
|
||||
username,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
aria-label={`Account menu for ${username}`}
|
||||
className="btn btn-light d-inline-flex align-items-center pl-2 pr-3"
|
||||
>
|
||||
<Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
|
||||
{username} <CaretIcon role="img" aria-hidden focusable="false" />
|
||||
</MenuTrigger>
|
||||
<MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
|
||||
{userMenu.map(({ type, href, content }) => (
|
||||
<a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
|
||||
))}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
logo,
|
||||
logoAltText,
|
||||
logoDestination,
|
||||
courseTitleDestination,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
|
||||
return (
|
||||
<header className="site-header-desktop">
|
||||
<div className="container-fluid">
|
||||
<div className="nav-container position-relative d-flex align-items-center">
|
||||
{logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
|
||||
{/* This lockup HTML was copied from edx/frontend-app-learning/src/course-header/Header.jsx. */}
|
||||
<a
|
||||
className="course-title-lockup"
|
||||
style={{ lineHeight: 1 }}
|
||||
href={courseTitleDestination}
|
||||
aria-label="Back to course outline in Studio"
|
||||
>
|
||||
{this.props.courseId}
|
||||
</a>
|
||||
<nav
|
||||
aria-label="Main"
|
||||
className="nav main-nav"
|
||||
>
|
||||
{/* TODO: Create main menu items to populate main navigation. */}
|
||||
{/* {this.renderMainMenu()} */}
|
||||
<a style={{ paddingLeft: '1rem' }} href={courseTitleDestination}>Back to Studio Course Outline</a>
|
||||
</nav>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="nav secondary-menu-container align-items-center ml-auto"
|
||||
>
|
||||
{this.renderUserMenu()}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
DesktopHeader.propTypes = {
|
||||
mainMenu: PropTypes.oneOfType([
|
||||
PropTypes.node,
|
||||
PropTypes.array,
|
||||
]),
|
||||
userMenu: PropTypes.arrayOf(PropTypes.shape({
|
||||
type: PropTypes.oneOf(['item', 'menu']),
|
||||
href: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
})),
|
||||
logo: PropTypes.string,
|
||||
logoAltText: PropTypes.string,
|
||||
logoDestination: PropTypes.string,
|
||||
courseTitleDestination: PropTypes.string,
|
||||
courseId: PropTypes.string,
|
||||
avatar: PropTypes.string,
|
||||
username: PropTypes.string,
|
||||
loggedIn: PropTypes.bool,
|
||||
};
|
||||
|
||||
DesktopHeader.defaultProps = {
|
||||
mainMenu: [],
|
||||
userMenu: [],
|
||||
logo: null,
|
||||
logoAltText: null,
|
||||
logoDestination: null,
|
||||
courseTitleDestination: null,
|
||||
courseId: null,
|
||||
avatar: null,
|
||||
username: null,
|
||||
loggedIn: false,
|
||||
};
|
||||
|
||||
export default injectIntl(DesktopHeader);
|
||||
78
src/studio-header/Header.jsx
Normal file
78
src/studio-header/Header.jsx
Normal file
@@ -0,0 +1,78 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React, { useContext } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Responsive from 'react-responsive';
|
||||
import { injectIntl } from '@edx/frontend-platform/i18n';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { ensureConfig } from '@edx/frontend-platform';
|
||||
|
||||
import DesktopHeader from './DesktopHeader';
|
||||
import MobileHeader from './MobileHeader';
|
||||
|
||||
import StudioLogoPNG from './assets/studio-logo.png';
|
||||
|
||||
ensureConfig([
|
||||
'STUDIO_BASE_URL',
|
||||
'LOGOUT_URL',
|
||||
'LOGIN_URL',
|
||||
], 'Header component');
|
||||
|
||||
function Header({ courseId }) {
|
||||
const { authenticatedUser, config } = useContext(AppContext);
|
||||
|
||||
const desktopMainMenu = [];
|
||||
const mobileMainMenu = [
|
||||
{
|
||||
type: 'item',
|
||||
href: `${config.STUDIO_BASE_URL}/course/${courseId}`,
|
||||
content: 'Back to Studio Course Outline',
|
||||
},
|
||||
];
|
||||
|
||||
const userMenu = authenticatedUser === null ? [] : [
|
||||
{
|
||||
type: 'item',
|
||||
href: config.STUDIO_BASE_URL,
|
||||
content: 'Studio Home',
|
||||
},
|
||||
{
|
||||
type: 'item',
|
||||
href: `${config.STUDIO_BASE_URL}/maintenance`,
|
||||
content: 'Maintenance',
|
||||
},
|
||||
{
|
||||
type: 'item',
|
||||
href: config.LOGOUT_URL,
|
||||
content: 'Sign Out',
|
||||
},
|
||||
];
|
||||
|
||||
const props = {
|
||||
logo: StudioLogoPNG,
|
||||
logoAltText: 'Studio edX',
|
||||
siteName: 'edX',
|
||||
logoDestination: config.STUDIO_BASE_URL,
|
||||
courseTitleDestination: `${config.STUDIO_BASE_URL}/course/${courseId}`,
|
||||
courseId,
|
||||
username: authenticatedUser !== null ? authenticatedUser.username : null,
|
||||
avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
|
||||
userMenu,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Responsive maxWidth={768}>
|
||||
<MobileHeader {...props} mainMenu={mobileMainMenu} />
|
||||
</Responsive>
|
||||
<Responsive minWidth={769}>
|
||||
<DesktopHeader {...props} mainMenu={desktopMainMenu} />
|
||||
</Responsive>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
courseId: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default injectIntl(Header);
|
||||
73
src/studio-header/Header.test.jsx
Normal file
73
src/studio-header/Header.test.jsx
Normal file
@@ -0,0 +1,73 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import { IntlProvider } from '@edx/frontend-platform/i18n';
|
||||
import TestRenderer from 'react-test-renderer';
|
||||
import { AppContext } from '@edx/frontend-platform/react';
|
||||
import { getConfig } from '@edx/frontend-platform';
|
||||
import { Context as ResponsiveContext } from 'react-responsive';
|
||||
|
||||
import Header from './Header';
|
||||
|
||||
jest.mock('@edx/frontend-platform');
|
||||
|
||||
getConfig.mockReturnValue({});
|
||||
|
||||
describe('<Header />', () => {
|
||||
it('renders correctly for authenticated users on desktop', () => {
|
||||
const component = (
|
||||
<ResponsiveContext.Provider value={{ width: 1280 }}>
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider value={{
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'edX',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Header courseId="course-v1:edX+DemoX+Demo_Course" />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>
|
||||
);
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly for authenticated users on mobile', () => {
|
||||
const component = (
|
||||
<ResponsiveContext.Provider value={{ width: 500 }}>
|
||||
<IntlProvider locale="en" messages={{}}>
|
||||
<AppContext.Provider value={{
|
||||
authenticatedUser: {
|
||||
userId: 'abc123',
|
||||
username: 'edX',
|
||||
roles: [],
|
||||
administrator: false,
|
||||
},
|
||||
config: {
|
||||
STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
|
||||
LOGIN_URL: process.env.LOGIN_URL,
|
||||
LOGOUT_URL: process.env.LOGOUT_URL,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Header courseId="course-v1:edX+DemoX+Demo_Course" />
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
</ResponsiveContext.Provider>
|
||||
);
|
||||
|
||||
const wrapper = TestRenderer.create(component);
|
||||
|
||||
expect(wrapper.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
47
src/studio-header/Icons.jsx
Normal file
47
src/studio-header/Icons.jsx
Normal file
@@ -0,0 +1,47 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
|
||||
export const MenuIcon = props => (
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
{...props}
|
||||
>
|
||||
<rect fill="currentColor" x="2" y="5" width="20" height="2" />
|
||||
<rect fill="currentColor" x="2" y="11" width="20" height="2" />
|
||||
<rect fill="currentColor" x="2" y="17" width="20" height="2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const AvatarIcon = props => (
|
||||
<svg
|
||||
width="24px"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
version="1.1"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CaretIcon = props => (
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
viewBox="0 0 16 16"
|
||||
version="1.1"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
||||
fill="currentColor"
|
||||
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
36
src/studio-header/Logo.jsx
Normal file
36
src/studio-header/Logo.jsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
function Logo({ src, alt, ...attributes }) {
|
||||
return (
|
||||
<img src={src} alt={alt} {...attributes} />
|
||||
);
|
||||
}
|
||||
|
||||
Logo.propTypes = {
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
function LinkedLogo({
|
||||
href,
|
||||
src,
|
||||
alt,
|
||||
...attributes
|
||||
}) {
|
||||
return (
|
||||
<a href={href} {...attributes}>
|
||||
<img className="d-block" src={src} alt={alt} />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
LinkedLogo.propTypes = {
|
||||
href: PropTypes.string.isRequired,
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export { LinkedLogo, Logo };
|
||||
export default Logo;
|
||||
279
src/studio-header/Menu/Menu.jsx
Normal file
279
src/studio-header/Menu/Menu.jsx
Normal file
@@ -0,0 +1,279 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import React from 'react';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
function MenuTrigger({ tag, className, ...attributes }) {
|
||||
return React.createElement(tag, {
|
||||
className: `menu-trigger ${className}`,
|
||||
...attributes,
|
||||
});
|
||||
}
|
||||
MenuTrigger.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
MenuTrigger.defaultProps = {
|
||||
tag: 'div',
|
||||
className: null,
|
||||
};
|
||||
const MenuTriggerType = <MenuTrigger />.type;
|
||||
|
||||
function MenuContent({ tag, className, ...attributes }) {
|
||||
return React.createElement(tag, {
|
||||
className: ['menu-content', className].join(' '),
|
||||
...attributes,
|
||||
});
|
||||
}
|
||||
MenuContent.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
className: PropTypes.string,
|
||||
};
|
||||
MenuContent.defaultProps = {
|
||||
tag: 'div',
|
||||
className: null,
|
||||
};
|
||||
|
||||
class Menu extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.menu = React.createRef();
|
||||
this.state = {
|
||||
expanded: false,
|
||||
};
|
||||
|
||||
this.onTriggerClick = this.onTriggerClick.bind(this);
|
||||
this.onCloseClick = this.onCloseClick.bind(this);
|
||||
this.onKeyDown = this.onKeyDown.bind(this);
|
||||
this.onDocumentClick = this.onDocumentClick.bind(this);
|
||||
this.onMouseEnter = this.onMouseEnter.bind(this);
|
||||
this.onMouseLeave = this.onMouseLeave.bind(this);
|
||||
}
|
||||
|
||||
// Lifecycle Events
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('touchend', this.onDocumentClick, true);
|
||||
document.removeEventListener('click', this.onDocumentClick, true);
|
||||
|
||||
// Call onClose callback when unmounting and open
|
||||
if (this.state.expanded && this.props.onClose) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
// Event handlers
|
||||
onDocumentClick(e) {
|
||||
if (!this.props.closeOnDocumentClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
|
||||
if (clickIsInMenu) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.close();
|
||||
}
|
||||
|
||||
onTriggerClick(e) {
|
||||
// Let the browser follow the link of the trigger if the menu
|
||||
// is already expanded and the trigger has an href attribute
|
||||
if (this.state.expanded && e.target.getAttribute('href')) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
}
|
||||
|
||||
onCloseClick() {
|
||||
this.getFocusableElements()[0].focus();
|
||||
this.close();
|
||||
}
|
||||
|
||||
onKeyDown(e) {
|
||||
if (!this.state.expanded) {
|
||||
return;
|
||||
}
|
||||
switch (e.key) {
|
||||
case 'Escape': {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.getFocusableElements()[0].focus();
|
||||
this.close();
|
||||
break;
|
||||
}
|
||||
case 'Enter': {
|
||||
// Using focusable elements instead of a ref to the trigger
|
||||
// because Hyperlink and Button can handle refs as functional components
|
||||
if (document.activeElement === this.getFocusableElements()[0]) {
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Tab': {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
this.focusPrevious();
|
||||
} else {
|
||||
this.focusNext();
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'ArrowDown': {
|
||||
e.preventDefault();
|
||||
this.focusNext();
|
||||
break;
|
||||
}
|
||||
case 'ArrowUp': {
|
||||
e.preventDefault();
|
||||
this.focusPrevious();
|
||||
break;
|
||||
}
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
onMouseEnter() {
|
||||
if (!this.props.respondToPointerEvents) {
|
||||
return;
|
||||
}
|
||||
this.open();
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
if (!this.props.respondToPointerEvents) {
|
||||
return;
|
||||
}
|
||||
this.close();
|
||||
}
|
||||
|
||||
// Internal functions
|
||||
|
||||
getFocusableElements() {
|
||||
return this.menu.current.querySelectorAll('button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
|
||||
}
|
||||
|
||||
getAttributesFromProps() {
|
||||
// Any extra props are attributes for the menu
|
||||
const attributes = {};
|
||||
Object.keys(this.props)
|
||||
// eslint-disable-next-line react/forbid-foreign-prop-types
|
||||
.filter(property => Menu.propTypes[property] === undefined)
|
||||
.forEach((property) => {
|
||||
attributes[property] = this.props[property];
|
||||
});
|
||||
return attributes;
|
||||
}
|
||||
|
||||
focusNext() {
|
||||
const focusableElements = Array.from(this.getFocusableElements());
|
||||
const activeIndex = focusableElements.indexOf(document.activeElement);
|
||||
const nextIndex = (activeIndex + 1) % focusableElements.length;
|
||||
focusableElements[nextIndex].focus();
|
||||
}
|
||||
|
||||
focusPrevious() {
|
||||
const focusableElements = Array.from(this.getFocusableElements());
|
||||
const activeIndex = focusableElements.indexOf(document.activeElement);
|
||||
const previousIndex = (activeIndex || focusableElements.length) - 1;
|
||||
focusableElements[previousIndex].focus();
|
||||
}
|
||||
|
||||
open() {
|
||||
if (this.props.onOpen) {
|
||||
this.props.onOpen();
|
||||
}
|
||||
this.setState({ expanded: true });
|
||||
// Listen to touchend and click events to ensure the menu
|
||||
// can be closed on mobile, pointer, and mixed input devices
|
||||
document.addEventListener('touchend', this.onDocumentClick, true);
|
||||
document.addEventListener('click', this.onDocumentClick, true);
|
||||
}
|
||||
|
||||
close() {
|
||||
if (this.props.onClose) {
|
||||
this.props.onClose();
|
||||
}
|
||||
this.setState({ expanded: false });
|
||||
document.removeEventListener('touchend', this.onDocumentClick, true);
|
||||
document.removeEventListener('click', this.onDocumentClick, true);
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this.state.expanded) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
renderTrigger(node) {
|
||||
return React.cloneElement(node, {
|
||||
onClick: this.onTriggerClick,
|
||||
'aria-haspopup': 'menu',
|
||||
'aria-expanded': this.state.expanded,
|
||||
});
|
||||
}
|
||||
|
||||
renderMenuContent(node) {
|
||||
return (
|
||||
<CSSTransition
|
||||
in={this.state.expanded}
|
||||
timeout={this.props.transitionTimeout}
|
||||
classNames={this.props.transitionClassName}
|
||||
unmountOnExit
|
||||
>
|
||||
{node}
|
||||
</CSSTransition>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
|
||||
const wrappedChildren = React.Children.map(this.props.children, (child) => {
|
||||
if (child.type === MenuTriggerType) {
|
||||
return this.renderTrigger(child);
|
||||
}
|
||||
return this.renderMenuContent(child);
|
||||
});
|
||||
|
||||
const rootClassName = this.state.expanded ? 'menu expanded' : 'menu';
|
||||
|
||||
return React.createElement(this.props.tag, {
|
||||
className: `${rootClassName} ${className}`,
|
||||
ref: this.menu,
|
||||
onKeyDown: this.onKeyDown,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
...this.getAttributesFromProps(),
|
||||
}, wrappedChildren);
|
||||
}
|
||||
}
|
||||
|
||||
Menu.propTypes = {
|
||||
tag: PropTypes.string,
|
||||
onClose: PropTypes.func,
|
||||
onOpen: PropTypes.func,
|
||||
closeOnDocumentClick: PropTypes.bool,
|
||||
respondToPointerEvents: PropTypes.bool,
|
||||
className: PropTypes.string,
|
||||
transitionTimeout: PropTypes.number,
|
||||
transitionClassName: PropTypes.string,
|
||||
children: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||
};
|
||||
Menu.defaultProps = {
|
||||
tag: 'div',
|
||||
className: null,
|
||||
onClose: null,
|
||||
onOpen: null,
|
||||
respondToPointerEvents: false,
|
||||
closeOnDocumentClick: true,
|
||||
transitionTimeout: 250,
|
||||
transitionClassName: 'menu-content',
|
||||
};
|
||||
|
||||
export { Menu, MenuTrigger, MenuContent };
|
||||
4
src/studio-header/Menu/index.jsx
Normal file
4
src/studio-header/Menu/index.jsx
Normal file
@@ -0,0 +1,4 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
|
||||
export { Menu, MenuTrigger, MenuContent };
|
||||
46
src/studio-header/Menu/menu.scss
Normal file
46
src/studio-header/Menu/menu.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
// This file was copied from edx/frontend-component-header-edx.
|
||||
.menu {
|
||||
position: relative;
|
||||
}
|
||||
.menu-content {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
min-width: 10rem;
|
||||
&.pin-left {
|
||||
left: 0;
|
||||
}
|
||||
&.pin-right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.menu-dropdown-enter {
|
||||
opacity: 0;
|
||||
transform-origin: 75% 0;
|
||||
transform: scale3d(0.8, 0.8, 1);
|
||||
}
|
||||
.menu-dropdown-enter-active {
|
||||
transform-origin: 75% 0;
|
||||
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.menu-dropdown-enter-done {
|
||||
}
|
||||
|
||||
.menu-dropdown-exit {
|
||||
transform-origin: 75% 0;
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
.menu-dropdown-exit-active {
|
||||
transform-origin: 75% 0;
|
||||
transform: scale3d(0.8, 0.8, 1);
|
||||
transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
.menu-dropdown-exit-done {
|
||||
}
|
||||
158
src/studio-header/MobileHeader.jsx
Normal file
158
src/studio-header/MobileHeader.jsx
Normal file
@@ -0,0 +1,158 @@
|
||||
// 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';
|
||||
// Local Components
|
||||
import { Menu, MenuTrigger, MenuContent } from './Menu';
|
||||
import Avatar from './Avatar';
|
||||
import { LinkedLogo, Logo } from './Logo';
|
||||
|
||||
// Assets
|
||||
import { MenuIcon } from './Icons';
|
||||
|
||||
class MobileHeader extends React.Component {
|
||||
constructor(props) { // eslint-disable-line no-useless-constructor
|
||||
super(props);
|
||||
}
|
||||
|
||||
renderMainMenu() {
|
||||
const { mainMenu } = this.props;
|
||||
|
||||
// Nodes are accepted as a prop
|
||||
if (!Array.isArray(mainMenu)) {
|
||||
return mainMenu;
|
||||
}
|
||||
|
||||
return mainMenu.map((menuItem) => {
|
||||
const {
|
||||
type,
|
||||
href,
|
||||
content,
|
||||
submenuContent,
|
||||
} = menuItem;
|
||||
|
||||
if (type === 'item') {
|
||||
return (
|
||||
<a key={`${type}-${content}`} className="nav-link" href={href}>
|
||||
{content}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu key={`${type}-${content}`} tag="div" className="nav-item">
|
||||
<MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
|
||||
{content}
|
||||
</MenuTrigger>
|
||||
<MenuContent className="position-static pin-left pin-right py-2">
|
||||
{submenuContent}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
renderUserMenuItems() {
|
||||
const { userMenu } = this.props;
|
||||
|
||||
return userMenu.map(({ type, href, content }) => (
|
||||
<li className="nav-item" key={`${type}-${content}`}>
|
||||
<a className="nav-link" href={href}>{content}</a>
|
||||
</li>
|
||||
));
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
logo,
|
||||
logoAltText,
|
||||
logoDestination,
|
||||
avatar,
|
||||
username,
|
||||
stickyOnMobile,
|
||||
mainMenu,
|
||||
} = this.props;
|
||||
const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
|
||||
const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
|
||||
return (
|
||||
<header
|
||||
aria-label="Main"
|
||||
className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
|
||||
>
|
||||
<div className="w-100 d-flex justify-content-start">
|
||||
{mainMenu.length > 0
|
||||
? (
|
||||
<Menu className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label="Main Menu"
|
||||
title="Main Menu"
|
||||
>
|
||||
<MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
|
||||
</MenuTrigger>
|
||||
<MenuContent
|
||||
tag="nav"
|
||||
aria-label="Main"
|
||||
className="nav flex-column pin-left pin-right border-top shadow py-2"
|
||||
>
|
||||
{this.renderMainMenu()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="w-100 d-flex justify-content-center">
|
||||
{logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
|
||||
</div>
|
||||
<div className="w-100 d-flex justify-content-end align-items-center">
|
||||
<Menu tag="nav" aria-label="Secondary" className="position-static">
|
||||
<MenuTrigger
|
||||
tag="button"
|
||||
className="icon-button"
|
||||
aria-label="Account Menu"
|
||||
title="Account Menu"
|
||||
>
|
||||
<Avatar size="1.5rem" src={avatar} alt={username} />
|
||||
</MenuTrigger>
|
||||
<MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
|
||||
{this.renderUserMenuItems()}
|
||||
</MenuContent>
|
||||
</Menu>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
MobileHeader.propTypes = {
|
||||
mainMenu: PropTypes.oneOfType([
|
||||
PropTypes.node,
|
||||
PropTypes.array,
|
||||
]),
|
||||
|
||||
userMenu: PropTypes.arrayOf(PropTypes.shape({
|
||||
type: PropTypes.oneOf(['item', 'menu']),
|
||||
href: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
})),
|
||||
logo: PropTypes.string,
|
||||
logoAltText: PropTypes.string,
|
||||
logoDestination: PropTypes.string,
|
||||
avatar: PropTypes.string,
|
||||
username: PropTypes.string,
|
||||
stickyOnMobile: PropTypes.bool,
|
||||
};
|
||||
|
||||
MobileHeader.defaultProps = {
|
||||
mainMenu: [],
|
||||
userMenu: [],
|
||||
logo: null,
|
||||
logoAltText: null,
|
||||
logoDestination: null,
|
||||
avatar: null,
|
||||
username: null,
|
||||
stickyOnMobile: true,
|
||||
|
||||
};
|
||||
|
||||
export default injectIntl(MobileHeader);
|
||||
253
src/studio-header/__snapshots__/Header.test.jsx.snap
Normal file
253
src/studio-header/__snapshots__/Header.test.jsx.snap
Normal file
@@ -0,0 +1,253 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Header /> renders correctly for authenticated users on desktop 1`] = `
|
||||
<header
|
||||
className="site-header-desktop"
|
||||
>
|
||||
<div
|
||||
className="container-fluid"
|
||||
>
|
||||
<div
|
||||
className="nav-container position-relative d-flex align-items-center"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18010"
|
||||
>
|
||||
<img
|
||||
alt="Studio edX"
|
||||
className="d-block"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
aria-label="Back to course outline in Studio"
|
||||
className="course-title-lockup"
|
||||
href="http://localhost:18010/course/course-v1:edX+DemoX+Demo_Course"
|
||||
style={
|
||||
Object {
|
||||
"lineHeight": 1,
|
||||
}
|
||||
}
|
||||
>
|
||||
course-v1:edX+DemoX+Demo_Course
|
||||
</a>
|
||||
<nav
|
||||
aria-label="Main"
|
||||
className="nav main-nav"
|
||||
>
|
||||
<a
|
||||
href="http://localhost:18010/course/course-v1:edX+DemoX+Demo_Course"
|
||||
style={
|
||||
Object {
|
||||
"paddingLeft": "1rem",
|
||||
}
|
||||
}
|
||||
>
|
||||
Back to Studio Course Outline
|
||||
</a>
|
||||
</nav>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="nav secondary-menu-container align-items-center ml-auto"
|
||||
>
|
||||
<div
|
||||
className="menu null"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Account menu for edX"
|
||||
className="menu-trigger btn btn-light d-inline-flex align-items-center pl-2 pr-3"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5em",
|
||||
"width": "1.5em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="text-muted"
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5em",
|
||||
"width": "1.5em",
|
||||
}
|
||||
}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
>
|
||||
<path
|
||||
d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
edX
|
||||
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
focusable="false"
|
||||
height="16px"
|
||||
role="img"
|
||||
version="1.1"
|
||||
viewBox="0 0 16 16"
|
||||
width="16px"
|
||||
>
|
||||
<path
|
||||
d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
|
||||
fill="currentColor"
|
||||
transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
|
||||
exports[`<Header /> renders correctly for authenticated users on mobile 1`] = `
|
||||
<header
|
||||
aria-label="Main"
|
||||
className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
|
||||
>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-start"
|
||||
>
|
||||
<div
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Main Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Main Menu"
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="5"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="11"
|
||||
/>
|
||||
<rect
|
||||
fill="currentColor"
|
||||
height="2"
|
||||
width="20"
|
||||
x="2"
|
||||
y="17"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-center"
|
||||
>
|
||||
<a
|
||||
className="logo"
|
||||
href="http://localhost:18010"
|
||||
itemType="http://schema.org/Organization"
|
||||
>
|
||||
<img
|
||||
alt="Studio edX"
|
||||
className="d-block"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
className="w-100 d-flex justify-content-end align-items-center"
|
||||
>
|
||||
<nav
|
||||
aria-label="Secondary"
|
||||
className="menu position-static"
|
||||
onKeyDown={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup="menu"
|
||||
aria-label="Account Menu"
|
||||
className="menu-trigger icon-button"
|
||||
onClick={[Function]}
|
||||
title="Account Menu"
|
||||
>
|
||||
<span
|
||||
className="avatar overflow-hidden d-inline-flex rounded-circle null"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
className="text-muted"
|
||||
focusable="false"
|
||||
height="24px"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"height": "1.5rem",
|
||||
"width": "1.5rem",
|
||||
}
|
||||
}
|
||||
version="1.1"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
>
|
||||
<path
|
||||
d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
`;
|
||||
BIN
src/studio-header/assets/studio-logo.png
Normal file
BIN
src/studio-header/assets/studio-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
12
src/studio-header/header.scss
Normal file
12
src/studio-header/header.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
// This SCSS was copied from edx/frontend-app-learning/src/index.scss.
|
||||
.course-title-lockup {
|
||||
padding: 1rem 0;
|
||||
padding-right: 1rem;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
min-width: 0;
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user