MappingBrowser go to page: Replace with icon (#387)

gbv · Sep 27, 2022 · f4ade96 · f4ade96
1 parent 2e674ae
commit f4ade96
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/components/MappingBrowserTable.vue b/src/components/MappingBrowserTable.vue
@@ -329,12 +329,15 @@
             @input="$emit('pageChange', { registry: section.registry, page: $event, userInitiated: false })"
             @change="$emit('pageChange', { registry: section.registry, page: $event, userInitiated: true })" />
           <div class="mappingBrowser-pagination-number fontSize-small">
-            <div
+            <a
               v-if="section.totalCount >= 1000"
               :id="`mappingBrowser-pagination-goToPage-${section.id}`"
-              class="button"
-              style="display: inline-block"
-              @click="$set(popoverShown, `goToPage-${section.id}`, false)">go to page…</div>
+              href=""
+              class="fontSize-verySmall"
+              style="margin-right: 10px;"
+              @click.stop.prevent="$set(popoverShown, `goToPage-${section.id}`, false)">
+              <font-awesome-icon icon="arrow-right-to-bracket" />
+            </a>
             <span v-if="section.items.length < section.totalCount">
               {{ section.items.length }} {{ $t("general.of") }} {{ section.totalCount.toLocaleString() }}
             </span>

diff --git a/src/main.js b/src/main.js
@@ -8,7 +8,7 @@ import log from "@/utils/log.js"
 import store from "@/store/index.js"
 import { Tabs, Tab } from "cocoda-vue-tabs"
 import { library } from "@fortawesome/fontawesome-svg-core"
-import { faStar, faPlusCircle, faExchangeAlt, faThumbsUp, faThumbsDown, faAngleDown, faAngleRight, faAngleLeft, faLevelUpAlt, faLevelDownAlt, faEllipsisV, faEllipsisH, faSortUp, faTimesCircle, faLink, faIdCard, faUser, faSearch, faFilter, faCode, faCog, faDownload, faCaretDown, faInfoCircle, faComment, faEdit, faSave, faTrashAlt, faBan, faWindowMinimize, faPlusSquare, faCheck, faCheckSquare, faLock, faLockOpen, faExternalLinkSquareAlt, faLongArrowAltDown, faLongArrowAltUp, faExternalLinkAlt, faPuzzlePiece, faExclamation, faShareAltSquare, faRecycle, faCaretSquareLeft, faCaretSquareRight, faClipboard, faAngleDoubleRight, faClone, faExclamationCircle, faQuestionCircle, faChevronUp, faChevronDown, faPencilAlt, faArrowRight, faArrowLeft, faArrowUp, faArrowDown, faSyncAlt, faList, faSitemap, faSeedling } from "@fortawesome/free-solid-svg-icons"
+import { faStar, faPlusCircle, faExchangeAlt, faThumbsUp, faThumbsDown, faAngleDown, faAngleRight, faAngleLeft, faLevelUpAlt, faLevelDownAlt, faEllipsisV, faEllipsisH, faSortUp, faTimesCircle, faLink, faIdCard, faUser, faSearch, faFilter, faCode, faCog, faDownload, faCaretDown, faInfoCircle, faComment, faEdit, faSave, faTrashAlt, faBan, faWindowMinimize, faPlusSquare, faCheck, faCheckSquare, faLock, faLockOpen, faExternalLinkSquareAlt, faLongArrowAltDown, faLongArrowAltUp, faExternalLinkAlt, faPuzzlePiece, faExclamation, faShareAltSquare, faRecycle, faCaretSquareLeft, faCaretSquareRight, faClipboard, faAngleDoubleRight, faClone, faExclamationCircle, faQuestionCircle, faChevronUp, faChevronDown, faPencilAlt, faArrowRight, faArrowLeft, faArrowUp, faArrowDown, faSyncAlt, faList, faSitemap, faSeedling, faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons"
 import { faGithub } from "@fortawesome/free-brands-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 import globalMixins from "@/mixins/global.js"
@@ -115,6 +115,7 @@ library.add(faSyncAlt)
 library.add(faList)
 library.add(faSitemap)
 library.add(faSeedling)
+library.add(faArrowRightToBracket)
 Vue.component("FontAwesomeIcon", FontAwesomeIcon)
 
 // Add objects mixin