Use @mdi/fonts instead of material-design font to avoid flashing the icon text if loading of the font is too long

This commit is contained in:
Lucas Verney 2018-11-29 20:26:34 +01:00
parent e3132c4298
commit 0d5e04860e
12 changed files with 21 additions and 54 deletions

View File

@ -16,9 +16,9 @@
}, },
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.0.0", "@babel/polyfill": "^7.0.0",
"@mdi/font": "^3.0.39",
"file-saver": "^1.3.8", "file-saver": "^1.3.8",
"gps-to-gpx": "git://github.com/phyks/gps-to-gpx.git#1cb5adf4dd382266d076d7df3cb5aa3a4d7dd27b", "gps-to-gpx": "git://github.com/phyks/gps-to-gpx.git#1cb5adf4dd382266d076d7df3cb5aa3a4d7dd27b",
"material-icons": "^0.2.3",
"nosleep.js": "^0.7.0", "nosleep.js": "^0.7.0",
"ol": "^5.3.0", "ol": "^5.3.0",
"roboto-fontface": "^0.9.0", "roboto-fontface": "^0.9.0",

View File

@ -21,7 +21,7 @@
> >
<v-badge color="orange" left> <v-badge color="orange" left>
<span slot="badge">{{ unsentReportsLength }}</span> <span slot="badge">{{ unsentReportsLength }}</span>
<v-icon>cloud_upload</v-icon> <v-icon>mdi-cloud-upload</v-icon>
</v-badge> </v-badge>
</v-btn> </v-btn>
<v-menu <v-menu
@ -30,7 +30,7 @@
v-if="showMenu" v-if="showMenu"
> >
<v-btn slot="activator" icon role="button" :aria-label="$t('buttons.menu')"> <v-btn slot="activator" icon role="button" :aria-label="$t('buttons.menu')">
<v-icon>more_vert</v-icon> <v-icon>mdi-dots-vertical</v-icon>
</v-btn> </v-btn>
<v-list> <v-list>
<v-list-tile @click="isSearchModalShown = true" v-if="isMapLoaded"> <v-list-tile @click="isSearchModalShown = true" v-if="isMapLoaded">
@ -54,7 +54,7 @@
</v-list> </v-list>
</v-menu> </v-menu>
<v-btn icon role="button" :aria-label="$t('buttons.back')" v-else @click="goBack"> <v-btn icon role="button" :aria-label="$t('buttons.back')" v-else @click="goBack">
<v-icon>arrow_back</v-icon> <v-icon>mdi-arrow-left</v-icon>
</v-btn> </v-btn>
<div> <div>
<v-progress-linear <v-progress-linear

View File

@ -21,7 +21,7 @@
role="button" role="button"
:aria-label="$t('buttons.recenterMap')" :aria-label="$t('buttons.recenterMap')"
> >
<v-icon>my_location</v-icon> <v-icon>mdi-crosshairs-gps</v-icon>
</v-btn> </v-btn>
</v-layout> </v-layout>
</template> </template>

View File

@ -88,13 +88,13 @@ export default {
data() { data() {
return { return {
geolocationPermissionMessages: [ geolocationPermissionMessages: [
`<i aria-hidden='true' class='v-icon material-icons' style='vertical-align: middle;'>help</i> ${this.$t('permissions.geolocationDescription')}`, `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.geolocationDescription')}`,
], ],
permanentNotificationMessages: [ permanentNotificationMessages: [
`<i aria-hidden='true' class='v-icon material-icons' style='vertical-align: middle;'>help</i> ${this.$t('permissions.permanentNotificationDescription')}`, `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.permanentNotificationDescription')}`,
], ],
preventSuspendMessages: [ preventSuspendMessages: [
`<i aria-hidden='true' class='v-icon material-icons' style='vertical-align: middle;'>help</i> ${this.$t('permissions.preventSuspendDescription')}`, `<i aria-hidden='true' class='v-icon mdi mdi-help-circle' style='vertical-align: middle;' aria-hidden='true'></i> ${this.$t('permissions.preventSuspendDescription')}`,
], ],
}; };
}, },

View File

@ -27,7 +27,7 @@
class="smallButton" class="smallButton"
@click.stop="upvote" @click.stop="upvote"
> >
<v-icon>thumb_up</v-icon> <v-icon>mdi-thumb-up</v-icon>
</v-btn> </v-btn>
</v-flex> </v-flex>
@ -42,7 +42,7 @@
class="mediumButton" class="mediumButton"
@click.stop="downvote" @click.stop="downvote"
> >
<v-icon>thumb_down</v-icon> <v-icon>mdi-thumb-down</v-icon>
</v-btn> </v-btn>
</v-flex> </v-flex>
@ -59,7 +59,7 @@
role="button" role="button"
:aria-label="$t('buttons.close')" :aria-label="$t('buttons.close')"
> >
<v-icon>close</v-icon> <v-icon>mdi-close</v-icon>
</v-btn> </v-btn>
</v-layout> </v-layout>
</v-container> </v-container>

View File

@ -27,7 +27,7 @@
large large
role="button" role="button"
> >
{{ $t('reportIssueModal.send') }} <v-icon class="ml-1">email</v-icon> {{ $t('reportIssueModal.send') }} <v-icon class="ml-1">mdi-email</v-icon>
</v-btn> </v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>

View File

@ -1,35 +0,0 @@
/**
* Copy of the CSS file from the node_modules package, including an additional
* font-display directive.
*/
@font-face {
font-display: block;
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.eot");
/* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"), url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.woff2") format("woff2"), url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.woff") format("woff"), url("../../../node_modules/material-icons/iconfont/MaterialIcons-Regular.ttf") format("truetype");
}
.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}

View File

@ -5,7 +5,7 @@ import '@/polyfills';
import Vue from 'vue'; import Vue from 'vue';
import '@/css/vendor/roboto-fontface.css'; import '@/css/vendor/roboto-fontface.css';
import '@/css/vendor/material-icons.css'; import '@mdi/font/css/materialdesignicons.css';
import 'ol/ol.css'; import 'ol/ol.css';
import 'vuetify/src/stylus/app.styl'; import 'vuetify/src/stylus/app.styl';

View File

@ -39,7 +39,7 @@
:aria-label="$t('buttons.reportProblem')" :aria-label="$t('buttons.reportProblem')"
v-if="!hasCenterProvidedByRoute && hasGeolocationTracking" v-if="!hasCenterProvidedByRoute && hasGeolocationTracking"
> >
<v-icon>report_problem</v-icon> <v-icon>mdi-alert</v-icon>
</v-btn> </v-btn>
<ReportDialog <ReportDialog
v-model="isReportDialogVisible" v-model="isReportDialogVisible"

View File

@ -16,7 +16,7 @@
<p class="text-xs-center"> <p class="text-xs-center">
<i18n path="intro.reportIconDescription"> <i18n path="intro.reportIconDescription">
<v-icon>report_problem</v-icon> <v-icon>mdi-alert</v-icon>
</i18n> </i18n>
</p> </p>

View File

@ -44,4 +44,5 @@ Vue.use(Vuetify, {
VTextField, VTextField,
VToolbar, VToolbar,
}, },
iconfont: 'mdi',
}); });

View File

@ -676,6 +676,11 @@
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7" resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
"@mdi/font@^3.0.39":
version "3.0.39"
resolved "https://registry.yarnpkg.com/@mdi/font/-/font-3.0.39.tgz#8a388ec9816939eff2099120102073aecdf6e5f8"
integrity sha512-VnPxEXsiV+YP9NO7XyQEvs1tBxkmtPzib9dRq/1CqubaZy9oeP7Jmgd/IEya8Z3bVyj+NZpwS0YGZW1kvx2eFQ==
"@sindresorhus/is@^0.7.0": "@sindresorhus/is@^0.7.0":
version "0.7.0" version "0.7.0"
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@ -5721,10 +5726,6 @@ map-visit@^1.0.0:
dependencies: dependencies:
object-visit "^1.0.0" object-visit "^1.0.0"
material-icons@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/material-icons/-/material-icons-0.2.3.tgz#1f84d50effbb700287ba44a21bbce0339252ccaf"
math-random@^1.0.1: math-random@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac" resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"