GH-421 Reimplement icons using vue-feather-icons and vue-material-des…

…ign-icons libraries, remove Manrope font (Fix #421)
dzikoysk · Apr 12, 2021 · 5dd320a · 5dd320a
1 parent 5c54bbd
commit 5dd320a
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 63 deletions.
diff --git a/reposilite-backend/pom.xml b/reposilite-backend/pom.xml
@@ -47,10 +47,6 @@
             <artifactId>javalin-openapi</artifactId>
             <version>3.13.5</version>
             <exclusions>
-                <exclusion>
-                    <artifactId>redoc</artifactId>
-                    <groupId>org.webjars.npm</groupId>
-                </exclusion>
                 <exclusion>
                     <artifactId>snakeyaml</artifactId>
                     <groupId>org.yaml</groupId>

diff --git a/reposilite-backend/src/main/java/org/panda_lang/reposilite/ReposiliteHttpServer.java b/reposilite-backend/src/main/java/org/panda_lang/reposilite/ReposiliteHttpServer.java
@@ -141,6 +141,7 @@ private void configure(Configuration configuration, JavalinConfig config) {
 
             OpenApiOptions options = new OpenApiOptions(applicationInfo)
                     .path("/swagger-docs")
+                    // .reDoc(new ReDocOptions("/redoc"))
                     .swagger(swaggerOptions);
 
             config.registerPlugin(new OpenApiPlugin(options));

diff --git a/reposilite-backend/src/main/resources/static/index.html b/reposilite-backend/src/main/resources/static/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>{{REPOSILITE.TITLE}}</title><meta name="description" content="{{REPOSILITE.DESCRIPTION}}"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="{{REPOSILITE.TITLE}}"><meta name="twitter:description" content="{{REPOSILITE.DESCRIPTION}}"><meta property="og:title" content="{{REPOSILITE.TITLE}}"><meta property="og:site_name" content="{{REPOSILITE.TITLE}}"><meta property="og:type" content="website"><meta property="og:description" content="{{REPOSILITE.DESCRIPTION}}"><link rel="icon" href="data:;base64,iVBORw0KGgo="><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;500&display=swap" rel="stylesheet"><script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script><script>// don't assign placeholders to window
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>{{REPOSILITE.TITLE}}</title><meta name="description" content="{{REPOSILITE.DESCRIPTION}}"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="{{REPOSILITE.TITLE}}"><meta name="twitter:description" content="{{REPOSILITE.DESCRIPTION}}"><meta property="og:title" content="{{REPOSILITE.TITLE}}"><meta property="og:site_name" content="{{REPOSILITE.TITLE}}"><meta property="og:type" content="website"><meta property="og:description" content="{{REPOSILITE.DESCRIPTION}}"><link rel="icon" href="data:;base64,iVBORw0KGgo="><script>// don't assign placeholders to window
       if (!'{{REPOSILITE.BASE_PATH}}'.includes('REPOSILITE.BASE_PATH')) {
         window.REPOSILITE_BASE_PATH = '{{REPOSILITE.BASE_PATH}}'
         window.REPOSILITE_VUE_BASE_PATH = '{{REPOSILITE.VUE_BASE_PATH}}'

diff --git a/reposilite-backend/src/main/resources/static/js/app.js b/reposilite-backend/src/main/resources/static/js/app.js
diff --git a/reposilite-frontend/package-lock.json b/reposilite-frontend/package-lock.json
diff --git a/reposilite-frontend/package.json b/reposilite-frontend/package.json
@@ -8,15 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@fortawesome/fontawesome": "^1.1.8",
-    "@fortawesome/fontawesome-free": "^5.15.1",
     "ansi-to-html": "^0.6.14",
     "axios": "^0.21.1",
     "core-js": "^3.8.2",
     "downloadjs": "^1.4.7",
     "mime-types": "^2.1.28",
     "pretty-bytes": "^5.5.0",
     "vue": "^2.6.12",
+    "vue-feather-icons": "^5.1.0",
+    "vue-material-design-icons": "^4.11.0",
     "vue-meta": "^2.4.0",
     "vue-notification": "^1.3.20",
     "vue-router": "^3.4.9",

diff --git a/reposilite-frontend/public/index.html b/reposilite-frontend/public/index.html
@@ -34,8 +34,6 @@
     <meta property="og:description" content="{{REPOSILITE.DESCRIPTION}}">
     <!-- Assets -->
     <link rel="icon" href="data:;base64,iVBORw0KGgo=">
-    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;500&display=swap" rel="stylesheet">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
     <script>
       // don't assign placeholders to window
       if (!'{{REPOSILITE.BASE_PATH}}'.includes('REPOSILITE.BASE_PATH')) {

diff --git a/reposilite-frontend/src/components/browser/FileBrowser.vue b/reposilite-frontend/src/components/browser/FileBrowser.vue
@@ -28,8 +28,7 @@
           span.ml-1.text-2xl(:style="'color: ' + configuration.accentColor")
             | &#x2934;
       router-link(v-if="!isDashboard()" :to="'/dashboard' + this.qualifier")
-        span.ml-3.text-xl(:style="'color: ' + configuration.accentColor")
-          i.fas.fa-feather-alt
+        FeatherIcon.ml-3.mt-1(:style="'color: ' + configuration.accentColor")
     .list.overflow-y-auto
       FileEntry(
         v-if="!error"
@@ -47,6 +46,7 @@
 <script>
 import Vue from 'vue'
 import smoothReflow from 'vue-smooth-reflow'
+import { FeatherIcon } from 'vue-feather-icons'
 import FileEntry from './FileEntry'
 
 const CHUNK_SIZE = 10
@@ -69,6 +69,7 @@ export default {
     }
   },
   components: {
+    FeatherIcon,
     FileEntry
   },
   watch: {

diff --git a/reposilite-frontend/src/components/browser/FileEntryContent.vue b/reposilite-frontend/src/components/browser/FileEntryContent.vue
@@ -17,8 +17,8 @@
 <template lang="pug">
   .flex.py-2.px-6.border-1.border-gray-300
     .pr-5
-      i(v-if="file.type === 'directory'").fas.fa-folder
-      i(v-if="file.type === 'file'").fas.fa-file
+      FolderIcon(v-if="file.type === 'directory'")
+      FileIcon(v-if="file.type === 'file'")
     .flex.justify-between.w-full
       h1(v-if="file.type === 'file'") {{ file.name }}
       h1(v-else).font-bold {{ file.name }}
@@ -27,15 +27,28 @@
 
 <script>
 import prettyBytes from 'pretty-bytes'
+import FolderIcon from 'vue-material-design-icons/Folder.vue'
+import FileIcon from 'vue-material-design-icons/File.vue'
 
 export default {
   props: {
     file: Object
   },
+  components: {
+    FileIcon,
+    FolderIcon
+  },
   data () {
     return {
       fileSize: prettyBytes(this.file.contentLength)
     }
   }
 }
 </script>
+
+<style lang="stylus">
+.folder-icon svg
+.file-icon svg
+  width: 1.2em
+  padding-top: 0.2em
+</style>
diff --git a/reposilite-frontend/src/main.js b/reposilite-frontend/src/main.js
@@ -25,9 +25,6 @@ import Meta from 'vue-meta'
 import uri from './mixins/uri'
 import orDefault from './mixins/default'
 
-import fontawesome from '@fortawesome/fontawesome'
-fontawesome.config = { autoReplaceSvg: false }
-
 Vue.config.productionTip = false
 Vue.prototype.$http = Axios
 

diff --git a/reposilite-frontend/src/views/Index.vue b/reposilite-frontend/src/views/Index.vue
@@ -63,7 +63,7 @@ export default {
 html
   background-color #f1f1f1
 #app
-  font-family 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+  font-family system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif
   -webkit-font-smoothing antialiased
   -moz-osx-font-smoothing grayscale
   color #2c3e50
@@ -74,5 +74,5 @@ html
 svg
   z-index -1
 .segoe
-  font-family 'Segoe UI', 'Manrope'
+  font-family system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif
 </style>
diff --git a/reposilite-frontend/src/views/dashboard/Upload.vue b/reposilite-frontend/src/views/dashboard/Upload.vue
@@ -23,7 +23,7 @@
     input(name="artifactId" v-model="artifactId" placeholder="artifactId" required).p-1.m-1.w-96.text-center
     input(name="version" v-model="version" placeholder="version" required).p-1.m-1.w-96.text-center
     div(v-for="(file, index) in files" :key="file.id").p-1.m-1
-      i.fas.fa-file.mr-2
+      FileIcon.mr-2
       span {{ file.name }}
       span(v-if="file.error") {{ file.error }}
       span(v-else-if="file.success") {{ file.success }}
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import { FileIcon } from 'vue-feather-icons'
 import FileUpload from 'vue-upload-component'
 
 export default {
@@ -66,6 +67,7 @@ export default {
     }
   },
   components: {
+    FileIcon,
     FileUpload
   },
   methods: {

diff --git a/reposilite-frontend/tailwind.config.js b/reposilite-frontend/tailwind.config.js
@@ -276,7 +276,6 @@ module.exports = {
       default: '1'
     },
     fontFamily: {
-      manrope: ['Manrope', 'sans-serif'],
       sans: [
         'Inter',
         '-apple-system',