Skip to content

Commit 28b0fa2

Browse files
merelacatomerelacato
authored
Merge pull request #61 from OpenWebconcept/feature/OWC-137-default-icon-color
Feature/owc 137 default icon color
2 parents 6078f54 + 3e5904e commit 28b0fa2

9 files changed

Lines changed: 137 additions & 29 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 ${color}"
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 & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +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>`,
32-
iconSettings
31+
`<div class="leaflet-svg ${iconColor}"><img src=${iconSettings.iconUrl} /></div>`, iconSettings
3332
),
3433
iconAnchor: [12, 32],
3534
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: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,7 @@ onUnmounted(() => {
125125
<div
126126
ref="filterContainer"
127127
class="owc-openkaarten-streetmap__filters"
128-
:style="{ '--owc-filters-primary': primaryColor }"
129-
role="dialog"
128+
role="dialog"
130129
aria-modal="true"
131130
aria-labelledby="filters-title"
132131
aria-describedby="filters-description"
@@ -154,11 +153,11 @@ onUnmounted(() => {
154153
@onChange="datasetChange"
155154
/>
156155
<div
157-
:style="{
158-
'background-color': getDatalayerColor(layer),
159-
}"
160-
class="owc-openkaarten-streetmap__filters__body__list-item__dl-indicator"
161-
/>
156+
:class="[
157+
'owc-openkaarten-streetmap__filters__body__list-item__dl-indicator',
158+
getDatalayerColor(layer),
159+
]"
160+
/>
162161
</li>
163162
</ul>
164163
</div>
@@ -239,10 +238,50 @@ onUnmounted(() => {
239238
align-content: center;
240239
justify-content: space-between;
241240
&__dl-indicator {
241+
background-color: #000000;
242242
width: 28px;
243243
height: 28px;
244244
border-radius: 50%;
245245
opacity: 0.5;
246+
&.marker-black {
247+
background-color: #000000;
248+
}
249+
&.marker-blue {
250+
background-color: #0072B2;
251+
}
252+
&.marker-brown {
253+
background-color: #A0522D;
254+
}
255+
&.marker-darkgray {
256+
background-color: #555555;
257+
}
258+
&.marker-deep-purple {
259+
background-color: #4B0082;
260+
}
261+
&.marker-gray {
262+
background-color: #757575;
263+
}
264+
&.marker-green {
265+
background-color: #008661;
266+
}
267+
&.marker-navy-blue {
268+
background-color: #003366;
269+
}
270+
&.marker-orange {
271+
background-color: #9D6D00;
272+
}
273+
&.marker-purple {
274+
background-color: #A26085;
275+
}
276+
&.marker-red {
277+
background-color: #C15500;
278+
}
279+
&.marker-turquoise {
280+
background-color: #3B7BA0;
281+
}
282+
&.marker-yellow {
283+
background-color: #7E7722;
284+
}
246285
}
247286
}
248287
}

‎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: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ const emit = defineEmits(['closeCard']);
1313
<button
1414
class="owc-openkaarten-streetmap__tooltip-card__close-btn"
1515
aria-label="Sluit"
16-
:style="{
17-
'--owc-openkaarten-streetmap--close-btn-color': primaryColor,
18-
}"
19-
@click="$emit('closeCard')"
16+
@click="$emit('closeCard')"
2017
>
2118
<svg
2219
width="20"

‎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+
&.marker-black {
425+
--owc-openkaarten-streetmap--cluster-color: #000000;
426+
}
427+
&.marker-blue {
428+
--owc-openkaarten-streetmap--cluster-color: #0072B2;
429+
}
430+
&.marker-brown {
431+
--owc-openkaarten-streetmap--cluster-color: #A0522D;
432+
}
433+
&.marker-darkgray {
434+
--owc-openkaarten-streetmap--cluster-color: #555555;
435+
}
436+
&.marker-deep-purple {
437+
--owc-openkaarten-streetmap--cluster-color: #4B0082;
438+
}
439+
&.marker-gray {
440+
--owc-openkaarten-streetmap--cluster-color: #757575;
441+
}
442+
&.marker-green {
443+
--owc-openkaarten-streetmap--cluster-color: #008661;
444+
}
445+
&.marker-navy-blue {
446+
--owc-openkaarten-streetmap--cluster-color: #003366;
447+
}
448+
&.marker-orange {
449+
--owc-openkaarten-streetmap--cluster-color: #9D6D00;
450+
}
451+
&.marker-purple {
452+
--owc-openkaarten-streetmap--cluster-color: #A26085;
453+
}
454+
&.marker-red {
455+
--owc-openkaarten-streetmap--cluster-color: #C15500;
456+
}
457+
&.marker-turquoise {
458+
--owc-openkaarten-streetmap--cluster-color: #3B7BA0;
459+
}
460+
&.marker-yellow {
461+
--owc-openkaarten-streetmap--cluster-color: #7E7722;
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);
493+
border: 4px solid #000000;
458494
transform: rotate(-45deg);
459495
img {
460496
transform: rotate(45deg);
461497
}
498+
&.marker-black {
499+
border: 4px solid #000000;
500+
}
501+
&.marker-blue {
502+
border: 4px solid #0072B2;
503+
}
504+
&.marker-brown {
505+
border: 4px solid #A0522D;
506+
}
507+
&.marker-darkgray {
508+
border: 4px solid #555555;
509+
}
510+
&.marker-deep-purple {
511+
border: 4px solid #4B0082;
512+
}
513+
&.marker-gray {
514+
border: 4px solid #757575;
515+
}
516+
&.marker-green {
517+
border: 4px solid #008661;
518+
}
519+
&.marker-navy-blue {
520+
border: 4px solid #003366;
521+
}
522+
&.marker-orange {
523+
border: 4px solid #9D6D00;
524+
}
525+
&.marker-purple {
526+
border: 4px solid #A26085;
527+
}
528+
&.marker-red {
529+
border: 4px solid #C15500;
530+
}
531+
&.marker-turquoise {
532+
border: 4px solid #3B7BA0;
533+
}
534+
&.marker-yellow {
535+
border: 4px solid #7E7722;
536+
}
462537
}
463538
}
464539
}

‎src/blocks/owc-openkaarten/streetmap/assets/styles/style.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,7 @@
5454
&:first-child {
5555
border-bottom-right-radius: 3px;
5656
border-bottom-left-radius: 0;
57-
border-left: 1px solid
58-
var(--owc-openkaarten-streetmap--primary-color) !important;
57+
border-left: 1px solid var(--owc-openkaarten-streetmap--primary-color) !important;
5958
border-top-left-radius: 3px;
6059
border-top-right-radius: 0;
6160
}

0 commit comments

Comments
 (0)