Feature: Add selectable SCSS snippets

CHANGES.md

@@ -4,6 +4,10 @@ moodle-theme_boost_union
 Changes
 -------
 
+### Unreleased
+
+* 2024-09-04 - Feature: Add first version of CSS snippets feature, credits go to all members of the MoodleMootDACH dev camp team 22.
+
 ### v4.5-r2
 
 * 2024-10-31 - Bugfix: Fix possible site failure when a cohort or role used as restriction of a smart menu item is deleted, resolves #737.

README.md

@@ -613,6 +613,10 @@ By default, on the course management page, Moodle requires you to either open th
 
 Boost Union's flavours offer a possibility to override particular Moodle look & feel settings in particular contexts. On this page, you can create and manage flavours.
 
+### Settings page "CSS Snippets"
+
+Boost Union's CSS snippets offer a possibility to add small (or slightly larger) amounts of CSS to the Moodle site. This can be particularly handy for fixing small visual glitches in Moodle core or for adding eye candy to your Moodle site.
+
 ### Settings page "Smart menus"
 
 Smart menus allow site administrators to create customizable menus that can be placed in different locations on the site, such as the site main menu, bottom mobile menu, and user menu. The menus can be configured to display different types of content, including links to other pages or resources, category links, or user profile links. On this page, you can create and manage smart menus.

amd/src/snippetsdetailsmodal.js

@@ -0,0 +1,89 @@
+// 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 - JS code for snippets details modal.
+ *
+ * @module     theme_boost_union/snippetsdetailsmodal
+ * @copyright  2024 Alexander Bias, lern.link GmbH <[email protected]>
+ *             based on core_admin/themeselector/preview_modal by David Woloszyn <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+import ModalCancel from 'core/modal_cancel';
+import Notification from 'core/notification';
+import Templates from 'core/templates';
+import {getString} from 'core/str';
+
+const SELECTORS = {
+    SNIPPETS_CONTAINER: 'theme_boost_union_snippets',
+    DETAILS: '[data-action="details"]',
+};
+
+/**
+ * Entrypoint of the js.
+ *
+ * @method init
+ */
+export const init = () => {
+    registerListenerEvents();
+};
+
+/**
+ * Register snippet related event listeners.
+ *
+ * @method registerListenerEvents
+ */
+const registerListenerEvents = () => {
+    document.addEventListener('click', (e) => {
+        const details = e.target.closest(SELECTORS.DETAILS);
+        if (details) {
+            buildModal(details).catch(Notification.exception);
+        }
+    });
+};
+
+/**
+ * Build the modal with the provided data.
+ *
+ * @method buildModal
+ * @param {object} element
+ */
+const buildModal = async(element) => {
+
+    // Prepare data for modal.
+    const data = {
+        title: element.getAttribute('data-title'),
+        description: element.getAttribute('data-description'),
+        image: element.getAttribute('data-image'),
+        sourcebadge: element.getAttribute('data-source-badge'),
+        goalbadge: element.getAttribute('data-goal-badge'),
+        scopebadge: element.getAttribute('data-scope-badge'),
+        creator: element.getAttribute('data-creator'),
+        usagenote: element.getAttribute('data-usagenote'),
+        id: element.getAttribute('data-id'),
+        code: element.getAttribute('data-code'),
+    };
+
+    await ModalCancel.create({
+        title: data.title,
+        body: Templates.render('theme_boost_union/snippetsdetailsmodal', data),
+        large: true,
+        buttons: {
+            'cancel': getString('closebuttontitle', 'moodle'),
+        },
+        show: true,
+    });
+};

classes/admin_externalpage_in_tab.php

@@ -0,0 +1,44 @@
+<?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 - External admin settings page which can be placed within a tab
+ *
+ * @package    theme_boost_union
+ * @copyright  2024 Alexander Bias, lern.link GmbH <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+namespace theme_boost_union;
+
+/**
+ * Class admin_externalpage_in_tab.
+ *
+ * @package    theme_boost_union
+ * @copyright  2024 Alexander Bias, lern.link GmbH <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class admin_externalpage_in_tab extends \admin_externalpage {
+    /**
+     * Dummy function just to make /admin/settings.php happy.
+     * It returns just an empty string.
+     *
+     * @return string
+     */
+    public function output_html() {
+        return '';
+    }
+}

classes/admin_externalpage_tabs.php

@@ -0,0 +1,85 @@
+<?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 - Tabs to be shown within an external admin settings page
+ *
+ * @package    theme_boost_union
+ * @copyright  2024 Alexander Bias, lern.link GmbH <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+namespace theme_boost_union;
+
+use moodle_url;
+
+/**
+ * Class admin_externalpage_tabs.
+ *
+ * @package    theme_boost_union
+ * @copyright  2024 Alexander Bias, lern.link GmbH <[email protected]>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class admin_externalpage_tabs {
+
+    /**
+     * @var array Holds the tabs in this tab tree.
+     */
+    private $tabs;
+
+
+    /**
+     * Create a tab tree.
+     *
+     * @return void
+     */
+    public function __construct() {
+        // Initialize the tab tree.
+        $this->tabs = [];
+    }
+
+    /**
+     * Add a tab to the tab tree.
+     *
+     * @param string $name The (internal) tab name.
+     * @param moodle_url $url The tab URL.
+     * @param string $label The tab label.
+     * @return void
+     */
+    public function add_tab(string $name, moodle_url $url, string $label) {
+        // Create a new tab.
+        $newtab = new \core\output\tabobject($name, $url, $label);
+
+        // Add the tab to the tab tree.
+        $this->tabs[] = $newtab;
+    }
+
+    /**
+     * Render the tab tree.
+     *
+     * @param string $selected The selected tab's name.
+     * @return string The rendered tab tree.
+     */
+    public function render_tabtree(string $selected) {
+        global $OUTPUT;
+
+        // Make a tabtree object from the added tabs.
+        $tabtree = new \core\output\tabtree($this->tabs, $selected);
+
+        // Render and return the tab tree.
+        return $OUTPUT->render($tabtree);
+    }
+}

classes/admin_settingspage_tabs_with_external.php

@@ -0,0 +1,116 @@
+<?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 - Admin settings page with tabs as well as external pages within a tab
+ *
+ * @package    theme_boost_union
+ * @copyright  2024 Alexander Bias, lern.link GmbH <[email protected]>
+ *             based on code 2016 Ryan Wyllie in class theme_boost_admin_settingspage_tabs
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+
+namespace theme_boost_union;
+
+/**
+ * Class admin_settingspage_tabs_with_external.
+ *
+ * This class is copied and modified from /theme/boost/classes/admin_settingspage_tabs.php
+ *
+ * @package    theme_boost_union
+ * @copyright  2024 Alexander Bias, lern.link GmbH <[email protected]>
+ *             based on code 2016 Ryan Wyllie in class theme_boost_admin_settingspage_tabs
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+class admin_settingspage_tabs_with_external extends \theme_boost_admin_settingspage_tabs {
+    /**
+     * Add the page.
+     *
+     * This function is amended with a switch for the external tabs.
+     *
+     * @param object $tab A tab.
+     * @return bool
+     */
+    public function add($tab) {
+        // If the tab is an external page, add it as external tab.
+        if ($tab instanceof \admin_externalpage) {
+            return $this->add_external_tab($tab);
+
+            // Otherwise, fall back to normal mode.
+        } else {
+            return $this->add_tab($tab);
+        }
+    }
+
+    /**
+     * Add an external tab.
+     *
+     * @param \admin_externalpage $tab An external tab.
+     */
+    private function add_external_tab(\admin_externalpage $tab) {
+        $this->tabs[] = $tab;
+        return true;
+    }
+
+    /**
+     * Generate the HTML output.
+     *
+     * This function is amended with a switch for the external tabs.
+     *
+     * @return string
+     */
+    public function output_html() {
+        global $OUTPUT;
+
+        $activetab = optional_param('activetab', '', PARAM_TEXT);
+        $context = ['tabs' => []];
+        $havesetactive = false;
+
+        foreach ($this->get_tabs() as $tab) {
+            $active = false;
+
+            // Default to first tab it not told otherwise.
+            if (empty($activetab) && !$havesetactive) {
+                $active = true;
+                $havesetactive = true;
+            } else if ($activetab === $tab->name) {
+                $active = true;
+            }
+
+            $newtab = [
+                'name' => $tab->name,
+                'displayname' => $tab->visiblename,
+                'html' => $tab->output_html(),
+                'active' => $active,
+            ];
+            // If the tab is an external page.
+            if ($tab instanceof \admin_externalpage) {
+                // Add a flag for the mustache template.
+                $newtab['externaltab'] = true;
+                // And change the name (which is used as link in the mustache template)
+                // to hold the full URL of the external page..
+                $newtab['name'] = $tab->url->out();
+            }
+            $context['tabs'][] = $newtab;
+        }
+
+        if (empty($context['tabs'])) {
+            return '';
+        }
+
+        return $OUTPUT->render_from_template('theme_boost_union/admin_setting_tabs_with_external', $context);
+    }
+}