[IMP] web: improve design of block_ui

Prior this commit the spinner was an image.
After this commit the spinner is an animated SVG. It also improves the
layout of the block_ui component.

task-2750837

closes odoo/odoo#83811

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>
This commit is contained in:
Brieuc-brd
2022-03-30 11:12:57 +02:00
parent d55740fbbc
commit 05ab3dec89
3 changed files with 40 additions and 9 deletions
+4 -4
View File
@@ -71,12 +71,12 @@ export class BlockUI extends Component {
}
BlockUI.template = xml`
<div t-att-class="state.blockUI ? 'o_blockUI fixed-top d-flex justify-content-center align-items-center flex-column vh-100 bg-black' : ''">
<div t-att-class="state.blockUI ? 'o_blockUI fixed-top d-flex justify-content-center align-items-center flex-column vh-100 bg-black-50' : ''">
<t t-if="state.blockUI">
<div class="o_spinner mb-3 h-auto">
<img src="/web/static/img/spin.png" alt="Loading..."/>
<div class="o_spinner mb-4">
<img src="/web/static/img/spin.svg" alt="Loading..."/>
</div>
<div class="o_message text-center">
<div class="o_message text-center px-4">
<t t-esc="state.line1"/> <br/>
<t t-esc="state.line2"/>
</div>
+2 -5
View File
@@ -1,8 +1,5 @@
.o_blockUI {
cursor: wait;
opacity: 0.6;
img {
animation: fa-spin 1s infinite steps(12);
}
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}