MDL-82500 my: Move CTA from the menu to buttons

The icons have been updated to make them more consistent abroad Moodle and take advantage of the benefits of FontAwesome 6. One of the icons that have been changed is the cog, that has been replaced by ellipsis or pen (depending on the context). So now, the My courses page had two ellipsis in the same context (one with a caret), which is confusing. This commit removes the actions from the first menu and moves them to buttons as suggested by the UX team.
sarjona · Aug 1, 2024 · 1a39749 · 1a39749
1 parent 04ee952
commit 1a39749
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 55 deletions.
diff --git a/blocks/myoverview/classes/output/main.php b/blocks/myoverview/classes/output/main.php
@@ -522,10 +522,10 @@ public function export_for_zero_state_template(renderer_base $output) {
             }
 
             $totalcourses = $DB->count_records_select('course', 'category > 0');
-            if (!$totalcourses && ($category = \core_course_category::get_nearest_editable_subcategory($coursecat, ['create']))) {
-                // Add Quickstart guide and Create course buttons.
+            if ($category = \core_course_category::get_nearest_editable_subcategory($coursecat, ['create'])) {
+                // Add Quickstart guide, Manage courses and Create course buttons.
                 $quickstarturl = $CFG->coursecreationguide;
-                if ($quickstarturl) {
+                if (!$totalcourses && $quickstarturl) {
                     $quickstartbutton = new \single_button(
                         new \moodle_url($quickstarturl, ['lang' => current_language()]),
                         get_string('viewquickstart', 'block_myoverview'),
@@ -534,45 +534,29 @@ public function export_for_zero_state_template(renderer_base $output) {
                     $buttons = [$quickstartbutton->export_for_template($output)];
                 }
 
-                $createbutton = new \single_button(
-                    new \moodle_url('/course/edit.php', ['category' => $category->id]),
-                    get_string('createcourse', 'block_myoverview'),
-                    'post',
-                    \single_button::BUTTON_PRIMARY
-                );
-                $buttons[] = $createbutton->export_for_template($output);
-                return $this->generate_zero_state_data(
-                    $nocoursesimg,
-                    $buttons,
-                    ['title' => 'zero_nocourses_title', 'intro' => 'zero_nocourses_intro']
-                );
-            }
-
-            if ($categorytocreate = \core_course_category::get_nearest_editable_subcategory($coursecat, ['create'])) {
-                $createbutton = new \single_button(
-                    new \moodle_url('/course/edit.php', ['category' => $categorytocreate->id]),
-                    get_string('createcourse', 'block_myoverview'),
-                    'post',
-                    \single_button::BUTTON_PRIMARY
-                );
-                $buttons = [$createbutton->export_for_template($output)];
                 if ($categorytomanage = \core_course_category::get_nearest_editable_subcategory($coursecat, ['manage'])) {
                     // Add a Manage course button.
                     $managebutton = new \single_button(
                         new \moodle_url('/course/management.php', ['category' => $categorytomanage->id]),
-                        get_string('managecourses')
+                        get_string('managecourses'),
                     );
                     $buttons[] = $managebutton->export_for_template($output);
-                    return $this->generate_zero_state_data(
-                        $nocoursesimg,
-                        array_reverse($buttons),
-                        ['title' => 'zero_default_title', 'intro' => 'zero_default_intro']
-                    );
                 }
+
+                $createbutton = new \single_button(
+                    new \moodle_url('/course/edit.php', ['category' => $category->id]),
+                    get_string('createcourse', 'block_myoverview'),
+                    'post',
+                    \single_button::BUTTON_PRIMARY,
+                );
+                $buttons[] = $createbutton->export_for_template($output);
+
+                $title = $totalcourses ? 'zero_default_title' : 'zero_nocourses_title';
+                $intro = $totalcourses ? 'zero_default_intro' : 'zero_nocourses_intro';
                 return $this->generate_zero_state_data(
                     $nocoursesimg,
                     $buttons,
-                    ['title' => 'zero_default_title', 'intro' => 'zero_default_intro']
+                    ['title' => $title, 'intro' => $intro],
                 );
             }
         }

diff --git a/my/courses.php b/my/courses.php
@@ -71,19 +71,21 @@
 // Add course management if the user has the capabilities for it.
 $coursecat = core_course_category::user_top();
 $coursemanagemenu = [];
-if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['create']))) {
-    // The user has the capability to create course.
-    $coursemanagemenu['newcourseurl'] = new moodle_url('/course/edit.php', ['category' => $category->id]);
-}
-if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['manage']))) {
-    // The user has the capability to manage the course category.
-    $coursemanagemenu['manageurl'] = new moodle_url('/course/management.php', ['categoryid' => $category->id]);
-}
-if ($coursecat) {
-    $category = core_course_category::get_nearest_editable_subcategory($coursecat, ['moodle/course:request']);
-    if ($category && $category->can_request_course()) {
-        $coursemanagemenu['courserequesturl'] = new moodle_url('/course/request.php', ['categoryid' => $category->id]);
-
+// Only display the action menu if the user has courses (otherwise, the buttons will be displayed in the zero state).
+if (count(enrol_get_all_users_courses($USER->id, true)) > 0) {
+    if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['create']))) {
+        // The user has the capability to create course.
+        $coursemanagemenu['newcourseurl'] = new moodle_url('/course/edit.php', ['category' => $category->id]);
+    }
+    if ($coursecat && ($category = core_course_category::get_nearest_editable_subcategory($coursecat, ['manage']))) {
+        // The user has the capability to manage the course category.
+        $coursemanagemenu['manageurl'] = new moodle_url('/course/management.php', ['categoryid' => $category->id]);
+    }
+    if ($coursecat) {
+        $category = core_course_category::get_nearest_editable_subcategory($coursecat, ['moodle/course:request']);
+        if ($category && $category->can_request_course()) {
+            $coursemanagemenu['courserequesturl'] = new moodle_url('/course/request.php', ['categoryid' => $category->id]);
+        }
     }
 }
 if (!empty($coursemanagemenu)) {

diff --git a/my/templates/dropdown.mustache b/my/templates/dropdown.mustache
@@ -27,19 +27,21 @@
     }
 }}
 <div class="btn-group{{#manageurl}} course-manage{{/manageurl}}{{#courserequesturl}} course-request{{/courserequesturl}}">
-    <!-- Set as a link to appease BrowserKit behat. -->
-    <a href="#" class="btn btn-link btn-icon icon-size-3 rounded-circle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="{{#str}}coursemanagementoptions, my{{/str}}">
-        <i class="fa fa-ellipsis-v text-dark  py-2" aria-hidden="true"></i>
-    </a>
-    <div class="dropdown-menu dropdown-menu-right">
-        {{#newcourseurl}}
-            <a class="dropdown-item" href="{{newcourseurl}}">{{#str}}newcourse, core{{/str}}</a>
-        {{/newcourseurl}}
+    <div class="my-action-buttons my-action-buttons-right">
         {{#manageurl}}
-            <a class="dropdown-item" href="{{manageurl}}">{{#str}}managecourses, core{{/str}}</a>
+            <form action="{{manageurl}}" method="post" id="managecoursesform">
+                <button type="submit" class="btn btn-secondary m-1 w-100">{{#str}} managecourses {{/str}}</button>
+            </form>
         {{/manageurl}}
+        {{#newcourseurl}}
+            <form action="{{newcourseurl}}" method="post" id="newcourseform">
+                <button type="submit" class="btn btn-primary m-1 w-100">{{#str}} newcourse {{/str}}</button>
+            </form>
+        {{/newcourseurl}}
         {{#courserequesturl}}
-            <a class="dropdown-item" href="{{courserequesturl}}">{{#str}}requestcourse, core{{/str}}</a>
+            <form action="{{courserequesturl}}" method="post" id="courserequestform">
+                <button type="submit" class="btn btn-primary m-1 w-100">{{#str}} requestcourse {{/str}}</button>
+            </form>
         {{/courserequesturl}}
     </div>
 </div>
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
@@ -2944,6 +2944,13 @@ body.dragging {
     }
 }
 
+#page-my-index .my-action-buttons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+
 .dropdown-toggle::after {
     @extend .fa-solid;
     content: fa-content($fa-var-chevron-down);

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -25921,6 +25921,13 @@ body.dragging .dragging {
   padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+#page-my-index .my-action-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
 .dropdown-toggle::after {
   content: "\f078";
   margin-right: 0;

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -25921,6 +25921,13 @@ body.dragging .dragging {
   padding-right: 0 !important; /* stylelint-disable-line declaration-no-important */
 }
 
+#page-my-index .my-action-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
 .dropdown-toggle::after {
   content: "\f078";
   margin-right: 0;