diff --git a/src/package.json b/src/package.json --- a/src/package.json +++ b/src/package.json @@ -17,6 +17,11 @@ "cross-env": "^5.1", "eslint": "^6.8.0", "eslint-plugin-vue": "^6.1.1", + "@fortawesome/fontawesome-svg-core": "^1.2.27", + "@fortawesome/free-brands-svg-icons": "^5.12.1", + "@fortawesome/free-regular-svg-icons": "^5.12.1", + "@fortawesome/free-solid-svg-icons": "^5.12.1", + "@fortawesome/vue-fontawesome": "^0.1.9", "jquery": "^3.4.1", "laravel-mix": "^4.0.7", "lodash": "^4.17.13", diff --git a/src/resources/js/app.js b/src/resources/js/app.js --- a/src/resources/js/app.js +++ b/src/resources/js/app.js @@ -12,8 +12,16 @@ import MenuComponent from '../vue/components/Menu' import router from '../vue/js/routes.js' import store from '../vue/js/store' +import FontAwesomeIcon from './fontawesome.js' import VueToastr from '@deveodk/vue-toastr' +Vue.component('svg-icon', FontAwesomeIcon) + +Vue.use(VueToastr, { + defaultPosition: 'toast-bottom-right', + defaultTimeout: 5000 +}) + // Add a response interceptor for general/validation error handler // This have to be before Vue and Router setup. Otherwise we would // not be able to handle axios responses initiated from inside @@ -172,8 +180,3 @@ } } }) - -Vue.use(VueToastr, { - defaultPosition: 'toast-bottom-right', - defaultTimeout: 5000 -}) diff --git a/src/resources/js/fontawesome.js b/src/resources/js/fontawesome.js new file mode 100644 --- /dev/null +++ b/src/resources/js/fontawesome.js @@ -0,0 +1,27 @@ + +import { library } from '@fortawesome/fontawesome-svg-core' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +//import { } from '@fortawesome/free-regular-svg-icons' +//import { } from '@fortawesome/free-brands-svg-icons' +import { + faCheck, + faGlobe, + faSyncAlt, + faUser, + faUserCog, + faUsers, + faWallet +} from '@fortawesome/free-solid-svg-icons' + +// Register only these icons we need +library.add( + faCheck, + faGlobe, + faSyncAlt, + faUser, + faUserCog, + faUsers, + faWallet +) + +export default FontAwesomeIcon diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss --- a/src/resources/sass/app.scss +++ b/src/resources/sass/app.scss @@ -102,3 +102,29 @@ } } } + +#dashboard-nav { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: 1rem; + + & > a { + padding: 1rem; + text-align: center; + white-space: nowrap; + margin: 0 .5rem .5rem 0; + text-decoration: none; + min-width: 8rem; + + &.disabled { + pointer-events: none; + opacity: .6; + } + } + + svg { + width: 6rem; + height: 6rem; + } +} diff --git a/src/resources/vue/components/Dashboard.vue b/src/resources/vue/components/Dashboard.vue --- a/src/resources/vue/components/Dashboard.vue +++ b/src/resources/vue/components/Dashboard.vue @@ -14,12 +14,21 @@ -
-Here's a sample zone file for your domain:
{{ domain.dns.join("\n") }}- +