mirror of
https://github.com/moodle/moodle.git
synced 2025-08-08 10:26:40 +02:00
MDL-81745 mod_feedback: Refactor editor drag and drop
- Remove YUI drag and drop. - Add new 'mod_feedback\external\questions\reorder' web service. - Use SortableList JS component to refactor drag and drop, using the new webservice. - Update new SCSS styles - Fix and create Behat scenarios
This commit is contained in:
Mikel Martín
parent
53c89cb985
commit
801f8cc246
23 changed files with 413 additions and 445 deletions
|
|
@ -1589,12 +1589,6 @@ $popout-header-height: 4rem;
|
|||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.drag_target_active {
|
||||
opacity: .25;
|
||||
}
|
||||
.drag_item_active {
|
||||
opacity: .5;
|
||||
}
|
||||
.feedback_bar_image {
|
||||
height: 10px;
|
||||
}
|
||||
|
|
@ -1611,39 +1605,44 @@ $popout-header-height: 4rem;
|
|||
width: 10%;
|
||||
}
|
||||
}
|
||||
.feedback_form {
|
||||
.itemactions {
|
||||
display: inline-block;
|
||||
margin: 0 map-get($spacers, 2);
|
||||
}
|
||||
}
|
||||
.feedback-item-label {
|
||||
width: 100%;
|
||||
}
|
||||
// Feedback edit form.
|
||||
#feedback_edit_form {
|
||||
[id*=_feedback_item_].feedback_itemlist {
|
||||
[id*=_feedback_item_].feedback_itemlist,
|
||||
.feedback_itemlist.sortable-list-is-dragged {
|
||||
padding: map-get($spacers, 3);
|
||||
border: $border-width solid $border-color;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
@include border-radius();
|
||||
.itemhandle {
|
||||
position: absolute;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
.itemname {
|
||||
margin-right: map-get($spacers, 5);
|
||||
}
|
||||
.action-menu {
|
||||
.itemactions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.dropdown-toggle {
|
||||
@include border-radius(.5rem);
|
||||
width: $icon-medium-width;
|
||||
height: $icon-medium-height;
|
||||
}
|
||||
}
|
||||
.dropdown-toggle {
|
||||
border-radius: .5rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
&.sortable-list-current-position {
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
.sortable-list-is-dragged {
|
||||
opacity: .75;
|
||||
max-width: $course-content-maxwidth;
|
||||
}
|
||||
.loading-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(50% - .5rem);
|
||||
}
|
||||
}
|
||||
|
||||
// Templates page.
|
||||
|
|
|
|||
|
|
@ -35071,12 +35071,6 @@ img.userpicture {
|
|||
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;
|
||||
}
|
||||
|
|
@ -35089,35 +35083,46 @@ img.userpicture {
|
|||
.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-item-label {
|
||||
width: 100%;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist {
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged {
|
||||
padding: 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
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 .itemname,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemname {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .action-menu {
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemactions,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemactions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .dropdown-toggle {
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemactions .dropdown-toggle,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemactions .dropdown-toggle {
|
||||
border-radius: 0.5rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist.sortable-list-current-position,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged.sortable-list-current-position {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form .sortable-list-is-dragged {
|
||||
opacity: 0.75;
|
||||
max-width: 830px;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form .loading-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(50% - 0.5rem);
|
||||
}
|
||||
.path-mod-feedback#page-mod-feedback-manage_templates .coursetemplates .no-overflow,
|
||||
.path-mod-feedback#page-mod-feedback-manage_templates .publictemplates .no-overflow {
|
||||
overflow: visible;
|
||||
|
|
|
|||
|
|
@ -35071,12 +35071,6 @@ img.userpicture {
|
|||
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;
|
||||
}
|
||||
|
|
@ -35089,35 +35083,46 @@ img.userpicture {
|
|||
.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-item-label {
|
||||
width: 100%;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist {
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged {
|
||||
padding: 1rem;
|
||||
border: 1px solid #dee2e6;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
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 .itemname,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemname {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .action-menu {
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemactions,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemactions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .dropdown-toggle {
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist .itemactions .dropdown-toggle,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged .itemactions .dropdown-toggle {
|
||||
border-radius: 0.5rem;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form [id*=_feedback_item_].feedback_itemlist.sortable-list-current-position,
|
||||
.path-mod-feedback #feedback_edit_form .feedback_itemlist.sortable-list-is-dragged.sortable-list-current-position {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form .sortable-list-is-dragged {
|
||||
opacity: 0.75;
|
||||
max-width: 830px;
|
||||
}
|
||||
.path-mod-feedback #feedback_edit_form .loading-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(50% - 0.5rem);
|
||||
}
|
||||
.path-mod-feedback#page-mod-feedback-manage_templates .coursetemplates .no-overflow,
|
||||
.path-mod-feedback#page-mod-feedback-manage_templates .publictemplates .no-overflow {
|
||||
overflow: visible;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue