From 3eb148097c951cd165568124c4947172d7f4e1da Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 5 Nov 2020 18:32:59 +0300 Subject: [PATCH 1/2] [all] changed 'loading ' animated image --- .../resources/img/load-mask/loading-small.svg | 5 ++++ .../main/resources/img/load-mask/loading.gif | Bin 3453 -> 0 bytes .../main/resources/img/load-mask/loading.svg | 5 ++++ apps/common/main/resources/less/loadmask.less | 26 ++++++++++++++---- 4 files changed, 31 insertions(+), 5 deletions(-) create mode 100644 apps/common/main/resources/img/load-mask/loading-small.svg delete mode 100644 apps/common/main/resources/img/load-mask/loading.gif create mode 100644 apps/common/main/resources/img/load-mask/loading.svg diff --git a/apps/common/main/resources/img/load-mask/loading-small.svg b/apps/common/main/resources/img/load-mask/loading-small.svg new file mode 100644 index 000000000..d2ff97523 --- /dev/null +++ b/apps/common/main/resources/img/load-mask/loading-small.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/apps/common/main/resources/img/load-mask/loading.gif b/apps/common/main/resources/img/load-mask/loading.gif deleted file mode 100644 index 4d9046503349549f3e319bb64c3db066792d28a9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3453 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 + + + + \ No newline at end of file diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less index 443bf7283..1534c7e3e 100644 --- a/apps/common/main/resources/less/loadmask.less +++ b/apps/common/main/resources/less/loadmask.less @@ -1,4 +1,8 @@ @loadmask-zindex: @zindex-modal + 100; +@loadmask-image-height: 28px; +@loadmask-image-width: 28px; +@loadmask-small-image-height: 20px; +@loadmask-small-image-width: 20px; .asc-loadmask { position: absolute; @@ -15,10 +19,10 @@ position: absolute; z-index: @loadmask-zindex + 1; padding: 20px; - line-height: 33px; + line-height: @loadmask-image-height; border: none; background-image: none; - background-color: fade(darken(@gray-deep, 15%), 70%); + background-color: fade(@black, 90%); color: @gray-light; .border-radius(@border-radius-large); @@ -28,9 +32,9 @@ } .asc-loadmask-image { - background-image: ~"url(@{common-image-const-path}/load-mask/loading.gif)"; - height: 33px; - width: 33px; + background-image: ~"url(@{common-image-const-path}/load-mask/loading.svg)"; + height: @loadmask-image-height; + width: @loadmask-image-width; float: left; margin-left: 20px; } @@ -39,6 +43,18 @@ .fontsize(@font-size-large); margin: 0 20px; } + + .left-panel & { + line-height: @loadmask-small-image-height; + background-color: transparent; + color: @gray-deep; + + .asc-loadmask-image { + background-image: ~"url(@{common-image-const-path}/load-mask/loading-small.svg)"; + height: @loadmask-small-image-height; + width: @loadmask-small-image-width; + } + } } .app-error-panel { From eaea4059a7e11092a02ffb01673f8eefa9d31c27 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Thu, 5 Nov 2020 20:01:55 +0300 Subject: [PATCH 2/2] [all] corrected 'loading' mask's markup --- apps/common/main/lib/component/LoadMask.js | 4 ---- apps/common/main/resources/less/loadmask.less | 17 ++++++++++++++--- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/apps/common/main/lib/component/LoadMask.js b/apps/common/main/lib/component/LoadMask.js index b9973a33b..323bbba84 100644 --- a/apps/common/main/lib/component/LoadMask.js +++ b/apps/common/main/lib/component/LoadMask.js @@ -128,10 +128,6 @@ define([ ownerEl.append(maskeEl); ownerEl.append(loaderEl); - loaderEl.css({ - top : Math.round(ownerEl.height() / 2 - (loaderEl.height() + parseInt(loaderEl.css('padding-top')) + parseInt(loaderEl.css('padding-bottom'))) / 2) + 'px', - left: Math.round(ownerEl.width() / 2 - (loaderEl.width() + parseInt(loaderEl.css('padding-left')) + parseInt(loaderEl.css('padding-right'))) / 2) + 'px' - }); // if (ownerEl.height()<1 || ownerEl.width()<1) // loaderEl.css({visibility: 'hidden'}); diff --git a/apps/common/main/resources/less/loadmask.less b/apps/common/main/resources/less/loadmask.less index 1534c7e3e..ab5526ff1 100644 --- a/apps/common/main/resources/less/loadmask.less +++ b/apps/common/main/resources/less/loadmask.less @@ -18,7 +18,7 @@ .asc-loadmask-body { position: absolute; z-index: @loadmask-zindex + 1; - padding: 20px; + padding: 24px; line-height: @loadmask-image-height; border: none; background-image: none; @@ -26,6 +26,10 @@ color: @gray-light; .border-radius(@border-radius-large); + left: 50%; + top: 50%; + transform: translate(-50%); + & > div { display: inline-block; vertical-align: middle; @@ -36,24 +40,31 @@ height: @loadmask-image-height; width: @loadmask-image-width; float: left; - margin-left: 20px; + margin-left: 8px; } .asc-loadmask-title { .fontsize(@font-size-large); - margin: 0 20px; + margin: 0 8px 0 12px; } .left-panel & { line-height: @loadmask-small-image-height; background-color: transparent; color: @gray-deep; + padding: 8px; + top: 78px; + transform: translate(-50%, 0); .asc-loadmask-image { background-image: ~"url(@{common-image-const-path}/load-mask/loading-small.svg)"; height: @loadmask-small-image-height; width: @loadmask-small-image-width; } + + .asc-loadmask-title { + margin: 0 8px; + } } }