From d63a176b0c78695f50f086bbf0558f3f0b8e354b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Fri, 31 Oct 2025 11:54:02 +0100 Subject: [PATCH] fix: add missing style for map scale bar control --- .../map/src/styles/vaadin-map-base-styles.js | 9 +++++++++ packages/map/test/visual/base/map.test.js | 6 ++++++ .../map/baseline/controls-scale-bar.png | Bin 0 -> 5793 bytes packages/map/test/visual/lumo/map.test.js | 6 ++++++ .../map/baseline/controls-scale-bar.png | Bin 0 -> 5982 bytes 5 files changed, 21 insertions(+) create mode 100644 packages/map/test/visual/base/screenshots/map/baseline/controls-scale-bar.png create mode 100644 packages/map/test/visual/lumo/screenshots/map/baseline/controls-scale-bar.png diff --git a/packages/map/src/styles/vaadin-map-base-styles.js b/packages/map/src/styles/vaadin-map-base-styles.js index b6257e8c8d0..f4d0ebc822d 100644 --- a/packages/map/src/styles/vaadin-map-base-styles.js +++ b/packages/map/src/styles/vaadin-map-base-styles.js @@ -151,11 +151,20 @@ export const mapStyles = css` } .ol-scale-bar-inner { + display: flex; border: 1px solid rgba(0, 0, 0, 0.5); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5); overflow: hidden; } + .ol-scale-singlebar-even { + background: #000; + } + + .ol-scale-singlebar-odd { + background: #fff; + } + .ol-scale-step-marker { display: none; } diff --git a/packages/map/test/visual/base/map.test.js b/packages/map/test/visual/base/map.test.js index 7dcf75e05e1..986cac60c95 100644 --- a/packages/map/test/visual/base/map.test.js +++ b/packages/map/test/visual/base/map.test.js @@ -42,6 +42,12 @@ describe('map', () => { element.configuration.getControls().push(new OverviewMap({ label: '', collapseLabel: '' })); await visualDiff(div, 'controls-all-controls'); }); + + it('scale bar', async () => { + // Add scale line using bar mode + element.configuration.getControls().push(new ScaleLine({ bar: true, text: true })); + await visualDiff(div, 'controls-scale-bar'); + }); }); describe('theme', () => { diff --git a/packages/map/test/visual/base/screenshots/map/baseline/controls-scale-bar.png b/packages/map/test/visual/base/screenshots/map/baseline/controls-scale-bar.png new file mode 100644 index 0000000000000000000000000000000000000000..4dcb26da958a14336577c84008f18c1a1f8c91ae GIT binary patch literal 5793 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 D1fmhM literal 0 HcmV?d00001 diff --git a/packages/map/test/visual/lumo/map.test.js b/packages/map/test/visual/lumo/map.test.js index 6669f7a35ca..0689511d04f 100644 --- a/packages/map/test/visual/lumo/map.test.js +++ b/packages/map/test/visual/lumo/map.test.js @@ -44,6 +44,12 @@ describe('map', () => { element.configuration.getControls().push(new OverviewMap({ label: '', collapseLabel: '' })); await visualDiff(div, 'controls-all-controls'); }); + + it('scale bar', async () => { + // Add scale line using bar mode + element.configuration.getControls().push(new ScaleLine({ bar: true, text: true })); + await visualDiff(div, 'controls-scale-bar'); + }); }); describe('theme', () => { diff --git a/packages/map/test/visual/lumo/screenshots/map/baseline/controls-scale-bar.png b/packages/map/test/visual/lumo/screenshots/map/baseline/controls-scale-bar.png new file mode 100644 index 0000000000000000000000000000000000000000..ae3a921fb47c70d4dd14928a52f00cdfd96eb450 GIT binary patch literal 5982 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 literal 0 HcmV?d00001