Allow the admin to configure a SCSS variable with an admin setting

moodle-an-hochschulen · Feb 23, 2024 · 885db1c · 885db1c
1 parent 2763095
commit 885db1c
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 23 deletions.
diff --git a/lang/en/theme_boost_union_child.php b/lang/en/theme_boost_union_child.php
@@ -42,10 +42,13 @@
 $string['extrascssinheritancesetting'] = 'Extra SCSS inheritance';
 $string['extrascssinheritancesetting_desc'] = 'With this setting, you control if the extra SCSS code from Boost Union should be inherited or duplicated.';
 
-/**************************************************************
- * EXTENSION POINT:
- * Add your language strings for your settings here.
- *************************************************************/
+// Settings: Example tab.
+$string['exampletab'] = 'Example tab';
+// ... Section: Example.
+$string['exampleheading'] = 'Example heading';
+// ... ... Setting: Example setting to set a SCSS variable.
+$string['examplescssvariablesetting'] = 'Example SCSS variable setting';
+$string['examplescssvariablesetting_desc'] = 'With this setting, you see an example how to create a setting in a Boost Union Child theme which allows the admin to configure a SCSS variable without fiddling with SCSS. In this example, we chose to allow you to configure the $navbar-height variable.';
 
 // Privacy API.
 $string['privacy:metadata'] = 'The Boost Union Child theme does not store any personal data about any user.';
diff --git a/lib.php b/lib.php
@@ -77,11 +77,10 @@ function theme_boost_union_child_get_pre_scss($theme) {
     // And add Boost Union Child's pre SCSS file to the stack.
     $scss .= file_get_contents($CFG->dirroot . '/theme/boost_union_child/scss/pre.scss');
 
-    /**********************************************************
-     * EXTENSION POINT:
-     * Compose and add additional pre-SCSS code here.
-     * It will be added on top of Boost Union's pre-SCSS code.
-     *********************************************************/
+    // Set $navbar-height SCSS variable based on the examplescssvariable setting.
+    if (get_config('theme_boost_union_child', 'examplescssvariable')) {
+        $scss .= '$navbar-height: '.get_config('theme_boost_union_child', 'examplescssvariable').";\n";
+    }
 
     return $scss;
 }

diff --git a/settings.php b/settings.php
@@ -109,10 +109,29 @@
         // Add tab to settings page.
         $page->add($tab);
 
-        /**********************************************************
-         * EXTENSION POINT:
-         * Add your Boost Union Child settings here.
-         *********************************************************/
+
+        // Create example tab.
+        $tab = new admin_settingpage('theme_boost_union_child_example',
+            get_string('exampletab', 'theme_boost_union_child', null, true));
+
+        // Create example heading.
+        $name = 'theme_boost_union_child/exampleheading';
+        $title = get_string('exampleheading', 'theme_boost_union_child', null, true);
+        $setting = new admin_setting_heading($name, $title, null);
+        $tab->add($setting);
+
+        // Setting: Example setting to set a SCSS variable.
+        $name = 'theme_boost_union_child/examplescssvariable';
+        $title = get_string('examplescssvariablesetting', 'theme_boost_union_child', null, true);
+        $description = get_string('examplescssvariablesetting_desc', 'theme_boost_union_child', null, true);
+        $default = '60px';
+        $setting = new admin_setting_configtext($name, $title, $description, $default);
+        $setting->set_updatedcallback('theme_reset_all_caches');
+        $tab->add($setting);
+
+        // Add tab to settings page.
+        $page->add($tab);
+
 
         // Add settings page to the admin settings category.
         $ADMIN->add('theme_boost_union', $page);

diff --git a/tests/behat/theme_boost_union_child.feature b/tests/behat/theme_boost_union_child.feature
@@ -4,15 +4,18 @@ Feature: Extending the theme_boost_union plugin with a child theme
   As developer
   I need to be able to build several kinds of extensions to Boost Union
 
-  Scenario: Skeleton scenario
-    # This Behat scenario is just a skeleton which is ready for extension.
-    # Grunt in Github actions would not be happy with a feature file without any scenario.
-    # Thus, we log in as admin to keep it happy.
+  @javascript
+  Scenario Outline: Setting: Example setting to set a SCSS variable.
+    Given the following config values are set as admin:
+      | config              | value     | plugin                  |
+      | examplescssvariable | <setting> | theme_boost_union_child |
+    And the theme cache is purged and the theme is reloaded
     When I log in as "admin"
+    And I follow "Dashboard"
+    Then DOM element "nav.navbar" should have computed style "height" "<result>"
 
-    #################################################################
-    # EXTENSION POINT:
-    # Add your Behat scenarios here.
-    # They will be tested alongside Boost Union's
-    # scenarios in Github Actions.
-    #################################################################
+    Examples:
+      | setting | result |
+      # Boost core adds 1px to the $navbar-height setting when defining the navbar height.
+      |         | 61px   |
+      | 120px   | 121px  |