Skip to content

Commit bace828

Browse files
KristinAokiKristinAoki
authoredNov 16, 2023
fix: studio dropdown hover styles (#433)
·
v6.2.0v4.10.1
1 parent 665653e commit bace828

10 files changed

+114
-195
lines changed
 

‎example/index.js

+30-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
77
import Header from '@edx/frontend-component-header';
88

99
import './index.scss';
10+
import StudioHeader from '../src/studio-header/StudioHeader';
1011

1112
subscribe(APP_READY, () => {
1213
ReactDOM.render(
@@ -32,7 +33,35 @@ subscribe(APP_READY, () => {
3233
}}>
3334
<Header />
3435
</AppContext.Provider>
35-
<h5 className="mt-2">Logged in state</h5>
36+
<h5 className="mt-2 mb-5">Logged in state</h5>
37+
<AppContext.Provider value={{
38+
authenticatedUser: {
39+
userId: '123abc',
40+
username: 'testuser',
41+
roles: [],
42+
administrator: false,
43+
},
44+
config: getConfig(),
45+
}}>
46+
<StudioHeader
47+
number="run123"
48+
org="testX"
49+
title="Course Name"
50+
isHiddenMainMenu={false}
51+
mainMenuDropdowns={[
52+
{
53+
id: 'content-dropdown',
54+
buttonTitle: 'Content',
55+
items: [{
56+
href: '#',
57+
title: 'Outline',
58+
}],
59+
},
60+
]}
61+
outlineLink="#"
62+
/>
63+
</AppContext.Provider>
64+
<h5 className="mt-2">Logged in state for Studio header</h5>
3665
</AppProvider>,
3766
document.getElementById('root'),
3867
);

‎src/index.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ $blue: #007db8;
33
$white: #fff;
44

55
@import './Menu/menu.scss';
6-
@import './studio-header/header.scss';
6+
@import './studio-header/StudioHeader.scss';
77

88
.dropdown-item a {
99
text-decoration: none;
@@ -43,9 +43,9 @@ $white: #fff;
4343
.user-dropdown {
4444
.btn {
4545
height: 3rem;
46-
@media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
47-
padding: 0 0.5rem;
48-
}
46+
// @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
47+
// padding: 0 0.5rem;
48+
// }
4949
}
5050
}
5151
}

‎src/studio-header/CourseLockUp.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const CourseLockUp = ({
2424
)}
2525
>
2626
<a
27-
className="course-title-lockup w-25 mr-2"
27+
className="course-title-lockup mr-2"
2828
href={outlineLink}
2929
aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
3030
data-testid="course-lock-up-block"

‎src/studio-header/HeaderBody.jsx

+22-17
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const HeaderBody = ({
4444
);
4545

4646
return (
47-
<Container size="xl" className="px-4">
47+
<Container size="xl" className="px-2.5">
4848
<ActionRow as="header">
4949
{isHiddenMainMenu ? (
5050
<Row className="flex-nowrap ml-4">
@@ -64,29 +64,31 @@ const HeaderBody = ({
6464
Menu
6565
</Button>
6666
) : (
67-
<Row className="flex-nowrap m-0">
68-
{renderBrandNav}
69-
<CourseLockUp
70-
{...{
71-
outlineLink,
72-
number,
73-
org,
74-
title,
75-
}}
76-
/>
77-
</Row>
67+
<div className="w-25">
68+
<Row className="m-0 flex-nowrap">
69+
{renderBrandNav}
70+
<CourseLockUp
71+
{...{
72+
outlineLink,
73+
number,
74+
org,
75+
title,
76+
}}
77+
/>
78+
</Row>
79+
</div>
7880
)}
7981
{isMobile ? (
8082
<>
8183
<ActionRow.Spacer />
8284
{renderBrandNav}
8385
</>
8486
) : (
85-
<Nav data-testid="desktop-menu" className="ml-4">
87+
<Nav data-testid="desktop-menu" className="ml-2">
8688
{mainMenuDropdowns.map(dropdown => {
8789
const { id, buttonTitle, items } = dropdown;
8890
return (
89-
<NavDropdownMenu {...{ id, buttonTitle, items }} />
91+
<NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
9092
);
9193
})}
9294
</Nav>
@@ -113,9 +115,9 @@ const HeaderBody = ({
113115
HeaderBody.propTypes = {
114116
studioBaseUrl: PropTypes.string.isRequired,
115117
logoutUrl: PropTypes.string.isRequired,
116-
setModalPopupTarget: PropTypes.func.isRequired,
117-
toggleModalPopup: PropTypes.func.isRequired,
118-
isModalPopupOpen: PropTypes.bool.isRequired,
118+
setModalPopupTarget: PropTypes.func,
119+
toggleModalPopup: PropTypes.func,
120+
isModalPopupOpen: PropTypes.bool,
119121
number: PropTypes.string,
120122
org: PropTypes.string,
121123
title: PropTypes.string,
@@ -138,6 +140,9 @@ HeaderBody.propTypes = {
138140
};
139141

140142
HeaderBody.defaultProps = {
143+
setModalPopupTarget: null,
144+
toggleModalPopup: null,
145+
isModalPopupOpen: false,
141146
logo: null,
142147
logoAltText: null,
143148
number: '',

‎src/studio-header/MobileHeader.jsx

-3
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,6 @@ const MobileHeader = ({
3838
MobileHeader.propTypes = {
3939
studioBaseUrl: PropTypes.string.isRequired,
4040
logoutUrl: PropTypes.string.isRequired,
41-
setModalPopupTarget: PropTypes.func.isRequired,
42-
toggleModalPopup: PropTypes.func.isRequired,
43-
isModalPopupOpen: PropTypes.bool.isRequired,
4441
number: PropTypes.string,
4542
org: PropTypes.string,
4643
title: PropTypes.string,

‎src/studio-header/NavDropdownMenu.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ const NavDropdownMenu = ({
1313
<DropdownButton
1414
id={id}
1515
title={buttonTitle}
16-
variant="tertiary"
16+
variant="outline-primary"
17+
className="mr-2"
1718
>
1819
{items.map(item => (
1920
<Dropdown.Item
21+
key={`${item.title}-dropdown-item`}
2022
href={item.href}
2123
className="small"
2224
>

‎src/studio-header/StudioHeader.jsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,15 @@ const StudioHeader = ({
3636
};
3737

3838
return (
39-
<>
40-
<Responsive maxWidth={768}>
39+
<div className="studio-header">
40+
<a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
41+
<Responsive maxWidth={841}>
4142
<MobileHeader {...props} />
4243
</Responsive>
43-
<Responsive minWidth={769}>
44+
<Responsive minWidth={842}>
4445
<HeaderBody {...props} />
4546
</Responsive>
46-
</>
47+
</div>
4748
);
4849
};
4950

‎src/studio-header/StudioHeader.scss

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
$spacer: 1rem;
2+
$white: #FFFFFF;
3+
4+
.studio-header {
5+
position: relative;
6+
z-index: 1000;
7+
8+
height: 3.75rem;
9+
box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
10+
background: $white;
11+
12+
.btn-outline-primary {
13+
border-color: $white;
14+
}
15+
16+
.logo {
17+
display: block;
18+
box-sizing: content-box;
19+
position: relative;
20+
top: -.05em;
21+
height: 1.75rem;
22+
padding: $spacer 0;
23+
margin-right: $spacer;
24+
25+
img {
26+
display: block;
27+
height: 100%;
28+
}
29+
}
30+
31+
.course-title-lockup {
32+
@media only screen and (min-width: 769px) {
33+
padding: .5rem;
34+
padding-right: $spacer;
35+
border-right: 1px solid #E5E5E5;
36+
width: 70%;
37+
}
38+
39+
overflow: hidden;
40+
41+
span {
42+
color: #333333;
43+
white-space: nowrap;
44+
overflow: hidden;
45+
text-overflow: ellipsis;
46+
line-height: 1.375rem;
47+
}
48+
}
49+
}

‎src/studio-header/header.scss

-64
This file was deleted.

‎src/studio-header/messages.js

-100
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,6 @@
11
import { defineMessages } from '@edx/frontend-platform/i18n';
22

33
const messages = defineMessages({
4-
'header.links.content': {
5-
id: 'header.links.content',
6-
defaultMessage: 'Content',
7-
description: 'Label for Content menu trigger',
8-
},
9-
'header.links.settings': {
10-
id: 'header.links.settings',
11-
defaultMessage: 'Settings',
12-
description: 'Label for Settings menu trigger',
13-
},
14-
'header.links.tools': {
15-
id: 'header.links.content.tools',
16-
defaultMessage: 'Tools',
17-
description: 'Label for Tools menu trigger',
18-
},
19-
'header.links.outline': {
20-
id: 'header.links.outline',
21-
defaultMessage: 'Outline',
22-
description: 'Link to Studio Outline page',
23-
},
24-
'header.links.updates': {
25-
id: 'header.links.updates',
26-
defaultMessage: 'Updates',
27-
description: 'Link to Studio Updates page',
28-
},
29-
'header.links.pages': {
30-
id: 'header.links.pages',
31-
defaultMessage: 'Pages & Resources',
32-
description: 'Link to Studio Pages page',
33-
},
34-
'header.links.filesAndUploads': {
35-
id: 'header.links.filesAndUploads',
36-
defaultMessage: 'Files & Uploads',
37-
description: 'Link to Studio Files & Uploads page',
38-
},
39-
'header.links.textbooks': {
40-
id: 'header.links.textbooks',
41-
defaultMessage: 'Textbooks',
42-
description: 'Link to Studio Textbooks page',
43-
},
44-
'header.links.videoUploads': {
45-
id: 'header.links.videoUploads',
46-
defaultMessage: 'Video Uploads',
47-
description: 'Link to Studio Video Uploads page',
48-
},
49-
'header.links.scheduleAndDetails': {
50-
id: 'header.links.scheduleAndDetails',
51-
defaultMessage: 'Schedule & Details',
52-
description: 'Link to Studio Schedule & Details page',
53-
},
54-
'header.links.grading': {
55-
id: 'header.links.grading',
56-
defaultMessage: 'Grading',
57-
description: 'Link to Studio Grading page',
58-
},
59-
'header.links.courseTeam': {
60-
id: 'header.links.courseTeam',
61-
defaultMessage: 'Course Team',
62-
description: 'Link to Studio Course Team page',
63-
},
64-
'header.links.groupConfigurations': {
65-
id: 'header.links.groupConfigurations',
66-
defaultMessage: 'Group Configurations',
67-
description: 'Link to Studio Group Configurations page',
68-
},
69-
'header.links.proctoredExamSettings': {
70-
id: 'header.links.proctoredExamSettings',
71-
defaultMessage: 'Proctored Exam Settings',
72-
description: 'Link to Studio Proctored Exam Settings page',
73-
},
74-
'header.links.advancedSettings': {
75-
id: 'header.links.advancedSettings',
76-
defaultMessage: 'Advanced Settings',
77-
description: 'Link to Studio Advanced Settings page',
78-
},
79-
'header.links.certificates': {
80-
id: 'header.links.certificates',
81-
defaultMessage: 'Certificates',
82-
description: 'Link to Studio Certificates page',
83-
},
84-
'header.links.publisher': {
85-
id: 'header.links.publisher',
86-
defaultMessage: 'Publisher',
87-
description: 'Link to Publisher',
88-
},
89-
'header.links.import': {
90-
id: 'header.links.import',
91-
defaultMessage: 'Import',
92-
description: 'Link to Studio Import page',
93-
},
94-
'header.links.export': {
95-
id: 'header.links.export',
96-
defaultMessage: 'Export',
97-
description: 'Link to Studio Export page',
98-
},
99-
'header.links.checklists': {
100-
id: 'header.links.checklists',
101-
defaultMessage: 'Checklists',
102-
description: 'Link to Studio Checklists page',
103-
},
1044
'header.user.menu.studio': {
1055
id: 'header.user.menu.studio',
1066
defaultMessage: 'Studio Home',

0 commit comments

Comments
 (0)
Please sign in to comment.