Merge pull request #963 from c2corg/map-links-visibility

Reduce map links visibility
c2corg · Jan 6, 2020 · 5155dce · 5155dce
2 parents dbf33fe + e81d689
commit 5155dce
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 44 deletions.
diff --git a/src/views/document/utils/boxes/AssociatedDocuments.vue b/src/views/document/utils/boxes/AssociatedDocuments.vue
@@ -77,26 +77,6 @@
       </div>
       <hr>
     </div>
-
-    <!-- maps -->
-    <div v-if="(document.maps && document.maps.length !== 0) || document.maps_info" class="associations-list">
-      <div class="title">
-        {{ $gettext('maps') | uppercaseFirstLetter }}
-      </div>
-      <div v-if="document.maps_info">
-        <icon-map />
-        <span>
-          {{ document.maps_info }}
-        </span>
-      </div>
-      <div v-for="map of document.maps" :key="map.document_id" class="is-ellipsed">
-        <icon-map />
-        <document-link :document="map">
-          {{ map.editor }} - {{ map.code }} - <document-title :document="map" />
-        </document-link>
-      </div>
-      <hr>
-    </div>
   </div>
 </template>
 

diff --git a/src/views/document/utils/boxes/MapBox.vue b/src/views/document/utils/boxes/MapBox.vue
@@ -21,26 +21,26 @@
 
     <elevation-profile :document="document" v-if="documentType=='outing'" />
 
-    <div class="columns is-multiline is-mobile is-clearfix">
-      <div class="column is-full-tablet is-full-desktop is-half-widescreen ">
-        <router-link v-if="showYetiButton" :to="yetiUrl" class="button is-small">
-          <icon-yeti class="icon" />
-          <span>Voir dans YETI</span>
-        </router-link>
-      </div>
-      <div class="column">
-        <div
-          v-if="document.geometry && (document.geometry.geom_detail || documentType == 'waypoint')"
-          class="buttons is-pulled-right">
-          <button class="button is-primary is-small" @click="downloadGpx">
-            GPX
-          </button>
-          <button class="button is-primary is-small" @click="downloadKml">
-            KML
-          </button>
-        </div>
-      </div>
+    <div class="buttons is-centered">
+      <router-link v-if="showYetiButton" :to="yetiUrl" class="button is-small">
+        <icon-yeti class="icon" />
+        <span v-translate>YETI</span>
+      </router-link>
+      <button v-if="showDownloadTraceButtons" class="button is-primary is-small" @click="downloadGpx">
+        GPX
+      </button>
+      <button v-if="showDownloadTraceButtons" class="button is-primary is-small" @click="downloadKml">
+        KML
+      </button>
+      <button
+        v-if="hasMapLinks"
+        class="button is-small"
+        @click="mapLinksAreVisible=!mapLinksAreVisible"
+        :class="{'is-success':mapLinksAreVisible}">
+        <icon-map />
+      </button>
     </div>
+    <map-links v-if="mapLinksAreVisible" :document="document" />
   </div>
 </template>
 
@@ -50,16 +50,24 @@
 
   import { requireDocumentProperty } from '@/js/properties-mixins';
   import ElevationProfile from './ElevationProfile';
+  import MapLinks from './MapLinks';
 
   const GeoJSON = new ol.format.GeoJSON();
 
   export default {
     components: {
-      ElevationProfile
+      ElevationProfile,
+      MapLinks
     },
 
     mixins: [ requireDocumentProperty ],
 
+    data() {
+      return {
+        mapLinksAreVisible: false
+      };
+    },
+
     computed: {
       showYetiButton() {
         // at least one of document activities is concerned by yeti
@@ -73,6 +81,14 @@
         return this.document.activities.some(activity => activities.includes(activity));
       },
 
+      showDownloadTraceButtons() {
+        return this.document.geometry && (this.document.geometry.geom_detail || this.documentType === 'waypoint');
+      },
+
+      hasMapLinks() {
+        return (this.document.maps && this.document.maps.length !== 0) || this.document.maps_info;
+      },
+
       yetiUrl() {
         return { name: 'yeti', params: { 'document_id': this.document.document_id } };
       }
@@ -122,8 +138,4 @@
     margin-bottom:1rem;
   }
 
-  .nearby-link{
-    margin-top:1rem;
-    margin-bottom:1rem;
-  }
 </style>
diff --git a/src/views/document/utils/boxes/MapLinks.vue b/src/views/document/utils/boxes/MapLinks.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="associations-list">
+    <div v-if="document.maps_info">
+      <icon-map />
+      <span>
+        {{ document.maps_info }}
+      </span>
+    </div>
+    <div v-for="map of document.maps" :key="map.document_id" class="is-ellipsed">
+      <icon-map />
+      <document-link :document="map">
+        {{ map.editor }} - {{ map.code }} - <document-title :document="map" />
+      </document-link>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { requireDocumentProperty } from '@/js/properties-mixins';
+
+  export default {
+    mixins: [ requireDocumentProperty ]
+  };
+</script>