phyks/cygnal
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

6
src/App.vue
View File

@ -21,7 +21,7 @@
>
<v-badge color="orange" left>
<span slot="badge">{{ unsentReportsLength }}</span>
<v-icon>cloud_upload</v-icon>
<v-icon>mdi-cloud-upload</v-icon>
</v-badge>
</v-btn>
<v-menu
@ -30,7 +30,7 @@
v-if="showMenu"
>
<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-list>
<v-list-tile @click="isSearchModalShown = true" v-if="isMapLoaded">
@ -54,7 +54,7 @@
</v-list>
</v-menu>
<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>
<div>
<v-progress-linear

2
src/components/Map.vue
View File

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

6
src/components/PermissionsSwitches.vue
View File

@ -88,13 +88,13 @@ export default {
data() {
return {
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: [
`<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: [
`<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')}`,
],
};
},

6
src/components/ReportCard.vue
View File

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

2
src/components/ReportIssueModal.vue
View File

@ -27,7 +27,7 @@
large
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-spacer></v-spacer>

35
src/css/vendor/material-icons.css vendored
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';
}

2
src/main.js
View File

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

2
src/views/Map.vue
View File

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

2
src/views/Onboarding.vue
View File

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

1
src/vuetify.js
View File

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

9
yarn.lock
View File

@ -676,6 +676,11 @@
version "1.4.0"
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":
version "0.7.0"
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
@ -5721,10 +5726,6 @@ map-visit@^1.0.0:
dependencies:
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:
version "1.0.1"
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"