Merge branch 'redmine-issue/13681' into 'develop'

REDMINE_ISSUE-13681 | Style boutons carte

See merge request !360

src/assets/styles/openlayers-custom.css

@@ -18,7 +18,7 @@
   padding: 0;
 }
 
-.ol-control button{
+.ol-control button {
   background-color: #fff;
   color: #000;
   height: 30px;

src/components/Map/EditingToolbar.vue

 <template>
   <div class="editionToolbar">
     <div v-if="showDrawTool">
-      <div class="leaflet-bar ">
+      <div class="leaflet-bar">
         <a 
           class="leaflet-draw-draw-polygon" 
           title="Dessiner un polygone"
@@ -69,27 +69,24 @@ export default {
 </script>
 
 <style scoped>
-.list-image-type{
-   
-  height: 20px;
-  vertical-align: middle;
-}
 .editionToolbar{
   position: absolute;
   top: 80px;
   right: 5px;
 }
 .leaflet-bar {
-  box-shadow: 0 1px 5px rgba(0,0,0,0.65);
-  border-radius: 4px;
+  border: 2px solid rgba(0,0,0,.2);
+  background-clip: padding-box;
+  padding: 0;
+  border-radius: 2px;
 }
 .leaflet-bar a:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
 }
 .leaflet-bar a:last-child {
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
   border-bottom: none;
 }
 .leaflet-bar a, .leaflet-control-layers-toggle {
@@ -97,15 +94,29 @@ export default {
   background-repeat: no-repeat;
   display: block;
 }
-.leaflet-bar a, .leaflet-bar a:hover {
+.leaflet-bar a {
   background-color: #fff;
-  border-bottom: 1px solid #ccc;
-  width: 26px;
-  height: 26px;
-  line-height: 26px;
+  width: 30px;
+  height: 30px;
   display: block;
   text-align: center;
   text-decoration: none;
   color: black;
 }
+.leaflet-bar a > i {
+  margin: 0;
+  vertical-align: middle;
+}
+.list-image-type {
+  height: 20px;
+  vertical-align: middle;
+  margin: 5px 0 5px 0;
+}
+.leaflet-bar a:hover {
+  cursor: pointer;
+  background-color: #ebebeb;
+}
+.leaflet-bar a:focus {
+  background-color: #ebebeb;
+}
 </style>

src/components/Map/Geocoder.vue

 <template>
-  <div class="geocoder">
+  <div
+    :class="{ expanded: isExpanded }"
+    class="geocoder-container"
+  >
+    <button
+      class="button-geocoder"
+      @click="isExpanded = !isExpanded"
+    >
+      <i class="search icon" />
+    </button>
     <Multiselect
+      v-if="isExpanded"
       v-model="selection"
+      class="expanded-geocoder"
       :options="addresses"
       :options-limit="5"
       :allow-empty="true"
@@ -78,7 +89,8 @@ export default {
       selectedAddress: null,
       addresses: [],
       resultats: [],
-      placeholder: 'Rechercher une adresse ...'
+      placeholder: 'Rechercher une adresse ...',
+      isExpanded: false
     };
   },
   mounted() {
@@ -131,24 +143,60 @@ export default {
 </script>
 
 <style scoped lang="less">
-.geocoder{
-  max-width: 400px;
-  right: 500px;
+.geocoder-container {
   position: absolute;
-  top: 0.5em;
+  right: 0.5em;
+  top: calc(1em + 60px);
   pointer-events: auto;
   z-index: 50000;
   border: 2px solid rgba(0,0,0,.2);
   background-clip: padding-box;
   padding: 0;
   border-radius: 2px;
+  display: flex;
+
+  .button-geocoder {
+    border: none;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    background-color: #fff;
+    color: rgb(39, 39, 39);
+    width: 28px;
+    height: 28px;
+    font: 700 18px Lucida Console,Monaco,monospace;
+    margin: 0;
+    border-radius: 2px;
+    line-height: 1.15;
+
+    i {
+      margin: 0;
+      font-size: 0.9em;
+    }
+  }
+  .button-geocoder:hover {
+    cursor: pointer;
+    background-color: #ebebeb;
+  }
+
+  .expanded-geocoder {
+    max-width: 400px;
+  }
+}
+
+.expanded {
+  .button-geocoder {
+    height: 40px;
+    color: rgb(99, 99, 99);
+  }
 }
+
 #marker {
-    width: 20px;
-    height: 20px;
-    border: 1px solid rgb(136, 66, 0);
-    border-radius: 10px;
-    background-color: rgb(201, 114, 15);
-    opacity: 0.7;
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgb(136, 66, 0);
+  border-radius: 10px;
+  background-color: rgb(201, 114, 15);
+  opacity: 0.7;
 }
 </style>