diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index ef40333c..d987eff1 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -3,7 +3,6 @@ var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname, '../') var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin') -var FontelloPlugin = require("fontello-webpack-plugin") var env = process.env.NODE_ENV // check env & config/index.js to decide weither to enable CSS Sourcemaps for the @@ -94,15 +93,6 @@ module.exports = { new ServiceWorkerWebpackPlugin({ entry: path.join(__dirname, '..', 'src/sw.js'), filename: 'sw-pleroma.js' - }), - new FontelloPlugin({ - config: require('../static/fontello.json'), - host: 'https://fontello.com', - name: 'fontello', - output: { - css: 'static/[name].' + now + '.css', // [hash] is not supported. Use the current timestamp instead for versioning. - font: 'static/font/[name].' + now + '.[ext]' - } }) ] } diff --git a/package.json b/package.json index 75d9ee56..14738c3e 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,10 @@ "dependencies": { "@babel/runtime": "^7.7.6", "@chenfengyuan/vue-qrcode": "^1.0.0", + "@fortawesome/fontawesome-svg-core": "^1.2.32", + "@fortawesome/free-regular-svg-icons": "^5.15.1", + "@fortawesome/free-solid-svg-icons": "^5.15.1", + "@fortawesome/vue-fontawesome": "^2.0.0", "body-scroll-lock": "^2.6.4", "chromatism": "^3.0.0", "cropperjs": "^1.4.3", @@ -68,7 +72,6 @@ "eventsource-polyfill": "^0.9.6", "express": "^4.13.3", "file-loader": "^3.0.1", - "fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186", "function-bind": "^1.0.2", "html-webpack-plugin": "^3.0.0", "http-proxy-middleware": "^0.17.2", diff --git a/src/App.scss b/src/App.scss index e1e1bdd0..6884f314 100644 --- a/src/App.scss +++ b/src/App.scss @@ -85,7 +85,7 @@ button { font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); - i[class*=icon-] { + i[class*=icon-], .svg-inline--fa { color: $fallback--text; color: var(--btnText, $fallback--text); } @@ -106,7 +106,8 @@ button { color: var(--btnPressedText, $fallback--text); background-color: $fallback--fg; background-color: var(--btnPressed, $fallback--fg); - i { + + svg, i { color: $fallback--text; color: var(--btnPressedText, $fallback--text); } @@ -118,7 +119,8 @@ button { color: var(--btnDisabledText, $fallback--text); background-color: $fallback--fg; background-color: var(--btnDisabled, $fallback--fg); - i { + + svg, i { color: $fallback--text; color: var(--btnDisabledText, $fallback--text); } @@ -131,7 +133,8 @@ button { background-color: var(--btnToggled, $fallback--fg); box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: var(--buttonPressedShadow); - i { + + svg, i { color: $fallback--text; color: var(--btnToggledText, $fallback--text); } @@ -185,7 +188,7 @@ input, textarea, .select, .input { opacity: 0.5; } - .icon-down-open { + .select-down-icon { position: absolute; top: 0; bottom: 0; @@ -318,7 +321,7 @@ option { } } -i[class*=icon-] { +i[class*=icon-], .svg-inline--fa { color: $fallback--icon; color: var(--icon, $fallback--icon); } @@ -365,7 +368,9 @@ i[class*=icon-] { flex-wrap: wrap; .nav-icon { - margin-left: 0.4em; + margin-left: 0.2em; + width: 2em; + text-align: center; } &.right { @@ -386,7 +391,7 @@ i[class*=icon-] { box-sizing: border-box; button { - &, i[class*=icon-] { + &, i[class*=icon-], svg { color: $fallback--text; color: var(--btnTopBarText, $fallback--text); } @@ -460,7 +465,7 @@ i[class*=icon-] { flex-basis: 970px; height: 50px; - a, a i { + a, a i, a svg { color: $fallback--link; color: var(--topBarLink, $fallback--link); } @@ -807,8 +812,16 @@ nav { } } -.button-icon { - font-size: 1.2em; +.fa-scale-110 { + &.svg-inline--fa { + font-size: 1.1em; + } +} + +.fa-old-padding { + &.svg-inline--fa { + padding: 0 0.3em; + } } @keyframes shakeError { diff --git a/src/App.vue b/src/App.vue index 0276c6a6..6e44c7e9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -42,36 +42,42 @@
-
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js index 6d345bc7..395d6685 100644 --- a/src/components/account_actions/account_actions.js +++ b/src/components/account_actions/account_actions.js @@ -1,6 +1,14 @@ import { mapState } from 'vuex' import ProgressButton from '../progress_button/progress_button.vue' import Popover from '../popover/popover.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faEllipsisV +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faEllipsisV +) const AccountActions = { props: [ diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 987e94b7..e3ae376e 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -1,5 +1,5 @@ + diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index 5a41f22d..5ee4179a 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -1,3 +1,7 @@ +import { library } from '@fortawesome/fontawesome-svg-core' +import { faRetweet } from '@fortawesome/free-solid-svg-icons' + +library.add(faRetweet) const RetweetButton = { props: ['status', 'loggedIn', 'visibility'], @@ -22,9 +26,7 @@ const RetweetButton = { computed: { classes () { return { - 'retweeted': this.status.repeated, - 'retweeted-empty': !this.status.repeated, - 'animate-spin': this.animated + '-repeated': this.status.repeated } }, mergedConfig () { diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 074f7747..b234f3d9 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -1,26 +1,30 @@