From 9be9785680946905114c5840061d763ead9f67d3 Mon Sep 17 00:00:00 2001 From: Grammostola Date: Sun, 5 Nov 2023 15:28:04 +0100 Subject: [PATCH 1/2] feature: spinner for print map loading indicator --- scss/_print.scss | 10 ++++++++++ src/controls/print/print-component.js | 9 ++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/scss/_print.scss b/scss/_print.scss index 5e759a1b7..baff4a92c 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -116,6 +116,16 @@ $print-scale-line-font-size: $font-size-smallest; display: block; } +.print-map-loading-spinner { + display: inline-block; + width: 35px; + height: 35px; + border: 2px solid rgba(255,255,255,.3); + border-radius: 50%; + border-top-color: #fff; + animation: spin 1s ease-in-out infinite; + } + // media print settings @media print { .no-print { diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js index ae6940e31..c4d256f1c 100644 --- a/src/controls/print/print-component.js +++ b/src/controls/print/print-component.js @@ -7,7 +7,7 @@ import TileWMSSource from 'ol/source/TileWMS'; import TileGrid from 'ol/tilegrid/TileGrid'; import { Group } from 'ol/layer'; import { - Button, Component, cuid, dom + Button, Component, cuid, dom, Element as El } from '../../ui'; import pageTemplate from './page.template'; import PrintMap from './print-map'; @@ -253,6 +253,10 @@ const PrintComponent = function PrintComponent(options = {}) { const printMapComponent = PrintMap({ logo, northArrow, map, viewer, showNorthArrow, printLegend, showPrintLegend }); + const centerComponent = El({ cls: 'flex column align-start absolute center-center transparent z-index-ontop-middle' }); + const printMapSpinner = El({ cls: 'print-map-loading-spinner' }); + centerComponent.addComponent(printMapSpinner); + const closeButton = Button({ cls: 'fixed top-right medium round icon-smaller light box-shadow z-index-ontop-high', icon: '#ic_close_24px', @@ -339,10 +343,12 @@ const PrintComponent = function PrintComponent(options = {}) { function disablePrintToolbar() { printToolbar.setDisabled(true); + document.querySelector(`#${printMapSpinner.getId()}`).style.display = ''; } function enablePrintToolbar() { printToolbar.setDisabled(false); + document.querySelector(`#${printMapSpinner.getId()}`).style.display = 'none'; } function updateScaleOnMove() { @@ -698,6 +704,7 @@ const PrintComponent = function PrintComponent(options = {}) { + ${centerComponent.render()}
${printSettings.render()} ${printInteractionToggle.render()} From 59208548e74e47b1280b97de32c559d54ccfdf52 Mon Sep 17 00:00:00 2001 From: Grammostola Date: Thu, 9 Nov 2023 14:30:27 +0100 Subject: [PATCH 2/2] fix: make spinner more visible --- scss/_print.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_print.scss b/scss/_print.scss index baff4a92c..2656e7154 100644 --- a/scss/_print.scss +++ b/scss/_print.scss @@ -118,11 +118,11 @@ $print-scale-line-font-size: $font-size-smallest; .print-map-loading-spinner { display: inline-block; - width: 35px; - height: 35px; - border: 2px solid rgba(255,255,255,.3); + width: 45px; + height: 45px; + border: 16px solid rgba(255, 255, 255, 0.884); border-radius: 50%; - border-top-color: #fff; + border-top-color: #008ff5; animation: spin 1s ease-in-out infinite; }