mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

MDL-81743 mod_feedback: Improve 'Edit' page UI

Browse Source 
- Move styles in css to modules.scss
- Add new styles for questions
- Change Delete action to red colour
- Add "Page break" text to pagebreak elements in edit page
This commit is contained in:
Mikel Martín 2024-04-23 13:40:12 +02:00
parent ad7fc69c25
commit ae01fe1ba4
7 changed files with 409 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
mod/feedback/classes/complete_form.php
View File

@ -333,7 +333,7 @@ class mod_feedback_complete_form extends moodleform {
// Add red asterisks on required fields.
if ($item->required) {
$required = $OUTPUT->pix_icon('req', get_string('requiredelement', 'form'));
$required = $OUTPUT->pix_icon('req', get_string('requiredelement', 'form'), 'moodle', ['class' => 'ml-2']);
$element->setLabel($element->getLabel() . $required);
$this->hasrequired = true;
}
@ -449,7 +449,7 @@ class mod_feedback_complete_form extends moodleform {
global $OUTPUT;
$menu = new action_menu();
$menu->set_owner_selector('#' . $this->guess_element_id($item, $element));
$menu->set_menu_trigger(get_string('edit'));
$menu->set_kebab_trigger(get_string('edit'));
$menu->prioritise = true;
$itemobj = feedback_get_item_class($item->typ);
@ -464,7 +464,7 @@ class mod_feedback_complete_form extends moodleform {
$name = html_writer::span('', 'itemdd', array('id' => 'feedback_item_box_' . $item->id)) .
html_writer::span($name, 'itemname') .
html_writer::span($editmenu, 'itemactions');
$element->setLabel(html_writer::span($name, 'itemtitle'));
$element->setLabel(html_writer::span($name, 'itemtitle', ['class' => 'mx-5']));
}
/**

1
mod/feedback/edit_item.php
View File

@ -99,6 +99,7 @@ $PAGE->activityheader->set_attrs([
"hidecompletion" => true,
"description" => ''
]);
$PAGE->add_body_class('limitedwidth');
echo $OUTPUT->header();
/// print the tabs

27
mod/feedback/item/feedback_item_class.php
View File

@ -223,14 +223,14 @@ abstract class feedback_item_base {
* @return action_menu_link[]
*/
public function edit_actions($item, $feedback, $cm) {
$actions = array();
$actions = [];
$strupdate = get_string('edit_item', 'feedback');
$actions['update'] = new action_menu_link_secondary(
new moodle_url('/mod/feedback/edit_item.php', array('id' => $item->id)),
new pix_icon('t/edit', $strupdate, 'moodle', array('class' => 'iconsmall', 'title' => '')),
new moodle_url('/mod/feedback/edit_item.php', ['id' => $item->id]),
new pix_icon('t/edit', $strupdate, 'moodle', ['class' => 'iconsmall', 'title' => '']),
$strupdate,
array('class' => 'editing_update', 'data-action' => 'update')
['class' => 'editing_update', 'data-action' => 'update']
);
if ($this->can_switch_require()) {
@ -242,20 +242,25 @@ abstract class feedback_item_base {
$buttonimg = 'notrequired';
}
$actions['required'] = new action_menu_link_secondary(
new moodle_url('/mod/feedback/edit.php', array('id' => $cm->id,
'switchitemrequired' => $item->id, 'sesskey' => sesskey())),
new moodle_url(
'/mod/feedback/edit.php',
['id' => $cm->id, 'switchitemrequired' => $item->id, 'sesskey' => sesskey()]
),
new pix_icon($buttonimg, $buttontitle, 'feedback', array('class' => 'iconsmall', 'title' => '')),
$buttontitle,
array('class' => 'editing_togglerequired', 'data-action' => 'togglerequired')
['class' => 'editing_togglerequired', 'data-action' => 'togglerequired']
);
}
$strdelete = get_string('delete_item', 'feedback');
$actions['delete'] = new action_menu_link_secondary(
new moodle_url('/mod/feedback/edit.php', array('id' => $cm->id, 'deleteitem' => $item->id, 'sesskey' => sesskey())),
new moodle_url(
'/mod/feedback/edit.php',
['id' => $cm->id, 'deleteitem' => $item->id, 'sesskey' => sesskey()]
),
new pix_icon('t/delete', $strdelete, 'moodle', array('class' => 'iconsmall', 'title' => '')),
$strdelete,
array('class' => 'editing_delete', 'data-action' => 'delete')
['class' => 'editing_delete text-danger', 'data-action' => 'delete']
);
return $actions;
@ -334,7 +339,7 @@ class feedback_item_pagebreak extends feedback_item_base {
$form->add_form_element($item,
['static',
$item->typ.'_'.$item->id,
'',
get_string('pagebreak', 'feedback'),
html_writer::empty_tag('hr', ['class' => 'feedback_pagebreak', 'id' => 'feedback_item_' . $item->id])
]);
}
@ -354,7 +359,7 @@ class feedback_item_pagebreak extends feedback_item_base {
new moodle_url('/mod/feedback/edit.php', array('id' => $cm->id, 'deleteitem' => $item->id, 'sesskey' => sesskey())),
new pix_icon('t/delete', $strdelete, 'moodle', array('class' => 'iconsmall', 'title' => '')),
$strdelete,
array('class' => 'editing_delete', 'data-action' => 'delete')
['class' => 'editing_delete text-danger', 'data-action' => 'delete']
);
return $actions;
}

123
mod/feedback/styles.css
View File

@ -1,123 +0,0 @@
/* styles using by feedback */
.path-mod-feedback span.feedback_info {
font-weight: bold;
}
.path-mod-feedback div.feedback_is_dependent {
background: #ddd;
}
.path-mod-feedback span.feedback_depend {
color: #f00;
}
.path-mod-feedback hr.feedback_pagebreak {
height: 4px;
color: #aaa;
background-color: #aaa;
border: 0;
margin: 0;
}
.path-mod-feedback .drag_target_active {
opacity: .25;
}
.path-mod-feedback .drag_item_active {
opacity: .5;
}
.path-mod-feedback .feedback_bar_image {
height: 10px;
}
.path-mod-feedback #analysis-form label {
display: inline;
}
.path-mod-feedback .templateslist td.cell.action,
.path-mod-feedback .templateslist th.header.action {
width: 10%;
}
.path-mod-feedback .feedback_form .itemactions {
display: inline-block;
margin: 0 .5em;
}
/* Analysis page */
.path-mod-feedback table.analysis {
width: 100%;
border-top: 1px solid #aaa;
margin-top: 10px;
}
.path-mod-feedback table.analysis tr:first-child th {
padding-top: 10px;
}
.path-mod-feedback table.analysis tr:hover {
background: #f5f5f5;
}
.path-mod-feedback table.analysis td.singlevalue:before,
.path-mod-feedback table.analysis td.optionname:before {
content: '- ';
}
.path-mod-feedback table.analysis.itemtype_textarea td {
padding: 4px 0;
}
.path-mod-feedback table.analysis tr.isempty {
display: none;
}
/* Responses list */
.path-mod-feedback #showentrytable td.cell.completed_timemodified,
.path-mod-feedback #showentryanontable td.cell.random_response {
font-weight: bold;
}
.path-mod-feedback #showentrytable td.cell.userpic,
.path-mod-feedback #showentrytable td.cell.deleteentry,
.path-mod-feedback #showentryanontable td.cell.deleteentry {
width: 10px;
}
/* Responses navigation */
.path-mod-feedback .response_navigation {
margin: .5em 0;
}
.path-mod-feedback .response_navigation a {
display: block;
}
.path-mod-feedback .response_navigation a.back_to_list {
text-align: center;
}
.path-mod-feedback .response_navigation .prev_response:before {
/*rtl:raw:
content: ' ► ';
*/
/*rtl:remove*/
content: ' ◄ ';
}
.path-mod-feedback .response_navigation .next_response:after {
/*rtl:raw:
content: ' ◄ ';
*/
/*rtl:remove*/
content: ' ► ';
}
.path-mod-feedback .response_navigation .next_response {
text-align: right;
}
.path-mod-feedback .response_navigation .prev_response {
text-align: left;
}

143
theme/boost/scss/moodle/modules.scss
View File

@ -1506,3 +1506,146 @@ $popout-header-height: 4rem;
height: auto;
}
}
/**
* Mod Feedback.
*/
.path-mod-feedback {
span.feedback_info {
font-weight: bold;
}
div.feedback_is_dependent {
background: $gray-600;
}
span.feedback_depend {
color: $danger;
}
hr.feedback_pagebreak {
height: 4px;
color: $gray-600;
background-color: $gray-600;
border: 0;
margin: 0;
}
.drag_target_active {
opacity: .25;
}
.drag_item_active {
opacity: .5;
}
.feedback_bar_image {
height: 10px;
}
#analysis-form {
label {
display: inline;
}
}
.templateslist {
td.cell.action {
width: 10%;
}
th.header.action {
width: 10%;
}
}
.feedback_form {
.itemactions {
display: inline-block;
margin: 0 map-get($spacers, 2);
}
}
// Feedback edit form.
#feedback_edit_form {
[id*=_feedback_item_].feedback_itemlist {
padding: map-get($spacers, 3);
border: $border-width solid $border-color;
@include border-radius();
.itemhandle {
position: absolute;
width: 32px;
height: 32px;
text-align: center;
align-content: center;
}
.action-menu {
position: absolute;
top: 0;
right: 0;
}
.dropdown-toggle {
border-radius: .5rem;
width: 32px;
height: 32px;
}
}
}
// Analysis page.
table.analysis {
width: 100%;
border-top: $border-width solid $border-color;
margin-top: 10px;
&.itemtype_textarea td {
padding: 4px 0;
}
tr:first-child th {
padding-top: 10px;
}
tr:hover {
background: $gray-300;
}
td.singlevalue:before,
td.optionname:before {
content: '- ';
}
tr.isempty {
display: none;
}
}
// Responses list.
#showentrytable td.cell.completed_timemodified,
#showentryanontable td.cell.random_response {
font-weight: bold;
}
#showentrytable td.cell.userpic,
#showentrytable td.cell.deleteentry,
#showentryanontable td.cell.deleteentry {
width: 10px;
}
// Responses navigation.
.response_navigation {
margin: map-get($spacers, 2) 0;
a {
display: block;
&.back_to_list {
text-align: center;
}
}
.prev_response {
text-align: left;
&:before {
/*rtl:raw:
content: ' ► ';
*/
/*rtl:remove*/
content: ' ◄ ';
}
}
.next_response {
text-align: right;
&:after {
/*rtl:raw:
content: ' ◄ ';
*/
/*rtl:remove*/
content: ' ► ';
}
}
}
}

123
theme/boost/style/moodle.css
View File

@ -34764,6 +34764,129 @@ img.userpicture {
height: auto;
}
/**
* Mod Feedback.
*/
.path-mod-feedback span.feedback_info {
font-weight: bold;
}
.path-mod-feedback div.feedback_is_dependent {
background: #6a737b;
}
.path-mod-feedback span.feedback_depend {
color: #ca3120;
}
.path-mod-feedback hr.feedback_pagebreak {
height: 4px;
color: #6a737b;
background-color: #6a737b;
border: 0;
margin: 0;
}
.path-mod-feedback .drag_target_active {
opacity: 0.25;
}
.path-mod-feedback .drag_item_active {
opacity: 0.5;
}
.path-mod-feedback .feedback_bar_image {
height: 10px;
}
.path-mod-feedback #analysis-form label {
display: inline;
}
.path-mod-feedback .templateslist td.cell.action {
width: 10%;
}
.path-mod-feedback .templateslist th.header.action {
width: 10%;
}
.path-mod-feedback .feedback_form .itemactions {
display: inline-block;
margin: 0 0.5rem;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist {
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.5rem;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemhandle {
position: absolute;
width: 32px;
height: 32px;
text-align: center;
align-content: center;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .action-menu {
position: absolute;
top: 0;
right: 0;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .dropdown-toggle {
border-radius: 0.5rem;
width: 32px;
height: 32px;
}
.path-mod-feedback table.analysis {
width: 100%;
border-top: 1px solid #dee2e6;
margin-top: 10px;
}
.path-mod-feedback table.analysis.itemtype_textarea td {
padding: 4px 0;
}
.path-mod-feedback table.analysis tr:first-child th {
padding-top: 10px;
}
.path-mod-feedback table.analysis tr:hover {
background: #dee2e6;
}
.path-mod-feedback table.analysis td.singlevalue:before,
.path-mod-feedback table.analysis td.optionname:before {
content: "- ";
}
.path-mod-feedback table.analysis tr.isempty {
display: none;
}
.path-mod-feedback #showentrytable td.cell.completed_timemodified,
.path-mod-feedback #showentryanontable td.cell.random_response {
font-weight: bold;
}
.path-mod-feedback #showentrytable td.cell.userpic,
.path-mod-feedback #showentrytable td.cell.deleteentry,
.path-mod-feedback #showentryanontable td.cell.deleteentry {
width: 10px;
}
.path-mod-feedback .response_navigation {
margin: 0.5rem 0;
}
.path-mod-feedback .response_navigation a {
display: block;
}
.path-mod-feedback .response_navigation a.back_to_list {
text-align: center;
}
.path-mod-feedback .response_navigation .prev_response {
text-align: left;
}
.path-mod-feedback .response_navigation .prev_response:before {
/*rtl:raw:
content: ' ► ';
*/
/*rtl:remove*/
content: " ◄ ";
}
.path-mod-feedback .response_navigation .next_response {
text-align: right;
}
.path-mod-feedback .response_navigation .next_response:after {
/*rtl:raw:
content: ' ◄ ';
*/
/*rtl:remove*/
content: " ► ";
}
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax {
background-color: #fff;
}

123
theme/classic/style/moodle.css
View File

@ -34764,6 +34764,129 @@ img.userpicture {
height: auto;
}
/**
* Mod Feedback.
*/
.path-mod-feedback span.feedback_info {
font-weight: bold;
}
.path-mod-feedback div.feedback_is_dependent {
background: #6a737b;
}
.path-mod-feedback span.feedback_depend {
color: #ca3120;
}
.path-mod-feedback hr.feedback_pagebreak {
height: 4px;
color: #6a737b;
background-color: #6a737b;
border: 0;
margin: 0;
}
.path-mod-feedback .drag_target_active {
opacity: 0.25;
}
.path-mod-feedback .drag_item_active {
opacity: 0.5;
}
.path-mod-feedback .feedback_bar_image {
height: 10px;
}
.path-mod-feedback #analysis-form label {
display: inline;
}
.path-mod-feedback .templateslist td.cell.action {
width: 10%;
}
.path-mod-feedback .templateslist th.header.action {
width: 10%;
}
.path-mod-feedback .feedback_form .itemactions {
display: inline-block;
margin: 0 0.5rem;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist {
padding: 1rem;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemhandle {
position: absolute;
width: 32px;
height: 32px;
text-align: center;
align-content: center;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .action-menu {
position: absolute;
top: 0;
right: 0;
}
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .dropdown-toggle {
border-radius: 0.5rem;
width: 32px;
height: 32px;
}
.path-mod-feedback table.analysis {
width: 100%;
border-top: 1px solid #dee2e6;
margin-top: 10px;
}
.path-mod-feedback table.analysis.itemtype_textarea td {
padding: 4px 0;
}
.path-mod-feedback table.analysis tr:first-child th {
padding-top: 10px;
}
.path-mod-feedback table.analysis tr:hover {
background: #dee2e6;
}
.path-mod-feedback table.analysis td.singlevalue:before,
.path-mod-feedback table.analysis td.optionname:before {
content: "- ";
}
.path-mod-feedback table.analysis tr.isempty {
display: none;
}
.path-mod-feedback #showentrytable td.cell.completed_timemodified,
.path-mod-feedback #showentryanontable td.cell.random_response {
font-weight: bold;
}
.path-mod-feedback #showentrytable td.cell.userpic,
.path-mod-feedback #showentrytable td.cell.deleteentry,
.path-mod-feedback #showentryanontable td.cell.deleteentry {
width: 10px;
}
.path-mod-feedback .response_navigation {
margin: 0.5rem 0;
}
.path-mod-feedback .response_navigation a {
display: block;
}
.path-mod-feedback .response_navigation a.back_to_list {
text-align: center;
}
.path-mod-feedback .response_navigation .prev_response {
text-align: left;
}
.path-mod-feedback .response_navigation .prev_response:before {
/*rtl:raw:
content: ' ► ';
*/
/*rtl:remove*/
content: " ◄ ";
}
.path-mod-feedback .response_navigation .next_response {
text-align: right;
}
.path-mod-feedback .response_navigation .next_response:after {
/*rtl:raw:
content: ' ◄ ';
*/
/*rtl:remove*/
content: " ► ";
}
.yui-skin-sam .yui-layout.path-mod-chat-gui_ajax {
background-color: #fff;
}