Merge pull request #2276 from nextcloud/backport/2217/stable4

[stable4] Allow material design icons for appnavigationitem
nextcloud-libraries · Sep 24, 2021 · 926c520 · 926c520
2 parents 118af82 + a741320
commit 926c520
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/l10n/messages.pot b/l10n/messages.pot
@@ -38,6 +38,9 @@ msgstr ""
 msgid "Custom"
 msgstr ""
 
+msgid "Edit item"
+msgstr ""
+
 msgid "External documentation for {title}"
 msgstr ""
 
@@ -125,5 +128,8 @@ msgstr ""
 msgid "Unable to search the group"
 msgstr ""
 
+msgid "Undo changes"
+msgstr ""
+
 msgid "Write message, @ to mention someone …"
 msgstr ""
diff --git a/src/components/AppNavigationItem/AppNavigationItem.vue b/src/components/AppNavigationItem/AppNavigationItem.vue
@@ -168,10 +168,27 @@ Just set the `pinned` prop.
 				:force-menu="forceMenu"
 				:default-icon="menuIcon"
 				@update:open="onMenuToggle">
-				<ActionButton v-if="editable && !editingActive" icon="icon-rename" @click="handleEdit">
+				<template #icon>
+					<!-- @slot Slot for the custom menu icon -->
+					<slot name="menu-icon" />
+				</template>
+				<ActionButton
+					v-if="editable && !editingActive"
+					:aria-label="editButtonAriaLabel"
+					@click="handleEdit">
+					<template #icon>
+						<Pencil :size="20" decorative />
+					</template>
 					{{ editLabel }}
 				</ActionButton>
-				<ActionButton v-if="undo" icon="app-navigation-entry__deleted-button icon-history" @click="handleUndo" />
+				<ActionButton
+					v-if="undo"
+					:aria-label="undoButtonAriaLabel"
+					@click="handleUndo">
+					<template #icon>
+						<Undo :size="20" decorative />
+					</template>
+				</ActionButton>
 				<slot name="actions" />
 			</Actions>
 		</div>
@@ -194,6 +211,10 @@ import ActionButton from '../ActionButton/ActionButton'
 import AppNavigationIconCollapsible from './AppNavigationIconCollapsible'
 import isMobile from '../../mixins/isMobile'
 import InputConfirmCancel from './InputConfirmCancel'
+import { t } from '../../l10n'
+
+import Pencil from 'vue-material-design-icons/Pencil'
+import Undo from 'vue-material-design-icons/Undo'
 
 export default {
 	name: 'AppNavigationItem',
@@ -203,6 +224,8 @@ export default {
 		ActionButton,
 		AppNavigationIconCollapsible,
 		InputConfirmCancel,
+		Pencil,
+		Undo,
 	},
 	directives: {
 		ClickOutside,
@@ -395,6 +418,12 @@ export default {
 		isActive() {
 			return this.to && this.$route === this.to
 		},
+		editButtonAriaLabel() {
+			return this.editLabel ? this.editLabel : t('Edit item')
+		},
+		undoButtonAriaLabel() {
+			return t('Undo changes')
+		},
 	},
 	watch: {
 		open(newVal) {

diff --git a/src/components/AppNavigationSettings/AppNavigationSettings.vue b/src/components/AppNavigationSettings/AppNavigationSettings.vue
@@ -46,7 +46,7 @@ import { directive as ClickOutside } from 'v-click-outside'
 import { t } from '../../l10n'
 import { excludeClickOutsideClasses } from '../../mixins'
 
-import Cog from 'vue-material-design-icons/Cog.vue'
+import Cog from 'vue-material-design-icons/Cog'
 
 export default {
 	directives: {

diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -46,7 +46,7 @@ include a standard-header like it's used by the files app.
 	</AppSidebar>
 </template>
 <script>
-	import Cog from 'vue-material-design-icons/Cog.vue'
+	import Cog from 'vue-material-design-icons/Cog'
 
 	export default {
 		components: {
@@ -273,8 +273,8 @@ import EmptyContent from '../EmptyContent/EmptyContent'
 import { t } from '../../l10n'
 import { directive as ClickOutside } from 'v-click-outside'
 
-import Close from 'vue-material-design-icons/Close.vue'
-import Star from 'vue-material-design-icons/Star.vue'
+import Close from 'vue-material-design-icons/Close'
+import Star from 'vue-material-design-icons/Star'
 
 export default {
 	name: 'AppSidebar',