mirror of
https://github.com/moodle/moodle.git
synced 2025-04-20 07:56:06 +02:00
MDL-78199 course: Move activity completion to a dropdown
- Add new dropdown to display completion - Fix completion behat steps with selectors that were not specific enough - Update behat step that now needs to open completion requirements dropdown before
This commit is contained in:
Mikel Martín
parent
d5aa5b7b07
commit
50bf102a81
@ -174,6 +174,17 @@ class behat_completion extends behat_base {
|
||||
$conditionslistlabel = get_string('completionrequirements', 'core_course', $activityname);
|
||||
$selector = "div[aria-label='$conditionslistlabel']";
|
||||
|
||||
try {
|
||||
// If there is a dropdown, open it.
|
||||
$dropdownnode = $this->find('css', $selector . ' .dropdown-menu');
|
||||
if (!$dropdownnode->hasClass('show')) {
|
||||
$params = [get_string('completionmenuitem', 'completion'), "button", $selector, "css_element"];
|
||||
$this->execute("behat_general::i_click_on_in_the", $params);
|
||||
}
|
||||
} catch (ElementNotFoundException $e) {
|
||||
// If the dropdown does not exist, we are in the activity page, all good.
|
||||
}
|
||||
|
||||
$this->execute("behat_general::assert_element_contains_text", [$text, $selector, "css_element"]);
|
||||
}
|
||||
|
||||
@ -290,7 +301,7 @@ class behat_completion extends behat_base {
|
||||
* @param string $activityname The activity name.
|
||||
*/
|
||||
public function the_manual_completion_button_for_activity_should_be_disabled(string $activityname): void {
|
||||
$selector = "div[data-activityname='$activityname'] button";
|
||||
$selector = "div[data-region='activity-information'][data-activityname='$activityname'] button";
|
||||
|
||||
$params = [$selector, "css_element"];
|
||||
$this->execute("behat_general::the_element_should_be_disabled", $params);
|
||||
@ -303,7 +314,7 @@ class behat_completion extends behat_base {
|
||||
* @param string $activityname The activity name.
|
||||
*/
|
||||
public function the_manual_completion_button_for_activity_should_not_exist(string $activityname): void {
|
||||
$selector = "div[data-activityname='$activityname'] button";
|
||||
$selector = "div[data-region=activity-information][data-activityname='$activityname'] button";
|
||||
|
||||
$params = [$selector, "css_element"];
|
||||
$this->execute('behat_general::should_not_exist', $params);
|
||||
@ -316,7 +327,7 @@ class behat_completion extends behat_base {
|
||||
* @param string $activityname The activity name.
|
||||
*/
|
||||
public function the_manual_completion_button_for_activity_should_exist(string $activityname): void {
|
||||
$selector = "div[data-activityname='$activityname'] button";
|
||||
$selector = "div[data-region=activity-information][data-activityname='$activityname'] button";
|
||||
|
||||
$params = [$selector, "css_element"];
|
||||
$this->execute('behat_general::should_exist', $params);
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
|
||||
Example context (json):
|
||||
{
|
||||
"cmid": 123,
|
||||
"activityname": "Course announcements",
|
||||
"hascompletion": true,
|
||||
"uservisible": true,
|
||||
@ -46,14 +47,30 @@
|
||||
{{#isautomatic}}
|
||||
<div class="automatic-completion-conditions"
|
||||
data-region ="completionrequirements"
|
||||
role="list"
|
||||
aria-label="{{#str}}completionrequirements, core_course, {{activityname}}{{/str}}"
|
||||
>
|
||||
{{#completiondetails}}
|
||||
{{$ core_course/completion_automatic }}
|
||||
{{> core_course/completion_automatic }}
|
||||
{{/ core_course/completion_automatic }}
|
||||
{{/completiondetails}}
|
||||
<div class="dropdown">
|
||||
<a
|
||||
href="#"
|
||||
class="btn btn-sm btn-outline-secondary dropdown-toggle"
|
||||
role="button"
|
||||
id="completion-dropdown-button-{{cmid}}"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
{{#str}}completionmenuitem, completion{{/str}}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="completion-dropdown-button-{{cmid}}">
|
||||
<div class="p-2" role="list">
|
||||
{{#completiondetails}}
|
||||
{{$ core_course/completion_automatic }}
|
||||
{{> core_course/completion_automatic }}
|
||||
{{/ core_course/completion_automatic }}
|
||||
{{/completiondetails}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/isautomatic}}
|
||||
{{^isautomatic}}
|
||||
|
||||
@ -1586,6 +1586,21 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
|
||||
.activity-info {
|
||||
grid-area: completion;
|
||||
justify-self: end;
|
||||
// Re-style completion buttons (mark as done & dropdown).
|
||||
button,
|
||||
a[role="button"] {
|
||||
border: $border-width solid $border-color;
|
||||
@include border-radius();
|
||||
font-weight: bold;
|
||||
}
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 100%;
|
||||
margin-top: map-get($spacers, 2);
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-badges {
|
||||
@ -1645,32 +1660,10 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.badge {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.automatic-completion-conditions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&:not(.activityinline) {
|
||||
padding: map-get($spacers, 3);
|
||||
}
|
||||
|
||||
.activity-info,
|
||||
.activity-actions {
|
||||
margin-left: auto;
|
||||
padding-left: map-get($spacers, 2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1699,17 +1692,16 @@ $activity-add-hover: theme-color-level('primary', -10) !default;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Revisit these styles when MDL-78289 lands. Probably not needed anymore.
|
||||
.automatic-completion-conditions .badge {
|
||||
font-size: 80%;
|
||||
padding: map-get($spacers, 2);
|
||||
margin-top: map-get($spacers, 1);
|
||||
|
||||
.icon {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -29142,6 +29142,22 @@ span.editinstructions .alert-link {
|
||||
}
|
||||
.activity-item .activity-info {
|
||||
grid-area: completion;
|
||||
justify-self: end;
|
||||
}
|
||||
.activity-item .activity-info button,
|
||||
.activity-item .activity-info a[role=button] {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-info {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-info button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.activity-item .activity-badges {
|
||||
grid-area: visibility;
|
||||
@ -29191,29 +29207,10 @@ span.editinstructions .alert-link {
|
||||
.activity-item .action-menu-item .filler {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.activity-item .badge {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.activity-item .automatic-completion-conditions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 1rem;
|
||||
}
|
||||
.activity-item .activity-info,
|
||||
.activity-item .activity-actions {
|
||||
margin-left: auto;
|
||||
padding-left: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
|
||||
@ -29142,6 +29142,22 @@ span.editinstructions .alert-link {
|
||||
}
|
||||
.activity-item .activity-info {
|
||||
grid-area: completion;
|
||||
justify-self: end;
|
||||
}
|
||||
.activity-item .activity-info button,
|
||||
.activity-item .activity-info a[role=button] {
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.activity-item .activity-info {
|
||||
width: 100%;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.activity-item .activity-info button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.activity-item .activity-badges {
|
||||
grid-area: visibility;
|
||||
@ -29191,29 +29207,10 @@ span.editinstructions .alert-link {
|
||||
.activity-item .action-menu-item .filler {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
.activity-item .badge {
|
||||
white-space: normal;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.activity-item .automatic-completion-conditions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.activity-item:not(.activityinline) {
|
||||
padding: 1rem;
|
||||
}
|
||||
.activity-item .activity-info,
|
||||
.activity-item .activity-actions {
|
||||
margin-left: auto;
|
||||
padding-left: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Activity card in editing mode */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user