Skip to content

Commit 0f0ddd7

Browse files
arbiraliarbirali
authored
Authoring theme toggle clean (#232)
* feat: add toggle theme to authoring mfe * fix: Feedback Implementations * fix: linter fixes * chore: code cleaned -- feedback implementations * refactor: common settings moved to respected file | Feedback
1 parent b8e5d84 commit 0f0ddd7

11 files changed

Lines changed: 546 additions & 43 deletions

File tree

‎tutorindigo/patches/openedx-cms-common-settings‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
if 'base_vendor' in PIPELINE['JAVASCRIPT']:
2+
PIPELINE['JAVASCRIPT']['base_vendor']['source_filenames'] += [
3+
'indigo/js/dark-theme.js'
4+
]

‎tutorindigo/patches/openedx-common-assets-settings‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
dark_theme_filepath = ['indigo/js/dark-theme.js']
2+
for filename in ['base_application', 'application', 'certificates_wv']:
3+
if filename in PIPELINE['JAVASCRIPT']:
4+
PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath
5+
6+
if (
7+
'base_application' not in PIPELINE['JAVASCRIPT']
8+
and 'base_vendor' in PIPELINE['JAVASCRIPT']
9+
):
10+
PIPELINE['JAVASCRIPT']['base_vendor']['source_filenames'] += dark_theme_filepath

‎tutorindigo/patches/openedx-lms-common-settings‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,6 @@
22
# (e.g. ace_common, common/templates) which are otherwise found first by the app
33
# directories loader before the comprehensive theme loader gets a chance.
44
TEMPLATES[0]["DIRS"].insert(0, "/openedx/themes/indigo/lms/templates")
5+
6+
MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }}
7+
MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = {{ INDIGO_FOOTER_NAV_LINKS }}

‎tutorindigo/patches/openedx-lms-development-settings‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
javascript_files = ['base_application', 'application', 'certificates_wv']
2+
dark_theme_filepath = ['indigo/js/dark-theme.js']
3+
4+
for filename in javascript_files:
5+
if filename in PIPELINE['JAVASCRIPT']:
6+
PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath

‎tutorindigo/plugin.py‎

Lines changed: 36 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ def _override_openedx_docker_image(
114114
"profile",
115115
"account",
116116
"discussions",
117+
"authoring",
117118
]
118119

119120
for mfe in indigo_styled_mfes:
@@ -135,48 +136,6 @@ def _override_openedx_docker_image(
135136
)
136137
)
137138

138-
# Include js file in lms main.html, main_django.html, and certificate.html
139-
140-
hooks.Filters.ENV_PATCHES.add_items(
141-
[
142-
# for production
143-
(
144-
"openedx-common-assets-settings",
145-
"""
146-
javascript_files = ['base_application', 'application', 'certificates_wv']
147-
dark_theme_filepath = ['indigo/js/dark-theme.js']
148-
149-
for filename in javascript_files:
150-
if filename in PIPELINE['JAVASCRIPT']:
151-
PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath
152-
""",
153-
),
154-
# for development
155-
(
156-
"openedx-lms-development-settings",
157-
"""
158-
javascript_files = ['base_application', 'application', 'certificates_wv']
159-
dark_theme_filepath = ['indigo/js/dark-theme.js']
160-
161-
for filename in javascript_files:
162-
if filename in PIPELINE['JAVASCRIPT']:
163-
PIPELINE['JAVASCRIPT'][filename]['source_filenames'] += dark_theme_filepath
164-
165-
MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }}
166-
MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = {{ INDIGO_FOOTER_NAV_LINKS }}
167-
""",
168-
),
169-
(
170-
"openedx-lms-production-settings",
171-
"""
172-
MFE_CONFIG['INDIGO_ENABLE_DARK_TOGGLE'] = {{ INDIGO_ENABLE_DARK_TOGGLE }}
173-
MFE_CONFIG['INDIGO_FOOTER_NAV_LINKS'] = {{ INDIGO_FOOTER_NAV_LINKS }}
174-
""",
175-
),
176-
]
177-
)
178-
179-
180139
# Add react components and patches from tutor-indigo
181140
for path in itertools.chain(
182141
glob(
@@ -296,6 +255,41 @@ def _override_openedx_docker_image(
296255
]
297256
)
298257

258+
PLUGIN_SLOTS.add_items(
259+
[
260+
(
261+
"authoring",
262+
"org.openedx.frontend.layout.studio_header_search_button_slot.v1",
263+
"""
264+
{
265+
op: PLUGIN_OPERATIONS.Insert,
266+
widget: {
267+
priority: 10,
268+
id: 'custom_notification_tray_before',
269+
type: DIRECT_PLUGIN,
270+
RenderWidget: ToggleThemeButton,
271+
},
272+
},
273+
""",
274+
),
275+
(
276+
"authoring",
277+
"org.openedx.frontend.layout.studio_footer.v1",
278+
"""
279+
{
280+
op: PLUGIN_OPERATIONS.Insert,
281+
widget: {
282+
id: 'read_theme_cookie',
283+
type: DIRECT_PLUGIN,
284+
priority: 2,
285+
RenderWidget: AddDarkTheme,
286+
},
287+
},
288+
""",
289+
),
290+
]
291+
)
292+
299293
paragon_theme_urls = {
300294
"variants": {
301295
"light": {

‎tutorindigo/templates/indigo/cms/static/js/dark-theme.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
$(document).ready(function() {
2+
'use strict';
3+
4+
const themeCookie = 'selected-paragon-theme-variant';
5+
6+
function applyThemeOnPage(){
7+
const theme = $.cookie(themeCookie);
8+
9+
if (theme === 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
10+
$('body').addClass("indigo-dark-theme");
11+
$("#toggle-switch-input").prop("checked", true);
12+
}
13+
{% if INDIGO_ENABLE_DARK_TOGGLE %}
14+
$('body').toggleClass("indigo-dark-theme", theme === 'dark'); // append or remove dark-class based on cookie-value
15+
{% endif %}
16+
updateAccessibility();
17+
}
18+
19+
function setThemeToggleBtnState(){
20+
const theme = $.cookie(themeCookie);
21+
$("#toggle-switch-input").prop("checked", theme === 'dark');
22+
updateAccessibility();
23+
}
24+
25+
function updateAccessibility() {
26+
const theme = $.cookie(themeCookie);
27+
const textWrapper = $('#theme-label');
28+
if (theme === 'dark') {
29+
textWrapper.text('Switch to Light Mode');
30+
textWrapper.attr('aria-checked', 'true');
31+
} else {
32+
textWrapper.text('Switch to Dark Mode');
33+
textWrapper.attr('aria-checked', 'false');
34+
}
35+
}
36+
37+
// Listener for updating the theme inside an iframe
38+
window.addEventListener("message", function(e){
39+
if (e.data && e.data["indigo-toggle-dark"]){
40+
applyThemeOnPage();
41+
}
42+
});
43+
44+
applyThemeOnPage(); // loading theme on page load
45+
setThemeToggleBtnState(); // check/uncheck toggle btn based on theme
46+
});

‎tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_extras.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import "fonts";
2+
@import "dark/dark";
23

3-
#main{
4+
#main {
45
background-color: $secondary;
56
}

‎tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ $m-blue-d6: mix(rgb(42, 134, 226), $primary, 40%) !default;
1111

1212
$uxpl-blue-hover-active: lighten($primary, 7%) !default;
1313

14+
$body-bg-d: #0d0d0e;
15+
$text-color-d: #f8f8f8;
16+
$primary-d: #aec7f6;
17+
$light-overlay-d: #292a2c;
18+
$drop-down-menu-bg-d: #36383b;
19+
20+
$primary-base: $primary;
21+
1422
$serif: 'Inter';
1523
$f-sans-serif: 'Inter', 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
1624
$font-family-title: 'Inter';

‎tutorindigo/templates/indigo/cms/static/sass/partials/cms/theme/dark/_dark.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
body.indigo-dark-theme {
2+
@import "./home";
3+
@import "./xblock";
4+
5+
background: $body-bg-d;
6+
color: $text-color-d;
7+
}

0 commit comments

Comments
 (0)