Remove fontawesome, replace with mdi icons

.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-berry.cjs
+yarnPath: ".yarn/releases/yarn-berry.cjs"

assets/css/app.scss

@@ -27,9 +27,6 @@
     }
 }
 
-// Disable bootstrap
-//@import 'bootstrap.scss';
-
 @import '~cropper/dist/cropper.css';
 //@import '~flag-icon-css/sass/flag-icon.scss';
 @import "~select2/dist/css/select2.css";

assets/vue/components/DataFilter.vue

@@ -4,7 +4,8 @@
       v-b-toggle.collapse-1
       variant="primary"
     >
-      <FontAwesomeIcon icon="search" />
+      <v-icon icon="mdi-magnify"/>
+
       {{ $t('Search') }}
     </q-btn>
 <!--    <b-collapse-->

assets/vue/components/Toolbar.vue

@@ -32,7 +32,7 @@
         @click="submitItem"
         unelevated
       >
-        <FontAwesomeIcon icon="save" />
+        <v-icon icon="mdi-content-save"/>
         {{ $t('Submit') }}
       </q-btn>
       <!--      <v-btn-->
@@ -62,7 +62,7 @@
         class="btn btn-primary"
         @click="addItem"
       >
-        <FontAwesomeIcon icon="folder-plus" />
+        <v-icon icon="mdi-folder-plus"/>
         New folder
       </q-btn>
 
@@ -72,7 +72,8 @@
         v-if="handleAddDocument"
         @click="addDocument"
       >
-        <FontAwesomeIcon icon="file-alt" /> New document
+        <v-icon icon="mdi-file-plus"/>
+        New document
       </q-btn>
 
       <q-btn
@@ -81,7 +82,8 @@
         v-if="handleUploadDocument"
         @click="uploadDocument"
       >
-        <FontAwesomeIcon icon="cloud-upload-alt" /> File upload
+        <v-icon icon="mdi-cloud-upload"/>
+        File upload
       </q-btn>
 
   <!--    <DataFilter-->

assets/vue/components/course/CourseCard.vue

@@ -13,9 +13,7 @@
           </router-link>
         </div>
         <div>
-          <v-icon>
-            mdi-dots-vertical
-          </v-icon>
+          <v-icon icon="mdi-dots-vertical" />
         </div>
       </div>
 

assets/vue/components/course/CourseToolList.vue

@@ -27,13 +27,13 @@
         </a>
 
         <button v-if="isCurrentTeacher && changeVisibility" @click="changeVisibility(course, tool)">
-          <FontAwesomeIcon
+          <v-icon
               v-if="tool.ctool.resourceNode.resourceLinks[0].visibility === 2"
-              icon="eye" size="lg"
+              icon="mdi-eye" size="lg"
           />
-          <FontAwesomeIcon
+          <v-icon
               v-else
-              icon="eye-slash"
+              icon="mdi-eye-off"
               size="lg"
           />
         </button>

assets/vue/components/documents/FormUpload.vue

@@ -48,7 +48,7 @@
               <a @click.prevent="files.splice(index, 1)"
                  class="delete"
               >
-                <FontAwesomeIcon icon="trash" />
+                <v-icon icon="mdi-delete"/>
               </a>
             </span>
             </div>

assets/vue/components/documents/ResourceFileIcon.vue

@@ -1,21 +1,21 @@
 <template>
   <span>
-    <FontAwesomeIcon
+    <v-icon
       v-if="file.image"
-      icon="file-image"
-      size="lg"
+      icon="mdi-file-image"
+      medium
     />
 
-    <FontAwesomeIcon
+    <v-icon
       v-else-if="file.video"
-      icon="file-video"
-      size="lg"
+      icon="mdi-file-video"
+      medium
     />
 
-    <FontAwesomeIcon
+    <v-icon
       v-else
-      icon="file-alt"
-      size="lg"
+      icon="mdi-file-alt"
+      medium
     />
   </span>
 </template>

assets/vue/components/layout/DashboardLayout.vue

@@ -132,8 +132,7 @@
         <q-list class="text-grey-8">
           <q-item class="GNL__drawer-item" v-ripple v-for="link in linksAnon" :key="link.text" :to="link.url" clickable>
             <q-item-section avatar>
-<!--              <q-icon :name="link.icon" />-->
-              <FontAwesomeIcon :icon="link.icon" size="lg" />
+              <v-icon :icon="link.icon" medium />
             </q-item-section>
             <q-item-section>
               <q-item-label>{{ link.text }}</q-item-label>
@@ -147,7 +146,7 @@
           <q-item class="GNL__drawer-item" v-ripple v-for="link in linksUser" :key="link.text" :to="link.url" clickable>
             <q-item-section avatar>
               <!--              <q-icon :name="link.icon" />-->
-              <FontAwesomeIcon :icon="link.icon" size="lg" />
+              <v-icon :icon="link.icon" medium />
             </q-item-section>
             <q-item-section>
               <q-item-label>{{ link.text }}</q-item-label>
@@ -159,7 +158,7 @@
           <q-item v-if="isAdmin" class="GNL__drawer-item" v-ripple v-for="link in linksAdmin" :key="link.text" :to="link.url"  clickable>
             <q-item-section avatar>
               <!--              <q-icon :name="link.icon" />-->
-              <FontAwesomeIcon :icon="link.icon" size="lg" />
+              <v-icon :icon="link.icon" medium />
             </q-item-section>
             <q-item-section>
               <q-item-label>{{ link.text }}</q-item-label>
@@ -172,7 +171,7 @@
             <q-item-section>
               <q-item-label>{{ link.text }}
                 <!--                <q-icon v-if="link.icon" :name="link.icon" />-->
-                <FontAwesomeIcon :icon="link.icon" size="lg" />
+                <v-icon :icon="link.icon" size="lg" />
               </q-item-label>
             </q-item-section>
           </q-item>
@@ -245,27 +244,27 @@ export default {
     linksUser: [
        //{ icon: 'home', url: '/', text: 'Home' },
        //{ icon: 'star_border', url: '/', text: 'News' },
-       { icon: 'book', url: '/courses', text: 'My courses' },
-       { icon: 'calendar-alt', url: '/main/calendar/agenda_js.php?type=personal', text: 'Events' },
+       { icon: 'mdi-book', url: '/courses', text: 'My courses' },
+       { icon: 'mdi-calendar', url: '/main/calendar/agenda_js.php?type=personal', text: 'Events' },
       //{ icon: 'star_border', url: '/sessions', text: 'My Sessions' },
       //{ icon: 'star_border', url: '/calendar', text: 'My calendar' },
       //{ icon: 'compass', url: '/catalog', text: 'Explore' },
       // { icon: 'star_border', url: '/news', text: 'News' },
     ],
     linksAdmin: [
-      { icon: 'users', url: '/main/admin/user_list.php', text: 'Users' },
-      { icon: 'book', url: '/main/admin/course_list.php', text: 'Courses' },
-      { icon: 'book-open',  url: '/main/session/session_list.php', text: 'Sessions' },
+      { icon: 'mdi-account-multiple', url: '/main/admin/user_list.php', text: 'Users' },
+      { icon: 'mdi-book', url: '/main/admin/course_list.php', text: 'Courses' },
+      { icon: 'mdi-book-open',  url: '/main/session/session_list.php', text: 'Sessions' },
       //{ icon: fasFlask, url: '/main/admin/index.php', text: 'Administration' },
-      { icon: 'cogs', url: '/main/admin/index.php', text: 'Administration' },
+      { icon: 'mdi-cogs', url: '/main/admin/index.php', text: 'Administration' },
     ],
     links3: [
       //{ icon: '', text: 'Settings' },
       // { icon: 'open_in_new', text: 'open in new' },
     ],
     linksAnon: [
-      { icon: 'home', url: '/home', text: 'Home' },
-      { icon: 'compass', url: '/catalog', text: 'Explore' },
+      { icon: 'mdi-home', url: '/home', text: 'Home' },
+      { icon: 'mdi-compass', url: '/catalog', text: 'Explore' },
     ],
     drawer: true,
     breadcrumb: [],
@@ -303,7 +302,7 @@ export default {
     //let payload = {isAuthenticated: isAuthenticated, user: this.user};
     //this.$store.dispatch("security/onRefresh", payload);
     if (isAuthenticated) {
-      this.linksUser.unshift({icon: 'user-circle', url: '/account/home', text: this.currentUser.username});
+      this.linksUser.unshift({icon: 'mdi-account', url: '/account/home', text: this.currentUser.username});
     }
   },
   computed: {

assets/vue/components/personalfile/FormUpload.vue

@@ -35,7 +35,7 @@
               <a @click.prevent="files.splice(index, 1)"
                  class="delete"
               >
-                <FontAwesomeIcon icon="trash" />
+                <v-icon icon="mdi-delete"/>
               </a>
             </span>
             </div>

assets/vue/components/sidebar/Sidebar.vue

@@ -31,7 +31,7 @@
                 :to="link.url">
                 <span class="inline-flex justify-center items-center ml-4">
                 <span class="w-5 h-5">
-                 <FontAwesomeIcon :icon="link.icon" />
+                 <v-icon :icon="link.icon" />
                 </span>
                 <span class="ml-2 text-sm tracking-wide truncate">{{ link.text }}</span>
                   </span>
@@ -135,7 +135,7 @@
                 :to="link.url">
                 <span class="inline-flex justify-center items-center ml-4">
                 <span class="w-5 h-5">
-                 <FontAwesomeIcon :icon="link.icon" />
+                 <v-icon :icon="link.icon" />
                 </span>
                 <span class="ml-2 text-sm tracking-wide truncate">{{ link.text }}</span>
                   </span>
@@ -154,7 +154,7 @@
                   :to="link.url">
                 <span class="inline-flex justify-center items-center ml-4">
                 <span class="w-5 h-5">
-                 <FontAwesomeIcon :icon="link.icon" />
+                 <v-icon :icon="link.icon" />
                 </span>
                 <span class="ml-2 text-sm tracking-wide truncate">{{ link.text }}</span>
                   </span>

assets/vue/main.js

@@ -16,11 +16,6 @@ import makeCrudModule from './store/modules/crud';
 //require('@fancyapps/fancybox');
 //require('@fancyapps/fancybox/dist/jquery.fancybox.css');
 
-// Font awesome
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { fas } from '@fortawesome/free-solid-svg-icons';
-library.add(fas);
 //Vue.use(Vuelidate);
 
 import Toast from 'vue-toastification';
@@ -150,7 +145,6 @@ app.component('Button', Button);
 app.component('Column', Column);
 app.component('ColumnGroup', ColumnGroup);
 app.component('Toolbar', Toolbar);
-app.component('FontAwesomeIcon', FontAwesomeIcon);
 app.component('DashboardLayout', DashboardLayout);
 app.component('EmptyLayout', EmptyLayout);
 app.component('TinyEditor', Editor);

assets/vue/views/course/Home.vue

@@ -8,7 +8,7 @@
       <div>
         <div class="flex flex-row" v-if="isCurrentTeacher && course">
           <a class="btn btn-info mr-2 text-xs">
-            <v-icon class="pr-2">mdi-eye</v-icon>
+            <v-icon icon="mdi-eye" class="pr-2" />
             See as student
           </a>
 

assets/vue/views/documents/DocumentManager.vue

@@ -42,11 +42,9 @@
           <a
               v-if="slotProps.data"
               @click="handleClick(slotProps.data)"
-              class="cursor-pointer " >
-            <FontAwesomeIcon
-                icon="folder"
-                size="lg"
-            />
+              class="cursor-pointer "
+          >
+            <v-icon icon="mdi-folder" />
             {{ slotProps.data.resourceNode.title }}
           </a>
         </div>

assets/vue/views/documents/List.vue

@@ -98,7 +98,7 @@
         <!--         <Button label="New document" icon="pi pi-plus" class="p-button-sm p-button-primary p-mr-2" @click="addDocumentHandler()" />-->
         <Button label="New document" icon="fa fa-file-alt" class="btn btn-primary" @click="addDocumentHandler()" />
         <Button label="Upload" icon="fa fa-file-upload" class="btn btn-primary" @click="uploadDocumentHandler()" />
-        <Button label="Delete" icon="pi pi-trash" class="btn btn-danger " @click="confirmDeleteMultiple" :disabled="!selectedItems || !selectedItems.length" />
+        <Button label="Delete" icon="mdi-delete" class="btn btn-danger " @click="confirmDeleteMultiple" :disabled="!selectedItems || !selectedItems.length" />
       </div>
     </div>
 
@@ -148,10 +148,7 @@
               v-if="slotProps.data"
               @click="handleClick(slotProps.data)"
               class="cursor-pointer " >
-            <FontAwesomeIcon
-                icon="folder"
-                size="lg"
-            />
+            <v-icon icon="mdi-folder"/>
             {{ slotProps.data.resourceNode.title }}
           </a>
         </div>
@@ -192,7 +189,9 @@
         <div class="flex flex-row gap-2">
           <Button icon="fa fa-info-circle"  class="btn btn-primary " @click="showHandler(slotProps.data)" />
           <Button v-if="isAuthenticated && isCurrentTeacher" icon="pi pi-pencil" class="btn btn-primary p-mr-2" @click="editHandler(slotProps.data)" />
-          <Button v-if="isAuthenticated && isCurrentTeacher" icon="pi pi-trash" class="btn btn-danger" @click="confirmDeleteItem(slotProps.data)" />
+          <Button v-if="isAuthenticated && isCurrentTeacher" class="btn btn-danger" @click="confirmDeleteItem(slotProps.data)" >
+            <v-icon icon="mdi-delete"/>
+          </Button>
         </div>
       </template>
     </Column>

assets/vue/views/documents/Show.vue

@@ -37,17 +37,14 @@
                     class="btn btn-primary"
                     :to="item['downloadUrl']"
                 >
-                  <FontAwesomeIcon icon="file-download" />
+                  <v-icon icon="mdi-file-download"/>
                   {{ $t('Download file') }}
                 </q-btn>
               </span>
           </div>
         </div>
         <div class ="flex justify-center" v-else>
-              <FontAwesomeIcon
-                  icon="folder"
-                  size="7x"
-              />
+          <v-icon icon="mdi-folder"/>
         </div>
       </div>
 
@@ -90,7 +87,7 @@
                     class="btn btn-primary"
                     :href="item['downloadUrl']"
                 >
-                  <FontAwesomeIcon icon="file-download" />
+                  <v-icon icon="mdi-file-download"/>
                   {{ $t('Download file') }}
                 </a>
               </div>

assets/vue/views/personalfile/List.vue

@@ -42,10 +42,7 @@
               v-if="slotProps.data"
               @click="handleClick(slotProps.data)"
               class="cursor-pointer " >
-            <FontAwesomeIcon
-                icon="folder"
-                size="lg"
-            />
+            <v-icon icon="mdi-folder"/>
             {{ slotProps.data.resourceNode.title }}
           </a>
         </div>

assets/vue/views/personalfile/Show.vue

@@ -37,17 +37,14 @@
                     class="btn btn-primary"
                     :to="item['downloadUrl']"
                 >
-                  <FontAwesomeIcon icon="file-download" />
+                  <v-icon icon="mdi-file-download"/>
                   {{ $t('Download file') }}
                 </q-btn>
               </span>
           </div>
         </div>
         <div class ="flex justify-center" v-else>
-              <FontAwesomeIcon
-                  icon="folder"
-                  size="7x"
-              />
+          <v-icon icon="mdi-folder"/>
         </div>
       </div>
 
@@ -90,7 +87,7 @@
                     class="btn btn-primary"
                     :href="item['downloadUrl']"
                 >
-                  <FontAwesomeIcon icon="file-download" />
+                  <v-icon icon="mdi-file-download"/>
                   {{ $t('Download file') }}
                 </a>
               </div>

package.json

@@ -9,9 +9,6 @@
     "@apollo/client": "^3.4.0-rc.5",
     "@babel/plugin-transform-runtime": "^7.14.5",
     "@fancyapps/fancybox": "^3.5.7",
-    "@fortawesome/fontawesome-svg-core": "^1.2.35",
-    "@fortawesome/free-solid-svg-icons": "^5.15.3",
-    "@fortawesome/vue-fontawesome": "prerelease",
     "@headlessui/vue": "^1.2.0",
     "@heroicons/vue": "^1.0.1",
     "@popperjs/core": "^2.9.2",
@@ -38,13 +35,14 @@
     "bootstrap-daterangepicker": "^3.1",
     "bootstrap-select": "^1.13.18",
     "chart.js": "^3.3.2",
+    "core-js": "^3.14.0",
     "cropper": "^4.1.0",
     "datepair.js": "^0.4.17",
     "dotenv": "^10.0.0",
     "dropzone": "^5.9.2",
     "easy-pie-chart": "^2.1.7",
     "easytimer.js": "^1.3.2",
-    "eslint": "^7.28.0",
+    "eslint": "^7.29.0",
     "eslint-plugin-vue": "^7.11.1",
     "file-loader": "^6.2.0",
     "flag-icon-css": "^3.5.0",
@@ -90,7 +88,7 @@
     "signature_pad": "^3.0.0-beta.4",
     "sortablejs": "^1.13.0",
     "sweetalert2": "^11.0.17",
-    "tailwindcss": "^2.2.0",
+    "tailwindcss": "^2.2.2",
     "tempusdominus-bootstrap-4": "^5.39.0",
     "tempusdominus-core": "^5.19.0",
     "textcomplete": "^0.18.2",
@@ -98,7 +96,7 @@
     "timepicker": "^1.13.18",
     "tinymce": "^5.8.1",
     "ts-loader": "^8.3.0",
-    "video.js": "^7.13.1",
+    "video.js": "^7.12.3",
     "vue": "3.1.1",
     "vue-eslint-parser": "^7.6.0",
     "vue-flatpickr-component": "^9.0.3",
@@ -117,7 +115,6 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.14.5",
-    "@fortawesome/fontawesome-free": "^5.15.3",
     "@mdi/font": "^5.9.55",
     "@symfony/webpack-encore": "^1.4.0",
     "@vue/cli-plugin-babel": "~4.5.13",

webpack.config.js

@@ -19,14 +19,14 @@ Encore
     .enableBuildNotifications()
 
     .addEntry('app', './assets/js/app.js')
-    .addEntry('bootstrap', './assets/js/bootstrap.js')
+    //.addEntry('bootstrap', './assets/js/bootstrap.js')
     .addEntry('exercise', './assets/js/exercise.js')
     .addEntry('free-jqgrid', './assets/js/free-jqgrid.js')
     .addEntry('lp', './assets/js/lp.js')
     .addEntry('vue', './assets/vue/main.js')
 
     .addStyleEntry('css/app', './assets/css/app.scss')
-    .addStyleEntry('css/bootstrap', './assets/css/bootstrap.scss')
+    //.addStyleEntry('css/bootstrap', './assets/css/bootstrap.scss')
     .addStyleEntry('css/chat', './assets/css/chat.css')
     .addStyleEntry('css/document', './assets/css/document.css')
     .addStyleEntry('css/editor', './assets/css/editor.css')