From ae01fe1ba4f2f4d8560bb9c47f779f74e4eddf82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Tue, 23 Apr 2024 13:40:12 +0200
Subject: [PATCH] MDL-81743 mod_feedback: Improve 'Edit' page UI

- 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
---
 mod/feedback/classes/complete_form.php    |   6 +-
 mod/feedback/edit_item.php                |   1 +
 mod/feedback/item/feedback_item_class.php |  27 ++--
 mod/feedback/styles.css                   | 123 -------------------
 theme/boost/scss/moodle/modules.scss      | 143 ++++++++++++++++++++++
 theme/boost/style/moodle.css              | 123 +++++++++++++++++++
 theme/classic/style/moodle.css            | 123 +++++++++++++++++++
 7 files changed, 409 insertions(+), 137 deletions(-)
 delete mode 100644 mod/feedback/styles.css

diff --git a/mod/feedback/classes/complete_form.php b/mod/feedback/classes/complete_form.php
index 3840e6fcbf9..29e3190abcf 100644
--- a/mod/feedback/classes/complete_form.php
+++ b/mod/feedback/classes/complete_form.php
@@ -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']));
     }
 
     /**
diff --git a/mod/feedback/edit_item.php b/mod/feedback/edit_item.php
index cbc88b076f9..892ec394fc4 100644
--- a/mod/feedback/edit_item.php
+++ b/mod/feedback/edit_item.php
@@ -99,6 +99,7 @@ $PAGE->activityheader->set_attrs([
     "hidecompletion" => true,
     "description" => ''
 ]);
+$PAGE->add_body_class('limitedwidth');
 echo $OUTPUT->header();
 
 /// print the tabs
diff --git a/mod/feedback/item/feedback_item_class.php b/mod/feedback/item/feedback_item_class.php
index 5585adb49ea..80f9b9edc93 100644
--- a/mod/feedback/item/feedback_item_class.php
+++ b/mod/feedback/item/feedback_item_class.php
@@ -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;
     }
diff --git a/mod/feedback/styles.css b/mod/feedback/styles.css
deleted file mode 100644
index 0fcbdad2953..00000000000
--- a/mod/feedback/styles.css
+++ /dev/null
@@ -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;
-}
diff --git a/theme/boost/scss/moodle/modules.scss b/theme/boost/scss/moodle/modules.scss
index 5ae0c605d82..efffa9d030c 100644
--- a/theme/boost/scss/moodle/modules.scss
+++ b/theme/boost/scss/moodle/modules.scss
@@ -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: ' ► ';
+            }
+        }
+    }
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index bba2e639d67..ce51c49df6d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -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;
 }
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 6607b1a5b66..3f3d052c4eb 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -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;
 }