Merge pull request #4117 from iamvdo/yeti-fixes

feat(yeti): Some fixes and storing layers
c2corg · Nov 15, 2024 · 8b6a880 · 8b6a880
2 parents eb87317 + 7e93c68
commit 8b6a880
Show file tree

Hide file tree

Showing 14 changed files with 230 additions and 108 deletions.
diff --git a/src/components/yeti/DropdownContent.vue b/src/components/yeti/DropdownContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown-content">
+  <div class="dropdown-content" :class="{ 'dropdown-content-inverted': inverted }">
     <div>
       <h3 class="dropdown-content-title" :class="{ 'is-open': opened }" @click="switchOpen">
         <slot />
@@ -10,7 +10,7 @@
         />
       </h3>
     </div>
-    <div v-if="opened" class="p-3">
+    <div v-if="opened" class="dropdown-content-content p-3">
       <slot name="content" />
     </div>
   </div>
@@ -23,6 +23,12 @@ export default {
       opened: false,
     };
   },
+  props: {
+    inverted: {
+      type: Boolean,
+      default: false,
+    },
+  },
   methods: {
     switchOpen() {
       this.opened = !this.opened;
@@ -44,6 +50,8 @@ export default {
   }
 }
 .dropdown-content-title {
+  display: flex;
+  align-items: center;
   color: $grey-darker;
   cursor: pointer;
   padding: 0.25rem 0.75rem;
@@ -58,6 +66,28 @@ export default {
 }
 .dropdown-content-arrow {
   color: $primary;
-  margin-top: 0.25rem;
+  margin-left: auto;
+}
+
+.dropdown-content-inverted {
+  background: $primary;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+
+  &:hover {
+    border-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .dropdown-content-title {
+    color: $white;
+  }
+  .dropdown-content-title:hover {
+    background: $primary;
+  }
+  .dropdown-content-arrow {
+    color: $white;
+  }
+  .dropdown-content-content {
+    color: $white;
+  }
 }
 </style>
diff --git a/src/components/yeti/EditModeButton.vue b/src/components/yeti/EditModeButton.vue
@@ -1,12 +1,10 @@
 <template>
-  <div class="ol-control ol-control-edit-mode" :class="{ 'is-primary': editMode }">
-    <div class="ol-control-edit-mode-inner">
-      <input-checkbox @input="onEditMode" :value="editMode" :disabled="validSimplifyTolerance">
-        <span v-translate :title="$gettext('Enable drawing and editing features on map')">Edit mode</span>
-        <fa-icon icon="pen" class="ml-1" />
-      </input-checkbox>
-    </div>
-  </div>
+  <button class="button edit-mode-button ol-control-edit-mode" :class="{ 'is-dark': editMode }">
+    <input-checkbox @input="onEditMode" :value="editMode" :disabled="validSimplifyTolerance">
+      <span v-translate :title="$gettext('Enable drawing and editing features on map')">Edit mode</span>
+      <fa-icon icon="pen" class="ml-1" />
+    </input-checkbox>
+  </button>
 </template>
 
 <script>
@@ -30,32 +28,45 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/assets/sass/variables';
-
-.ol-control-edit-mode {
-  padding: 0 !important;
+.edit-mode-button {
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  .input-checkbox {
+    padding: 0;
+  }
+  .is-checkradio[type='checkbox'] + label {
+    margin-right: 0;
+    vertical-align: baseline;
 
-  &.is-primary {
-    box-shadow: none;
+    &:before {
+      top: 1px;
+    }
   }
+}
+</style>
 
-  .ol-control-edit-mode-inner {
-    padding: 0.3rem 0.25rem 0.2rem;
-    border-radius: 4px;
-    background: $white;
-    white-space: nowrap;
+<style lang="scss">
+.edit-mode-button {
+  .input-checkbox {
+    padding: 0;
   }
 
-  &.is-primary .ol-control-edit-mode-inner {
-    background: $grey-dark;
-    color: $white;
+  .is-checkradio[type='checkbox'] + label {
+    margin-right: 0;
+    vertical-align: baseline;
+
+    &:before {
+      top: 1px;
+    }
   }
 }
-</style>
+/* when used inside map */
+.map-container {
+  .edit-mode-button {
+    height: 2em;
+    border: none;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
 
-<style lang="scss">
-.yeti-app {
-  .ol-control-edit-mode {
     .is-checkradio[type='checkbox'] + label {
       font-size: 0.93em;
       margin-right: 0;

diff --git a/src/components/yeti/SimplifyTool.vue b/src/components/yeti/SimplifyTool.vue
@@ -24,19 +24,19 @@
         </div>
       </div>
       <div class="is-flex is-justify-content-flex-end is-align-items-center">
-        <info inline>
-          {{ featuresLength }} <span v-translate>points</span>
-          <strong v-if="validToleranceDistance">
-            (<span v-translate>after:</span> {{ featuresSimplifiedLength }} <span v-translate>points</span>)
-          </strong>
-        </info>
         <div>
           <button class="button" :disabled="!validToleranceDistance" @click="initialize" v-translate>Cancel</button>
           <button class="button is-primary" :disabled="!validToleranceDistance" @click="onSimplify" v-translate>
             Simplify
           </button>
         </div>
       </div>
+      <info>
+        {{ featuresLength }} <span v-translate>points</span>
+        <strong v-if="validToleranceDistance">
+          (<span v-translate>after:</span> {{ featuresSimplifiedLength }} <span v-translate>points</span>)
+        </strong>
+      </info>
       <info type="warning" v-if="validToleranceDistance">
         <strong v-translate>Be careful,</strong>
         <span v-translate>

diff --git a/src/components/yeti/SubPanelCourse.vue b/src/components/yeti/SubPanelCourse.vue
@@ -1,7 +1,16 @@
 <template>
   <div class="yeti-subpanel">
     <sub-panel-title><span v-translate>Route</span></sub-panel-title>
-    <edit-mode-button class="edit-mode-button" />
+    <div class="route-buttons" v-if="features.length">
+      <button class="button is-secondary is-small" :title="$gettext('Delete route')" @click="onRemoveFeatures">
+        <fa-icon icon="trash" />
+        <span v-translate class="is-sr-only">Delete route</span>
+      </button>
+      <button class="button is-secondary is-small" :title="$gettext('Fit map to route')" @click="fitMapToFeatures">
+        <fa-icon icon="location-crosshairs" />
+        <span v-translate class="is-sr-only">Fit map to route</span>
+      </button>
+    </div>
     <div v-if="features.length">
       <div class="columns is-mobile">
         <div class="column">
@@ -29,12 +38,6 @@
             >
           </p>
         </div>
-        <div class="column is-narrow">
-          <button class="button is-secondary is-small" @click="onRemoveFeatures">
-            <fa-icon icon="trash" class="trash-icon" />
-            <span v-translate>Delete route</span>
-          </button>
-        </div>
       </div>
       <div class="ml-5 mb-5">
         <p class="is-size-7 is-italic mb-1 has-text-grey" v-translate>Lines chunks</p>
@@ -105,15 +108,18 @@
     <div v-else>
       <p v-translate>No route right now</p>
       <div class="load-gpx">
-        <button
-          class="button is-primary"
-          :class="{ 'is-loading': loading }"
-          :disabled="loading"
-          @click="onLoadGpx"
-          v-translate
-        >
-          Upload a GPS track
-        </button>
+        <div class="buttons">
+          <button
+            class="button is-primary mr-2"
+            :class="{ 'is-loading': loading }"
+            :disabled="loading"
+            @click="onLoadGpx"
+            v-translate
+          >
+            Upload a GPS track
+          </button>
+          <edit-mode-button />
+        </div>
         <div class="control upload-button">
           <input ref="gpxFileInput" type="file" @change="uploadGpx" accept=".gpx" />
         </div>
@@ -245,6 +251,9 @@ export default {
     setEditMode() {
       Yetix.setEditMode(!this.editMode);
     },
+    fitMapToFeatures() {
+      Yetix.$emit('fit-map-to-features');
+    },
   },
 };
 </script>
@@ -296,10 +305,6 @@ export default {
   margin-right: 3px;
 }
 
-.trash-icon {
-  margin-right: 3px;
-}
-
 .upload-button {
   position: relative;
 }
@@ -336,7 +341,11 @@ input[type='file'] {
   }
 }
 
-.edit-mode-button {
+.buttons {
+  line-height: 2.5rem;
+}
+
+.route-buttons {
   position: absolute;
   right: 0;
   top: 0.75rem;

diff --git a/src/components/yeti/SubPanelLayers.vue b/src/components/yeti/SubPanelLayers.vue
@@ -128,6 +128,7 @@ import SubPanelTitle from '@/components/yeti/SubPanelTitle.vue';
 import Yetix from '@/components/yeti/Yetix';
 
 export default {
+  name: 'Yeti',
   components: {
     DropdownContent,
     LayerButton,
@@ -153,6 +154,9 @@ export default {
       set(layer) {
         this.baseLayersSelector.map((layer) => (layer.checked = false));
         layer.checked = true;
+
+        // store current map layers base
+        this.$localStorage.set('yeti-map-layers-base', layer.title);
       },
     },
     slopesLayersSelector() {
@@ -191,7 +195,7 @@ export default {
     },
     yetiLayersSelectorChecked() {
       return this.yetiLayersSelector.filter((layer) => {
-        return layer.checked && layer.opacity;
+        return layer.checked && layer.title !== this.$gettext('Extent');
       });
     },
     showAreas() {
@@ -213,6 +217,13 @@ export default {
         this.showAreasWasTrue = null;
       }
     },
+    slopesLayersSelectorChecked(layers) {
+      // store current slope layers
+      this.$localStorage.set(
+        'yeti-map-layers-slopes',
+        layers.map((layer) => layer.title)
+      );
+    },
   },
 };
 </script>