Merge pull request #205 from NinaHerrmann/feature/uploadrawmobilecss

Added Tab and setting to upload mobilcss rules

CHANGES.md

@@ -6,6 +6,7 @@ Changes
 
 ### Unreleased
 
+* 2023-01-30 - Feature: Allow the admin to set CSS rules for the Moodle Mobile App, solves #195.
 * 2023-01-28 - Improvement: Do not resize SVG logo files during serving, helps to solve #160.
 * 2023-01-26 - Feature: Add dedicated logo settings to Boost Union, solves #211.
 * 2023-01-22 - Feature: Allow the admin to change the H5P content bank width, solves #201.

README.md

@@ -208,6 +208,14 @@ With this setting you can upload custom fonts to the theme. The advantage of upl
 
 Moodle core ships with FontAwesome 4 icons which are fine, but FontAwesome has evolved since then. If you want to use more recent FontAwesome icons, you can do this with this setting. As soon as you choose another version than FontAwesome 4, additional settings will appear where you can upload more recent FontAwesome versions.
 
+#### Tab "Mobile app"
+
+##### Mobile appearance 
+
+###### Additional CSS for Mobile app
+
+With this setting, you can write custom CSS code to customise your mobile app interface. The CSS code will be only added to the Mobile app depiction of this Moodle instance and will not be shown in the webbrowser version.
+
 ### Settings page "Feel"
 
 #### Tab "Navigation"

lang/en/theme_boost_union.php

@@ -269,6 +269,16 @@
 $string['fontawesomecheck-fa6free-newstuff-description'] = 'Newer FontAwesome versions ship with additional icons compared to the FontAwesome 4 iconset. If you see a virus icon on the left hand side, your FontAwesome 6 version is properly showing new icons which are new in FontAwesome 6.';
 $string['fontawesomecheck-fa6free-filter-title'] = 'FontAwesome filter';
 $string['fontawesomecheck-fa6free-filter-description'] = 'As you have the FontAwesome filter plugin installed, you should be sure that the filter handles the new FontAwesome 6 icons correctly as well. If you see a users icon on the left hand side, the filter is working properly with the FontAwesome 6 version icons.';
+// Settings: Mobile app tab.
+$string['mobiletab'] = 'Mobile app';
+// ... Section: Mobile appearance.
+$string['mobileappearanceheading'] = 'Mobile appearance';
+// ... ... Setting: Additional CSS for Mobile app.
+$string['mobilecss'] = 'Additional CSS for Mobile app';
+$string['mobilecss_desc'] = 'With this setting, you can write custom CSS code to customise your mobile app interface. The CSS code will be only added to the Mobile app depiction of this Moodle instance and will not be shown in the webbrowser version. Read more about this feature in the <a href="https://moodledev.io/general/app/customisation/remote-themes#how-do-remote-themes-work">Moodle dev docs</a>.';
+$string['mobilecss_set'] = 'As soon as you add any CSS code to this setting and save the setting, the <a href="{$a->url}">Moodle core setting <em>mobilecssurl</em></a> will be automatically set to a URL of the Boost Union theme.';
+$string['mobilecss_overwrite'] = 'As soon as you add any CSS code to this setting and save the setting, the <a href="{$a->url}">Moodle core setting <em>mobilecssurl</em></a> will be automatically overwritten with a URL of the Boost Union theme. Currently this setting is set to <a href="{$a->value}">{$a->value}</a>.';
+$string['mobilecss_donotchange'] = 'This step is necessary to ship the CSS code to the Mobile app. Do not change the URL there unless you really want to remove the CSS code from the Mobile app again.';
 
 // Settings: Feel page.
 $string['configtitlefeel'] = 'Feel';

locallib.php

@@ -1285,3 +1285,31 @@ function theme_boost_union_get_course_header_image_url() {
     // As no picture was found, return null.
     return null;
 }
+
+/**
+ * Helper function which sets the URL to the CSS file as soon as the theme's mobilescss setting has any CSS code.
+ * It's meant to be called as callback when changing the admin setting only.
+ * *
+ * @throws coding_exception
+ * @throws dml_exception
+ * @throws moodle_exception
+ */
+function theme_boost_union_set_mobilecss_url() {
+    // Check if the admin has set any CSS code for the Mobile app.
+    $csscode = get_config('theme_boost_union', 'mobilescss');
+    if (!empty($csscode)) {
+        // Build the Mobile app CSS file URL and especially add the current time as rev parameter.
+        // This parameter isn't the theme revision as the theme cache is not cleared when this setting is stored.
+        // It is just the time when the setting is saved.
+        // This is the best we can do to make the Mobile app load the new styles when needed.
+        $mobilescssurl = new moodle_url('/theme/boost_union/mobile/styles.php', array('rev' => time()));
+
+        // Set the $CFG->mobilecssurl setting.
+        set_config('mobilecssurl', $mobilescssurl->out());
+
+        // Otherwise.
+    } else {
+        // Clear the $CFG->mobilecssurl setting.
+        set_config('mobilecssurl', '');
+    }
+}

mobile/styles.php

@@ -0,0 +1,65 @@
+<?php
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Theme Boost Union - Mobile App styles serving.
+ *
+ * @package    theme_boost_union
+ * @copyright  2023 Nina Herrmann <[email protected]>
+ *             on behalf of Alexander Bias, lern.link GmbH <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+// Do not show any debug messages and any errors which might break the shipped CSS.
+define('NO_DEBUG_DISPLAY', true);
+
+// Do not do any upgrade checks here.
+define('NO_UPGRADE_CHECK', true);
+
+// Require config.
+// @codingStandardsIgnoreStart
+// Let codechecker ignore the next line because otherwise it would complain about a missing login check
+// after requiring config.php which is really not needed.require('../config.php');
+require(__DIR__.'/../../../config.php');
+// @codingStandardsIgnoreEnd
+
+// Require css sending libraries.
+require_once($CFG->dirroot.'/lib/csslib.php');
+require_once($CFG->dirroot.'/lib/configonlylib.php');
+
+// Initialize SCSS code.
+$scss = '';
+
+// Get the raw SCSS from the admin setting,
+// throw an exception if get_config throws an exception which happens only if something is really wrong.
+try {
+    // Note: In the current state of implementation, this setting only allows the usage of custom CSS, not SCSS.
+    // There is a follow-up issue on Github to add SCSS support.
+    // However, to ease this future improvement, the setting has already been called 'mobilescss'.
+    $configmobilescss = get_config('theme_boost_union', 'mobilescss');
+
+    // Catch the exception.
+} catch (\Exception $e) {
+    // Just die, there is no use to output any error message, it would even be counter-productive if the browser
+    // tries to interpret it as CSS code.
+    die;
+}
+
+// Always add the CSS code even if it is empty.
+$scss .= $configmobilescss;
+
+// Send out the resulting CSS code. The theme revision will be set as etag to support the browser caching.
+css_send_cached_css_content($scss, theme_get_revision());

settings.php

@@ -830,6 +830,52 @@
         $page->add($tab);
 
 
+        // Create mobile app tab.
+        $tab = new admin_settingpage('theme_boost_union_look_mobile',
+                get_string('mobiletab', 'theme_boost_union', null, true));
+
+        // Create Mobile appearance heading.
+        $name = 'theme_boost_union/mobileappearanceheading';
+        $title = get_string('mobileappearanceheading', 'theme_boost_union', null, true);
+        $setting = new admin_setting_heading($name, $title, null);
+        $tab->add($setting);
+
+        // Setting: Additional CSS for Mobile app.
+        $name = 'theme_boost_union/mobilescss';
+        $title = get_string('mobilecss', 'theme_boost_union', null, true);
+        $description = get_string('mobilecss_desc', 'theme_boost_union', null, true);
+        $mobilecssurl = new moodle_url('/admin/settings.php', array('section' => 'mobileappearance'));
+        // If another Mobile App CSS URL is set already (in the $CFG->mobilecssurl setting), we add a warning to the description.
+        if (isset($CFG->mobilecssurl) && !empty($CFG->mobilecssurl) &&
+                strpos($CFG->mobilecssurl, '/boost_union/mobile/styles.php') == false) {
+            $mobilescssnotification = new \core\output\notification(
+                    get_string('mobilecss_overwrite', 'theme_boost_union',
+                            array('url' => $mobilecssurl->out(), 'value' => $CFG->mobilecssurl)).' '.
+                    get_string('mobilecss_donotchange', 'theme_boost_union'),
+                    \core\output\notification::NOTIFY_WARNING);
+            $mobilescssnotification->set_show_closebutton(false);
+            $description .= $OUTPUT->render($mobilescssnotification);
+
+            // Otherwise, we just add a note to the description.
+        } else {
+            $mobilescssnotification = new \core\output\notification(
+                    get_string('mobilecss_set', 'theme_boost_union',
+                            array('url' => $mobilecssurl->out())).' '.
+                    get_string('mobilecss_donotchange', 'theme_boost_union'),
+                    \core\output\notification::NOTIFY_INFO);
+            $mobilescssnotification->set_show_closebutton(false);
+            $description .= $OUTPUT->render($mobilescssnotification);
+        }
+        // Using admin_setting_scsscode is not 100% right here as this setting does not support SCSS.
+        // However, is shouldn't harm if the CSS code is parsed by the setting.
+        $setting = new admin_setting_scsscode($name, $title, $description, '', PARAM_RAW);
+        $setting->set_updatedcallback('theme_boost_union_set_mobilecss_url');
+        $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);
 

tests/behat/theme_boost_union_looksettings_mobile.feature

@@ -0,0 +1,58 @@
+@theme @theme_boost_union @theme_boost_union_looksettings @theme_boost_union_looksettings_mobile
+Feature: Configuring the theme_boost_union plugin for the "Mobile app" tab on the "Look" page
+  In order to use the features
+  As admin
+  I need to be able to configure the theme Boost Union plugin
+
+  Background:
+    Given the following config values are set as admin:
+      | config                 | value |
+      | enablemobilewebservice | yes   |
+
+  Scenario: Setting: Additional CSS for Mobile app - Insert CSS code and test that the mobilecssurl URL is set correctly.
+    When I log in as "admin"
+    And I navigate to "Appearance > Boost Union > Look" in site administration
+    And I click on "Mobile app" "link" in the "#adminsettings .nav-tabs" "css_element"
+    And I set the field "Additional CSS for Mobile app" to multiline:
+    """
+    a.test { font-size: 16px; }
+    """
+    And I press "Save changes"
+    And I navigate to "General > Mobile app > Mobile appearance" in site administration
+    Then "//div[@id='admin-mobilecssurl']//input[contains(@value, 'theme/boost_union/mobile/styles.php')]" "xpath_element" should exist
+
+  Scenario: Setting: Additional CSS for Mobile app - Insert CSS code and test that the mobilecssurl URL is overwritten correctly.
+    Given the following config values are set as admin:
+      | config       | value                      |
+      | mobilecssurl | https://mymoodle/mycss.css |
+    When I log in as "admin"
+    And I navigate to "Appearance > Boost Union > Look" in site administration
+    And I click on "Mobile app" "link" in the "#adminsettings .nav-tabs" "css_element"
+    And I set the field "Additional CSS for Mobile app" to multiline:
+    """
+    a.test { font-size: 16px; }
+    """
+    And I press "Save changes"
+    And I navigate to "General > Mobile app > Mobile appearance" in site administration
+    Then "//div[@id='admin-mobilecssurl']//input[contains(@value, 'theme/boost_union/mobile/styles.php')]" "xpath_element" should exist
+    And I should not see "mycss.css" in the "#id_s__mobilecssurl" "css_element"
+
+  Scenario: Setting: Additional CSS for Mobile app - Remove CSS code and test that the mobilecssurl URL is cleared correctly.
+    Given the following config values are set as admin:
+      | config       | value                      |
+      | mobilecssurl | https://mymoodle/mycss.css |
+    And the following config values are set as admin:
+      | config     | value                       | plugin            |
+      | mobilescss | a.test { font-size: 16px; } | theme_boost_union |
+    When I log in as "admin"
+    And I navigate to "Appearance > Boost Union > Look" in site administration
+    And I click on "Mobile app" "link" in the "#adminsettings .nav-tabs" "css_element"
+    And I set the field "Additional CSS for Mobile app" to multiline:
+    """
+    """
+    And I press "Save changes"
+    And I navigate to "General > Mobile app > Mobile appearance" in site administration
+    Then "//div[@id='admin-mobilecssurl']//input[contains(@value, 'theme/boost_union/mobile/styles.php')]" "xpath_element" should not exist
+
+  # Unfortunately, this can't be tested with Behat yet as Mobile App testing is not added to this plugin yet.
+  # Scenario: Setting: Additional CSS for Mobile app - Verify that the CSS code has an effect in the Mobile app.

version.php

@@ -25,7 +25,7 @@
 defined('MOODLE_INTERNAL') || die();
 
 $plugin->component = 'theme_boost_union';
-$plugin->version = 2022080922;
+$plugin->version = 2022080923;
 $plugin->release = 'v4.0-r11';
 $plugin->requires = 2022041900;
 $plugin->supported = [400, 400];