diff --git a/src/app/modules/map/map.provider.ts b/src/app/modules/map/map.provider.ts
index 23564dda..df077841 100644
--- a/src/app/modules/map/map.provider.ts
+++ b/src/app/modules/map/map.provider.ts
@@ -22,7 +22,7 @@ import {
SCUuid,
} from '@openstapps/core';
import {Point, Polygon} from 'geojson';
-import {divIcon, geoJSON, icon, LatLng, Map, marker, Marker} from 'leaflet';
+import {divIcon, geoJSON, LatLng, Map, marker, Marker} from 'leaflet';
import {DataProvider} from '../data/data.provider';
import {MapPosition, PositionService} from './position.service';
import {hasValidLocation} from '../data/types/place/place-types';
@@ -45,14 +45,20 @@ export class MapProvider {
* Provide a point marker for a leaflet map
*
* @param point Point to get marker for
+ * @param className CSS class name
+ * @param iconSize Size of the position icon
*/
- static getPointMarker(point: Point) {
+ static getPointMarker(point: Point, className: string, iconSize: number) {
return marker(geoJSON(point).getBounds().getCenter(), {
- icon: icon({
- iconAnchor: [13, 41],
- iconSize: [25, 41],
- iconUrl: '../assets/marker-icon.png',
- shadowUrl: '../assets/marker-shadow.png',
+ icon: divIcon({
+ className: className,
+ html: `${SCIcon`location_on`}`,
+ iconSize: [iconSize, iconSize],
+ iconAnchor: [iconSize / 2, iconSize],
}),
});
}
@@ -80,12 +86,13 @@ export class MapProvider {
transform-origin: center;
transform: rotate(${position.heading}deg);
font-size: ${iconSize}px;
+ color: var(--ion-color-primary);
"
>${SCIcon`navigation`}`
: `${SCIcon`person_pin_circle`}`,
iconSize: [iconSize, iconSize],
}),
diff --git a/src/app/modules/map/page/map-page.component.ts b/src/app/modules/map/page/map-page.component.ts
index c647f7fd..f1bf1530 100644
--- a/src/app/modules/map/page/map-page.component.ts
+++ b/src/app/modules/map/page/map-page.component.ts
@@ -13,7 +13,6 @@
* this program. If not, see .
*/
import {Location} from '@angular/common';
-import {trigger, style, animate, transition} from '@angular/animations';
import {
ChangeDetectorRef,
Component,
@@ -60,24 +59,6 @@ import {Capacitor} from '@capacitor/core';
styleUrls: ['./map-page.scss'],
templateUrl: './map-page.html',
providers: [ContextMenuService],
- animations: [
- trigger('fadeInOut', [
- transition(':enter', [
- style({transform: 'translateY(200%)', opacity: 0}),
- animate(
- '500ms ease-in-out',
- style({transform: 'translateY(0%)', opacity: 1}),
- ),
- ]),
- transition(':leave', [
- style({transform: 'translateY(0%)', opacity: 1}),
- animate(
- '500ms ease-in-out',
- style({transform: 'translateY(200%)', opacity: 0}),
- ),
- ]),
- ]),
- ],
})
export class MapPageComponent {
/**
@@ -230,7 +211,11 @@ export class MapPageComponent {
return polygonLayer.on('click', this.showItem.bind(this, place.uid));
}
- const markerLayer = MapProvider.getPointMarker(place.geo.point);
+ const markerLayer = MapProvider.getPointMarker(
+ place.geo.point,
+ 'stapps-location',
+ 32,
+ );
return markerLayer.on('click', this.showItem.bind(this, place.uid));
};
@@ -327,7 +312,7 @@ export class MapPageComponent {
this.positionMarker = MapProvider.getPositionMarker(
position,
'stapps-device-location',
- 30,
+ 32,
);
},
error: async _error => {
@@ -407,14 +392,13 @@ export class MapPageComponent {
await (
await this.alertController.create({
header: location.TITLE,
- subHeader: location.SUBTITLE,
message: `${
this.locationStatus?.location === 'denied'
? location.NOT_ALLOWED
: this.locationStatus?.location !== 'granted'
? location.NOT_ENABLED
: unknownError
- }.`,
+ }`,
buttons: ['OK'],
})
).present();
diff --git a/src/app/modules/map/page/map-page.html b/src/app/modules/map/page/map-page.html
index 51121e38..c09e7a3e 100644
--- a/src/app/modules/map/page/map-page.html
+++ b/src/app/modules/map/page/map-page.html
@@ -59,7 +59,6 @@
1"
- [@fadeInOut]
color="light"
shape="round"
size="small"
@@ -70,24 +69,31 @@
}}
-
-
+
+
+
+
+
@@ -95,7 +101,6 @@
1"
- [@fadeInOut]
color="light"
shape="round"
size="small"
@@ -106,24 +111,29 @@
}}
-
-
+
+
+
+
+
@@ -131,6 +141,7 @@
diff --git a/src/app/modules/map/page/map-page.scss b/src/app/modules/map/page/map-page.scss
index e566f70a..96d338e4 100644
--- a/src/app/modules/map/page/map-page.scss
+++ b/src/app/modules/map/page/map-page.scss
@@ -4,6 +4,7 @@ ion-content {
div.map-container {
width: 100%;
height: 100%;
+ position: fixed;
}
& > div {
overflow: hidden;
@@ -33,7 +34,7 @@ ion-toolbar:first-of-type {
div.floating-content {
display: block;
- position: absolute;
+ position: fixed;
left: 0;
right: 0;
bottom: 0;
@@ -41,7 +42,7 @@ ion-toolbar:first-of-type {
width: 100%;
padding: 0 var(--spacing-md) 8vh;
justify-content: center;
-
+
ion-card {
margin: 0;
}
diff --git a/src/app/modules/map/page/modals/map-list-modal.component.ts b/src/app/modules/map/page/modals/map-list-modal.component.ts
index 943ee3d7..e09a03e4 100644
--- a/src/app/modules/map/page/modals/map-list-modal.component.ts
+++ b/src/app/modules/map/page/modals/map-list-modal.component.ts
@@ -13,9 +13,10 @@
* this program. If not, see .
*/
import {Component, Input, OnInit} from '@angular/core';
-import {SCPlace, SCSearchFilter} from '@openstapps/core';
+import {SCSearchBooleanFilter, SCPlace, SCSearchFilter} from '@openstapps/core';
import {MapProvider} from '../../map.provider';
import {ModalController} from '@ionic/angular';
+import {LatLngBounds} from 'leaflet';
/**
* Modal showing a provided list of places
@@ -31,6 +32,11 @@ export class MapListModalComponent implements OnInit {
*/
@Input() filterQuery?: SCSearchFilter;
+ /**
+ * Map visible boundaries limiting items in lust
+ */
+ @Input() mapBounds?: LatLngBounds;
+
/**
* Places to show in the list
*/
@@ -50,8 +56,44 @@ export class MapListModalComponent implements OnInit {
* Populate the list with the results from the search
*/
ngOnInit() {
+ let geofencedFilter: SCSearchBooleanFilter | undefined;
+ if (typeof this.mapBounds !== 'undefined') {
+ geofencedFilter = {
+ arguments: {
+ operation: 'and',
+ filters: [
+ {
+ type: 'geo',
+ arguments: {
+ field: 'geo',
+ shape: {
+ coordinates: [
+ [
+ this.mapBounds.getNorthWest().lng,
+ this.mapBounds.getNorthWest().lat,
+ ],
+ [
+ this.mapBounds.getSouthEast().lng,
+ this.mapBounds.getSouthEast().lat,
+ ],
+ ],
+ type: 'envelope',
+ },
+ spatialRelation: 'intersects',
+ },
+ },
+ ],
+ },
+ type: 'boolean',
+ };
+ if (typeof this.filterQuery !== 'undefined') {
+ geofencedFilter.arguments.filters.push(this.filterQuery);
+ }
+ }
+
+ const geofencedFilterQuery = geofencedFilter ?? this.filterQuery;
this.mapProvider
- .searchPlaces(this.filterQuery, this.queryText)
+ .searchPlaces(geofencedFilterQuery, this.queryText)
.then(result => {
this.items = result.data as SCPlace[];
});
diff --git a/src/app/modules/map/widget/map-widget.component.ts b/src/app/modules/map/widget/map-widget.component.ts
index 550d8d3a..e16b6af8 100644
--- a/src/app/modules/map/widget/map-widget.component.ts
+++ b/src/app/modules/map/widget/map-widget.component.ts
@@ -58,7 +58,11 @@ export class MapWidgetComponent implements OnInit {
* Prepare the map
*/
ngOnInit() {
- const markerLayer = MapProvider.getPointMarker(this.place.geo.point);
+ const markerLayer = MapProvider.getPointMarker(
+ this.place.geo.point,
+ 'stapps-location',
+ 32,
+ );
this.options = {
center: geoJSON(this.place.geo.polygon || this.place.geo.point)
.getBounds()
diff --git a/src/app/modules/menu/context/context-menu.html b/src/app/modules/menu/context/context-menu.html
index 100c6b76..b23009a3 100644
--- a/src/app/modules/menu/context/context-menu.html
+++ b/src/app/modules/menu/context/context-menu.html
@@ -17,6 +17,7 @@
type="overlay"
menuId="context"
contentId="{{ contentId }}"
+ maxEdgeStart="0"
side="end"
>
diff --git a/src/app/modules/schedule/page/modal/modal-event-creator.component.ts b/src/app/modules/schedule/page/modal/modal-event-creator.component.ts
index 023fb024..fff5e47c 100644
--- a/src/app/modules/schedule/page/modal/modal-event-creator.component.ts
+++ b/src/app/modules/schedule/page/modal/modal-event-creator.component.ts
@@ -44,7 +44,7 @@ export class ModalEventCreatorComponent implements OnInit, OnDestroy {
isModal: true,
inputItem: item,
},
- swipeToClose: true,
+ canDismiss: true,
presentingElement: await this.modalController.getTop(),
});
return modal.present();
diff --git a/src/app/modules/schedule/page/schedule-page.html b/src/app/modules/schedule/page/schedule-page.html
index a8f0628d..d26eacf1 100644
--- a/src/app/modules/schedule/page/schedule-page.html
+++ b/src/app/modules/schedule/page/schedule-page.html
@@ -81,7 +81,7 @@
{
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index b0af274f..a3e7731a 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -213,10 +213,9 @@
"MORE": "Mehr"
},
"geolocation": {
- "TITLE": "Standort",
- "SUBTITLE": "Standort nicht erreichbar",
- "NOT_ENABLED": "Standortermittlung auf Deinem Gerät ist nicht aktiviert",
- "NOT_ALLOWED": "Zugriff auf den Standort für die App nicht zugelassen"
+ "TITLE": "Standort nicht verfügbar",
+ "NOT_ENABLED": "Die Standortermittlung auf dem Gerät ist nicht aktiviert",
+ "NOT_ALLOWED": "Du hast den Zugriff auf deinen Standort für diese App abgelehnt. Nutze die Datenschutz-Einstellungen deines Gerätes um den Zugriff zu erlauben."
}
},
"modals": {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 95c9852a..a25fcc55 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -213,10 +213,9 @@
"MORE": "More"
},
"geolocation": {
- "TITLE": "Location",
- "SUBTITLE": "Location not available",
- "NOT_ENABLED": "Location service is not enabled on your device",
- "NOT_ALLOWED": "The app is not allowed to access your location"
+ "TITLE": "Location not available",
+ "NOT_ENABLED": "Location services are not enabled on your device",
+ "NOT_ALLOWED": "The app is not allowed to access your location. Use your device privacy settings to allow it again."
}
},
"modals": {
diff --git a/src/assets/icons.min.woff2 b/src/assets/icons.min.woff2
index 1c93f73c..9bda7a4f 100644
Binary files a/src/assets/icons.min.woff2 and b/src/assets/icons.min.woff2 differ
diff --git a/src/global.scss b/src/global.scss
index 76622cb4..f65b7c58 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -45,7 +45,7 @@ stapps-icon {
.map-location-pin {
font-variation-settings: 'FILL' 1;
- color: var(--ion-color-primary);
+ color: var(--ion-color-tertiary);
&::before {
content: attr(name);