Skip to content

Commit 12c7701

Browse files
Chartman123Chartman123
committed
refactor: replace material design icons with material symbols
Signed-off-by: GitHub <noreply@github.com> Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>
1 parent 1b4a426 commit 12c7701

35 files changed

Lines changed: 466 additions & 613 deletions

‎package-lock.json‎

Lines changed: 7 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"extends @nextcloud/browserslist-config"
3030
],
3131
"dependencies": {
32+
"@material-symbols/svg-400": "^0.44.6",
3233
"@nextcloud/auth": "^2.6.0",
3334
"@nextcloud/axios": "^2.6.0",
3435
"@nextcloud/dialogs": "^7.3.0",
@@ -46,12 +47,9 @@
4647
"qrcode": "^1.5.4",
4748
"vue": "^3.5.22",
4849
"vue-draggable-plus": "^0.6.1",
49-
"vue-material-design-icons": "^5.3.1",
5050
"vue-router": "^4.6.0"
5151
},
5252
"devDependencies": {
53-
"@mdi/js": "^7.4.47",
54-
"@mdi/svg": "^7.4.47",
5553
"@nextcloud/browserslist-config": "^3.1.2",
5654
"@nextcloud/e2e-test-server": "^0.4.0",
5755
"@nextcloud/eslint-config": "^9.0.0-rc.9",

‎src/Forms.vue‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
:text="t('forms', 'New form')"
1414
@click="onNewForm">
1515
<template #icon>
16-
<IconPlus :size="20" decorative />
16+
<NcIconSvgWrapper :svg="IconPlus" />
1717
</template>
1818
</NcAppNavigationNew>
1919

@@ -64,7 +64,7 @@
6464
wide
6565
@click="showArchivedForms = true">
6666
<template #icon>
67-
<IconArchive :size="20" />
67+
<NcIconSvgWrapper :svg="IconArchive" />
6868
</template>
6969
{{ t('forms', 'Archived forms') }}
7070
</NcButton>
@@ -88,7 +88,7 @@
8888
class="forms-emptycontent"
8989
:name="t('forms', 'No forms created yet')">
9090
<template #icon>
91-
<FormsIcon :size="64" />
91+
<NcIconSvgWrapper :svg="FormsIcon" :size="64" />
9292
</template>
9393
<template v-if="canCreateForms" #action>
9494
<NcButton variant="primary" @click="onNewForm">
@@ -106,7 +106,7 @@
106106
: t('forms', 'Please select a form')
107107
">
108108
<template #icon>
109-
<FormsIcon :size="64" />
109+
<NcIconSvgWrapper :svg="FormsIcon" :size="64" />
110110
</template>
111111
<template v-if="canCreateForms" #action>
112112
<NcButton variant="primary" @click="onNewForm">
@@ -143,6 +143,8 @@
143143
</template>
144144

145145
<script>
146+
import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
147+
import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
146148
import axios from '@nextcloud/axios'
147149
import { showError } from '@nextcloud/dialogs'
148150
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
@@ -159,13 +161,12 @@ import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew'
159161
import NcButton from '@nextcloud/vue/components/NcButton'
160162
import NcContent from '@nextcloud/vue/components/NcContent'
161163
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
164+
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
162165
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
163-
import IconArchive from 'vue-material-design-icons/ArchiveOutline.vue'
164-
import IconPlus from 'vue-material-design-icons/Plus.vue'
165166
import AppNavigationForm from './components/AppNavigationForm.vue'
166167
import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
167-
import FormsIcon from './components/Icons/FormsIcon.vue'
168168
import Sidebar from './views/Sidebar.vue'
169+
import FormsIcon from '../img/forms-dark.svg?raw'
169170
import PermissionTypes from './mixins/PermissionTypes.js'
170171
import { FormState } from './models/Constants.ts'
171172
import logger from './utils/Logger.js'
@@ -180,9 +181,7 @@ export default {
180181
components: {
181182
AppNavigationForm,
182183
ArchivedFormsModal,
183-
FormsIcon,
184-
IconArchive,
185-
IconPlus,
184+
NcIconSvgWrapper,
186185
NcAppContent,
187186
NcAppNavigation,
188187
NcAppNavigationCaption,
@@ -493,6 +492,9 @@ export default {
493492
onCloneForm,
494493
onDeleteForm,
495494
onLastUpdatedByEventBus,
495+
IconPlus,
496+
IconArchive,
497+
FormsIcon,
496498
}
497499
},
498500
}

‎src/FormsEmptyContent.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,30 @@
1010
:name="currentModel.title"
1111
:description="currentModel.description">
1212
<template #icon>
13-
<component :is="currentModel.icon" :size="64" />
13+
<NcIconSvgWrapper :svg="currentModel.icon" :size="64" />
1414
</template>
1515
</NcEmptyContent>
1616
</NcAppContent>
1717
</NcContent>
1818
</template>
1919

2020
<script>
21+
import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
2122
import { loadState } from '@nextcloud/initial-state'
2223
import NcAppContent from '@nextcloud/vue/components/NcAppContent'
2324
import NcContent from '@nextcloud/vue/components/NcContent'
2425
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
25-
import IconCheck from 'vue-material-design-icons/Check.vue'
26-
import FormsIcon from './components/Icons/FormsIcon.vue'
26+
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
27+
import FormsIcon from '../img/forms-dark.svg?raw'
2728
2829
export default {
2930
name: 'FormsEmptyContent',
3031
3132
components: {
32-
FormsIcon,
33-
IconCheck,
3433
NcAppContent,
3534
NcContent,
3635
NcEmptyContent,
36+
NcIconSvgWrapper,
3737
},
3838
3939
data() {

‎src/components/AppNavigationForm.vue‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
@click="mobileCloseNavigation">
1919
<template #icon>
2020
<NcLoadingIcon v-if="loading" :size="16" />
21-
<IconCheck v-else-if="isExpired" :size="16" />
22-
<FormsIcon v-else :size="16" />
21+
<NcIconSvgWrapper v-else-if="isExpired" :svg="IconCheck" :size="16" />
22+
<NcIconSvgWrapper v-else :svg="FormsIcon" :size="16" />
2323
</template>
2424
<template v-if="hasSubtitle" #subname>
2525
{{ formSubtitle }}
@@ -34,7 +34,7 @@
3434
:to="{ name: 'edit', params: { hash: form.hash } }"
3535
@click="mobileCloseNavigation">
3636
<template #icon>
37-
<IconPencil :size="20" />
37+
<NcIconSvgWrapper :svg="IconPencil" />
3838
</template>
3939
{{ t('forms', 'Edit form') }}
4040
</NcActionRouter>
@@ -43,7 +43,7 @@
4343
closeAfterClick
4444
@click="onShareForm">
4545
<template #icon>
46-
<IconShareVariant :size="20" />
46+
<NcIconSvgWrapper :svg="IconShareVariant" />
4747
</template>
4848
{{ t('forms', 'Share form') }}
4949
</NcActionButton>
@@ -53,13 +53,13 @@
5353
:to="{ name: 'results', params: { hash: form.hash } }"
5454
@click="mobileCloseNavigation">
5555
<template #icon>
56-
<IconPoll :size="20" />
56+
<NcIconSvgWrapper :svg="IconPoll" />
5757
</template>
5858
{{ t('forms', 'Responses') }}
5959
</NcActionRouter>
6060
<NcActionButton v-if="canEdit" closeAfterClick @click="onCloneForm">
6161
<template #icon>
62-
<IconContentCopy :size="20" />
62+
<NcIconSvgWrapper :svg="IconContentCopy" />
6363
</template>
6464
{{ t('forms', 'Copy form') }}
6565
</NcActionButton>
@@ -70,8 +70,11 @@
7070
:disabled="isFormLocked"
7171
@click="onToggleArchive">
7272
<template #icon>
73-
<IconArchiveOff v-if="isArchived" :size="20" />
74-
<IconArchive v-else :size="20" />
73+
<NcIconSvgWrapper
74+
v-if="isArchived"
75+
:svg="IconArchiveOff"
76+
:size="20" />
77+
<NcIconSvgWrapper v-else :svg="IconArchive" :size="20" />
7578
</template>
7679
{{
7780
isArchived
@@ -85,7 +88,7 @@
8588
:disabled="isFormLocked"
8689
@click="onConfirmDelete">
8790
<template #icon>
88-
<IconDelete :size="20" />
91+
<NcIconSvgWrapper :svg="IconDelete" />
8992
</template>
9093
{{ t('forms', 'Delete form') }}
9194
</NcActionButton>
@@ -94,6 +97,14 @@
9497
</template>
9598

9699
<script>
100+
import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
101+
import IconPoll from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
102+
import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
103+
import IconContentCopy from '@material-symbols/svg-400/outlined/content_copy.svg?raw'
104+
import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
105+
import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
106+
import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
107+
import IconArchiveOff from '@material-symbols/svg-400/outlined/unarchive.svg?raw'
97108
import { getCurrentUser } from '@nextcloud/auth'
98109
import axios from '@nextcloud/axios'
99110
import { showConfirmation, showError } from '@nextcloud/dialogs'
@@ -102,17 +113,10 @@ import { generateOcsUrl } from '@nextcloud/router'
102113
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
103114
import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
104115
import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
116+
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
105117
import NcListItem from '@nextcloud/vue/components/NcListItem'
106118
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
107-
import IconArchiveOff from 'vue-material-design-icons/ArchiveOffOutline.vue'
108-
import IconArchive from 'vue-material-design-icons/ArchiveOutline.vue'
109-
import IconCheck from 'vue-material-design-icons/Check.vue'
110-
import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
111-
import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
112-
import IconPoll from 'vue-material-design-icons/Poll.vue'
113-
import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
114-
import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
115-
import FormsIcon from './Icons/FormsIcon.vue'
119+
import FormsIcon from '../../img/forms-dark.svg?raw'
116120
import PermissionTypes from '../mixins/PermissionTypes.js'
117121
import { FormState } from '../models/Constants.ts'
118122
import logger from '../utils/Logger.js'
@@ -121,18 +125,10 @@ export default {
121125
name: 'AppNavigationForm',
122126
123127
components: {
124-
FormsIcon,
125-
IconArchive,
126-
IconArchiveOff,
127-
IconCheck,
128-
IconContentCopy,
129-
IconDelete,
130-
IconPencil,
131-
IconPoll,
132-
IconShareVariant,
133128
NcActionButton,
134129
NcActionRouter,
135130
NcActionSeparator,
131+
NcIconSvgWrapper,
136132
NcListItem,
137133
NcLoadingIcon,
138134
},
@@ -159,6 +155,20 @@ export default {
159155
160156
emits: ['mobileCloseNavigation', 'openSharing', 'clone', 'delete'],
161157
158+
setup() {
159+
return {
160+
FormsIcon,
161+
IconArchive,
162+
IconArchiveOff,
163+
IconCheck,
164+
IconContentCopy,
165+
IconDelete,
166+
IconPencil,
167+
IconPoll,
168+
IconShareVariant,
169+
}
170+
},
171+
162172
data() {
163173
return {
164174
loading: false,

‎src/components/Icons/FormsIcon.vue‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

0 commit comments

Comments
 (0)