From edd249aca2320d9e8c3096323f47fd7ad494d721 Mon Sep 17 00:00:00 2001
From: "David J. Yu" <87633683+ddjnw1yu@users.noreply.github.com>
Date: Fri, 16 Aug 2024 10:06:48 +1200
Subject: [PATCH] Add external link icon

---
 pages/user/profile/index.vue | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/pages/user/profile/index.vue b/pages/user/profile/index.vue
index a037e08a..1e624ca5 100644
--- a/pages/user/profile/index.vue
+++ b/pages/user/profile/index.vue
@@ -115,9 +115,11 @@
                   </span>
                 </div>
                 <div class="mt-8">
-                  <el-button class='secondary' @click="handleAnnotateButtonClicked('ac')">Launch AC Map in Annotation Mode</el-button>
-                  <el-button class='secondary' @click="handleAnnotateButtonClicked('fc')">Launch FC Map in Annotation Mode</el-button>
-                  <el-button class='secondary' @click="handleAnnotateButtonClicked('wholebody')">Launch 3D Body in Annotation Mode</el-button>
+                  <template v-for="(value, key) in AnnotatorMaps" :key="key">
+                    <el-button class='secondary' @click="handleAnnotateButtonClicked(key)">
+                      Launch {{ value }} <br class="line-break"> in Annotation Mode <svgo-icon-open class="open-icon" />
+                    </el-button>
+                  </template>
                 </div>
               </template>
               <template v-else>
@@ -316,7 +318,12 @@ export default {
       submissionToRetract: '',
       showRetractConfirmationModal: false,
       organizations: [],
-      annotatorAuthenticated: false
+      annotatorAuthenticated: false,
+      AnnotatorMaps: {
+        'ac': 'AC Map',
+        'fc': 'FC Map',
+        'wholebody': '3D Body',
+      },
     }
   },
   async setup() {
@@ -693,4 +700,14 @@ a {
 .help-link {
   float: right;
 }
+.line-break {
+  display: none;
+  @media screen and (max-width: 24rem) {
+    display: inline;
+  }
+}
+.open-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
 </style>