Skip to content

Commit 86a9048

Browse files
AchoArnoldAchoArnold
committed
Move to mdi-js
1 parent 0407c45 commit 86a9048

13 files changed

Lines changed: 53937 additions & 13342 deletions

File tree

‎web/components/BackButton.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,20 @@
55
:block="block"
66
@click="goBack"
77
>
8-
<v-icon>mdi-arrow-left</v-icon>
8+
<v-icon>{{ mdiArrowLeft }}</v-icon>
99
Go Back
1010
</v-btn>
1111
</template>
1212

1313
<script lang="ts">
1414
import { Vue, Component, Prop } from 'vue-property-decorator'
1515
import { Location } from 'vue-router'
16+
import { mdiArrowLeft } from '@mdi/js'
1617
@Component
1718
export default class BackButton extends Vue {
1819
@Prop({ required: false }) route?: Location
1920
@Prop({ required: false, type: Boolean, default: false }) block!: boolean
21+
mdiArrowLeft = mdiArrowLeft
2022
goBack(): void {
2123
if (this.route) {
2224
this.$router.push(this.route)

‎web/components/CopyButton.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@
77
:large="large"
88
@click="copy"
99
>
10-
<v-icon>mdi-content-copy</v-icon>
10+
<v-icon>{{ mdiContentCopy }}</v-icon>
1111
{{ copyText }}
1212
</v-btn>
1313
</template>
1414

1515
<script lang="ts">
1616
import { Vue, Component, Prop } from 'vue-property-decorator'
17+
import { mdiContentCopy } from '@mdi/js'
1718
import { NotificationRequest } from '~/store'
1819
@Component
1920
export default class CopyButton extends Vue {
@@ -26,6 +27,7 @@ export default class CopyButton extends Vue {
2627
notificationText!: string
2728
2829
disabled = false
30+
mdiContentCopy = mdiContentCopy
2931
3032
async copy() {
3133
this.disabled = true

‎web/components/MessageThread.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@
3636
class="primary"
3737
:to="{ name: 'messages' }"
3838
>
39-
<v-icon>mdi-plus</v-icon>
39+
<v-icon>
40+
{{ mdiPlus }}
41+
</v-icon>
4042
New Message
4143
</v-btn>
4244
</v-sheet>
@@ -45,7 +47,9 @@
4547
Install the mobile app on your android phone to start sending messages
4648
</p>
4749
<v-btn class="primary" :href="$store.getters.getAppData.appDownloadUrl">
48-
<v-icon>mdi-download</v-icon>
50+
<v-icon>
51+
{{ mdiDownload }}
52+
</v-icon>
4953
Install App
5054
</v-btn>
5155
</div>
@@ -62,7 +66,7 @@
6266
}"
6367
>
6468
<v-list-item-avatar :color="thread.color">
65-
<v-icon dark> mdi-account </v-icon>
69+
<v-icon dark>{{ mdiAccount }}</v-icon>
6670
</v-list-item-avatar>
6771
<v-list-item-content>
6872
<v-list-item-title>
@@ -86,9 +90,14 @@
8690

8791
<script lang="ts">
8892
import { Vue, Component } from 'vue-property-decorator'
93+
import { mdiPlus, mdiDownload, mdiAccount } from '@mdi/js'
8994
9095
@Component
9196
export default class MessageThread extends Vue {
97+
mdiPlus = mdiPlus
98+
mdiDownload = mdiDownload
99+
mdiAccount = mdiAccount
100+
92101
get threads(): Array<MessageThread> {
93102
return this.$store.getters.getThreads
94103
}

‎web/components/MessageThreadHeader.vue‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
icon
5151
v-on="on"
5252
>
53-
<v-icon x-small>mdi-circle</v-icon>
53+
<v-icon x-small>{{ mdiCircle }}</v-icon>
5454
</v-btn>
5555
</template>
5656
<h4>Last Heartbeat</h4>
@@ -62,19 +62,19 @@
6262
<v-menu offset-y>
6363
<template #activator="{ on }">
6464
<v-btn icon text class="mt-2" v-on="on">
65-
<v-icon>mdi-dots-vertical</v-icon>
65+
<v-icon>{{ mdiDotsVertical }}</v-icon>
6666
</v-btn>
6767
</template>
6868
<v-list class="px-2" nav :dense="$vuetify.breakpoint.mdAndDown">
6969
<v-list-item-group v-model="selectedMenuItem">
7070
<v-list-item @click.prevent="toggleArchive">
7171
<v-list-item-icon class="pl-2">
72-
<v-icon v-if="!$store.getters.getIsArchived" dense
73-
>mdi-package-down</v-icon
74-
>
75-
<v-icon v-if="$store.getters.getIsArchived" dense
76-
>mdi-package-up</v-icon
77-
>
72+
<v-icon v-if="!$store.getters.getIsArchived" dense>
73+
{{ mdiPackageDown }}
74+
</v-icon>
75+
<v-icon v-if="$store.getters.getIsArchived" dense>
76+
{{ mdiPackageUp }}
77+
</v-icon>
7878
</v-list-item-icon>
7979
<v-list-item-content class="ml-n3">
8080
<v-list-item-title class="pr-16 py-1">
@@ -99,7 +99,7 @@
9999
exact
100100
>
101101
<v-list-item-icon class="pl-2">
102-
<v-icon dense>mdi-plus</v-icon>
102+
<v-icon dense>{{ mdiPlus }}</v-icon>
103103
</v-list-item-icon>
104104
<v-list-item-content class="ml-n3">
105105
<v-list-item-title class="pr-16 py-1">
@@ -111,7 +111,7 @@
111111
</v-list-item>
112112
<v-list-item :to="{ name: 'settings' }" exact>
113113
<v-list-item-icon class="pl-2">
114-
<v-icon dense>mdi-account-cog</v-icon>
114+
<v-icon dense>{{ mdiAccountCog }}</v-icon>
115115
</v-list-item-icon>
116116
<v-list-item-content class="ml-n3">
117117
<v-list-item-title class="pr-16 py-1">
@@ -127,7 +127,7 @@
127127
exact
128128
>
129129
<v-list-item-icon class="pl-2">
130-
<v-icon dense>mdi-download</v-icon>
130+
<v-icon dense>{{ mdiDownload }}</v-icon>
131131
</v-list-item-icon>
132132
<v-list-item-content class="ml-n3">
133133
<v-list-item-title class="pr-16 py-1">
@@ -139,7 +139,7 @@
139139
</v-list-item>
140140
<v-list-item @click.prevent="logout">
141141
<v-list-item-icon class="pl-2">
142-
<v-icon dense>mdi-logout</v-icon>
142+
<v-icon dense>{{ mdiLogout }}</v-icon>
143143
</v-list-item-icon>
144144
<v-list-item-content class="ml-n3">
145145
<v-list-item-title class="pr-16 py-1">
@@ -157,12 +157,31 @@
157157

158158
<script lang="ts">
159159
import { Vue, Component } from 'vue-property-decorator'
160+
import {
161+
mdiPlus,
162+
mdiAccountCog,
163+
mdiLogout,
164+
mdiDownload,
165+
mdiPackageUp,
166+
mdiPackageDown,
167+
mdiDotsVertical,
168+
mdiCircle,
169+
} from '@mdi/js'
160170
import { SelectItem } from '~/types'
161171
import { Phone } from '~/models/phone'
162172
163173
@Component
164174
export default class MessageThreadHeader extends Vue {
165175
selectedMenuItem = -1
176+
mdiPlus = mdiPlus
177+
mdiAccountCog = mdiAccountCog
178+
mdiLogout = mdiLogout
179+
mdiDownload = mdiDownload
180+
mdiPackageUp = mdiPackageUp
181+
mdiPackageDown = mdiPackageDown
182+
mdiDotsVertical = mdiDotsVertical
183+
mdiCircle = mdiCircle
184+
166185
get owners(): Array<SelectItem> {
167186
return this.$store.getters.getPhones.map((phone: Phone): SelectItem => {
168187
return {

‎web/components/Toast.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
:color="notification.type"
66
:timeout="notification.timeout"
77
>
8-
<v-icon v-if="notification.type === 'success'" :color="notification.type"
9-
>mdi-check</v-icon
10-
>
11-
<v-icon v-if="notification.type === 'info'" :color="notification.type"
12-
>mdi-information</v-icon
13-
>
8+
<v-icon v-if="notification.type === 'success'" :color="notification.type">
9+
{{ mdiCheck }}
10+
</v-icon>
11+
<v-icon v-if="notification.type === 'info'" :color="notification.type">
12+
{{ mdiInformation }}
13+
</v-icon>
1414
{{ notification.message }}
1515
<template #action="{ attrs }">
1616
<v-btn
@@ -28,10 +28,14 @@
2828

2929
<script lang="ts">
3030
import { Vue, Component } from 'vue-property-decorator'
31+
import { mdiCheck, mdiInformation } from '@mdi/js'
3132
import { Notification } from '~/store'
3233
3334
@Component
3435
export default class Toast extends Vue {
36+
mdiCheck = mdiCheck
37+
mdiInformation = mdiInformation
38+
3539
get notification(): Notification {
3640
return this.$store.getters.getNotification
3741
}

‎web/nuxt.config.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ export default {
44

55
// Global page headers: https://go.nuxtjs.dev/config-head
66
head: {
7-
titleTemplate: '%s - HTTP SMS API',
8-
title: 'Messages',
7+
titleTemplate: '%s',
8+
title: 'HTTP SMS | Convert your android phone into an SMS Gateway.',
99
htmlAttrs: {
1010
lang: 'en',
1111
},
@@ -71,7 +71,11 @@ export default {
7171

7272
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
7373
vuetify: {
74+
treeShake: true,
7475
customVariables: ['~/assets/variables.scss'],
76+
defaultAssets: {
77+
icons: 'mdiSvg',
78+
},
7579
theme: {
7680
dark: true,
7781
},

0 commit comments

Comments
 (0)