Skip to content

Commit bff8f31

Browse files
merelacatomerelacato
committed
OWC-137 set default icon color + predefined set of colors to classes
1 parent 015a746 commit bff8f31

8 files changed

Lines changed: 134 additions & 20 deletions

File tree

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-cluster.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ export const makeMarkerCluster = ({
2828
return L.divIcon({
2929
html: `
3030
<div
31-
class="owc-openkaarten-streetmap__cluster-group__circle"
32-
style="--owc-openkaarten-streetmap--cluster-color: ${color};"
31+
class="owc-openkaarten-streetmap__cluster-group__circle owc-openkaarten-streetmap__cluster-group__circle-${color.replace("#", "")}"
3332
>
3433
<span class="owc-openkaarten-streetmap__cluster-group__count">${count}</span>
3534
</div>`,

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/utils/make-marker-icon.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const makeMarkerIcon = (L, { marker, defaultColor }) => {
2828
return L.divIcon({
2929
className: 'leaflet-custom-icon--hosted-svg',
3030
html: L.Util.template(
31-
`<div style="--l-icon-color: ${iconColor};" class="leaflet-svg"><img src=${iconSettings.iconUrl} /></div>`, iconSettings
31+
`<div class="leaflet-svg leaflet-svg-${iconColor.replace("#", "")}"><img src=${iconSettings.iconUrl} /></div>`, iconSettings
3232
),
3333
iconAnchor: [12, 32],
3434
iconSize: [25, 30],

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/App.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,13 @@ onMounted(() => {
238238

239239
<style lang="scss">
240240
#owc-openkaarten-streetmap {
241+
--owc-filters-primary: #328725;
242+
--owc-openkaarten-streetmap--primary-color: #328725;
243+
--search-primary-color: #328725;
244+
--owc-openkaarten-streetmap--close-btn-color: #328725;
245+
--button-color: #328725;
246+
--owc-openkaarten-streetmap--primary-color: #328725;
247+
241248
container-type: inline-size;
242249
max-width: 100%;
243250
}

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseFilters.vue‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,6 @@ onUnmounted(() => {
125125
<div
126126
ref="filterContainer"
127127
class="owc-openkaarten-streetmap__filters"
128-
:style="{ '--owc-filters-primary': primaryColor }"
129128
role="dialog"
130129
aria-modal="true"
131130
aria-labelledby="filters-title"
@@ -154,9 +153,11 @@ onUnmounted(() => {
154153
@onChange="datasetChange"
155154
/>
156155
<div
157-
:style="{'background-color': getDatalayerColor(layer)}"
158-
class="owc-openkaarten-streetmap__filters__body__list-item__dl-indicator"
159-
/>
156+
:class="[
157+
'owc-openkaarten-streetmap__filters__body__list-item__dl-indicator',
158+
'owc-openkaarten-streetmap__filters__body__list-item__dl-indicator-' + getDatalayerColor(layer).replace('#', '')
159+
]"
160+
/>
160161
</li>
161162
</ul>
162163
</div>
@@ -237,10 +238,50 @@ onUnmounted(() => {
237238
align-content: center;
238239
justify-content: space-between;
239240
&__dl-indicator {
241+
background-color: #0072B2;
240242
width: 28px;
241243
height: 28px;
242244
border-radius: 50%;
243245
opacity: 0.5;
246+
&-0072B2 {
247+
background-color: #0072B2;
248+
}
249+
&-9D6D00 {
250+
background-color: #9D6D00;
251+
}
252+
&-C15500 {
253+
background-color: #C15500;
254+
}
255+
&-008661 {
256+
background-color: #008661;
257+
}
258+
&-7E7722 {
259+
background-color: #7E7722;
260+
}
261+
&-A26085 {
262+
background-color: #A26085;
263+
}
264+
&-3B7BA0 {
265+
background-color: #3B7BA0;
266+
}
267+
&-A0522D {
268+
background-color: #A0522D;
269+
}
270+
&-757575 {
271+
background-color: #757575;
272+
}
273+
&-000000 {
274+
background-color: #000000;
275+
}
276+
&-555555 {
277+
background-color: #555555;
278+
}
279+
&-003366 {
280+
background-color: #003366;
281+
}
282+
&-4B0082 {
283+
background-color: #4B0082;
284+
}
244285
}
245286
}
246287
}

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseSearchInput.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const searchStatus = computed(() => {
4141
<form
4242
@submit="handleSubmit"
4343
class="search-form"
44-
:style="{ '--search-primary-color': primaryColor }"
4544
>
4645
<label class="sr-only" for="location-search">Zoek op straat en/of plaats of postcode</label>
4746
<div class="search-wrapper">

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/BaseTooltipCardClose.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const emit = defineEmits(['closeCard']);
1313
<button
1414
class="owc-openkaarten-streetmap__tooltip-card__close-btn"
1515
aria-label="Sluit"
16-
:style="{'--owc-openkaarten-streetmap--close-btn-color': primaryColor }"
1716
@click="$emit('closeCard')"
1817
>
1918
<svg

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/ListView.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,6 @@ const handleSearch = (query) => {
119119
<template>
120120
<div
121121
class="list-view"
122-
:style="{
123-
'--owc-filters-primary': primaryColor,
124-
'--owc-openkaarten-streetmap--primary-color': primaryColor,
125-
'--owc-filters-secondary': '#d2d2d2'
126-
}"
127122
>
128123
<div class="list-view__controls">
129124
<BaseSearchInput
@@ -197,7 +192,6 @@ const handleSearch = (query) => {
197192
v-if="hasMoreItems"
198193
@click="loadMore"
199194
class="list-view__load-more"
200-
:style="{ '--button-color': primaryColor }"
201195
>
202196
Toon meer resultaten ({{ paginatedLocations.length }} van {{ filteredLocations.length }})
203197
</button>

‎src/blocks/owc-openkaarten/streetmap/assets/scripts/vue/TheMap.vue‎

Lines changed: 80 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -334,10 +334,6 @@ const handleSearch = async (query) => {
334334
<template v-cloak>
335335
<div
336336
class="owc-openkaarten-streetmap__map"
337-
:style="{
338-
'--owc-openkaarten-streetmap--primary-color': primaryColor,
339-
'--owc-openkaarten-streetmap--cluster-color': props.primaryColor,
340-
}"
341337
>
342338
<div class="owc-openkaarten-streetmap__controls">
343339
<BaseSearchInput
@@ -409,6 +405,7 @@ const handleSearch = async (query) => {
409405
border-radius: 50%;
410406
411407
&__circle {
408+
--owc-openkaarten-streetmap--cluster-color: #328725;
412409
position: absolute;
413410
top: 0;
414411
left: 0;
@@ -424,6 +421,45 @@ const handleSearch = async (query) => {
424421
rgba(255, 255, 255, 0.05) 75%
425422
);
426423
background: var(--owc-cluster-background);
424+
&-0072B2 {
425+
--owc-openkaarten-streetmap--cluster-color: #0072B2;
426+
}
427+
&-9D6D00 {
428+
--owc-openkaarten-streetmap--cluster-color: #9D6D00;
429+
}
430+
&-C15500 {
431+
--owc-openkaarten-streetmap--cluster-color: #C15500;
432+
}
433+
&-008661 {
434+
--owc-openkaarten-streetmap--cluster-color: #008661;
435+
}
436+
&-7E7722 {
437+
--owc-openkaarten-streetmap--cluster-color: #7E7722;
438+
}
439+
&-A26085 {
440+
--owc-openkaarten-streetmap--cluster-color: #A26085;
441+
}
442+
&-3B7BA0 {
443+
--owc-openkaarten-streetmap--cluster-color: #3B7BA0;
444+
}
445+
&-A0522D {
446+
--owc-openkaarten-streetmap--cluster-color: #A0522D;
447+
}
448+
&-757575 {
449+
--owc-openkaarten-streetmap--cluster-color: #757575;
450+
}
451+
&-000000 {
452+
--owc-openkaarten-streetmap--cluster-color: #000000;
453+
}
454+
&-555555 {
455+
--owc-openkaarten-streetmap--cluster-color: #555555;
456+
}
457+
&-003366 {
458+
--owc-openkaarten-streetmap--cluster-color: #003366;
459+
}
460+
&-4B0082 {
461+
--owc-openkaarten-streetmap--cluster-color: #4B0082;
462+
}
427463
}
428464
429465
&__count {
@@ -454,11 +490,50 @@ const handleSearch = async (query) => {
454490
padding: 2px;
455491
border-radius: 50% 50% 50% 0;
456492
background-color: #fff;
457-
border: 4px solid var(--l-icon-color, #000);
493+
border: 4px solid #0072B2;
458494
transform: rotate(-45deg);
459495
img {
460496
transform: rotate(45deg);
461497
}
498+
&-0072B2 {
499+
border: 4px solid #0072B2;
500+
}
501+
&-9D6D00 {
502+
border: 4px solid #9D6D00;
503+
}
504+
&-C15500 {
505+
border: 4px solid #C15500;
506+
}
507+
&-008661 {
508+
border: 4px solid #008661;
509+
}
510+
&-7E7722 {
511+
border: 4px solid #7E7722;
512+
}
513+
&-A26085 {
514+
border: 4px solid #A26085;
515+
}
516+
&-3B7BA0 {
517+
border: 4px solid #3B7BA0;
518+
}
519+
&-A0522D {
520+
border: 4px solid #A0522D;
521+
}
522+
&-757575 {
523+
border: 4px solid #757575;
524+
}
525+
&-000000 {
526+
border: 4px solid #000000;
527+
}
528+
&-555555 {
529+
border: 4px solid #555555;
530+
}
531+
&-003366 {
532+
border: 4px solid #003366;
533+
}
534+
&-4B0082 {
535+
border: 4px solid #4B0082;
536+
}
462537
}
463538
}
464539
}

0 commit comments

Comments
 (0)