@dative-gpi/foundation-shared-components 1.0.32 → 1.0.34

package/styles/components/fs_map.scss

@@ -5,53 +5,54 @@
 
   .fs-leaflet-container {
     width: 100%;
-    height: var(--fs-map-leaflet-container-height);
+    height: 100%;
     filter: grayscale(var(--fs-map-container-grayscale));
   }
 
-  .fs-map-overlay-edit-button {
+  .fs-map-overlay-mobile {
     position: absolute;
-    top: 0;
+    bottom: 0;
+    left: 0;
     right: 0;
-    z-index: 960;
-    margin: 8px;
+    width: 100%;
+    margin: 0;
+    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
-  .fs-map-overlay-right-top {
+  .fs-map-overlay-desktop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 12px;
+    max-height: calc(100% - 24px);
+  }
+
+  .fs-map-layer-button {
     position: absolute;
     top: 0;
     right: 0;
-    margin: 4px 8px;
+    margin: 12px;
   }
 
-  .fs-map-overlay-right-bottom {
+  .fs-map-control-buttons {
     position: absolute;
     bottom: 0;
     right: 0;
-    z-index: 1000;
-    margin: 4px 8px;
-    width: calc(100% - 16px);
-
+    margin: 12px;
+    margin-bottom: calc(12px + var(--fs-map-control-buttons-margin-bottom));
 
-    .fs-map-zoom-overlay {
-      position: absolute;
-      bottom: 100%;
-      right: 0;
-      z-index: 1001;
-      margin-bottom: calc(var(--fs-map-leaflet-bottom-overlay-margin) + 8px);
+    .fs-map-zoom-plus-button > * {
+      border-bottom-left-radius: 0 !important;
+      border-bottom-right-radius: 0 !important;
 
-      button.fs-map-zoom-plus > * {
-        border-bottom-left-radius: 0 !important;
-        border-bottom-right-radius: 0 !important;
-      }
+      border-bottom: 0px !important;
+    }
 
-      button.fs-map-zoom-minus > * {
-        margin-top: 1px;
-        border-top-left-radius: 0 !important;
-        border-top-right-radius: 0 !important;
+    .fs-map-zoom-minus-button > * {
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
 
-        border-top: solid 1px var(--fs-card-border-color) !important;
-      }
+      border-top: 0px !important;
     }
   }
 
@@ -76,6 +77,11 @@
     }
   }
 
+  .fs-map-point-pin {
+    background-color: var(--fs-map-point-pin-color);
+    border-radius: 100%;
+  }
+
   .fs-map-location > div {
     display: flex;
     height: 100%;
@@ -105,11 +111,11 @@
 
     @keyframes fs-map-shadow-location {
       0% {
-        box-shadow: 0 0 0px 0px var(--fs-map-mylocation-pin-color-alpha);
+        box-shadow: 0 0 0px 0px var(--fs-map-location-pin-color-alpha);
       }
 
       50% {
-        box-shadow: 0 0 0px 7px var(--fs-map-mylocation-pin-color-alpha);
+        box-shadow: 0 0 0px 7px var(--fs-map-location-pin-color-alpha);
       }
 
       100% {

package/styles/components/fs_tabs.scss

@@ -4,10 +4,12 @@
 
     @include web {
         height: 48px !important;
+        max-height: 48px;
     }
 
     @include mobile {
         height: 40px !important;
+        max-height: 40px;
     }
 }
 
@@ -30,10 +32,12 @@
 
     @include web {
         height: 48px !important;
+        max-height: 48px;
     }
 
     @include mobile {
         height: 40px !important;
+        max-height: 40px;
     }
 }
 

package/styles/components/index.scss

@@ -38,7 +38,6 @@
 @import "fs_load_tile.scss";
 @import "fs_loader.scss";
 @import "fs_magic_config_field.scss";
-@import "fs_map_overlay.scss";
 @import "fs_map.scss";
 @import "fs_meta_field.scss";
 @import "fs_option_group.scss";

package/utils/leafletMarkers.ts

@@ -1,6 +1,6 @@
 export const locationMarkerHtml = (icon: string, color: string) => {
   const iconHtml = `
-  <div style="--fs-map-mylocation-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
+  <div style="--fs-map-location-pin-color-alpha:${color}50;--fs-map-location-pin-color: ${color}">
     <i class="${icon} mdi notranslate v-theme--DefaultTheme fs-icon" aria-hidden="true" style="--fs-icon-font-size: 22px;" />
   </div>`;
 
@@ -16,8 +16,14 @@ export const clusterMarkerHtml = (label: string) => {
   return iconHtml;
 }
 
-export const myLocationMarkerHtml = () => {
+export const gpsMarkerHtml = () => {
   const iconHtml = `<div class="fs-map-mylocation-pin" />`;
 
+  return iconHtml;
+}
+
+export const pinMarkerHtml = (color: string) => {
+  const iconHtml = `<div style="--fs-map-point-pin-color:${color}" class="fs-map-point-pin" />`;
+
   return iconHtml;
 }

package/components/map/FSMapEditPointAddressOverlay.vue

@@ -1,164 +0,0 @@
-<template>
-  <FSCard
-    padding="16px"
-    height="100%"
-    width="100%"
-    :elevation="true"
-  >
-    <FSCol
-      gap="24px"
-    >
-      <FSRow>
-        <FSText
-          font="text-h3"
-        >
-          {{ $tr('ui.map.modify-location', 'Modify location') }}
-        </FSText>
-        <v-spacer />
-        <FSButton
-          v-if="menuLocationCoordinates"
-          icon="mdi-arrow-collapse"
-          variant="icon"
-          @click="menuLocationCoordinates = !menuLocationCoordinates"
-        />
-        <FSButton
-          v-else
-          icon="mdi-arrow-expand"
-          variant="icon"
-          @click="menuLocationCoordinates = !menuLocationCoordinates"
-        />
-      </FSRow>
-      <FSCol
-        v-if="menuLocationCoordinates"
-      >
-        <FSAutoCompleteAddress
-          :modelValue="$props.modelValue"
-          @update:modelValue="onAddressFieldSubmit($event)"
-        />
-        <FSForm
-          variant="standard"
-          @submit="onCoordinatesChange()"
-        >
-          <FSRow>
-            <FSNumberField
-              :label="$tr('ui.map.latitude', 'Latitude')"
-              v-model="latitude"
-            />
-            <FSNumberField
-              :label="$tr('ui.map.longitude', 'Longitude')"
-              v-model="longitude"
-            />
-          </FSRow>
-          <FSButton
-            prependIcon="mdi-content-save"
-            style="display: none;"
-            color="primary"
-            type="submit"
-            :label="$tr('ui.map.save', 'Save')"
-          />
-        </FSForm>
-      </FSCol>
-      <FSRow
-        align="center-right"
-      >
-        <FSButton
-          :label="$tr('ui.map.cancel', 'Cancel')"
-          @click="onCancel"
-        />
-        <FSButton
-          prependIcon="mdi-content-save"
-          color="primary"
-          :label="$tr('ui.map.save', 'Save')"
-          @click="onSubmit"
-        />
-      </FSRow>
-    </FSCol>
-  </FSCard>
-</template>
-
-<script lang="ts">
-import { defineComponent, type PropType, ref, watch } from "vue";
-
-import { Address } from "@dative-gpi/foundation-shared-domain/models";
-
-import FSAutoCompleteAddress from "../autocompletes/FSAutoCompleteAddress.vue";
-import FSNumberField from "../fields/FSNumberField.vue";
-import FSButton from "../FSButton.vue";
-import FSCard from "../FSCard.vue";
-import FSForm from "../FSForm.vue";
-import FSText from "../FSText.vue";
-import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
-
-export default defineComponent({
-  name: "FSMapEditPointAddressOverlay.vue",
-  components: {
-    FSAutoCompleteAddress,
-    FSNumberField,
-    FSButton,
-    FSCard,
-    FSForm,
-    FSText,
-    FSCol,
-    FSRow
-  },
-  props: {
-    modelValue: {
-      type: Object as PropType<Address | null>,
-      default: null
-    }
-  },
-  emits: ["update:modelValue", "update:locationCoordinates", "submit", "cancel"],
-  setup(props, { emit }) {
-    const menuLocationCoordinates = ref(false);
-
-    const latitude = ref(0);
-    const longitude = ref(0);
-
-    const onCoordinatesChange = () => {
-      const newModelValue = new Address({
-        country: "",
-        formattedAddress: "",
-        locality: "",
-        placeId: "",
-        placeLabel: "",
-        latitude: latitude.value,
-        longitude: longitude.value,
-      });
-      emit("update:locationCoordinates", newModelValue);
-    };
-
-    const onAddressFieldSubmit = (address: Address|null) => {
-      if(!address) {
-        return;
-      }
-      emit('update:modelValue', address);
-    };
-
-    const onSubmit = () => {
-      emit('submit');
-    };
-
-    const onCancel = () => {
-      emit('cancel');
-    };
-
-    watch(() => props.modelValue, () => {
-      if (props.modelValue) {
-        latitude.value = props.modelValue.latitude;
-        longitude.value = props.modelValue.longitude;
-      }
-    }, { immediate: true });
-
-    return {
-      menuLocationCoordinates,
-      longitude,
-      latitude,
-      onAddressFieldSubmit,
-      onCoordinatesChange,
-      onCancel,
-      onSubmit
-    };
-  }
-});
-</script>

package/styles/components/fs_map_overlay.scss

@@ -1,38 +0,0 @@
-.fs-map-overlay-left {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 950;
-  margin: 4px;
-
-  .fs-map-overlay-left-content {
-    max-height: var(--fs-map-overlay-max-height);
-  }
-}
-
-.fs-map-overlay-left-mobile {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 1050;
-  margin: 0;
-  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-
-  >* {
-    width: 100%;
-    height: var(--fs-map-overlay-card-height);
-    margin: 0;
-    transition: none;
-  }
-
-  .fs-map-overlay-left-mobile-content {
-    max-height: calc(100% - 20px);
-  }
-
-  .fs-fade-out {
-    transition: none;
-  }
-}