mirror of
https://github.com/moodle/moodle.git
synced 2025-08-05 00:46:50 +02:00
MDL-72776 theme_boost: new editing progress effect
This commit is contained in:
Ferran Recio
parent
d135a1200a
commit
675f8e24ca
11 changed files with 139 additions and 51 deletions
2
course/amd/build/actions.min.js
vendored
2
course/amd/build/actions.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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 diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
/* 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 .editinprogress {
|
||||
opacity: .7;
|
||||
animation: editinprogress-pulse 2s infinite linear; }
|
||||
.editing .course-content .stateready .section .spinner {
|
||||
display: none; }
|
||||
|
||||
@keyframes editinprogress-pulse {
|
||||
.editing .editinprogress {
|
||||
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-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 .editinprogress {
|
||||
opacity: .7;
|
||||
animation: editinprogress-pulse 2s infinite linear; }
|
||||
.editing .course-content .stateready .section .spinner {
|
||||
display: none; }
|
||||
|
||||
@keyframes editinprogress-pulse {
|
||||
.editing .editinprogress {
|
||||
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-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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue