Commit 675f8e24 authored by Ferran Recio Calderó's avatar Ferran Recio Calderó
Browse files

MDL-72776 theme_boost: new editing progress effect

parent d135a120
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -201,7 +201,13 @@ define(
* @returns {Node}
*/
var addSectionLightbox = function(sectionelement) {
var lightbox = M.util.add_lightbox(Y, Y.Node(sectionelement.get(0)));
const item = sectionelement.get(0);
var lightbox = M.util.add_lightbox(Y, Y.Node(item));
if (item.dataset.for == 'section' && item.dataset.id) {
courseeditor.dispatch('sectionLock', [item.dataset.id], true);
lightbox.setAttribute('data-state', 'section');
lightbox.setAttribute('data-state-id', item.dataset.id);
}
lightbox.show();
return lightbox;
};
......@@ -237,6 +243,14 @@ define(
if (lightbox) {
window.setTimeout(function() {
lightbox.hide();
// Unlock state if necessary.
if (lightbox.getAttribute('data-state')) {
courseeditor.dispatch(
`${lightbox.getAttribute('data-state')}Lock`,
[lightbox.getAttribute('data-state-id')],
false
);
}
}, delay);
}
};
......@@ -776,18 +790,13 @@ define(
return;
}
// Send the element is locked. Reactive events are only triggered when the state
// read only mode is restored. We want to notify the interface the element is
// locked so we need to do a quick lock operation before performing the rest
// of the mutation.
statemanager.setReadOnly(false);
cm.locked = true;
statemanager.setReadOnly(true);
// Send the element is locked.
courseeditor.dispatch('cmLock', [cm.id], true);
// Now we do the real mutation.
statemanager.setReadOnly(false);
// This locked will take effect when the read only is restored.
// This unlocked will take effect when the read only is restored.
cm.locked = false;
switch (action) {
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -82,12 +82,12 @@ export default class extends DndSection {
}
/**
* Validate if the drop data can be dropped over the component.
*
* @param {Object} dropdata the exported drop data.
* @returns {boolean}
*/
validateDropData(dropdata) {
* Validate if the drop data can be dropped over the component.
*
* @param {Object} dropdata the exported drop data.
* @returns {boolean}
*/
validateDropData(dropdata) {
// If the format uses one section per page sections dropping in the content is ignored.
if (dropdata?.type === 'section' && this.reactive.sectionReturn != 0) {
return false;
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
......@@ -466,6 +466,7 @@ export default class {
if (target.hasAttribute('draggable')) {
target.setAttribute('draggable', false);
}
target.setAttribute('aria-busy', true);
} else {
// Enable interactions.
target.style.pointerEvents = null;
......@@ -474,6 +475,7 @@ export default class {
if (target.hasAttribute('draggable')) {
target.setAttribute('draggable', true);
}
target.setAttribute('aria-busy', false);
}
}
......
/* course.less */
$course-editinprogress-bg: $gray-100 !default;
/* COURSE CONTENT */
.section_add_menus {
......@@ -189,24 +187,59 @@ body:not(.editing) .sitetopic ul.section {
}
}
}
// Remove old spinners if the reactive state is ready.
.course-content .stateready .section .spinner {
display: none;
}
// New editing in progress spinners.
.editinprogress {
opacity: .7;
animation: editinprogress-pulse 2s infinite linear;
position: relative;
& > * {
opacity: .4;
}
.corelightbox,
.lightbox {
display: none;
}
&:after {
position: absolute;
font-family: "FontAwesome";
font-size: 20px;
color: $gray-600;
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
left: calc(50% - 15px);
top: calc(50% - 15px);
animation: editinprogress-rotation 2s infinite linear;
}
// Prevent inner editingprogress.
.editinprogress {
&:after {
display: none;
}
}
}
}
@keyframes editinprogress-pulse {
@keyframes editinprogress-rotation {
0% {
background-color: $course-editinprogress-bg;
filter: grayscale(60%);
opacity: 0;
transform: rotate(0deg);
}
50% {
background-color: darken($course-editinprogress-bg, 5%);
filter: grayscale(40%);
opacity: 1;
}
100% {
background-color: $course-editinprogress-bg;
filter: grayscale(60%);
opacity: 0;
transform: rotate(359deg);
}
}
......
......@@ -13774,20 +13774,42 @@ body:not(.editing) .sitetopic ul.section {
*/
padding-left: 2rem; }
 
.editing .course-content .stateready .section .spinner {
display: none; }
.editing .editinprogress {
opacity: .7;
animation: editinprogress-pulse 2s infinite linear; }
position: relative; }
.editing .editinprogress > * {
opacity: .4; }
.editing .editinprogress .corelightbox,
.editing .editinprogress .lightbox {
display: none; }
.editing .editinprogress:after {
position: absolute;
font-family: "FontAwesome";
font-size: 20px;
color: #6a737b;
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
left: calc(50% - 15px);
top: calc(50% - 15px);
animation: editinprogress-rotation 2s infinite linear; }
.editing .editinprogress .editinprogress:after {
display: none; }
 
@keyframes editinprogress-pulse {
@keyframes editinprogress-rotation {
0% {
background-color: #f8f9fa;
filter: grayscale(60%); }
opacity: 0;
transform: rotate(0deg); }
50% {
background-color: #e9ecef;
filter: grayscale(40%); }
opacity: 1; }
100% {
background-color: #f8f9fa;
filter: grayscale(60%); } }
opacity: 0;
transform: rotate(359deg); } }
 
.editing_show + .editing_assign,
.editing_hide + .editing_assign {
......
......@@ -13774,20 +13774,42 @@ body:not(.editing) .sitetopic ul.section {
*/
padding-left: 2rem; }
 
.editing .course-content .stateready .section .spinner {
display: none; }
.editing .editinprogress {
opacity: .7;
animation: editinprogress-pulse 2s infinite linear; }
position: relative; }
.editing .editinprogress > * {
opacity: .4; }
.editing .editinprogress .corelightbox,
.editing .editinprogress .lightbox {
display: none; }
.editing .editinprogress:after {
position: absolute;
font-family: "FontAwesome";
font-size: 20px;
color: #6a737b;
content: "";
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
left: calc(50% - 15px);
top: calc(50% - 15px);
animation: editinprogress-rotation 2s infinite linear; }
.editing .editinprogress .editinprogress:after {
display: none; }
 
@keyframes editinprogress-pulse {
@keyframes editinprogress-rotation {
0% {
background-color: #f8f9fa;
filter: grayscale(60%); }
opacity: 0;
transform: rotate(0deg); }
50% {
background-color: #e9ecef;
filter: grayscale(40%); }
opacity: 1; }
100% {
background-color: #f8f9fa;
filter: grayscale(60%); } }
opacity: 0;
transform: rotate(359deg); } }
 
.editing_show + .editing_assign,
.editing_hide + .editing_assign {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment