Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: spinner for print map loading indicator #1891

Merged
merged 2 commits into from
Nov 24, 2023
+18 −1
Merged

feature: spinner for print map loading indicator #1891

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9be9785
feature: spinner for print map loading indicator
Grammostola Nov 5, 2023
5920854
fix: make spinner more visible
Grammostola Nov 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions scss/_print.scss
View file
Original file line number Diff line number Diff line change
@@ -116,6 +116,16 @@ $print-scale-line-font-size: $font-size-smallest;
display: block;
}

.print-map-loading-spinner {
display: inline-block;
width: 45px;
height: 45px;
border: 16px solid rgba(255, 255, 255, 0.884);
border-radius: 50%;
border-top-color: #008ff5;
animation: spin 1s ease-in-out infinite;
}

// media print settings
@media print {
.no-print {
9 changes: 8 additions & 1 deletion src/controls/print/print-component.js
View file
Original file line number Diff line number Diff line change
@@ -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 = {}) {
</div>
</div>
</div>
${centerComponent.render()}
<div id="o-print-tools-left" class="top-left fixed no-print flex column spacing-vertical-small z-index-ontop-top height-full">
${printSettings.render()}
${printInteractionToggle.render()}