From 8d9a32b805b366daafec315331ba84d0a3356c87 Mon Sep 17 00:00:00 2001
From: Kenzo-Hugo Hillion <kenzo-hugo.hillion1@pasteur.fr>
Date: Mon, 8 Jun 2020 12:25:55 +0200
Subject: [PATCH] Make text clickable in Help section
---
frontend/src/components/help/help.html | 54 +++++++++-----------------
frontend/src/components/help/help.js | 18 +++++++++
frontend/src/components/help/help.scss | 4 ++
frontend/src/components/help/help.vue | 3 +-
4 files changed, 43 insertions(+), 36 deletions(-)
create mode 100644 frontend/src/components/help/help.scss
diff --git a/frontend/src/components/help/help.html b/frontend/src/components/help/help.html
index d893ffd..861d728 100644
--- a/frontend/src/components/help/help.html
+++ b/frontend/src/components/help/help.html
@@ -11,42 +11,26 @@
<v-toolbar-title>Help</v-toolbar-title>
</v-toolbar>
<v-list two-line subheader>
- <v-list-tile>
- <v-list-tile-avatar>
- <v-icon class="primary lighten-2" dark>
- fas fa-code
- </v-icon>
- </v-list-tile-avatar>
- <v-list-tile-content>
- <v-list-tile-title>API documentation</v-list-tile-title>
- <v-list-tile-sub-title>Documentation about different endpoints of metageneDB API</v-list-tile-sub-title>
- </v-list-tile-content>
- <v-list-tile-avatar>
- <v-btn href="/api/swagger" flat icon target="_blank">
- <v-icon class="tertiary--text">
- open_in_new
+ <template v-for="(item, index) in help_links">
+ <v-list-tile :key="item.title">
+ <v-list-tile-avatar>
+ <v-icon class="primary lighten-2" dark>
+ {{ item.icon }}
</v-icon>
- </v-btn>
- </v-list-tile-avatar>
- </v-list-tile>
- <v-list-tile>
- <v-list-tile-avatar>
- <v-icon class="primary lighten-2" dark>
- fab fa-gitlab
- </v-icon>
- </v-list-tile-avatar>
- <v-list-tile-content>
- <v-list-tile-title>GitLab repository</v-list-tile-title>
- <v-list-tile-sub-title>Access to source code of the project</v-list-tile-sub-title>
- </v-list-tile-content>
- <v-list-tile-avatar>
- <v-btn href="/api/swagger" flat icon target="_blank">
- <v-icon class="tertiary--text">
- open_in_new
- </v-icon>
- </v-btn>
- </v-list-tile-avatar>
- </v-list-tile>
+ </v-list-tile-avatar>
+ <v-list-tile-content>
+ <v-list-tile-title><a :href="item.url" target="_blank">{{ item.title }}</a></v-list-tile-title>
+ <v-list-tile-sub-title><a :href="item.url" target="_blank">{{ item.info }}</a></v-list-tile-sub-title>
+ </v-list-tile-content>
+ <v-list-tile-avatar>
+ <v-btn :href="item.url" flat icon target="_blank">
+ <v-icon class="tertiary--text">
+ open_in_new
+ </v-icon>
+ </v-btn>
+ </v-list-tile-avatar>
+ </v-list-tile>
+ </template>
</v-list>
</v-card>
</v-dialog>
diff --git a/frontend/src/components/help/help.js b/frontend/src/components/help/help.js
index 870ee43..0f2c8fc 100644
--- a/frontend/src/components/help/help.js
+++ b/frontend/src/components/help/help.js
@@ -4,4 +4,22 @@ export default {
dialog: false,
}
},
+ computed: {
+ help_links() {
+ return [
+ {
+ title: 'API documentation',
+ info: 'Documentation about different endpoints of metageneDB API',
+ icon: 'fas fa-code',
+ url: '/api/swagger',
+ },
+ {
+ title: 'GitLab repository',
+ info: 'Access to source code of the project',
+ icon: 'fab fa-gitlab',
+ url: 'https://gitlab.pasteur.fr/metagenomics/metagenedb',
+ },
+ ];
+ },
+ }
}
\ No newline at end of file
diff --git a/frontend/src/components/help/help.scss b/frontend/src/components/help/help.scss
new file mode 100644
index 0000000..a255e3f
--- /dev/null
+++ b/frontend/src/components/help/help.scss
@@ -0,0 +1,4 @@
+a {
+ text-decoration: none;
+ color: inherit;
+}
\ No newline at end of file
diff --git a/frontend/src/components/help/help.vue b/frontend/src/components/help/help.vue
index d5c4473..55fa010 100644
--- a/frontend/src/components/help/help.vue
+++ b/frontend/src/components/help/help.vue
@@ -1,2 +1,3 @@
<template src="./help.html" lang="html"></template>
-<script src="./help.js" lang="js"></script>
\ No newline at end of file
+<script src="./help.js" lang="js"></script>
+<style src="./help.scss" lang="scss" scoped></style>
\ No newline at end of file
--
GitLab