Merge pull request #2800 from nextcloud/migrate/circle-icons

Migrate empty content for circles

2 files changed, 50 insertions, 3 deletions

diff --git a/src/components/AppContent/CircleContent.vue b/src/components/AppContent/CircleContent.vue
index 0d668cea..3cfdcbc0 100644
--- a/src/components/AppContent/CircleContent.vue
+++ b/src/components/AppContent/CircleContent.vue
@@ -22,7 +22,11 @@
 
 <template>
 	<AppContent v-if="!circle">
-		<EmptyContent icon="icon-circles">
+		<EmptyContent>
+			<template #icon>
+				<IconCircles
+					:size="20" />
+			</template>
 			{{ t('contacts', 'Please select a circle') }}
 		</EmptyContent>
 	</AppContent>
@@ -51,7 +55,11 @@
 					{{ t('contacts', 'Your request to join this circle is pending approval') }}
 				</EmptyContent>
 
-				<EmptyContent v-else icon="icon-circles">
+				<EmptyContent v-else>
+					<template #icon>
+						<IconCircles
+							:size="20" />
+					</template>
 					{{ t('contacts', 'You are not a member of {circle}', { circle: circle.displayName}) }}
 				</EmptyContent>
 			</template>
@@ -63,7 +71,7 @@ import { showError } from '@nextcloud/dialogs'
 import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import EmptyContent from '@nextcloud/vue/dist/Components/EmptyContent'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
-
+import IconCircles from '../Icons/IconCircles'
 import CircleDetails from '../CircleDetails'
 import MemberList from '../MemberList'
 import RouterMixin from '../../mixins/RouterMixin'
@@ -76,6 +84,7 @@ export default {
 		CircleDetails,
 		EmptyContent,
 		MemberList,
+		IconCircles,
 	},
 
 	mixins: [isMobile, RouterMixin],
diff --git a/src/components/Icons/IconCircles.vue b/src/components/Icons/IconCircles.vue
new file mode 100644
index 00000000..5b349c3c
--- /dev/null
+++ b/src/components/Icons/IconCircles.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-circle"
+		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 21.33 21.33">
+			<path d="M0 0h24v24H0V0z" fill="none" />
+			<path d="M10.67 1.33a9.34 9.34 0 100 18.68 9.34 9.34 0 000-18.68zM6.93 15.8a2.33 2.33 0 110-4.67 2.33 2.33 0 010 4.67zm1.4-8.87a2.33 2.33 0 114.67 0 2.33 2.33 0 01-4.67 0zm6.07 8.87a2.33 2.33 0 110-4.67 2.33 2.33 0 010 4.67z" />
+		</svg>
+	</span>
+</template>
+
+<script>
+export default {
+	name: 'IconCircles',
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		size: {
+			type: Number,
+			default: 20,
+		},
+		fillColor: {
+			type: String,
+			default: 'currentColor',
+		},
+	},
+}
+</script>