Improve theme switching

dodona-edu · Jun 9, 2023 · 84bef60 · 84bef60
1 parent 22f0c75
commit 84bef60
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 43 deletions.
diff --git a/app/assets/javascripts/coding_scratchpad.ts b/app/assets/javascripts/coding_scratchpad.ts
@@ -1,6 +1,7 @@
 import { Papyros } from "@dodona/papyros";
 import { InputMode } from "@dodona/papyros";
 import { ProgrammingLanguage } from "@dodona/papyros";
+import { themeState } from "state/Theme";
 
 /**
  * Custom interface to not have to add the ace package as dependency
@@ -78,7 +79,7 @@ function initCodingScratchpad(programmingLanguage: ProgrammingLanguage): void {
                             maxHeight: "10vh"
                         }
                     },
-                    darkMode: window.dodona.darkMode
+                    darkMode: themeState.theme === "dark"
                 });
                 await papyros.launch();
             }

diff --git a/app/assets/javascripts/heatmap.ts b/app/assets/javascripts/heatmap.ts
@@ -6,6 +6,7 @@ import utc from "dayjs/plugin/utc";
 import minMax from "dayjs/plugin/minMax";
 import duration from "dayjs/plugin/duration";
 import isoWeek from "dayjs/plugin/isoWeek";
+import { themeState } from "state/Theme";
 dayjs.extend(utc);
 dayjs.extend(minMax);
 dayjs.extend(duration);
@@ -70,7 +71,7 @@ function initHeatmap(url: string, oldestFirst: boolean, year: string | undefined
 }
 
 function drawHeatmap(data: [dayjs.Dayjs, number][], oldestFirst: boolean, year: string | undefined): void {
-    const darkMode = window.dodona.darkMode;
+    const darkMode = themeState.theme === "dark";
     const emptyColor = darkMode ? "#303034" : "#fcfcff";
     const lowColor = darkMode ? "#4a4046" : "#ffd9df";
     const highColor = darkMode ? "#ffb2c0" : "#bc0049";

diff --git a/app/assets/javascripts/state/Theme.ts b/app/assets/javascripts/state/Theme.ts
@@ -14,6 +14,7 @@ class ThemeState extends State {
     }
 
     set selectedTheme(theme: ThemeOption) {
+        console.log("Setting theme to", theme);
         this._selectedTheme = theme;
         this.theme = theme === "auto" ? this.preferredTheme : theme;
     }
@@ -27,6 +28,9 @@ class ThemeState extends State {
     }
 
     set theme(theme: Theme) {
+        document.querySelectorAll(`[data-bs-theme="${this._theme}"]`).forEach(element => {
+            element.setAttribute("data-bs-theme", theme);
+        });
         document.documentElement.setAttribute("data-bs-theme", theme);
         this._theme = theme;
     }

diff --git a/app/assets/javascripts/visualisations/series_graph.ts b/app/assets/javascripts/visualisations/series_graph.ts
@@ -2,6 +2,7 @@
 // @ts-nocheck
 import * as d3 from "d3";
 import { initDatePicker } from "util.js";
+import { themeState } from "state/Theme";
 
 export type RawData = {
     // eslint-disable-next-line camelcase
@@ -67,7 +68,7 @@ export abstract class SeriesGraph {
         this.container = d3.select(this.selector);
 
         this.width = (this.container.node() as Element).getBoundingClientRect().width;
-        this.darkMode = window.dodona.darkMode;
+        this.darkMode = themeState.theme === "dark";
 
         d3.timeFormatDefaultLocale(this.d3Locale);
         if (data) {

diff --git a/app/controllers/activities_controller.rb b/app/controllers/activities_controller.rb
@@ -151,6 +151,7 @@ def show
   end
 
   def description
+    Rails.logger.info "Description: #{params}"
     respond_to :html
     raise Pundit::NotAuthorizedError, 'Not allowed' unless @activity.access_token == params[:token]
 

diff --git a/app/helpers/activity_helper.rb b/app/helpers/activity_helper.rb
@@ -62,11 +62,12 @@ def activity_description_footnotes_and_first_image(activity)
   end
 
   def description_iframe(activity)
-    dark = current_user.present? && session[:dark]
+    theme = session[:theme] || 'auto'
     id = "activity-description-#{activity.id}"
     url = description_activity_url(activity,
                                    token: activity.access_token,
-                                   dark: dark).html_safe
+                                   theme: theme,
+                                   dark: true).html_safe
     resizeframe = %{
       window.iFrameResize({
           onResized: dodona.afterResize,

diff --git a/app/javascript/packs/frame.js b/app/javascript/packs/frame.js
@@ -15,11 +15,13 @@ window.bootstrap = bootstrap;
 
 import { initTooltips, ready } from "util.js";
 import { initClipboard } from "copy";
+import { themeState } from "state/Theme";
 
 // Use a global dodona object to prevent polluting the global na
 const dodona = window.dodona || {};
 dodona.initTooltips = initTooltips;
 dodona.ready = ready;
+dodona.setTheme = theme => themeState.selectedTheme = theme;
 window.dodona = dodona;
 
 // Initialize clipboard.js

diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -61,7 +61,7 @@
               <% if Export.where(user: current_user).any? %>
                 <li><%= link_to t("layout.menu.my_exports"), exports_path, class: "dropdown-item"  %></li>
               <% end %>
-              <% if policy(:pages).toggle_demo_mode? || policy(:pages).toggle_dark_mode? %>
+              <% if policy(:pages).toggle_demo_mode? || policy(:pages).set_theme? %>
                 <li role="separator" class="dropdown-divider"></li>
               <% end %>
               <% if policy(:pages).toggle_demo_mode? %>

diff --git a/app/views/layouts/frame.html.erb b/app/views/layouts/frame.html.erb
@@ -11,22 +11,14 @@
   <meta property="og:image" content="<%= root_url(locale: nil) %>icon.png">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
   <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet" type='text/css'>
-  <% if params[:dark].nil? %>
-    <%= stylesheet_link_tag "application" %>
-    <script>
-      const lightModeCSS = '<%= stylesheet_link_tag "application", media: "all" %>';
-      document.addEventListener("DOMContentLoaded", () => {
-        if (window.matchMedia("(prefers-color-scheme)").media === "not all") {
-          document.head.insertAdjacentHTML("beforeend", lightModeCSS);
-        }
-      });
-    </script>
-  <% else %>
-    <%= stylesheet_link_tag "application#{'-dark' if params[:dark] == 'true'}", media: 'all' %>
-  <% end %>
+
   <%= javascript_include_tag 'frame' %>
   <%= javascript_include_tag 'commons' %>
   <%= javascript_include_tag 'runtime' %>
+  <%= stylesheet_link_tag "application" %>
+  <script>
+    window.dodona.setTheme("<%= params[:theme] || "auto" %>");
+  </script>
   <%= yield :javascripts %>
 </head>
 <body>

diff --git a/app/views/layouts/lti.html.erb b/app/views/layouts/lti.html.erb
@@ -8,32 +8,14 @@
   <title>Dodona<%= " - #{@title}" if @title %></title>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">
   <link href="https://cdn.materialdesignicons.com/5.2.45/css/materialdesignicons.min.css" rel="stylesheet" type='text/css'>
-  <% if session[:dark].nil? %>
-    <%= stylesheet_link_tag "application" %>
-    <script>
-      window.dodona = window.dodona || {};
-      window.dodona.setTheme("light");
-      window.dodona.hideDrawer = true;
-
-      const lightModeCSS = '<%= stylesheet_link_tag "application", media: "all" %>';
-      document.addEventListener("DOMContentLoaded", () => {
-          if (window.matchMedia("(prefers-color-scheme)").media === "not all") {
-              document.head.insertAdjacentHTML("beforeend", lightModeCSS);
-          }
-      });
-    </script>
-  <% else %>
-    <%= stylesheet_link_tag "application#{session[:dark] ? '-dark' : ''}", media: 'all' %>
-    <script>
-      window.dodona = window.dodona || {};
-      window.dodona.darkMode = <%= session.include?(:dark) && session[:dark] %>;
-      window.dodona.hideDrawer = true;
-    </script>
-  <% end %>
 
   <%= javascript_include_tag 'application_pack' %>
   <%= javascript_include_tag 'commons' %>
   <%= javascript_include_tag 'runtime' %>
+  <%= stylesheet_link_tag "application" %>
+  <script>
+    window.dodona.setTheme("<%= session[:theme] || "auto" %>");
+  </script>
   <%= yield :javascripts %>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>

diff --git a/test/controllers/activities_controller_test.rb b/test/controllers/activities_controller_test.rb
@@ -706,7 +706,7 @@ class ExerciseDescriptionTest < ActionDispatch::IntegrationTest
   test 'iframe should set dark mode to false when there is no logged in user' do
     get activity_url(@exercise).concat('/')
 
-    assert_includes response.body, description_activity_url(@exercise, token: @exercise.access_token, dark: false)
+    assert_includes response.body, description_activity_url(@exercise, token: @exercise.access_token, theme: 'light')
   end
 
   test 'script in exercise description should not be present in the page' do

diff --git a/test/javascript/visualisations.test.ts b/test/javascript/visualisations.test.ts
@@ -32,7 +32,6 @@ beforeAll(() => {
                 "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"]
         }[arg]) as string[]);
     I18n.locale = "nl";
-    window.dodona = { darkMode: false };
 
 
     document.body.innerHTML = "" +