Merge pull request #2801 from nextcloud/migrate/left-sidebar

Migrate left sidebar to material design icons

4 files changed, 75 insertions, 14 deletions

diff --git a/src/components/AppNavigation/CircleNavigationItem.vue b/src/components/AppNavigation/CircleNavigationItem.vue
index e2ee53eb..7f35a65d 100644
--- a/src/components/AppNavigation/CircleNavigationItem.vue
+++ b/src/components/AppNavigation/CircleNavigationItem.vue
@@ -23,8 +23,11 @@
 	<AppNavigationItem
 		:key="circle.key"
 		:title="circle.displayName"
-		:to="circle.router"
-		icon="icon-circles">
+		:to="circle.router">
+		<template #icon>
+			<IconCircles
+				:size="20" />
+		</template>
 		<template v-if="loadingAction" slot="actions">
 			<ActionText icon="icon-loading-small">
 				{{ t('contacts', 'Loading …') }}
@@ -92,6 +95,7 @@ import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCo
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import ExitToApp from 'vue-material-design-icons/ExitToApp'
 import LocationEnter from 'vue-material-design-icons/LocationEnter'
+import IconCircles from '../Icons/IconCircles'
 
 import Circle from '../../models/circle.ts'
 import CircleActionsMixin from '../../mixins/CircleActionsMixin'
@@ -107,6 +111,7 @@ export default {
 		AppNavigationItem,
 		ExitToApp,
 		LocationEnter,
+		IconCircles,
 	},
 
 	mixins: [CircleActionsMixin],
diff --git a/src/components/AppNavigation/GroupNavigationItem.vue b/src/components/AppNavigation/GroupNavigationItem.vue
index 51cc8dd5..b17f3ef1 100644
--- a/src/components/AppNavigation/GroupNavigationItem.vue
+++ b/src/components/AppNavigation/GroupNavigationItem.vue
@@ -23,8 +23,11 @@
 	<AppNavigationItem
 		:key="group.key"
 		:to="group.router"
-		:title="group.name"
-		:icon="group.icon">
+		:title="group.name">
+		<template #icon>
+			<IconContact
+				:size="20" />
+		</template>
 		<template slot="actions">
 			<ActionButton
 				icon="icon-add"
@@ -59,6 +62,7 @@ import moment from 'moment'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
+import IconContact from 'vue-material-design-icons/AccountMultiple'
 
 export default {
 	name: 'GroupNavigationItem',
@@ -67,6 +71,7 @@ export default {
 		ActionButton,
 		AppNavigationCounter,
 		AppNavigationItem,
+		IconContact,
 	},
 
 	props: {
diff --git a/src/components/AppNavigation/RootNavigation.vue b/src/components/AppNavigation/RootNavigation.vue
index 165c6d05..26720961 100644
--- a/src/components/AppNavigation/RootNavigation.vue
+++ b/src/components/AppNavigation/RootNavigation.vue
@@ -32,8 +32,11 @@
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_ALL_CONTACTS },
-				}"
-				icon="icon-contacts-dark">
+				}">
+				<template #icon>
+					<IconContact
+						:size="20" />
+				</template>
 				<AppNavigationCounter v-if="sortedContacts.length" slot="counter">
 					{{ sortedContacts.length }}
 				</AppNavigationCounter>
@@ -47,8 +50,11 @@
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_NO_GROUP_CONTACTS },
-				}"
-				icon="icon-user">
+				}">
+				<template #icon>
+					<IconUser
+						:size="20" />
+				</template>
 				<AppNavigationCounter v-if="ungroupedContacts.length" slot="counter">
 					{{ ungroupedContacts.length }}
 				</AppNavigationCounter>
@@ -62,8 +68,11 @@
 				:to="{
 					name: 'group',
 					params: { selectedGroup: GROUP_RECENTLY_CONTACTED },
-				}"
-				icon="icon-recent-actors">
+				}">
+				<template #icon>
+					<IconRecentlyContacted
+						:size="20" />
+				</template>
 				<AppNavigationCounter v-if="recentlyContactedContacts.contacts.length" slot="counter">
 					{{ recentlyContactedContacts.contacts.length }}
 				</AppNavigationCounter>
@@ -171,6 +180,9 @@ import SettingsSection from './SettingsSection'
 
 import isCirclesEnabled from '../../services/isCirclesEnabled'
 import isContactsInteractionEnabled from '../../services/isContactsInteractionEnabled'
+import IconContact from 'vue-material-design-icons/AccountMultiple'
+import IconUser from 'vue-material-design-icons/Account'
+import IconRecentlyContacted from '../Icons/IconRecentlyContacted'
 
 import RouterMixin from '../../mixins/RouterMixin'
 import { showError } from '@nextcloud/dialogs'
@@ -189,6 +201,9 @@ export default {
 		AppNavigationCaption,
 		CircleNavigationItem,
 		GroupNavigationItem,
+		IconContact,
+		IconUser,
+		IconRecentlyContacted,
 		NewCircleIntro,
 		SettingsSection,
 	},
@@ -262,7 +277,6 @@ export default {
 						name: 'group',
 						params: { selectedGroup: group.name },
 					},
-					icon: 'icon-group',
 					toString: () => group.name,
 				})
 			})
@@ -415,9 +429,8 @@ $caption-padding: 22px;
 
 // Change icon opacity for a better soothing visual
 .app-navigation-entry ::v-deep {
-	.app-navigation-entry-icon.icon-group,
-	.app-navigation-entry-icon.icon-circles {
-		opacity: .6;
+	.app-navigation-entry-icon {
+		opacity: .6 !important;
 	}
 }
 </style>
diff --git a/src/components/Icons/IconRecentlyContacted.vue b/src/components/Icons/IconRecentlyContacted.vue
new file mode 100644
index 00000000..3b6ddc56
--- /dev/null
+++ b/src/components/Icons/IconRecentlyContacted.vue
@@ -0,0 +1,38 @@
+<template functional>
+	<span :aria-hidden="!props.title"
+		:aria-label="props.title"
+		:class="[data.class, data.staticClass]"
+		class="material-design-icon icon-recently-contacted"
+		role="img"
+		v-bind="data.attrs"
+		v-on="listeners">
+		<svg :fill="props.fillColor"
+			class="material-design-icon__svg"
+			:width="props.size"
+			:height="props.size"
+			viewBox="0 0 16 16">
+			<path d="M0 0h24v24H0V0z" fill="none" />
+			<path d="M14 3v10h1V3zM12 13h1V3h-1zM1.7 3a.7.7 0 00-.7.7v8.6c0 .4.3.7.7.7h8.6c.4 0 .7-.3.7-.7V3.7a.7.7 0 00-.7-.7zM6 5a1.6 1.6 0 010 3.2A1.6 1.6 0 016 5zm0 4.4c1 0 3.2.6 3.2 1.6v.6H2.8V11c0-1 2.1-1.6 3.2-1.6z" />
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'IconRecentlyContacted',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		size: {
+			type: Number,
+			default: 20,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+	},
+}
+</script>