diff --git a/CHANGELOG.md b/CHANGELOG.md index c536d8c4..0eec7b1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Release Notes +## 2024.05.21 + +### Features + +### Bug fixes + +### Enhancements + +- `py-editor` run buttons now display a spinner when disabled, which occurs when the editor is running code. + ## 2023.05.01 ### Features diff --git a/pyscript.core/src/core.css b/pyscript.core/src/core.css index 84473940..81b37e0c 100644 --- a/pyscript.core/src/core.css +++ b/pyscript.core/src/core.css @@ -42,3 +42,34 @@ mpy-config { .mpy-editor-run-button:disabled { opacity: 1; } + +@keyframes spinner { + to { + transform: rotate(360deg); + } +} +.py-editor-run-button:disabled > *, +.mpy-editor-run-button:disabled > * { + display: none; /* hide all the child elements of the run button when it is disabled */ +} +.py-editor-run-button:disabled, +.mpy-editor-run-button:disabled { + border-width: 0; +} +.py-editor-run-button:disabled::before, +.mpy-editor-run-button:disabled::before { + content: ""; + box-sizing: border-box; + position: absolute; + top: 100%; + left: 100%; + width: 20px; + height: 20px; + margin-top: -23px; /* hardcoded value to center the spinner on the run button */ + margin-left: -26px; /* hardcoded value to center the spinner on the run button */ + border-radius: 50%; + border: 2px solid #aaa; + border-top-color: #000; + background-color: #fff; + animation: spinner 0.6s linear infinite; +}