add slider to symbology & adapt style

src/App.vue

@@ -68,9 +68,6 @@ export default {
 </script>
 
 <style>
-@import "./assets/styles/base.css";
-@import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";
-
 .vertical {
   flex-direction: column;
   justify-content: center;

src/assets/styles/sidebar-layers.css

@@ -142,7 +142,6 @@
 }
 
 /* Layer item */
-
 .layer-item {
   padding-bottom: 0.5rem;
 }
@@ -162,6 +161,7 @@
 
 .range-container {
   display: flex;
+  min-width: 15em; /* give space for the bubble since adding a min-width to keep its shape */
 }
 
 .range-output-bubble {
@@ -170,6 +170,8 @@
   padding: 4px 7px;
   border-radius: 40px;
   background-color: #2c3e50;
+  min-width: 2em;
+  text-align: center;
 }
 
 /* Overrides default padding of semantic-ui accordion */

src/components/FeatureType/SymbologySelector.vue

@@ -14,25 +14,25 @@
           :name="form.color.html_name"
         >
       </div>
-      <!-- <div class="required inline field">
-        <label>Symbole</label>
-        <button
-          class="ui icon button picker-button"
-          type="button"
-          @click="openIconSelectionModal"
-        >
-          <font-awesome-icon
-            :icon="['fas', form.icon]"
-            :style="{ color: form.color.value || '#000000' }"
-            class="icon alt"
-          />
-        </button>
-      </div> -->
+      <div>
+        <label>Opacité &nbsp;<span>(%)</span></label>
+        <div class="range-container">
+          <input
+            type="range"
+            min="0"
+            max="1"
+            v-model="form.opacity"
+            step="0.01"
+          >
+          <output class="range-output-bubble">
+            {{ getOpacity(form.opacity) }}
+          </output>
+        </div>
+      </div>
     </div>
     <div
       ref="iconsPickerModal"
-      :class="isIconPickerModalOpen ? 'active' : ''"
-      class="ui dimmer modal transition"
+      :class="['ui dimmer modal transition', { active: isIconPickerModalOpen }]"
     >
       <div class="header">
         Sélectionnez le symbole pour ce type de signalement :
@@ -41,8 +41,7 @@
         <div
           v-for="icon of iconsNamesList"
           :key="icon"
-          :class="form.icon === icon ? 'active' : ''"
-          class="icon-container"
+          :class="['icon-container', { active: form.icon === icon }]"
           @click="selectIcon(icon)"
         >
           <i
@@ -83,6 +82,10 @@ export default {
       type: String,
       default: 'circle'
     },
+    initOpacity: {
+      type: Number,
+      default: 1
+    },
     geomType: {
       type: String,
       default: 'Point'
@@ -104,6 +107,7 @@ export default {
           html_name: 'couleur',
           value: '#000000',
         },
+        opacity: 0,
       }
     };
   },
@@ -125,6 +129,9 @@ export default {
     if (this.initIcon) {
       this.form.icon = this.initIcon;
     }
+    if (this.initOpacity) {
+      this.form.opacity = this.initOpacity;
+    }
     this.$emit('set', {
       name: this.title,
       value: this.form
@@ -138,7 +145,11 @@ export default {
 
     selectIcon(icon) {
       this.form.icon = icon;
-    }
+    },
+
+    getOpacity(opacity) {
+      return Math.round(parseFloat(opacity) * 100);
+    },
   }
 };
 </script>

src/components/Map/SidebarLayers.vue

@@ -380,7 +380,6 @@ export default {
 </script>
 
 <style>
-@import "../../assets/styles/sidebar-layers.css";
 .queryable-layers-dropdown {
   margin-bottom: 1em;
 }

src/main.js

@@ -5,10 +5,13 @@ import App from './App.vue';
 import './registerServiceWorker';
 import router from '@/router';
 import store from '@/store';
+import './assets/styles/base.css';
+import './assets/resources/semantic-ui-2.4.2/semantic.min.css';
 import '@fortawesome/fontawesome-free/css/all.css';
 import '@fortawesome/fontawesome-free/js/all.js';
 import 'ol/ol.css';
 import '@/assets/styles/openlayers-custom.css';
+import '@/assets/styles/sidebar-layers.css';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';