add button to import/export documentation

src/components/Project/Detail/ProjectFeatureTypes.vue

@@ -212,127 +212,150 @@
       </div>
     </div>
 
-    <div id="nouveau-type-signalement">
-      <router-link
-        v-if="
-          permissions &&
-            permissions.can_update_project &&
-            isOffline() !== true
-        "
-        :to="{
-          name: 'ajouter-type-signalement',
-          params: { slug },
-        }"
-        class="ui compact basic button"
-      >
-        <i
-          class="ui plus icon"
-          aria-hidden="true"
-        />
-        Créer un nouveau type de signalement
-      </router-link>
-    </div>
-    <div class="nouveau-type-signalement">
+    <div class="nouveau-type-signalement-container">
       <div
-        v-if="
-          permissions &&
-            permissions.can_update_project &&
-            isOffline() !== true
-        "
         class="
           ui
-          compact
-          basic
+          small
           button
-          button-align-left
+          circular
+          compact
+          floated
+          right
+          icon
+          teal
         "
+        data-tooltip="Accéder à la documentation"
+        data-position="bottom right"
+        data-variation="mini"
       >
-        <i
-          class="ui plus icon"
-          aria-hidden="true"
-        />
-        <label
-          class="ui"
-          for="json_file"
-        >
-          <span
-            class="label"
-          >Créer un nouveau type de signalement à partir d'un
-            GeoJSON</span>
-        </label>
-        <input
-          id="json_file"
-          type="file"
-          accept="application/json, .json, .geojson"
-          style="display: none"
-          name="json_file"
-          @change="onGeoJSONFileChange"
-        >
+        <i class="question icon" />
       </div>
-    </div>
 
-    <div class="nouveau-type-signalement">
-      <div
-        v-if="
-          permissions &&
-            permissions.can_update_project &&
-            isOnline
-        "
-        class="
-          ui
-          compact
-          basic
-          button
-          button-align-left
-        "
-      >
-        <i
-          class="ui plus icon"
-          aria-hidden="true"
-        />
-        <label
-          class="ui"
-          for="csv_file"
+      <div id="nouveau-type-signalement">
+        <router-link
+          v-if="
+            permissions &&
+              permissions.can_update_project &&
+              isOffline() !== true
+          "
+          :to="{
+            name: 'ajouter-type-signalement',
+            params: { slug },
+          }"
+          class="ui compact basic button"
         >
-          <span
-            class="label"
-          >Créer un nouveau type de signalement à partir d'un
-            CSV</span>
-        </label>
-        <input
-          id="csv_file"
-          type="file"
-          accept="application/csv, .csv"
-          style="display: none"
-          name="csv_file"
-          @change="onCSVFileChange"
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Créer un nouveau type de signalement
+        </router-link>
+      </div>
+
+      <div class="nouveau-type-signalement">
+        <div
+          v-if="
+            permissions &&
+              permissions.can_update_project &&
+              isOffline() !== true
+          "
+          class="
+            ui
+            compact
+            basic
+            button
+            button-align-left
+          "
         >
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          <label
+            class="ui"
+            for="json_file"
+          >
+            <span
+              class="label"
+            >Créer un nouveau type de signalement à partir d'un
+              GeoJSON</span>
+          </label>
+          <input
+            id="json_file"
+            type="file"
+            accept="application/json, .json, .geojson"
+            style="display: none"
+            name="json_file"
+            @change="onGeoJSONFileChange"
+          >
+        </div>
       </div>
-    </div>
 
-    <div class="nouveau-type-signalement">
-      <router-link
-        v-if="
-          IDGO &&
+      <div class="nouveau-type-signalement">
+        <div
+          v-if="
             permissions &&
-            permissions.can_update_project &&
-            isOffline() !== true
-        "
-        :to="{
-          name: 'catalog-import',
-          params: {
-            slug,
-            feature_type_slug: 'create'
-          },
-        }"
-        class="ui compact basic button button-align-left"
-      >
-        <i
-          class="ui plus icon"
-          aria-hidden="true"
-        />
-        Créer un nouveau type de signalement à partir du catalogue {{ CATALOG_NAME|| 'IDGO' }}
-      </router-link>
+              permissions.can_update_project &&
+              isOnline
+          "
+          class="
+            ui
+            compact
+            basic
+            button
+            button-align-left
+          "
+        >
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          <label
+            class="ui"
+            for="csv_file"
+          >
+            <span
+              class="label"
+            >
+              Créer un nouveau type de signalement à partir d'un CSV
+            </span>
+          </label>
+          <input
+            id="csv_file"
+            type="file"
+            accept="application/csv, .csv"
+            style="display: none"
+            name="csv_file"
+            @change="onCSVFileChange"
+          >
+        </div>
+      </div>
+
+      <div class="nouveau-type-signalement">
+        <router-link
+          v-if="
+            IDGO &&
+              permissions &&
+              permissions.can_update_project &&
+              isOffline() !== true
+          "
+          :to="{
+            name: 'catalog-import',
+            params: {
+              slug,
+              feature_type_slug: 'create'
+            },
+          }"
+          class="ui compact basic button button-align-left"
+        >
+          <i
+            class="ui plus icon"
+            aria-hidden="true"
+          />
+          Créer un nouveau type de signalement à partir du catalogue {{ CATALOG_NAME|| 'IDGO' }}
+        </router-link>
+      </div>
     </div>
 
     <div
@@ -715,6 +738,14 @@ export default {
   line-height: 1.5em;
 }
 
+.nouveau-type-signalement-container {
+  .help {
+    position: absolute;
+    right: 0.5em;
+    cursor: pointer;
+  }
+}
+
 .nouveau-type-signalement {
   margin-top: 1em;
 }