From b64d2d4f26068973238b74ae7bb3dca777778cc7 Mon Sep 17 00:00:00 2001 From: Alexander Bias Date: Wed, 26 Jul 2023 22:00:01 +0200 Subject: [PATCH] Review changes --- form/element-colorpicker.php | 28 +++++++++------- scss/boost_union/post.scss | 63 ++++++++++++++++++++++++++---------- 2 files changed, 62 insertions(+), 29 deletions(-) diff --git a/form/element-colorpicker.php b/form/element-colorpicker.php index 9df6be40865..dd95bfe90a4 100644 --- a/form/element-colorpicker.php +++ b/form/element-colorpicker.php @@ -42,48 +42,53 @@ class moodlequickform_themeboostunion_colorpicker extends MoodleQuickForm_text i } /** - * constructor + * Constructor. * - * @param string $elementname (optional) name of the text field - * @param string $elementlabel (optional) text field label - * @param string $attributes (optional) Either a typical HTML attribute string or an associative array + * @param string $elementname (optional) Name of the text field. + * @param string $elementlabel (optional) Text field label. + * @param string $attributes (optional) Either a typical HTML attribute string or an associative array. */ public function __construct($elementname=null, $elementlabel=null, $attributes=null) { parent::__construct($elementname, $elementlabel, $attributes); $this->setType('text'); - // Add the class admin_colourpicker. + // Add a CSS class for styling the color picker. $class = $this->getAttribute('class'); if (empty($class)) { $class = ''; } - $this->updateAttributes(array('class' => $class . ' union-form-colour-picker ')); + $this->updateAttributes(array('class' => $class.' theme_boost_union-form-colour-picker ')); } /** - * Export for template + * Export for template. * * @param renderer_base $output * @return array|stdClass */ public function export_for_template(renderer_base $output) { global $PAGE; - // Compose template context for Mform element. + + // Compose template context for the mform element. $context = $this->export_for_template_base($output); + // Build loading icon. $icon = new pix_icon('i/loading', get_string('loading', 'admin'), 'moodle', ['class' => 'loadingicon']); $icondata = $icon->export_for_template($output); $iconoutput = $output->render_from_template('core/pix_icon', $icondata); - // Id of the element. + + // Get ID of the element. $id = $this->getAttribute('id'); - // JS to append the color picker div before the element and initiate the color picker utility method. + + // Add JS to append the color picker div before the element and initiate the color picker utility method. $PAGE->requires->js_amd_inline(" var element = document.getElementById('$id'); var pickerDiv = document.createElement('div'); pickerDiv.classList.add('admin_colourpicker', 'clearfix'); pickerDiv.innerHTML = '$iconoutput'; // Add loading icon. element.parentNode.prepend(pickerDiv); - element.parentNode.style.flexDirection = 'column'; // Helps to align the config text when boost_union is not a default. + element.parentNode.style.flexDirection = 'column'; // Helps to align the config text when + // theme_boost_union is not the active theme. // Init color picker utility. M.util.init_colour_picker(Y, '$id'); @@ -91,5 +96,4 @@ public function export_for_template(renderer_base $output) { return $context; } - } diff --git a/scss/boost_union/post.scss b/scss/boost_union/post.scss index ab994f19368..109d28e7ee4 100644 --- a/scss/boost_union/post.scss +++ b/scss/boost_union/post.scss @@ -927,7 +927,9 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { * Settings: Smart menus. ======================================*/ -/* Scrollbar */ +/*--------------------------------------- + * Scrollbar + --------------------------------------*/ /* Width and height of the scrollbar */ ::-webkit-scrollbar { @@ -950,7 +952,11 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { } /* End of Scrollbar */ -/* Header Menu */ + +/*--------------------------------------- + * Header menu + --------------------------------------*/ + .navbar { &.fixed-top { /* Added Height and background color for the top header, @@ -1636,7 +1642,11 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { } } -/* Smart Menu Settings */ + +/*--------------------------------------- + * Smart menu settings + --------------------------------------*/ + /* Menu item settings page style */ .menuitem-buttons { /* Menu settings page - margin for the "Restriction" label in the table block when the restrictions are enabled */ @@ -1665,9 +1675,12 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { margin-bottom: 20px; } } -/* End of Smart Menu settings */ -/* Footer Menu */ + +/*--------------------------------------- + * Footer menu + --------------------------------------*/ + #page-wrapper #page-footer { .navbar { /* Footer bottom menu */ @@ -1916,24 +1929,32 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { } } -/* Increases the space at the bottom for the footer popover, as the bottom menu bar might hide it. */ +/* Increases the space at the bottom for the footer popover, as the bottom menu bar might hide it. */ .btn-footer-popover { bottom: 4rem; } -/*Learning tools floating button align*/ +/* Learning tools floating button align. */ .learningtools-action-info .floating-button { bottom: 4rem; } -/** - * Fontawesome icon picker styles. - */ + +/*======================================= + * General styling + ======================================*/ + +/*--------------------------------------- + * Form element: Fontawesome picker + --------------------------------------*/ + .fontawesome-picker { - /* Padding removed in the fontawesome picker popover */ + /* Padding removed in the fontawesome picker popover. */ .popover-body { padding: 0; - /* Width, height, padding added, margin removed and text aligned center in the popover fontawesome icon picker */ + + /* Width, height, padding added, margin + removed and text aligned centered in the popover fontawesome icon picker. */ .fontawesome-icon-suggestions { width: 250px; height: 350px; @@ -1942,8 +1963,9 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { overflow: auto; padding: 10px 2px 2px 10px; margin: 0; + /* Width, height, line height, border, border radius and margin - added for the icon item in the popover fontawesome icon picker */ + added for the icon item in the popover fontawesome icon picker */ li { width: 40px; height: 40px; @@ -1953,12 +1975,14 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { margin: 0 10px 10px 0; display: inline-block; cursor: pointer; - /* Background color added on hover and selected for the font icon item */ + + /* Background color added on hover and selected for the font icon item. */ &:hover, &.selected { background-color: #f4f4f4; } - /* Width, height, font size added and margin removed for the Font icon */ + + /* Width, height, font size added and margin removed for the Font icon. */ .icon { width: 14px; height: 14px; @@ -1970,8 +1994,13 @@ body.pagelayout-login:not(.loginbackgroundimage) #footnote { } } -/* Display the color picker box and the text field as column */ -.union-form-colour-picker .felement { + +/*--------------------------------------- + * Form element: Color picker + --------------------------------------*/ + +/* Display the color picker box and the text field as column. */ +.theme_boost_union-form-colour-picker .felement { flex-direction: column; }