Skip to content

Commit 4ec69aa

Browse files
KelketekKelketek
committed
feat: OpenCraft Header.
1 parent 3be690b commit 4ec69aa

File tree

8 files changed

+204
-29
lines changed

8 files changed

+204
-29
lines changed

‎.env.development

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎env.config.jsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
// eslint-disable-next-line no-unused-vars",
2+
3+
import {PLUGIN_OPERATIONS} from '@openedx/frontend-plugin-framework';
4+
import React, {useContext} from "react";
5+
import {AppContext} from "@edx/frontend-platform/react";
6+
import Avatar from "@edx/frontend-component-header/Avatar";
7+
8+
const modifyLogoSrc = (widget) => {
9+
widget.content.src = `${config.LOGO_WHITE_URL}`;
10+
return widget;
11+
};
12+
13+
const modifyUserMenu = (widget) => {
14+
const {authenticatedUser, config} = useContext(AppContext);
15+
const originalRender = widget.RenderWidget
16+
widget.RenderWidget = (<>
17+
<div className="dropdown-header profile-label" role="heading" aria-level="1">
18+
<div className="d-flex">
19+
<Avatar size="1.5rem"/>
20+
<div className="pl-2 align-self-center">{authenticatedUser.username}</div>
21+
</div>
22+
</div>
23+
<div className="dropdown-divider"></div>
24+
{originalRender}
25+
</>)
26+
return widget
27+
}
28+
29+
const config = {
30+
ACCESS_TOKEN_COOKIE_NAME: "edx-jwt-cookie-header-payload",
31+
ACCOUNT_PROFILE_URL: "http://local.openedx.io:1995",
32+
ACCOUNT_SETTINGS_URL: "http://local.openedx.io:1997",
33+
BASE_URL: "local.openedx.io:8080",
34+
CREDENTIALS_BASE_URL: "http://local.openedx.io:18150",
35+
CSRF_TOKEN_API_PATH: "/csrf/api/v1/token",
36+
ECOMMERCE_BASE_URL: "http://local.openedx.io:18130",
37+
LANGUAGE_PREFERENCE_COOKIE_NAME: "openedx-language-preference",
38+
LMS_BASE_URL: "http://local.openedx.io:8000",
39+
STUDIO_BASE_URL: "http://studio.local.openedx.io:8001",
40+
LOGIN_URL: "http://local.openedx.io:8000/login",
41+
LOGOUT_URL: "http://local.openedx.io:8000/logout",
42+
MARKETING_SITE_BASE_URL: "http://local.openedx.io:8000",
43+
ORDER_HISTORY_URL: "localhost:1996/orders",
44+
REFRESH_ACCESS_TOKEN_ENDPOINT: "http://local.openedx.io:8000/login_refresh",
45+
SEGMENT_KEY: "null",
46+
SITE_NAME: "Open edX",
47+
USER_INFO_COOKIE_NAME: "edx-user-info",
48+
LOGO_URL: "/brand-openedx/logo.svg",
49+
LOGO_TRADEMARK_URL: "/brand-openedx/logo-trademark.svg",
50+
LOGO_WHITE_URL: "/brand-openedx/logo-white.svg",
51+
FAVICON_URL: "https://edx-cdn.org/v3/default/favicon.ico",
52+
pluginSlots: {
53+
'logo_slot': {
54+
keepDefault: true,
55+
plugins: [
56+
{
57+
op: PLUGIN_OPERATIONS.Modify,
58+
widgetId: 'default_contents',
59+
fn: modifyLogoSrc,
60+
},
61+
]
62+
},
63+
'desktop_user_menu_slot': {
64+
keepDefault: true,
65+
plugins: [
66+
{
67+
op: PLUGIN_OPERATIONS.Modify,
68+
widgetId: 'default_contents',
69+
fn: modifyUserMenu,
70+
}
71+
]
72+
},
73+
'mobile_user_menu_slot': {
74+
keepDefault: true,
75+
plugins: [
76+
{
77+
op: PLUGIN_OPERATIONS.Modify,
78+
widgetId: 'default_contents',
79+
fn: modifyUserMenu,
80+
}
81+
]
82+
}
83+
},
84+
};
85+
86+
export default config;

‎package-lock.json

Lines changed: 13 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
},
3030
"homepage": "https://github.com/openedx/frontend-component-header#readme",
3131
"devDependencies": {
32-
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
32+
"@edx/brand": "@edx/brand@git+https://github.com/open-craft/brand-openedx.git#fox/sandbox",
3333
"@edx/browserslist-config": "^1.1.1",
3434
"@edx/frontend-platform": "^8.3.1",
3535
"@edx/reactifex": "^2.1.1",

‎public/brand-openedx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit 4ad44efd59fb4a729c6428eb1ccd441a7d49d35d

‎src/custom.scss

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
$opencraft-green: #0F1F24 !default;
2+
$header-text-color: #ffffff !default;
3+
$header-link-hover-color: #8CAEB5 !default;
4+
$opencraft-action-button-color: #5EFFC9 !default;
5+
6+
7+
.site-header-desktop, .site-header-mobile {
8+
background: $opencraft-green;
9+
color: $header-text-color;
10+
.icon-button {
11+
color: $header-text-color;
12+
}
13+
.dropdown-header {
14+
color: $opencraft-green;
15+
&.profile-label {
16+
color: $opencraft-green;
17+
font-weight: bold;
18+
}
19+
}
20+
}
21+
22+
.site-header-desktop {
23+
24+
.main-nav {
25+
font-size: 1rem;
26+
.nav-link {
27+
color: $header-text-color;
28+
text-decoration: none;
29+
box-sizing: border-box;
30+
padding-left: 0;
31+
padding-right: 0;
32+
margin-left: 1rem;
33+
margin-right: 1rem;
34+
&:hover, &:active, &:focus {
35+
text-decoration: none;
36+
background: unset;
37+
}
38+
&:hover {
39+
color: $header-link-hover-color;
40+
}
41+
&.active {
42+
text-decoration: none;
43+
background: unset;
44+
box-shadow: 0 -.25rem 0 $opencraft-action-button-color inset;
45+
}
46+
}
47+
&.nav {
48+
flex-grow: 3;
49+
justify-content: end;
50+
}
51+
}
52+
.btn {
53+
&.btn-link, &.btn-outline-primary {
54+
&:hover {
55+
color: $header-link-hover-color;
56+
text-decoration: none;
57+
}
58+
}
59+
&.btn-outline-primary {
60+
background: $opencraft-action-button-color;
61+
color: $opencraft-green;
62+
&:focus {
63+
border: none;
64+
&::before {
65+
border: none;
66+
content: "";
67+
}
68+
}
69+
&:hover {
70+
color: $opencraft-green;
71+
}
72+
}
73+
font-size: 1rem;
74+
color: $header-text-color;
75+
}
76+
// We have to get a bit violent here, as the menu trigger itself is not able to be overwritten
77+
// as a slot. With some guerilla transformation work, we can make it close to our design, however.
78+
.menu-trigger.btn.btn-outline-primary {
79+
// Hide the username text upstream set in here.
80+
font-size: 0;
81+
background-color: unset;
82+
color: $header-text-color;
83+
border: none;
84+
&:focus {
85+
color: $opencraft-action-button-color;
86+
}
87+
.avatar {
88+
// Not this, though!
89+
font-size: 1rem;
90+
margin: 0 !important;
91+
}
92+
svg {
93+
height: 0;
94+
width: 0;
95+
}
96+
}
97+
}
98+

‎src/index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,5 @@ $rounded-pill: 50rem !default;
135135
border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
136136
}
137137
}
138+
139+
@import "./custom";

‎webpack.dev.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,7 @@ module.exports = createConfig('webpack-dev', {
1414
'@edx/frontend-component-header': path.resolve(__dirname, 'src'),
1515
},
1616
},
17+
devServer: {
18+
allowedHosts: "all"
19+
}
1720
});

0 commit comments

Comments
 (0)