diff --git a/frontend/src/components/help/help.html b/frontend/src/components/help/help.html index d893ffd304571dec117a210d441fd30bd8ec3be1..861d728240084be3cc2288ea1ee2ca04d73e6aee 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 870ee43b4c7c0d8df2a6c33bdf6cdea3d64df4f7..0f2c8fcc146ac1835c75bc8199335aae800ec8ea 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 0000000000000000000000000000000000000000..a255e3f44c51ba6d85a907de0375ff2f21b89ecc --- /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 d5c44730201497fb1886b05fbdecc96f85a6cb09..55fa010920c7e8deb41afe85f32d1f19b5b6543b 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