MDL-73274 theme_boost: add block/activity styling

blocks/tests/behat/behat_blocks.php

@@ -47,7 +47,7 @@ class behat_blocks extends behat_base {
      */
     public function i_add_the_block($blockname) {
         $addblock = get_string('addblock');
-        $this->execute('behat_general::i_click_on_in_the', [$addblock, 'link_exact', '.block_fake', 'css_element']);
+        $this->execute('behat_general::i_click_on_in_the', [$addblock, 'link_exact', '.add_block_button', 'css_element']);
 
         if (!$this->running_javascript()) {
             $this->execute('behat_general::i_click_on_in_the', [$blockname, 'link_exact', '#region-main', 'css_element']);

course/templates/activitychooserbutton.mustache

@@ -31,8 +31,8 @@
 }}
 <button class="btn btn-link text-decoration-none section-modchooser section-modchooser-link activity-add d-flex align-items-center p-3 mb-3"
      data-action="open-chooser" data-sectionid="{{sectionid}}" data-sectionreturnid="{{sectionreturn}}">
-    <span class="pluscontainer icon-no-margin icon-size-3 d-flex p-2 mr-2">
+    <span class="pluscontainer icon-no-margin icon-size-3 d-flex p-2 mr-3">
         {{#pix}} t/add, core {{/pix}}
     </span>
-    {{#str}}addresourceoractivity, core{{/str}}
+    <span class="activity-add-text">{{#str}}addresourceoractivity, core{{/str}}</span>
 </button>

lib/outputrenderers.php

@@ -4900,6 +4900,36 @@ EOD;
             return $CFG->release;
         }
     }
+
+    /**
+     * Generate the add block button when editing mode is turned on and the user can edit blocks.
+     *
+     * @param string $region where new blocks should be added.
+     * @return string html for the add block button.
+     */
+    public function addblockbutton($region = ''): string {
+        $addblockbutton = '';
+        if (isset($this->page->theme->addblockposition) &&
+                $this->page->user_is_editing() &&
+                $this->page->user_can_edit_blocks() &&
+                $this->page->pagelayout !== 'mycourses'
+        ) {
+            $params = ['bui_addblock' => '', 'sesskey' => sesskey()];
+            if (!empty($region)) {
+                $params['bui_blockregion'] = $region;
+            }
+            $url = new moodle_url($this->page->url, $params);
+            $addblockbutton = $this->render_from_template('core/add_block_button',
+                [
+                    'link' => $url->out(false),
+                    'escapedlink' => "?{$url->get_query_string(false)}",
+                    'pageType' => $this->page->pagetype,
+                    'pageLayout' => $this->page->pagelayout,
+                ]
+            );
+        }
+        return $addblockbutton;
+    }
 }
 
 /**

lib/templates/add_block_button.mustache

@@ -28,10 +28,11 @@
     }
 
 }}
-<a href="{{link}}" id="addblock-{{uniqid}}" class="btn btn-link block-add text-left" data-key="addblock" data-url="{{escapedlink}}">
-    {{#str}}addblock{{/str}}
-    <i class="fa fa-plus-square pull-right py-1" aria-hidden="true"></i>
-</a>
+<div class="add_block_button">
+    <a href="{{link}}" id="addblock-{{uniqid}}" class="btn btn-link block-add text-left mb-3" data-key="addblock" data-url="{{escapedlink}}">
+        <i class="fa fa-plus py-2 mr-3" aria-hidden="true"></i>{{#str}}addblock{{/str}}
+    </a>
+</div>
 
 {{#js}}
     // Initialise the JS for the modal window which displays the blocks available to add.

my/index.php

@@ -92,10 +92,6 @@ $PAGE->set_title($pagetitle);
 $PAGE->set_heading($header);
 $PAGE->has_secondary_navigation_setter(false);
 
-if ($block = my_page_add_block_center()) {
-    $PAGE->blocks->add_fake_block($block, 'content');
-}
-
 if (!isguestuser()) {   // Skip default home page for guests
     if (get_home_page() != HOMEPAGE_MY) {
         if (optional_param('setdefaulthome', false, PARAM_BOOL)) {
@@ -177,6 +173,8 @@ if (core_userfeedback::should_display_reminder()) {
     core_userfeedback::print_reminder_block();
 }
 
+echo $OUTPUT->addblockbutton('content');
+
 echo $OUTPUT->custom_block_region('content');
 
 echo $OUTPUT->footer();

my/indexsys.php

@@ -70,10 +70,6 @@ $PAGE->set_title($header);
 $PAGE->set_heading($header);
 $PAGE->blocks->add_region('content');
 
-if ($block = my_page_add_block_center()) {
-    $PAGE->blocks->add_fake_block($block, 'content');
-}
-
 // Get the My Moodle page info.  Should always return something unless the database is broken.
 if (!$currentpage = my_get_page(null, MY_PAGE_PRIVATE)) {
     print_error('mymoodlesetup');
@@ -88,6 +84,8 @@ $PAGE->set_button($button . $PAGE->button);
 
 echo $OUTPUT->header();
 
+echo $OUTPUT->addblockbutton('content');
+
 echo $OUTPUT->custom_block_region('content');
 
 echo $OUTPUT->footer();

my/lib.php

@@ -295,38 +295,6 @@ function my_reset_page_for_all_users(
     }
 }
 
-/**
- * Within /my we need to be able to add a block to the center content region directly as well as show
- * the standard add a block information.
- *
- * @return block_contents|null
- */
-function my_page_add_block_center(): ?block_contents {
-    global $PAGE, $OUTPUT;
-    // Add-a-block in editing mode.
-    if (isset($PAGE->theme->addblockposition) &&
-            $PAGE->user_is_editing() &&
-            $PAGE->user_can_edit_blocks() &&
-            !defined('BEHAT_SITE_RUNNING')
-    ) {
-        $url = new moodle_url($PAGE->url, ['bui_addblock' => '', 'bui_blockregion' => 'content', 'sesskey' => sesskey()]);
-
-        $block = new block_contents;
-        $block->content = $OUTPUT->render_from_template('core/add_block_button',
-            [
-                'link' => $url->out(false),
-                'escapedlink' => "?{$url->get_query_string(false)}",
-                'pageType' => $PAGE->pagetype,
-                'pageLayout' => $PAGE->pagelayout,
-            ]
-        );
-
-        return $block;
-    }
-
-    return null;
-}
-
 class my_syspage_block_manager extends block_manager {
     // HACK WARNING!
     // TODO: figure out a better way to do this

theme/boost/layout/columns2.php

@@ -27,31 +27,13 @@ defined('MOODLE_INTERNAL') || die();
 user_preference_allow_ajax_update('drawer-open-nav', PARAM_ALPHA);
 require_once($CFG->libdir . '/behat/lib.php');
 
-// Add-a-block in editing mode.
-if (isset($PAGE->theme->addblockposition) &&
-        $PAGE->user_is_editing() &&
-        $PAGE->user_can_edit_blocks() &&
-        $PAGE->pagelayout !== 'mycourses'
-) {
-    $url = new moodle_url($PAGE->url, ['bui_addblock' => '', 'sesskey' => sesskey()]);
-
-    $block = new block_contents;
-    $block->content = $OUTPUT->render_from_template('core/add_block_button',
-        [
-            'link' => $url->out(false),
-            'escapedlink' => "?{$url->get_query_string(false)}",
-            'pageType' => $PAGE->pagetype,
-            'pageLayout' => $PAGE->pagelayout,
-        ]
-    );
-
-    $PAGE->blocks->add_fake_block($block, BLOCK_POS_RIGHT);
-}
+// Add block button in editing mode.
+$addblockbutton = $OUTPUT->addblockbutton();
 
 $extraclasses = [];
 $bodyattributes = $OUTPUT->body_attributes($extraclasses);
 $blockshtml = $OUTPUT->blocks('side-pre');
-$hasblocks = strpos($blockshtml, 'data-block=') !== false;
+$hasblocks = (strpos($blockshtml, 'data-block=') !== false || !empty($addblockbutton));
 
 $secondarynavigation = false;
 $overflow = '';
@@ -89,6 +71,7 @@ $templatecontext = [
     'hasregionmainsettingsmenu' => !empty($regionmainsettingsmenu),
     'headercontent' => $headercontent,
     'overflow' => $overflow,
+    'addblockbutton' => $addblockbutton,
 ];
 $nav = $PAGE->flatnav;
 $templatecontext['firstcollectionlabel'] = $nav->get_collectionlabel();

theme/boost/layout/drawers.php

@@ -27,22 +27,8 @@ defined('MOODLE_INTERNAL') || die();
 require_once($CFG->libdir . '/behat/lib.php');
 require_once($CFG->dirroot . '/course/lib.php');
 
-// Add-a-block in editing mode.
-if (isset($PAGE->theme->addblockposition) && $PAGE->user_is_editing() && $PAGE->user_can_edit_blocks()) {
-    $url = new moodle_url($PAGE->url, ['bui_addblock' => '', 'sesskey' => sesskey()]);
-
-    $block = new block_contents;
-    $block->content = $OUTPUT->render_from_template('core/add_block_button',
-        [
-            'link' => $url->out(false),
-            'escapedlink' => "?{$url->get_query_string(false)}",
-            'pageType' => $PAGE->pagetype,
-            'pageLayout' => $PAGE->pagelayout,
-        ]
-    );
-
-    $PAGE->blocks->add_fake_block($block, BLOCK_POS_RIGHT);
-}
+// Add block button in editing mode.
+$addblockbutton = $OUTPUT->addblockbutton();
 
 user_preference_allow_ajax_update('drawer-open-nav', PARAM_ALPHA);
 user_preference_allow_ajax_update('drawer-open-index', PARAM_BOOL);
@@ -66,7 +52,7 @@ if ($courseindexopen) {
 }
 
 $blockshtml = $OUTPUT->blocks('side-pre');
-$hasblocks = strpos($blockshtml, 'data-block=') !== false;
+$hasblocks = (strpos($blockshtml, 'data-block=') !== false || !empty($addblockbutton));
 if (!$hasblocks) {
     $blockdraweropen = false;
 }
@@ -118,6 +104,7 @@ $templatecontext = [
     'hasregionmainsettingsmenu' => !empty($regionmainsettingsmenu),
     'overflow' => $overflow,
     'headercontent' => $headercontent,
+    'addblockbutton' => $addblockbutton
 ];
 
 $nav = $PAGE->flatnav;

theme/boost/scss/moodle/course.scss

@@ -1253,6 +1253,9 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
     &:hover {
         cursor: pointer;
         background-color: $activity-add-hover;
+        .activity-add-text {
+            text-decoration: underline;
+        }
     }
     width: 100%;
     border-radius: 4px;

theme/boost/style/moodle.css

@@ -14555,6 +14555,9 @@ span.editinstructions {
   .block-add:hover {
     cursor: pointer;
     background-color: #cfe2f2; }
+    .activity-add:hover .activity-add-text,
+    .block-add:hover .activity-add-text {
+      text-decoration: underline; }
 
 #changenumsections {
   border-top: 1px solid #3584c9; }

theme/boost/templates/columns2.mustache

@@ -92,6 +92,7 @@
                 </section>
                 {{#hasblocks}}
                 <section data-region="blocks-column" class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                    {{{ addblockbutton }}}
                     {{{ sidepreblocks }}}
                 </section>
                 {{/hasblocks}}

theme/boost/templates/drawers.mustache

@@ -45,7 +45,8 @@
         "navdraweropen": false,
         "blockdraweropen": true,
         "regionmainsettingsmenu": "",
-        "hasregionmainsettingsmenu": false
+        "hasregionmainsettingsmenu": false,
+        "addblockbutton": ""
     }
 }}
 {{> theme_boost/head }}
@@ -75,6 +76,7 @@
             {{$drawerclasses}}drawer drawer-right{{#blockdraweropen}} show{{/blockdraweropen}}{{/drawerclasses}}
             {{$drawercontent}}
                 <section class="d-print-none" aria-label="{{#str}}blocks{{/str}}">
+                    {{{ addblockbutton }}}
                     {{{ sidepreblocks }}}
                 </section>
             {{/drawercontent}}

theme/classic/style/moodle.css

@@ -14555,6 +14555,9 @@ span.editinstructions {
   .block-add:hover {
     cursor: pointer;
     background-color: #cfe2f2; }
+    .activity-add:hover .activity-add-text,
+    .block-add:hover .activity-add-text {
+      text-decoration: underline; }
 
 #changenumsections {
   border-top: 1px solid #3584c9; }