From b0209029109df38d9ca72a4659388b5be98d5ee7 Mon Sep 17 00:00:00 2001 From: Sara Arjona Date: Thu, 1 Aug 2024 17:23:55 +0200 Subject: [PATCH] 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. --- blocks/myoverview/classes/output/main.php | 64 +++---- lang/en/deprecated.txt | 1 + lang/en/my.php | 4 +- my/courses.php | 28 ++-- my/templates/dropdown.mustache | 22 +-- my/tests/behat/my_courses.feature | 194 +++++++++++++++++----- theme/boost/scss/moodle/core.scss | 7 + theme/boost/style/moodle.css | 7 + theme/classic/style/moodle.css | 7 + 9 files changed, 232 insertions(+), 102 deletions(-) diff --git a/blocks/myoverview/classes/output/main.php b/blocks/myoverview/classes/output/main.php index abe98d9e20910..11b269abfb7e4 100644 --- a/blocks/myoverview/classes/output/main.php +++ b/blocks/myoverview/classes/output/main.php @@ -503,83 +503,71 @@ public function export_for_zero_state_template(renderer_base $output) { $nocoursesimg = $output->image_url('courses', 'block_myoverview'); + $buttons = []; $coursecat = \core_course_category::user_top(); if ($coursecat) { + // Manage courses button. + if ($categorytomanage = \core_course_category::get_nearest_editable_subcategory($coursecat, ['manage'])) { + $managebutton = new \single_button( + new \moodle_url('/course/management.php', ['category' => $categorytomanage->id]), + get_string('managecourses'), + ); + $buttons[] = $managebutton->export_for_template($output); + } + + // Request a course button. $category = \core_course_category::get_nearest_editable_subcategory($coursecat, ['moodle/course:request']); if ($category && $category->can_request_course()) { - // Add Request a course button. - $button = new \single_button( + $requestbutton = new \single_button( new \moodle_url('/course/request.php', ['category' => $category->id]), get_string('requestcourse'), 'post', \single_button::BUTTON_PRIMARY ); + $buttons[] = $requestbutton->export_for_template($output); return $this->generate_zero_state_data( $nocoursesimg, - [$button->export_for_template($output)], - ['title' => 'zero_request_title', 'intro' => 'zero_request_intro'] + $buttons, + ['title' => 'zero_request_title', 'intro' => 'zero_request_intro'], ); } $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. + // Quickstart guide and Create course buttons. + if ($category = \core_course_category::get_nearest_editable_subcategory($coursecat, ['create'])) { $quickstarturl = $CFG->coursecreationguide; - if ($quickstarturl) { + if (!$totalcourses && $quickstarturl) { $quickstartbutton = new \single_button( new \moodle_url($quickstarturl, ['lang' => current_language()]), get_string('viewquickstart', 'block_myoverview'), 'get', ); - $buttons = [$quickstartbutton->export_for_template($output)]; + // Add the Quickstart button in the first position. + array_unshift($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 + \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') - ); - $buttons[] = $managebutton->export_for_template($output); - return $this->generate_zero_state_data( - $nocoursesimg, - array_reverse($buttons), - ['title' => 'zero_default_title', 'intro' => 'zero_default_intro'] - ); - } + $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], ); } + } return $this->generate_zero_state_data( $nocoursesimg, - [], + $buttons, ['title' => 'zero_default_title', 'intro' => 'zero_default_intro'] ); } diff --git a/lang/en/deprecated.txt b/lang/en/deprecated.txt index 9b7bebd3cb525..bd9791b8f9bc5 100644 --- a/lang/en/deprecated.txt +++ b/lang/en/deprecated.txt @@ -127,3 +127,4 @@ reviewbadge,core_badges myisamproblem,core_error newpasswordtext,core cannotsetpassword,core_error +coursemanagementoptions,core_my diff --git a/lang/en/my.php b/lang/en/my.php index 519f203993aae..5fd569d2183b7 100644 --- a/lang/en/my.php +++ b/lang/en/my.php @@ -22,7 +22,6 @@ * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later */ -$string['coursemanagementoptions'] = 'Course management options'; $string['error:dashboardisdisabled'] = 'The Dashboard has been disabled by an administrator.'; $string['mymoodle'] = 'Dashboard'; $string['nocourses'] = 'No course information to show.'; @@ -42,3 +41,6 @@ $string['resetpage'] = 'Reset page to default'; $string['reseterror'] = 'There was an error resetting your page'; $string['privacy:metadata:core_my:preference:user_home_page_preference'] = 'The user home page preference.'; + +// Deprecated since Moodle 4.5. +$string['coursemanagementoptions'] = 'Course management options'; diff --git a/my/courses.php b/my/courses.php index 60489dc053306..4d41218e00ca5 100644 --- 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 index 0ef5225855499..e6483f1bf30c9 100644 --- a/my/templates/dropdown.mustache +++ b/my/templates/dropdown.mustache @@ -27,19 +27,21 @@ } }}
- - -
- {{#newcourseurl}} - {{#str}}newcourse, core{{/str}} - {{/newcourseurl}} +
{{#manageurl}} - {{#str}}managecourses, core{{/str}} +
+ +
{{/manageurl}} + {{#newcourseurl}} +
+ +
+ {{/newcourseurl}} {{#courserequesturl}} - {{#str}}requestcourse, core{{/str}} +
+ +
{{/courserequesturl}}
diff --git a/my/tests/behat/my_courses.feature b/my/tests/behat/my_courses.feature index ef10341f7b109..dad8e275f7e5b 100644 --- a/my/tests/behat/my_courses.feature +++ b/my/tests/behat/my_courses.feature @@ -17,25 +17,65 @@ Feature: Run tests over my courses. Scenario: Admin can add new courses or manage them from my courses Given I am on the "My courses" page logged in as "admin" - And I click on "Course management options" "link" - And I click on "New course" "link" - And I wait to be redirected + And "Create course" "button" should not exist in the "page-header" "region" + And "Manage courses" "button" should not exist in the "page-header" "region" + When I click on "Create course" "button" in the "page-content" "region" Then I should see "Add a new course" And I am on the "My courses" page - And I click on "Course management options" "link" - And I click on "Manage courses" "link" + And I click on "Manage courses" "button" in the "page-content" "region" And I should see "Manage course categories and courses" + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | admin | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Create course" "button" should exist in the "page-header" "region" + And "Manage courses" "button" should exist in the "page-header" "region" + And "Create course" "button" should not exist in the "page-content" "region" + And "Manage courses" "button" should not exist in the "page-content" "region" + @javascript Scenario: User without creating a course and managing category permissions cannot see any link Given I am on the "My courses" page logged in as "user1" - Then "Course management options" "link" should not exist + Then "Create course" "button" should not exist + And "Manage courses" "button" should not exist + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | user1 | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Create course" "button" should not exist + And "Manage courses" "button" should not exist Scenario: User without capability to browse courses cannot see any link Given the following "permission overrides" exist: | capability | permission | role | contextlevel | reference | | moodle/category:viewcourselist | Prevent | user | System | | - Given I am on the "My courses" page logged in as "user1" - Then "Course management options" "link" should not exist + When I am on the "My courses" page logged in as "user1" + Then "Create course" "button" should not exist + And "Manage courses" "button" should not exist + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | user1 | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Create course" "button" should not exist + And "Manage courses" "button" should not exist @javascript Scenario: User with creating a course permission can see the Create course link only @@ -43,28 +83,48 @@ Feature: Run tests over my courses. | capability | permission | role | contextlevel | reference | | moodle/course:create | Allow | role1 | Category | cata | When I am on the "My courses" page logged in as "user1" - Then "Course management options" "link" should exist - And I click on "Course management options" "link" - And I should see "New course" - And I should not see "Manage courses" - And I click on "New course" "link" - And I wait to be redirected + Then "Create course" "button" should exist in the "page-content" "region" + But "Manage courses" "button" should not exist + And "Create course" "button" should not exist in the "page-header" "region" + And I click on "Create course" "button" And I should see "Add a new course" And "CatA" "autocomplete_selection" should exist + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | user1 | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Create course" "button" should exist in the "page-header" "region" + And "Manage courses" "button" should not exist + And "Create course" "button" should not exist in the "page-content" "region" - @javascript Scenario: User with managing a category permission can see the Manage course link only Given the following "permission overrides" exist: | capability | permission | role | contextlevel | reference | | moodle/category:manage | Allow | role1 | Category | cata | When I am on the "My courses" page logged in as "user1" - Then "Course management options" "link" should exist - And I click on "Course management options" "link" - And I should not see "New course" - And I should see "Manage courses" - And I click on "Manage courses" "link" - And I wait to be redirected + Then "Manage courses" "button" should exist in the "page-content" "region" + And "Create course" "button" should not exist + And I click on "Manage courses" "button" in the "page-content" "region" And I should see "Manage course categories and courses" + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | user1 | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Manage courses" "button" should exist in the "page-header" "region" + And "Create course" "button" should not exist + And "Manage courses" "button" should not exist in the "page-content" "region" @javascript Scenario: User with both creating a course and managing a category permission can see both links @@ -73,19 +133,30 @@ Feature: Run tests over my courses. | moodle/course:create | Allow | role1 | Category | cata | | moodle/category:manage | Allow | role1 | Category | cata | When I am on the "My courses" page logged in as "user1" - Then "Course management options" "link" should exist - And I click on "Course management options" "link" - And I should see "New course" - And I should see "Manage courses" - And I click on "New course" "link" - And I wait to be redirected + Then "Create course" "button" should exist in the "page-content" "region" + And "Manage courses" "button" should exist in the "page-content" "region" + And "Create course" "button" should not exist in the "page-header" "region" + And "Manage courses" "button" should not exist in the "page-header" "region" + And I click on "Create course" "button" And I should see "Add a new course" And "CatA" "autocomplete_selection" should exist And I am on the "My courses" page - And I click on "Course management options" "link" - And I click on "Manage courses" "link" - And I wait to be redirected + And I click on "Manage courses" "button" And I should see "Manage course categories and courses" + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | user1 | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Create course" "button" should exist in the "page-header" "region" + And "Manage courses" "button" should exist in the "page-header" "region" + And "Create course" "button" should not exist in the "page-content" "region" + And "Manage courses" "button" should not exist in the "page-content" "region" @javascript Scenario: Admin can see relevant blocks but not add or move them @@ -112,30 +183,73 @@ Feature: Run tests over my courses. And I click on "Actions menu" "icon" in the "Course overview" "block" And I should not see "Delete Course overview block" - @javascript Scenario: User with creating a course permission can't see the Request course link Given the following "permission overrides" exist: | capability | permission | role | contextlevel | reference | | moodle/course:request | Allow | user | System | | When I am on the "My courses" page logged in as "admin" - And I click on "Course management options" "link" - And I should see "New course" - Then I should not see "Request a course" + Then "Create course" "button" should exist in the "page-content" "region" + And "Request a course" "button" should not exist + And "Create course" "button" should not exist in the "page-header" "region" + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | admin | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Create course" "button" should exist in the "page-header" "region" + And "Request a course" "button" should not exist + And "Create course" "button" should not exist in the "page-content" "region" - @javascript Scenario: User without creating a course but with course request permission could see the Request course link Given the following "permission overrides" exist: | capability | permission | role | contextlevel | reference | | moodle/course:request | Allow | user | System | | When I am on the "My courses" page logged in as "user1" - And I click on "Course management options" "link" - And I should not see "New course" - Then I should see "Request a course" + Then "Request a course" "button" should exist in the "page-content" "region" + And "Create course" "button" should not exist in the "page-content" "region" + And "Create course" "button" should not exist in the "page-header" "region" + And "Request a course" "button" should not exist in the "page-header" "region" + # Check the request a course button is not displayed when this feature is disabled. And the following config values are set as admin: | enablecourserequests | 0 | And I am on the "My courses" page logged in as "user1" - And "Course management options" "link" should not exist + And "Request a course" "button" should not exist + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | user1 | + | course | C1 | + | role | student | + And the following config values are set as admin: + | enablecourserequests | 1 | + And I am on the "My courses" page + And "Request a course" "button" should exist in the "page-header" "region" + And "Create course" "button" should not exist + And "Request a course" "button" should not exist in the "page-content" "region" Scenario: User without creating nor course request permission shouldn't see any Request course link Given I am on the "My courses" page logged in as "user1" - Then "Course management options" "link" should not exist + Then "Request a course" "button" should not exist in the "page-content" "region" + And "Create course" "button" should not exist in the "page-content" "region" + And "Manage courses" "button" should not exist in the "page-content" "region" + # Check that the same buttons are displayed in the header when the user is enrolled in a course. + But the following "course" exists: + | fullname | Course 1 | + | shortname | C1 | + | format | topics | + And the following "course enrolment" exists: + | user | user1 | + | course | C1 | + | role | student | + And I am on the "My courses" page + And "Create course" "button" should not exist + And "Request a course" "button" should not exist + And "Manage courses" "button" should not exist diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index 2bb620ebc9263..ac1784db64726 100644 --- 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 index ae6f748b20b83..08da4541cdbfa 100644 --- 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 index f02544c7eeef2..413d657a3b2c9 100644 --- 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;