refactor: polish map module ui/ux

ios/App/App/Info.plist

@@ -56,6 +56,8 @@
 	<array>
 		<string>armv7</string>
 	</array>
+	<key>UIStatusBarStyle</key>
+	<string>UIStatusBarStyleLightContent</string>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
@@ -70,6 +72,6 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<true/>
+	<false/>
 </dict>
 </plist>

package-lock.json

@@ -3916,9 +3916,9 @@
       }
     },
     "@openstapps/core": {
-      "version": "0.69.0",
+      "version": "0.70.0",
-      "resolved": "https://registry.npmjs.org/@openstapps/core/-/core-0.69.0.tgz",
+      "resolved": "https://registry.npmjs.org/@openstapps/core/-/core-0.70.0.tgz",
-      "integrity": "sha512-IaUb10IfldokrqopdqsyHl5j3rVvg8CA10s2E+WpVOjgkXnW8SP9jVg5AP0jx3vgN3e0xHsrPtvrZWTPgyoSRQ==",
+      "integrity": "sha512-obLFSiI5P0cEAeadxEQ1Wbbe/FDiSi0p4azpmszUPyshpSXKqt4y6F4Z+dnswBSe85wtPg/PuHC1MYZ79SJB4g==",
       "requires": {
         "@openstapps/core-tools": "0.32.0",
         "@types/geojson": "1.0.6",

package.json

@@ -87,7 +87,7 @@
     "@ngx-translate/http-loader": "7.0.0",
     "@openstapps/api": "0.43.0",
     "@openstapps/configuration": "0.33.0",
-    "@openstapps/core": "0.69.0",
+    "@openstapps/core": "0.70.0",
     "@transistorsoft/capacitor-background-fetch": "1.0.0",
     "capacitor-secure-storage-plugin": "0.8.0",
     "cordova-plugin-calendar": "5.1.6",

src/app/modules/about/about-licenses.component.ts

@@ -51,7 +51,7 @@ export class AboutLicensesComponent implements OnInit {
           modal.dismiss();
         },
       },
-      swipeToClose: true,
+      canDismiss: true,
     });
     return await modal.present();
   }

src/app/modules/data/chips/add-event-popover.component.ts

@@ -249,7 +249,7 @@ export class AddEventPopoverComponent implements OnInit, OnDestroy {
   async export() {
     const modal = await this.modalController.create({
       component: AddEventReviewModalComponent,
-      swipeToClose: true,
+      canDismiss: true,
       cssClass: 'add-modal',
       componentProps: {
         dismissAction: () => {

src/app/modules/map/item/map-item.component.html

@@ -22,7 +22,7 @@
     <ion-modal
       trigger="show-more"
       [presentingElement]="routerOutlet.nativeEl"
-      swipeToClose="true"
+      canDismiss="true"
       class="modal-large"
     >
       <ng-template>
@@ -31,14 +31,6 @@
       </ng-template>
     </ion-modal>
     <stapps-skeleton-list-item *ngIf="!item"></stapps-skeleton-list-item>
-    <ion-button
-      size="small"
-      fill="clear"
-      class="close"
-      (click)="onCloseClick()"
-    >
-      <ion-icon name="cancel" fill></ion-icon>
-    </ion-button>
   </ion-card-header>
   <ion-card-content>
     <ion-note>
@@ -52,7 +44,7 @@
     }}</ion-button>
     <ion-modal
       trigger="show-more-button"
-      swipeToClose="true"
+      canDismiss="true"
       [presentingElement]="routerOutlet.nativeEl"
       class="modal-large"
     >

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({
+      icon: divIcon({
-        iconAnchor: [13, 41],
+        className: className,
-        iconSize: [25, 41],
+        html: `<span
-        iconUrl: '../assets/marker-icon.png',
+                 name="${SCIcon`location_on`}"
-        shadowUrl: '../assets/marker-shadow.png',
+                 class="material-symbols-rounded map-location-pin"
+                 style="font-size: ${iconSize}px;"
+               >${SCIcon`location_on`}</span>`,
+        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`}</span>`
             : `<span
                  name="${SCIcon`person_pin_circle`}"
                  class="material-symbols-rounded map-location-pin"
-                 style="font-size: ${iconSize}px;"
+                 style="font-size: ${iconSize}px; color: var(--ion-color-primary);"
                >${SCIcon`person_pin_circle`}</span>`,
         iconSize: [iconSize, iconSize],
       }),

src/app/modules/map/page/map-page.component.ts

@@ -13,7 +13,6 @@
  *  this program. If not, see <https://www.gnu.org/licenses/>.
  */
 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();

src/app/modules/map/page/map-page.html

@@ -59,7 +59,6 @@
     <div class="map-buttons above">
       <ion-button
         *ngIf="items.length > 1"
-        [@fadeInOut]
         color="light"
         shape="round"
         size="small"
@@ -70,24 +69,31 @@
         }}
       </ion-button>
       <ion-button
-        [disabled]="position === undefined"
         color="light"
         shape="round"
         size="small"
         (click)="onPositionClick()"
       >
         <ion-icon
-          *ngIf="position !== null; else questionIcon"
+          *ngIf="position !== null; else noLocationIcon"
           name="my_location"
         ></ion-icon>
-        <ng-template #questionIcon>
+        <ng-template #noLocationIcon>
-          <ion-icon name="location_searching"></ion-icon>
+          <ion-icon
+            *ngIf="
+              locationStatus.location !== 'denied';
+              else deniedLocationIcon
+            "
+            name="location_searching"
+          ></ion-icon>
+        </ng-template>
+        <ng-template #deniedLocationIcon>
+          <ion-icon name="location_disabled"></ion-icon>
         </ng-template>
       </ion-button>
     </div>
     <stapps-map-item
       *ngIf="items.length === 1"
-      [@fadeInOut]
       [item]="items[0]"
       (onClose)="resetView()"
     ></stapps-map-item>
@@ -95,7 +101,6 @@
   <div class="map-buttons floating-buttons">
     <ion-button
       *ngIf="items.length > 1"
-      [@fadeInOut]
       color="light"
       shape="round"
       size="small"
@@ -106,24 +111,29 @@
       }}
     </ion-button>
     <ion-button
-      [disabled]="position === undefined"
       color="light"
       shape="round"
       size="small"
       (click)="onPositionClick()"
     >
       <ion-icon
-        *ngIf="position !== null; else questionIcon"
+        *ngIf="position !== null; else noLocationIcon"
         name="my_location"
       ></ion-icon>
-      <ng-template #questionIcon>
+      <ng-template #noLocationIcon>
-        <ion-icon name="location_searching"></ion-icon>
+        <ion-icon
+          *ngIf="locationStatus.location !== 'denied'; else deniedLocationIcon"
+          name="location_searching"
+        ></ion-icon>
+      </ng-template>
+      <ng-template #deniedLocationIcon>
+        <ion-icon name="location_disabled"></ion-icon>
       </ng-template>
     </ion-button>
   </div>
 
   <ion-modal
-    [swipeToClose]="true"
+    [canDismiss]="true"
     [presentingElement]="routerOutlet.nativeEl"
     #mapListModal
   >
@@ -131,6 +141,7 @@
       <map-list-modal
         style="height: 100%"
         [filterQuery]="filterQuery"
+        [mapBounds]="this.map.getBounds()"
         [queryText]="queryText"
       ></map-list-modal>
     </ng-template>

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;

src/app/modules/map/page/modals/map-list-modal.component.ts

@@ -13,9 +13,10 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 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[];
       });

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()

src/app/modules/menu/context/context-menu.html

@@ -17,6 +17,7 @@
   type="overlay"
   menuId="context"
   contentId="{{ contentId }}"
+  maxEdgeStart="0"
   side="end"
 >
   <ion-toolbar color="primary" mode="ios">

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();

src/app/modules/schedule/page/schedule-page.html

@@ -81,7 +81,7 @@
   </ion-fab>
 
   <ion-modal
-    swipeToClose="true"
+    canDismiss="true"
     [presentingElement]="routerOutlet.nativeEl"
     [isOpen]="isModalOpen"
     (ionModalWillDismiss)="onModalDismiss()"

src/app/modules/settings/page/calendar-sync-settings.component.ts

@@ -112,7 +112,7 @@ export class CalendarSyncSettingsComponent implements OnInit {
 
     const modal = await this.modalController.create({
       component: AddEventReviewModalComponent,
-      swipeToClose: true,
+      canDismiss: true,
       cssClass: 'add-modal',
       componentProps: {
         dismissAction: () => {

src/assets/i18n/de.json

@@ -213,10 +213,9 @@
         "MORE": "Mehr"
       },
       "geolocation": {
-        "TITLE": "Standort",
+        "TITLE": "Standort nicht verfügbar",
-        "SUBTITLE": "Standort nicht erreichbar",
+        "NOT_ENABLED": "Die Standortermittlung auf dem Gerät ist nicht aktiviert",
-        "NOT_ENABLED": "Standortermittlung auf Deinem 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."
-        "NOT_ALLOWED": "Zugriff auf den Standort für die App nicht zugelassen"
       }
     },
     "modals": {

src/assets/i18n/en.json

@@ -213,10 +213,9 @@
         "MORE": "More"
       },
       "geolocation": {
-        "TITLE": "Location",
+        "TITLE": "Location not available",
-        "SUBTITLE": "Location not available",
+        "NOT_ENABLED": "Location services are not enabled on your device",
-        "NOT_ENABLED": "Location service is 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."
-        "NOT_ALLOWED": "The app is not allowed to access your location"
       }
     },
     "modals": {

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);