Building feature for maxwidth of logo if too broad in theme settings.…

… Issue moodle-an-hochschulen#544

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2024-10-25 - Improvement: Limit the max-width of the navbar logo if it is too broad or has a special aspect ratio, resolves #544.
 * 2024-10-24 - Release: Change support thread URL in README to a tiny URL.
 * 2024-10-24 - Tests: Try to fix Behat error 'Warning: Undefined array key 1' on Moodle 4.5, resolves #734.
 

README.md

@@ -109,6 +109,10 @@ Here, you can upload a full logo to be used as decoration. This image is especia
 
 Here, you can upload a compact version of the same logo as above, such as an emblem, shield or icon. This image is especially used in the navigation bar at the top of each Moodle page. The image should be clear even at small sizes.
 
+###### Logo Maxwidth
+
+If the logo for the navbar on the top left is too wide or has a special aspect ratio, you can limit the logo's maximum width. Use css definition to limit the max-width.
+
 ##### Favicon
 
 ###### Favicon

lang/en/theme_boost_union.php

@@ -170,6 +170,9 @@
 $string['bootstrapcolordangersetting_desc'] = 'The Bootstrap color for "Danger"';
 // ... Section: Navbar.
 $string['navbarheading'] = 'Navbar';
+// ... Section: Navbar logo max width.
+$string['maxlogowidth'] = 'Maximal width of logo';
+$string['maxlogowidth_desc'] = 'If the logo is too broad or has a special aspect ratio, you can set the maximal width of the logo in the navbar header. Use CSS notation. Possible values can have some digits and end with `px`, `%`, `vw` or the field can be left empty, if you do not want to use this setting.';
 // ... ... Setting: Navbar color.
 $string['navbarcolorsetting'] = 'Navbar color';
 $string['navbarcolorsetting_desc'] = 'With this setting, you can change the navbar color from the default light navbar to a dark one or a colored one.';

lib.php

@@ -365,6 +365,9 @@ function theme_boost_union_get_extra_scss($theme) {
     // Setting: Activity icon purpose.
     $content .= theme_boost_union_get_scss_for_activity_icon_purpose($theme);
 
+    // Setting: Navbar and icon styles.
+    $content .= theme_boost_union_get_scss_navbar($theme);
+
     // Setting: Mark external links.
     $content .= theme_boost_union_get_scss_to_mark_external_links($theme);
 

locallib.php

@@ -1669,6 +1669,26 @@ function theme_boost_union_get_scss_courseoverview_block($theme) {
     return $scss;
 }
 
+
+/**
+ * Returns the SCSS code to be used in the navbar. The first usage is a logo icon that is possibly too broad and needs
+ * reduced to fit the navbar. See theme_boost_union_maxlogowidth for further details
+ *
+ * @param theme_config $theme The theme config object.
+ * @return string
+ */
+function theme_boost_union_get_scss_navbar($theme) {
+    // Initialize SCSS snippet.
+    $scss = '';
+
+    // Set variables which are read in settings by the logo maxwidth values.
+    if (get_config('theme_boost_union', 'maxlogowidth')) {
+        $scss .= ".navbar-brand img.logo{max-width:".get_config('theme_boost_union', 'maxlogowidth').";height:auto;}\n";
+    }
+
+    return $scss;
+}
+
 /**
  * Helper function which returns an array of login methods on the login page.
  *

settings.php

@@ -126,6 +126,10 @@
         // (with 3 or 4 digits) or a viewport width number (from 0 to 100).
         $widthregex = '/^((\d{1,2}|100)%)|((\d{1,2}|100)vw)|(\d{3,4}px)$/';
 
+        // Prepare regular expression for checking if the value is a percent number (from 0% to 100%) or a pixel number
+        // (with 2 or 3 digits) or a viewport width number (from 0 to 100). Additionally the field can be left blank.
+        $smallsizeoremptyregex = '/^((\d{1,2}|100)%)|((\d{1,2}|100)vw)|(\d{2,3}px)|(^(?!.*\S))$/';
+
         // Create Look settings page with tabs
         // (and allow users with the theme/boost_union:configure capability to access it).
         $page = new theme_boost_admin_settingspage_tabs('theme_boost_union_look',
@@ -396,6 +400,15 @@
         $setting->set_updatedcallback('theme_reset_all_caches');
         $tab->add($setting);
 
+        // Setting: add extra SCSS if logo icon is too broad / wrong aspect ratio.
+        $name = 'theme_boost_union/maxlogowidth';
+        $title = get_string('maxlogowidth', 'theme_boost_union', null, true);
+        $description = get_string('maxlogowidth_desc', 'theme_boost_union', null, true);
+        $default = '';
+        $setting = new admin_setting_configtext($name, $title, $description, $default, $smallsizeoremptyregex, 6);
+        $setting->set_updatedcallback('theme_reset_all_caches');
+        $tab->add($setting);
+
         // Create favicon heading.
         $name = 'theme_boost_union/faviconheading';
         $title = get_string('faviconheading', 'theme_boost_union', null, true);

tests/behat/theme_boost_union_looksettings_sitebranding.feature

@@ -100,6 +100,45 @@ Feature: Configuring the theme_boost_union plugin for the "Site branding" tab on
     And I am on site homepage
     Then ".navbar .logo" "css_element" should not exist
 
+  @javascript
+  Scenario Outline: Setting: Logo max-width - limit logo width readout from theme_config entry
+    Given the following config values are set as admin:
+      | config                 | value      | plugin            |
+      | maxlogowidth           | <css-rule> | theme_boost_union |
+    And the theme cache is purged and the theme is reloaded
+    When I log in as "student1"
+    And I am on site homepage
+    Then DOM element ".navbar-brand .logo" should have computed style "<css-name>" "<css-rule>"
+    And DOM element ".navbar-brand .logo" should have computed style "height" "auto"
+
+    Examples:
+      | css-name   | css-rule  |
+      | max-width  | 100px     |
+      | max-width  | 10vw      |
+      | max-width  | 13%       |
+
+  @javascript
+  Scenario: Setting: Logo max-width - limit logo width readout from theme_config entry (countercheck)
+    When I log in as "admin"
+    And I navigate to "Appearance > Boost Union > Look" in site administration
+    And I click on "Site branding" "link" in the "#adminsettings .nav-tabs" "css_element"
+    And I set the field "Maximal width of logo" to ""
+    And I press "Save changes"
+    And I am on site homepage
+    And the theme cache is purged and the theme is reloaded
+    Then DOM element ".navbar-brand .logo" should have computed style "height" "100%"
+
+  @javascript
+  Scenario: Setting: Logo max-width - limit logo through admin settings - check regex to limit entry (countercheck)
+    When I log in as "admin"
+    And I navigate to "Appearance > Boost Union > Look" in site administration
+    And I click on "Site branding" "link" in the "#adminsettings .nav-tabs" "css_element"
+    And I set the field "Maximal width of logo" to "2px"
+    And I press "Save changes"
+    Then I should not see "Changes saved"
+    And I should see "Some settings were not changed due to an error."
+    And I should see "This value is not valid"
+
   @javascript @_file_upload
   Scenario: Setting: Compact logo - Upload a PNG compact logo to the theme and check that it is resized
     When I log in as "admin"