diff --git a/CHANGES.md b/CHANGES.md index 3e6370926ab..a29ea737590 100644 --- a/CHANGES.md +++ b/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. diff --git a/README.md b/README.md index 29816c5ed17..fc1c434fcd2 100644 --- a/README.md +++ b/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 diff --git a/lang/en/theme_boost_union.php b/lang/en/theme_boost_union.php index 6b54d3719fd..89f1510285f 100644 --- a/lang/en/theme_boost_union.php +++ b/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.'; diff --git a/lib.php b/lib.php index 988af70528a..f3cc88ca2bb 100644 --- a/lib.php +++ b/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); diff --git a/locallib.php b/locallib.php index 7b15874aecb..76ff41ea3d8 100644 --- a/locallib.php +++ b/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. * diff --git a/settings.php b/settings.php index 42fd38b58a5..d6b404e4111 100644 --- a/settings.php +++ b/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); diff --git a/tests/behat/theme_boost_union_looksettings_sitebranding.feature b/tests/behat/theme_boost_union_looksettings_sitebranding.feature index 18e98cd0779..c997dbbe9b8 100644 --- a/tests/behat/theme_boost_union_looksettings_sitebranding.feature +++ b/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 | | 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 "" "" + 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"