Skip to content

refactor: replace material design icons with material symbols #3330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Chartman123 wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

refactor: replace material design icons with material symbols #3330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"extends @nextcloud/browserslist-config"
],
"dependencies": {
"@material-symbols/svg-400": "^0.44.6",
"@nextcloud/auth": "^2.6.0",
"@nextcloud/axios": "^2.6.0",
"@nextcloud/dialogs": "^7.3.0",
Expand All @@ -46,7 +47,6 @@
"qrcode": "^1.5.4",
"vue": "^3.5.22",
"vue-draggable-plus": "^0.6.1",
"vue-material-design-icons": "^5.3.1",
"vue-router": "^4.6.0"
},
"devDependencies": {
Expand Down
22 changes: 12 additions & 10 deletions src/Forms.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
:text="t('forms', 'New form')"
@click="onNewForm">
<template #icon>
<IconPlus :size="20" decorative />
<NcIconSvgWrapper :svg="IconPlus" />
</template>
</NcAppNavigationNew>

Expand Down Expand Up @@ -64,7 +64,7 @@
wide
@click="showArchivedForms = true">
<template #icon>
<IconArchive :size="20" />
<NcIconSvgWrapper :svg="IconArchive" />
</template>
{{ t('forms', 'Archived forms') }}
</NcButton>
Expand All @@ -88,7 +88,7 @@
class="forms-emptycontent"
:name="t('forms', 'No forms created yet')">
<template #icon>
<FormsIcon :size="64" />
<NcIconSvgWrapper :svg="FormsIcon" :size="64" />
</template>
<template v-if="canCreateForms" #action>
<NcButton variant="primary" @click="onNewForm">
Expand All @@ -106,7 +106,7 @@
: t('forms', 'Please select a form')
">
<template #icon>
<FormsIcon :size="64" />
<NcIconSvgWrapper :svg="FormsIcon" :size="64" />
</template>
<template v-if="canCreateForms" #action>
<NcButton variant="primary" @click="onNewForm">
Expand Down Expand Up @@ -143,6 +143,8 @@
</template>

<script>
import IconPlus from '@material-symbols/svg-400/outlined/add.svg?raw'
import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
import axios from '@nextcloud/axios'
import { showError } from '@nextcloud/dialogs'
import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
Expand All @@ -159,13 +161,12 @@ import NcAppNavigationNew from '@nextcloud/vue/components/NcAppNavigationNew'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcContent from '@nextcloud/vue/components/NcContent'
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import IconArchive from 'vue-material-design-icons/ArchiveOutline.vue'
import IconPlus from 'vue-material-design-icons/Plus.vue'
import AppNavigationForm from './components/AppNavigationForm.vue'
import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
import FormsIcon from './components/Icons/FormsIcon.vue'
import Sidebar from './views/Sidebar.vue'
import FormsIcon from '../img/forms.svg?raw'
import PermissionTypes from './mixins/PermissionTypes.js'
import { FormState } from './models/Constants.ts'
import logger from './utils/Logger.js'
Expand All @@ -180,9 +181,7 @@ export default {
components: {
AppNavigationForm,
ArchivedFormsModal,
FormsIcon,
IconArchive,
IconPlus,
NcIconSvgWrapper,
NcAppContent,
NcAppNavigation,
NcAppNavigationCaption,
Expand Down Expand Up @@ -493,6 +492,9 @@ export default {
onCloneForm,
onDeleteForm,
onLastUpdatedByEventBus,
IconPlus,
IconArchive,
FormsIcon,
}
},
}
Expand Down
10 changes: 5 additions & 5 deletions src/FormsEmptyContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,30 +10,30 @@
:name="currentModel.title"
:description="currentModel.description">
<template #icon>
<component :is="currentModel.icon" :size="64" />
<NcIconSvgWrapper :svg="currentModel.icon" :size="64" />
</template>
</NcEmptyContent>
</NcAppContent>
</NcContent>
</template>

<script>
import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
import { loadState } from '@nextcloud/initial-state'
import NcAppContent from '@nextcloud/vue/components/NcAppContent'
import NcContent from '@nextcloud/vue/components/NcContent'
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
import IconCheck from 'vue-material-design-icons/Check.vue'
import FormsIcon from './components/Icons/FormsIcon.vue'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
import FormsIcon from '../img/forms.svg?raw'

export default {
name: 'FormsEmptyContent',

components: {
FormsIcon,
IconCheck,
NcAppContent,
NcContent,
NcEmptyContent,
NcIconSvgWrapper,
},

data() {
Expand Down
57 changes: 31 additions & 26 deletions src/components/AppNavigationForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
@click="mobileCloseNavigation">
<template #icon>
<NcLoadingIcon v-if="loading" :size="16" />
<IconCheck v-else-if="isExpired" :size="16" />
<NcIconSvgWrapper v-else-if="isExpired" :svg="IconCheck" :size="16" />
<FormsIcon v-else :size="16" />

Check warning on line 22 in src/components/AppNavigationForm.vue

View workflow job for this annotation

GitHub Actions / NPM lint 

The '<FormsIcon>' component has been used, but not defined
</template>
<template v-if="hasSubtitle" #subname>
{{ formSubtitle }}
Expand All @@ -34,7 +34,7 @@
:to="{ name: 'edit', params: { hash: form.hash } }"
@click="mobileCloseNavigation">
<template #icon>
<IconPencil :size="20" />
<NcIconSvgWrapper :svg="IconPencil" />
</template>
{{ t('forms', 'Edit form') }}
</NcActionRouter>
Expand All @@ -43,7 +43,7 @@
closeAfterClick
@click="onShareForm">
<template #icon>
<IconShareVariant :size="20" />
<NcIconSvgWrapper :svg="IconShareVariant" />
</template>
{{ t('forms', 'Share form') }}
</NcActionButton>
Expand All @@ -53,13 +53,13 @@
:to="{ name: 'results', params: { hash: form.hash } }"
@click="mobileCloseNavigation">
<template #icon>
<IconPoll :size="20" />
<NcIconSvgWrapper :svg="IconPoll" />
</template>
{{ t('forms', 'Responses') }}
</NcActionRouter>
<NcActionButton v-if="canEdit" closeAfterClick @click="onCloneForm">
<template #icon>
<IconContentCopy :size="20" />
<NcIconSvgWrapper :svg="IconContentCopy" />
</template>
{{ t('forms', 'Copy form') }}
</NcActionButton>
Expand All @@ -70,8 +70,11 @@
:disabled="isFormLocked"
@click="onToggleArchive">
<template #icon>
<IconArchiveOff v-if="isArchived" :size="20" />
<IconArchive v-else :size="20" />
<NcIconSvgWrapper
v-if="isArchived"
:svg="IconArchiveOff"
:size="20" />
<NcIconSvgWrapper v-else :svg="IconArchive" :size="20" />
</template>
{{
isArchived
Expand All @@ -85,7 +88,7 @@
:disabled="isFormLocked"
@click="onConfirmDelete">
<template #icon>
<IconDelete :size="20" />
<NcIconSvgWrapper :svg="IconDelete" />
</template>
{{ t('forms', 'Delete form') }}
</NcActionButton>
Expand All @@ -94,6 +97,14 @@
</template>

<script>
import IconArchive from '@material-symbols/svg-400/outlined/archive.svg?raw'
import IconPoll from '@material-symbols/svg-400/outlined/bar_chart.svg?raw'
import IconCheck from '@material-symbols/svg-400/outlined/check.svg?raw'
import IconContentCopy from '@material-symbols/svg-400/outlined/content_copy.svg?raw'
import IconDelete from '@material-symbols/svg-400/outlined/delete.svg?raw'
import IconPencil from '@material-symbols/svg-400/outlined/edit.svg?raw'
import IconShareVariant from '@material-symbols/svg-400/outlined/share.svg?raw'
import IconArchiveOff from '@material-symbols/svg-400/outlined/unarchive.svg?raw'
import { getCurrentUser } from '@nextcloud/auth'
import axios from '@nextcloud/axios'
import { showConfirmation, showError } from '@nextcloud/dialogs'
Expand All @@ -102,17 +113,10 @@
import NcActionButton from '@nextcloud/vue/components/NcActionButton'
import NcActionRouter from '@nextcloud/vue/components/NcActionRouter'
import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
import NcListItem from '@nextcloud/vue/components/NcListItem'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import IconArchiveOff from 'vue-material-design-icons/ArchiveOffOutline.vue'
import IconArchive from 'vue-material-design-icons/ArchiveOutline.vue'
import IconCheck from 'vue-material-design-icons/Check.vue'
import IconContentCopy from 'vue-material-design-icons/ContentCopy.vue'
import IconPencil from 'vue-material-design-icons/PencilOutline.vue'
import IconPoll from 'vue-material-design-icons/Poll.vue'
import IconShareVariant from 'vue-material-design-icons/ShareVariantOutline.vue'
import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
import FormsIcon from './Icons/FormsIcon.vue'
import FormsIcon from '../../img/forms.svg?raw'
import PermissionTypes from '../mixins/PermissionTypes.js'
import { FormState } from '../models/Constants.ts'
import logger from '../utils/Logger.js'
Expand All @@ -121,18 +125,10 @@
name: 'AppNavigationForm',

components: {
FormsIcon,
IconArchive,
IconArchiveOff,
IconCheck,
IconContentCopy,
IconDelete,
IconPencil,
IconPoll,
IconShareVariant,
NcActionButton,
NcActionRouter,
NcActionSeparator,
NcIconSvgWrapper,
NcListItem,
NcLoadingIcon,
},
Expand Down Expand Up @@ -161,6 +157,15 @@

data() {
return {
FormsIcon,
IconArchive,
IconArchiveOff,
IconCheck,
IconContentCopy,
IconDelete,
IconPencil,
IconPoll,
IconShareVariant,
loading: false,
}
},
Expand Down
49 changes: 0 additions & 49 deletions src/components/Icons/FormsIcon.vue
View file
Open in desktop

This file was deleted.

Loading
Loading