Switch to FA icons on user homepage

Kitware · Jan 8, 2024 · 6c1f173 · 6c1f173
1 parent c76e6cb
commit 6c1f173
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 36 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -6,6 +6,7 @@
 
 import * as Vue from 'vue';
 import axios from 'axios';
+
 import BuildConfigure from './components/BuildConfigure';
 import BuildNotes from './components/BuildNotes';
 import BuildSummary from './components/BuildSummary';
@@ -23,7 +24,16 @@ import ViewDynamicAnalysis from './components/ViewDynamicAnalysis.vue';
 import AllProjects from './components/AllProjects.vue';
 import SubProjectDependencies from './components/SubProjectDependencies.vue';
 
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import { fab } from '@fortawesome/free-brands-svg-icons';
+
+library.add(fas, far, fab);
+
 const cdash_components = {
+  FontAwesomeIcon,
   BuildConfigure,
   BuildNotes,
   BuildSummary,

diff --git a/resources/js/components/UserHomepage.vue b/resources/js/components/UserHomepage.vue
@@ -93,82 +93,55 @@
             <td
               align="center"
               bgcolor="#DDDDDD"
+              class="icon-row"
             >
               <a
                 title="Edit subscription"
                 :href="$baseURL + '/subscribeProject.php?projectid=' + project.id + '&edit=1'"
               >
-                <img
-                  :src="$baseURL + '/img/edit.png'"
-                  border="0"
-                  alt="subscribe"
-                >
+                <font-awesome-icon icon="fa-solid fa-bell"/>
               </a>
               <a
                 v-if="project.role > 0"
                 title="Claim sites"
                 :href="$baseURL + '/editSite.php?projectid=' + project.id"
               >
-                <img
-                  :src="$baseURL + '/img/systemtray.png'"
-                  border="0"
-                  alt="claimsite"
-                >
+                <font-awesome-icon icon="fa-solid fa-computer"/>
               </a>
               <a
                 v-if="project.role > 1"
                 title="Edit project"
                 :href="$baseURL + '/project/' + project.id + '/edit'"
               >
-                <img
-                  :src="$baseURL + '/img/edit2.png'"
-                  border="0"
-                  alt="editproject"
-                >
+                <font-awesome-icon icon="fa-solid fa-pencil"/>
               </a>
               <a
                 v-if="project.role > 1"
                 title="Manage subprojects"
                 :href="$baseURL + '/manageSubProject.php?projectid=' + project.id"
               >
-                <img
-                  :src="$baseURL + '/img/subproject.png'"
-                  border="0"
-                  alt="subproject"
-                >
+                <font-awesome-icon icon="fa-solid fa-folder-tree"/>
               </a>
               <a
                 v-if="project.role > 1"
                 title="Manage project groups"
                 :href="$baseURL + '/manageBuildGroup.php?projectid=' + project.id"
               >
-                <img
-                  :src="$baseURL + '/img/edit_group.png'"
-                  border="0"
-                  alt="managegroups"
-                >
+                <font-awesome-icon icon="fa-solid fa-layer-group"/>
               </a>
               <a
                 v-if="project.role > 1"
                 title="Manage project users"
                 :href="$baseURL + '/manageProjectRoles.php?projectid=' + project.id"
               >
-                <img
-                  :src="$baseURL + '/img/users.png'"
-                  border="0"
-                  alt="manageusers"
-                >
+                <font-awesome-icon icon="fa-solid fa-user-pen"/>
               </a>
               <a
                 v-if="project.role > 1"
                 title="Manage project coverage"
                 :href="$baseURL + '/manageCoverage.php?projectid=' + project.id"
               >
-                <img
-                  :src="$baseURL + '/img/filecoverage.png'"
-                  border="0"
-                  alt="managecoverage"
-                >
+                <font-awesome-icon icon="fa-solid fa-chart-line"/>
               </a>
             </td>
             <td
@@ -703,9 +676,10 @@
 <script>
 import ApiLoader from './shared/ApiLoader';
 import LoadingIndicator from "./shared/LoadingIndicator.vue";
+import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 export default {
   name: "UserHomepage",
-  components: {LoadingIndicator},
+  components: { FontAwesomeIcon, LoadingIndicator },
 
   data () {
     return {
@@ -800,4 +774,8 @@ export default {
 #tokenDescriptionlabel {
   margin: 0 0.5em 0 0;
 }
+
+.icon-row > a {
+  padding: 0 0.3em;
+}
 </style>